Ben Silvis

AS3: SpriteSheet Class – Extracting Sprites

Ben — Fri, 30 Oct 2009 00:18:02 +0000

If you haven’t already read the intro to this tutorial, you can find it here. In it we are introduced to sprite sheets, what they are, and some examples for where to use them.

One of those examples included combining many assets into a single sprite sheet. We can then extract a portion of this bitmap as its own unique element and use it as if we had loaded it separately. This kind of sprite sheet could be used for a variety of things. Maybe you’re designing an interface and you want to group similar UI elements in order to load them all at once. You could also find yourself developing a game in which there are many items for the player to collect and you need an easy way to organize them. The example below shows such a sprite sheet:

Images © Nintendo

Extracting Sprites

Like we mentioned above, this kind of sprite sheet would be the most useful to us if we had a way to extract an individual element from it. Thankfully with the help of some code and a little Triforce of Wisdom we can do just that.

Note: From here on out I’ll be referring to my SpriteSheet class. It is available here for reference.

This example uses the same sprite sheet that we first looked at in this tutorial. Click an area of it to extract it and blow it up, showing off its 16-bit glory. In the code below we will attempt to extract a sprite in the same way.

Actionscript

1
2
3
4

import com.bensilvis.spriteSheet.SpriteSheet;

import flash.display.Bitmap;
import flash.display.Sprite;

You will need to import the custom SpriteSheet class like this in order to have access to it, along with these other imports.

Actionscript

1
2
3
4
5

var currentSprite:SpriteSheet = new SpriteSheet(sheet, 20, 20);

var image:Bitmap = new Bitmap();
image.bitmapData = currentSprite.DrawTile(0);
addChild(image);

What we do here is:

Instantiate a copy of the SpriteSheet class
Extract tile ’0′ with the DrawTile function
Add the extracted sprite to the stage

Pretty simple huh?

Actionscript

1	var currentSprite:SpriteSheet = new SpriteSheet(sheet, 20, 20);

If we have imported the SpriteSheet class then we can create a new copy of it and access all of its functionality. The constructor takes 3 parameters:

SpriteSheet(tileSheetBitmap:Bitmap, width:Number = 16, height:Number = 16)

tileSheetBitmap: the Bitmap of the sprite sheet we will use
width: the width of tiles in the sheet
height: the height of tiles in the sheet

Assuming we have loaded and have access to our sprite sheet Bitmap, we pass it to our new class as variable ‘sheet’.

The width and height parameters need to be set to the size of the sprites in the sprite sheet (not the entire sprite sheet). In this particular example both dimensions are 20 pixels.

Note: Each tile in your sprite sheet must have the same dimensions in order to work properly.

Actionscript

1
2
3

var image:Bitmap = new Bitmap();
image.bitmapData = currentSprite.DrawTile(0);
addChild(image);

Here we create a new blank Bitmap to contain the pixel data of the sprite we’re going to copy. Next we call the DrawTile function of our recently created SpriteSheet class and pass it an integer. In short, this tells the class to locate an area of the sprite sheet Bitmap based on the parameter we just sent, and extract a rectangle of pixels from it determined by the width and height that we specified in the constructor. We then hand off this data to our blank Bitmap as its new bitmapData.

After that we simply attach the new Bitmap to the stage, which now displays sprite ’0′, to use how we please.

Numbering of a sprite sheet:

In the example above we extract from our sprite sheet by passing the drawTile function an integer of ’0′. This number represents a particular tile on our sprite sheet. When numbering our sprites we start at the top-left and increment by one for each tile down a row progressively. Since we’re starting the count with zero we need to offset the tile’s number by one (tile number – 1). Therefore with ’0′ our example is effectively extracting the very first sprite.

Sometime in the next couple of days I will post an article with tips for creating sprite sheets.

Concluding..

This example may have been a little trickier than some in the past because it involves using a custom class, so feel free to download the complete Flex project to the top example!

Stay tuned for the next tutorial which covers sprite sheet animation!

Ben

Download Source

Flash and the iPhone?

