Getting to know the Tiled map editor

I came across this tutorial on parsing .tmx maps into AS3. While I find it useful enough to get me started there are still other parts I had to figure out myself.

Using multiple tilesets

When using multiple tilesets additional <tileset> nodes are added to the .tmx file. This means we need to register listeners to each of the images and track when all of them have finished loading. In my case, I implemented a flag on my “onLoaded” function that triggers only when all the images are fully loaded.

Only when the images are fully loaded can you start the actual render process. Else you might end up with a null bitmapdata.

Using the firstgid attribute.

Each <tileset> has an attribute called firstgid. It simply tells the gid of the first element of the tileset. So if you have two tilesets one has firstgid = “1” and the other has firstgid=”301”, the tiles with gids from 1 – 300 are located on the first tileset and >=301 on the second tileset.

two tilesheets

CSV layer parsing

It is possible to specify other encryption methods but I have only tried XML and CSV. Parsing XML layers can freeze the flash player especially on large maps. The CSV layer can be treated as a String so parsing it is only a matter of using split() operations.

Jollibug now with parallax

My friend is making a game called Jollibug. He made it during the Global Game Jam. It isn’t about a certain fastfood mascot — although I personally believe otherwise. He forced me at gunpoint to upload some updates of his game in my blog.

Any resemblance is coincidental

He said he put some parallaxing on the layered backgrounds now. He also made  a totally original menu screen because his game didn’t have any!!! WTF!

Things that are on the works:

  • Animate menuscreen
  • Add warnings or signals on where the enemies come from
  • Sound (sounds halfass right now)
  • Add more corporate advertising
  • Game over screen looks like it was made by a jologs
  • Audience animation states

I think making parody games is for those who don’t have creativity but have an immature sense of humor.

How to use flashvars in as3

I use flashvars heavily to create customizable swfs. After some time I got tired of copy pasting my code and found this:

[as3]
function getFlashVars():Object {
return Object(LoaderInfo(this.loaderInfo).parameters);
}
[/as3]

I only need to call this method (which returns an object) and chain it with the flashvar I want. This only works on timeline code though.

Here’s how I use it:

[as3]
strXMLPath = getFlashVars().xmlPath || "slideshow.xml";
[/as3]

The || is for error handling. If I can’t get the flashvar:xmlPath, I created a default file slideshow.xml to show default data.

How to use dynamic fonts on html using AS3

Challenge:
Most designers find themselves worrying about cross-browser compatibility. Most of the time, they have to work with a limited choice of fonts.

What if you want to do something flashy, like this: http://us.blizzard.com/en-us/company/

Notice the gradient and the drop shadow in the “Company” header. It’s done in flash. And since it’s Blizzard, I assume it runs under a CMS so it’s dynamic. You can change “Company” to “Kompanya” just as easily.


Solution:


1. Design whatever wonderful dynamic text you want in flash.


2. Make sure you embed the characters you want included in the font.


3. Assuming your instance name is “textMC”. Put this in the main timeline:

[as3]

var params:Object = LoaderInfo(this.root.loaderInfo).parameters;
var _text:String = String(params["content"]);
var _orientation:String = String(params["align"]);

var myTextFormat:TextFormat = new TextFormat();
if(_orientation == "center"){
myTextFormat.align = TextFormatAlign.CENTER; //align center
}else if(_orientation == "right"){
myTextFormat.align = TextFormatAlign.RIGHT; //align right
}else{
myTextFormat.align = TextFormatAlign.LEFT; //default alignment is left
}

textMC.text = _text;
textMC.setTextFormat(myTextFormat);

[/as3]


4. In your embed code, specify “content” and “align” in the params. “content” contains your content. If you want to set the alignment set “align” to “center” or “right”. The text aligns to the left by default. Ex:

[as3]
content="This is the content"
[/as3]

Note:
Call setTextFormat() only after you set the text. Flash needs to know the content first, before it can properly format the textfield.

How to embed fonts properly in AS3

Best practice for embedding fonts in AS3.

Fonts can be embedded using the Flex metadata “Embed”.

For example, if you want to embed the font named Arial (this should be the system font located in FontBook or the Fonts folder)

[as3]
[Embed(systemFont="Arial", fontName="Arial", mimeType="application/x-font", unicodeRange="U+0041-U+0054")]
var arial:Class;

Font.registerFont(arial);

[/as3]

systemFont: looks for the current system font with the name “Arial”

fontName: the name used to reference this font inside the code

mimeType: the type of file that i’m embedding, in this case an x-font

unicodeRange: the sample unicode range represents uppercase characters from A-Z (convert unicode easily here)

For best practices, we can compile the file as a swf, and load them at runtime using the loader class. This way we only need to load the file when it’s actually needed.

Quitz Quiz Post Mortem



I was commissioned to create an interactive quiz game in flash. “Quitz Quiz” is a quiz game for an anti-smoking campaign. The project was supposed to last for 1 week, it was delayed to 2, and finally got the pay 3 weeks after that.

What Went Wrong

Asking Price. Inexperienced at this kind of business, I offered a cheap price tag. $200 for “just” another quiz game is a sweet deal, I thought. Quizzes are the type of games they teach you when you were starting programming and $200 is already pretty big in the third world – my monthly salary is approximately $300. It was during the development phase itself that I realized my mistake. They are paying me for my expertise, besides the client wasn’t just some college friend who can’t make their homework, it was a company with a budget and my asking price wouldn’t have meant anything to them. Asking cheap made me think cheap, it was as if there was this very low ceiling that didn’t force me to expand the game or at least made the art a little better.

Assets. Although I got the quiz list the night after I took the job, the rest of the game assets took a pretty long time considering the game is supposed to be finished in a week. My lack of a decent internet connection limited our exchange of communication to SMS. I was only able to check my email once per day (after work), so if ever there were questions that lack answers or a missing art asset, I would get the response the next day. This delayed the project and pushed it to a total of two weeks (including play testing and QA).

Being too greedy. After realizing how cheap my asking price was I decided to hard code the questions–instead of putting them on a separate editable XML file or something. I could have just embedded an XML file or something, but being the greedy programmer that I was, opted to create a separate Factory class containing all the questions in an array. My evil plan backfired, when during the play testing process, they discovered a lot of spelling errors and I had to go back to the code and examine each question one by one with my IDE- FlashDevelop- lacking a spell checker. If I wrote the questions on a text file, I could have just run it on WordPad or something or better yet sent them that file so they can edit the questions themselves.

What Went Right

Modularity. This was my first completely AS3 flash game, and I have to say, I was very impressed at how my project structure turned out. The assets were completely separate from the code. I’d use Flash CS3, or Photoshop, or Painter, or Audacity for the assets and just use the embed tag to link them with the code. This way, if ever I had a separate artist working on the same project, we can go our own ways without relying on each other.

Experience. The project forced me to treat the game I was developing as work. There was a deadline, a paycheck, and a real client (not the hey-I-need-help-here-I-give-you-money friend but a real business client) involved. It helped me evaluate my “business model” and also expose my weaknesses. From now on, I’ll specialize on game development as a freelancer (I’ll only consider web dev/design jobs when I’m really desperate). I also realized that I can only go so far as a visual artist (I need training or better yet, I need a partner artiste.)