Ben — Sun, 18 Oct 2009 18:32:39 +0000

Certainly many of you heard some speculation recently that the iPhone might finally be getting Flash, only to be followed by the disappointing announcement of – No, you wish, keep dreaming. Quite frankly I wasn’t too surprised or therefore disappointed, but still a little bitter. The idea of developing for perhaps the biggest technological craze of my lifetime would be both financially and ‘spiritually‘ intriguing. Since Flash content makes up a huge percentage of the web now and the iPhone is all about that it makes sense right? I mean even some of the clunkiest of phones now have the ability to display Flash content. So why won’t the iPhone get with the freakin’ program already?

Basically it all comes down to the fact that Apple can’t make any money off of browser based games and utilities. It would kill their App Store – Not to mention: Why would anyone still be willing to pay $100 A Year for the SDK if all you needed was some hosting space and a domain name?

It’s ok.. I didn’t think “There’s a Website For That.” was too catchy of a slogan anyways.

Flash CS5

But wait! In recent news about the new CS5 Suite, Adobe released that Flash developers will in fact be able to develop natively on the iPhone and iPod Touch for the App Store. In fact there are Apps on the App Store today that were built in Flash. Sure it’s nowhere near as powerful as a Flash Player, but it’s definitely a start. I mentioned this in my last post, but I didn’t elaborate quite enough on how cool it is. I’m hoping that this also means I can develop on my PC as well!

Check out these videos!:

Flash CS5 beta is set to be released towards the end of this year. If you are interested in the beta notifications including testing possibilities: Sign Up Here

I’m sure you still have a lot of questions (like I do). Be sure to check out the FAQ page for more info and also the Flash/iPhone forum.

Ben

Adobe Flash Builder 4 beta 2 and Flash CS5

Ben — Sat, 17 Oct 2009 20:15:50 +0000

Flash Builder 4

I’ve been using Flash Builder 4 beta for a couple of months now and for the most part have been quite pleased. FB is the follow up to Flex 3. Adobe states that the name change is to help distinguish between the open-source Flex framework and their commercial IDE. Makes sense, but personally I like the name packaged with the initial beta release – ‘Gumbo’!

So anyways, the license on my copy of Flash Builder mysteriously stopped working yesterday. After a brief panic attack I decided to check out the Adobe Labs website and noticed that the beta 2 release was out. Cool! As with beta 1, my Flex 3 license is supposed to provide me with a new working FB copy – however, licensing software is one of my least favorite things to do so I’ll get back to that after the weekend. The renewed 60 day trial will suffice for now.

Flash CS5

Since I was in this ‘update’ state of mind I decided to peruse my usual avenues and came across some info concerning the CS5 Suite. My initial reaction was, “Oh God, not another one already..“. I still haven’t gotten used to the CS4 interface, and at my office I’m still using CS3. I’m also quite afraid of Adobe turning into another Autodesk. I have to admit though – as far as Flash goes, there is A LOT of cool stuff going on.

For starters, Flash CS5 ‘Viper‘:

natively compiles for iPhone apps and other touch interfaces (update)
has code snippet libraries for designers
has a fancy new javascript powered brushes engine
finally employs code completion for custom classes
generates PHYSICS animation for designers – Awesome!

and my favorite:

integrates between Flash Builder and Flash Professional

CS5 is set to release in April of 2010. I didn’t really spend a lot of time looking at the other aspects of the Suite, but one of the best resources for info I found is cs5.org. If there’s anything cool I missed be sure to let me know!

Ben

AS3: Intro to Using Sprite Sheets

Ben — Fri, 16 Oct 2009 05:10:12 +0000

In this post I would like to introduce you to a custom class I wrote for working with sprite sheets. Now “what’s a sprite sheet?” you might ask. Well, while I’m not going to delve into much of the theory or the speed benefits from using them, you should know a few things:

A sprite sheet is a collection of sprites arranged into a single image, where each sprite represents a frame of an animation, an asset, a part of an image, or something to that extent. The idea of a sprite sheet has been utilized for a long time, namely in early gaming systems like Atari and Nintendo. In recent times they are most often used for efficient bitmap animation and are extremely useful in tile based games for level creation.

When loading external assets, many times you will find that it is much more time and code efficient to load many in one state – Not to mention that when used effectively this can save memory. Also, once you start animating many objects in a scene you will see a real performance spike when compared to regular Flash keyframe animation. Props to 8bitrocket for some useful info.

SpriteSheet Class

Enough explaining for now – In the following 3 tutorials I will describe how to utilize specific features of this class to achieve different results with your sprite sheets.

SpriteSheet Class – Extracting Sprites
SpriteSheet Class – Sprite Sheet Animation (coming soon)
SpriteSheet Class – Image Compositing and Level Creation (coming soon)

Actionscript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

package com.bensilvis.spriteSheet
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.geom.Point;
import flash.geom.Rectangle;

public class SpriteSheet extends Sprite {

private var tileSheetBitmapData:BitmapData;
private var canvasBitmapData:BitmapData;

private var tileWidth:int;
private var tileHeight:int;
private var rowLength:int;

private var tileRectangle:Rectangle;
private var tilePoint:Point;

public function SpriteSheet(tileSheetBitmap:Bitmap, width:Number = 16, height:Number = 16)
{
tileSheetBitmapData = tileSheetBitmap.bitmapData;
tileWidth = width;
tileHeight = height;

rowLength = int(tileSheetBitmap.width / width);

tileRectangle = new Rectangle(0, 0, tileWidth, tileHeight);
tilePoint = new Point(0, 0);

canvasBitmapData = new BitmapData(tileWidth, tileHeight, true);
var canvasBitmap:Bitmap = new Bitmap(canvasBitmapData);
addChild(canvasBitmap);

drawTile(0);
}

public function drawTile(tileNumber:int):BitmapData
{
tileRectangle.x = int((tileNumber % rowLength)) * tileWidth;
tileRectangle.y = int((tileNumber / rowLength)) * tileHeight;
canvasBitmapData.copyPixels(tileSheetBitmapData, tileRectangle, tilePoint);

return canvasBitmapData.clone();
}

public function tileBoard(boardIndex:Array):BitmapData
{
var wide:int = boardIndex[0].length;
var tall:int = boardIndex.length;

canvasBitmapData = new BitmapData((tileWidth * wide), (tileHeight * tall), true);
var boardCanvas:Bitmap = Bitmap(getChildAt(0));
boardCanvas.bitmapData = canvasBitmapData;

tileRectangle = new Rectangle(0, 0,(tileWidth * wide), (tileHeight * tall));
for (var i:int = 0; i < wide; i++) {
for (var j:int = 0; j < tall; j++) {
tilePoint = new Point((tileWidth * i), (tileHeight * j));

drawTile(boardIndex[j][i]);
}
}
return canvasBitmapData.clone();
}
}
}

Ben

AS3: KeyboardEvents, KeyCodes, and CharCodes

Ben — Thu, 08 Oct 2009 23:54:18 +0000

Once you really get going into designing basically any kind of computer game – whether it be a 2-D platformer like Contra or even online video Poker – you are eventually going to need some kind of keyboard control besides general typing. Traditionally this could be the arrow keys or W,A,S,D for movement, spacebar for jumping or plasma-ray firing, R for retry or Q for quit, but really the level of control is up to you.

A keyCode is an integer representing a particular type of key on your keyboard. By differentiating between one keyCode and another in Flash, we can trigger separate events based on each individual keyboard key or combination of.

The example above displays the keyCode for each keyboard button.

Note: You will have to click the example to give your keyboard’s focus to the flash player.

Actionscript:

1	import flash.events.KeyboardEvent;

All you need to import is the KeyboardEvent class for our example.

Actionscript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

stage.addEventListener(KeyboardEvent.KEY_UP, onKeyEvent);

function onKeyEvent(e:KeyboardEvent):void
{
var character:String = String.fromCharCode(e.charCode);

if (e.keyCode == 66)
{
trace(character); //'b' or 'B'
}
else if (e.keyCode == 83 && e.shiftKey)
{
trace(character); //'S' only
}
}

What we do here is:

Attach a KeyboardEvent listener to the stage
Create a new String of the pressed keyboard character
Listen for a particular key press that triggers an action

Actionscript:

1	stage.addEventListener(KeyboardEvent.KEY_UP, onKeyEvent);

Here we create a new event listener and attach it to the stage. We define the listener to be of type KeyboardEvent and to listen for any KEY_UP events. Lastly we instruct the listener to call function onKeyEvent every time this event occurs. Roughly speaking, every time we release a keyboard key we do something.

Actionscript:

1	var character:String = String.fromCharCode(e.charCode);

Once we are working within our event fired function, onKeyEvent, we have access to all of the information concerning that event through ‘e‘. We can extract a lot from the event for just a simple button press, but for now we will just look at a particularly handy bit of info – charCode.

CharCode

A charCode is an ASCII code that represents a character on a keyboard. (a,b,c,D,E,F,1,2,3,!,@,#..) Each character has its own unique code – For instance: the charCode for ‘A’ is 65, being different from ‘a’ which is 97. Even a spacebar space has a charCode (32) because each space is a recognized character.

Note: Keyboard buttons like ‘Enter’, ‘Ctrl’, and ‘Num Lock’ do not have charCodes. (They return a charCode of 0)

In the code snippet above we do something relatively complex to accomplish a task assumedly simple. We convert the typed keyboard character’s ASCII alter-ego into the character we understand intelligibly. Your OS does this constantly for you when in fact all your keyboard knows is which key is pressed. This is necessary for keyboards of multiple languages to function.

fromCharCode(... charCodes):String

So, what we accomplish here is: fromCharCode – a method of the String class – takes a charCode, converts it and returns the respective character as a String which we then pass to a new variable character.

Actionscript:

1
2
3
4

if (e.keyCode == 66)
{
trace(character); //'b' or 'B'
}

KeyCode

Now that we understand charCode, keyCode should be easy. Like briefly mentioned above, a keyCode is a number associated with a button on your keyboard – contrary to a character like that of a charCode. Working with a keyCode for keyboard driven events is more useful than charCodes because generally: for instance, when ‘X’ is pressed you are not concerned with whether or not it is the capitalized form or not.

In the above ‘if statement’, we simply evaluate whether the keyCode input is equal to 66 (The code for the ‘B’ key). If this is true we print character,which we captured in the previous block, to the output screen. Since 66 in this case pertains only to the keyboard button for ‘B’, character could be either lowercase ‘b’ or capital ‘B’.

You could replace this trace with anything! In the example at the top, character is placed inside of a text box and randomly attached to the stage.

Actionscript:

1
2
3
4

else if (e.keyCode == 83 && e.shiftKey)
{
trace(character); //'S' only
}

Here our code is a lot like the last block except this time, in addition to needing a particular keyCode, we are listening for the Shift key. The shiftKey Boolean is yet another KeyboardEvent attribute we have access to that tells us whether or not the Shift key is pressed. Ergo, if we press both the ‘S’ key (83) and the Shift key we will satisfy the statement and trace character. In this case, since the Shift key is down, we can only expect a capital ‘S’ (Granted Caps Lock isn’t on ).

Besides Shift, KeyboardEvent also lets us listen for Ctrl and Alt. Check out the Adobe documentation for all of the attributes.

Concluding..

By now you should hopefully have a better understanding of the KeyboardEvent class. Feel free to post or message me with any additional questions you might have!

The source to the example is available below

Note: When testing the example inside the Flash IDE, the internal shortcut keys tend to override your programmed events. To prevent this you will need to disable them. Control > Disable Keyboard Shortcuts

Ben

Download Source

AS3: Applying a BlurFilter Effect

Ben — Tue, 06 Oct 2009 17:01:24 +0000

So I’m sitting here, having recently misplaced my glasses, and it’s become quite apparent to me that I can’t see. Somehow in the midst of the unfortunate circumstances I find the inspiration for my first tutorial:

The BlurFilter applies a blur to visual objects in your scene.
It is one of AS3′s various filter effects including: Glow, Drop Shadow, and Bevel
Play around with slider in the example above and you will see something similar to a Gaussian blur effect.

Let’s look at some code then, shall we?

Actionscript:

1
2
3
4

import flash.display.MovieClip;
import flash.filters.BitmapFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;

These are all the imports we should need in our package to achieve a blur effect.

Actionscript:

1
2
3
4
5

var filter:BitmapFilter = new BlurFilter(10, 10, BitmapFilterQuality.HIGH);
var myFilters:Array = new Array();
myFilters.push(filter);

blurredMC.filters = myFilters;

What we do here is:

Create a new BitmapFilter of type BlurFilter
Create an array which we add our filter to
Apply our filter array to a specified object

Actionscript:

1	var filter:BitmapFilter = new BlurFilter(10, 10, BitmapFilterQuality.HIGH);

The BlurFilter constructor takes 3 parameters:

BlurFilter(blurX:Number = 4.0, blurY:Number = 4.0, quality:int = 1)

blurX: the amount of blur to apply in the X direction (0 – 255)
blurY: the amount of blur to apply in the Y direction (0 – 255)
quality: the number of blur passes (LOW, MEDIUM, HIGH)

The higher the blur values, the more blur you will see applied to your object. In the code above we set both of these values to 10. You can just as easily though blur in only the X or Y direction for a clever motion blur effect. Remember that the higher the blur value the more cpu intensive the blur becomes.

Note: The way that the blur passes are processed it is more efficient to use powers of 2. (2, 4, 8, 16, etc.)

You may have been confused that my example code has quality set to BitmapFilterQuality.HIGH, while the default parameters directly above show quality as an integer of 1. The quality in itself is just a value telling Flash how many times to apply the blur. Generally the pre-made quality types are sufficient, but if you need you can replace BitmapFilterQuality with an integer (0 – 15).

Actionscript:

1 2	var myFilters:Array = new Array(); myFilters.push(filter);

Here we create a new array myFilters and then push the BlurFilter we previously created into it. If we were planning on applying multiple kinds of filters to our object, we would add each of them to this array.

Actionscript:

1	blurredMC.filters = myFilters;

Here we apply all of our filters (in this case the BlurFilter) to DisplayObject blurredMC.

In Flash

I guess I should mention that if you don’t want to deal with all this code crap, you can still apply filters to your object via the Filter’s tab. (Flash 8 and higher). You can find this at Window > Properties > Filters

Concluding..

So wraps up my first ever Flash tutorial! I hope it was exceedingly beneficial to you. Well, even if it wasn’t I would love to hear any constructive criticism.

I’ve provided the source to the example above. Enjoy!

Ben

Download Source

First Game Post

Ben — Mon, 05 Oct 2009 04:53:00 +0000

This is mainly just a test to see how well Flash works with my blog. So far it looks like there won’t be any problems.

I have a LOT of silly little experiments collecting dust in the annexes of my many hard drives, so I thought I’d share one while I am tinkering -

Here’s the start of space shooter game I’d like to overhaul someday. It’s one of the first pseudo-real games I made. Theres a pretty long story behind it, but I won’t get into any of that right now..
It still has a working title, but for now I call it:

Super Space Ass Whoop!

Controls:

Arrow Keys – move
Space Bar – shoots

(By the way, it doesn’t really ever end)

I’m a Blog Now

Ben — Mon, 05 Oct 2009 03:24:18 +0000

BenSilvis.com is a blog now!

In the past this website has been a random collection of projects I’ve either spearheaded or been a part of. I now plan to present at least a semi-professional portfolio and attempt to give a little know-how back to the web community.

Oh yeah I guess I forgot to say that I’m a Flash Developer currently spreading my wings. I’m obsessed with game design and I have ties in 3D, game engines, web design, yada yada.. I’m not too savvy with the whole blogging thing, but this seems like a great place to host new projects, ideas, tutorials, and other things that tickle my fancy.

Well.. I’ll flesh this things out over the next little while. Enjoy!