Andy Moore Blog: How to improve your mobile AS3/AIR performance

Shawn Blais taught me all I needed to know about mobile optimizations of my AS3 code. His blog only has a dozen or two articles, but they are chock-full of interesting information (and even sales figures!). The most useful stuff for me, at this point, is the graphics pipeline optimizations.

The thing that ties the following three steps together is one unifying theory: use bitmaps for everything. You can start with MovieClips and vector Sprites, and you can even stick with Flash’s DisplayList to keep things organized. But the actual image data? Bitmaps! Always bitmaps.

Step One: Use the GPU rendering mode

When designing a mobile application, you’ll have an “application.xml” (or similarly named) file that contains all sorts of nice settings. One of those is going to tell the mobile device whether to render using the CPU or the GPU. Most defaults (including the FlashDevelop template file) will point you to CPU, and that may be fine for flash’s standard vector art. Switching to bitmaps and the GPU setting will give us much better performance.

Open up application.xml and make sure this exists:

<initialWindow>

<renderMode>gpu</renderMode>

</initialWindow>

(source article is same as step 3)

Step Two: Lower the Stage Rendering Quality

AS3′s stage-rendering quality setting determines how vector art (probably your “Sprite” and “MovieClip” classes) is rendered. The thing is, even with a low setting, the stage still respects your bitmaps “smoothing” flag and draws it without any discernible difference. No need to spare the CPU cycles on something we aren’t using!

stage.quality = LOW;

If you have vector art you are loading and converting during runtime (see step 3), AS3 even lets you change the stage quality on the fly! Just use this:

stage.quality = HIGH;

convertMySprite(); // Or whatever your function is

stage.quality = LOW;

(source article)

Step Three: Use Bitmaps, and Cache them

This is probably the best performance-enhancing-drug my mobile apps have used so far, but it only gets the big performance gains if you use it in conjunction with Step 1 (GPU render mode).

The basic idea is to take all of your image data, and cache the bitmap data only once - dynamically – to a dictionary reference.  In GPU render mode, this stores the data as a texture in GPU memory on the mobile device. As long as all duplicate images are pulled from the original data, no new memory is used and creation of new graphics is lightning fast.

This works particularly well for common images used frequently – say, badguys, bullets, and common tiles. But I use it for everything!

Shawn’s original article laid out some source code and a longer explanation if you want to get into details and performance charts. His code does all of the conversions automatically for you, and the discucssion in the comments of his article improved upon it. I added a few tweaks myself, and it is now the only class I use for any type of image data. Imported .PNG file? Sprite or MovieClip in a .SWC? Class reference to an object you custom made? Doesn’t matter! All automated, all quick, all easy to use. Best of all: the code is really short, simple, and easy to read in about a minute. 

It’s a bit too long to paste here, so here’s a link to the class I use right now. Feel free to use it, just let me know if you improve on it :) Copy and paste it to the root of any project and you should be able to start using it right away.

(source article)

Bonus Step: Convert MovieClips on the fly

I haven’t tried this step out yet, but it’s an extension of the class I offered up in Step 3: automatically convert each frame from a MovieClip to cached bitmap data (and store that stuff in the GPU). If I had animations in my most recent games, I would be all over this too! [...]

Read more: How to improve your mobile AS3/AIR performance

Andy Moore Blog: How to make iOS/Android games on a PC – for free

I’ve gotten a lot of EMails over the last few days demanding to know how I can make mobile games on a PC.  Some ask about Android, most ask about iOS, and everyone is all jaw-agape that AS3 code runs on these devices in some sort of native format (as opposed to in a browser instance).

Then they get all wobbly in the knees when they figure I’ve done it using completely free software.

There are plenty of (IMHO: Over-complicated) tutorials out there, and my knee-jerk reaction is to just … well, LMGTFY. After all, I didn’t divine this knowledge myself; it came with a  bunch of research, and thankfully following the path of other people.

I think I can simplify most of the tutorials though. Check it out.

Step 1: Boot up your PC.

These steps are for Windows operators only. The software listed here doesn’t play well in Apple environments, but then again, Apple users don’t have a lot of the iOS-related problems I do in the first place.

Step 2: Install FlashDevelop.

When I say “install FlashDevelop” I mean for you to install the latest version (4.0.1 RTM at the time of this writing). This is important: the next few steps don’t make any sense if you go even 1 version older. Also, don’t mess around with the default install folder, and don’t mess around with what sub-components are selected in the installer.

FlashDevelop is a development IDE, similar to Flash CS or FlashBuilder, except this one is free. After it installs, it also goes ahead and installs the Flex SDK (free flash compiler) and the Air SDK (the magic bit that makes it work on phones) automatically for you, and then links it all up internally – saving you like 4 dozen more steps.

Step 3: Start a new project in FlashDevelop.

This one’s easy. Open up FD, select “NEW PROJECT” from the “Projects”  menu, and select “AIR Mobile AS3 App” from the list of templates. This is the magical step that will auto-generate for you a bunch of instructions, batch files, certificate directories, and everything else you’ll need to get going.

You don’t need to even bother writing a quick “Hello World” application, as this template should compile immediately for you. Just hit up “Project > Project Properties” and give the app a bright pink background, then hit F5 and watch it run on your PC.

Yup, at this point, only at Step 3, you’ve already got your mobile-device-simulator installed (a cheap AIR projection version anyway), and you can start developing your application.

Step 4: Follow the included instructions.

The best part about FlashDevelop’s mobile project template is that it includes two text files in your project directory:

• AIR_Android_readme.txt
• AIR_IOS_readme.txt

They’re both around 6-steps long, and in painstaking detail (with web links, references, and cited blogs) tell you exactly how to get your app working on your mobile device.

After following those instructions, you’re DONE! That’s it! You are now making games that compile and run on the precious iPads of the world.

Now, those extra text-file steps can be easy (if you’ve setup certificates and things before, or have your phone drivers installed), or they can be new and intimidating. So I’ll outline some of those steps here. I’ll start with Android to give you a baseline of what the experience could be like:

Step 5: Install your Android USB Drivers.

[...]

Read more: Andy Moore Blog: How to make iOS/Android games on a PC – for free

The Reality of HTML5 Game Development and making money from it

Note: This was written near the end of January 2012 and as such reflects the state of the technology and markets at the time. Everything is moving so fast a lot of the information below is subject to change, so bear that in mind. HTML5 game development and indeed the ability of the web browser [...]

Read more: The Reality of HTML5 Game Development and making money from it

Make a Tower Defense Game in AS3: Aim and Fire

Hey Flash developers! In this tutorial series we are going to go through the process of developing a very basic Tower Defense game. In this first part of the series, we’ll learn how to deploy turrets on the game field, give them the ability to aim at an object (in this case, the mouse) and make them fire particles.

---

Final Result Preview

Once we complete this tutorial, we are going to have this:

Click a circle to mount a turret on it. Notice how all the turrets rotate so that they point towards the mouse cursor. Click, and all mounted turrets will fire a particle towards the cursor.

---

Step 1: What is a Tower Defense Game?

Wikipedia’s definition sums it up nicely:

The goal of tower defense games is to try to stop enemies from crossing a map by building towers which shoot at them as they pass.

That is essentially what we will be developing in this tutorial series. Remember that we refer to the towers as turrets in this tutorial.

Cursed Treasure is a great example of a TD game, if you’re still unsure.

---

Step 2: Setup – IDE

Before we start developing the game, we need to setup the project on our IDE. I’ll be using FlashDevelop here. If you want to read about how to setup the project on Flash Develop, please have a read Steps 1 and 2 of this tutorial, or this full guide to FlashDevelop.

So now you should have a main class, Main.as, with the following code:

package
{
 import flash.display.Sprite;

 public class Main extends Sprite
 {
  public function Main():void
  {
  }
 }
}

---

Step 3: Understand the Game Elements

For this part, our game will have following game elements:

1. Game Field: The area where all game elements will be placed.
2. Turret Placeholder: This is a place on the game field, defined to hold a turret.
3. Turret: Our weapon in the game that can be placed on turret placeholders.
4. Bullet: And finally, the particles that the turrets fire.

All the above elements will be created in the Main.as except the turrets which will be a separate Turret class.

Lets start coding now!

---

Step 4: Creating the Placeholders

First we’ll create a function called createTurretPlaceholder() which will create and return us a placeholder sprite. Add the following to the Main class:

private function createTurretPlaceholder():Sprite {
 var placeholder:Sprite = new Sprite();

 // draw the graphics
 var g:Graphics = placeholder.graphics;
 g.beginFill(0xCE7822);
 g.drawCircle(0, 0, 20);
 g.endFill();

 return placeholder;
}

This function is simply creating a Sprite variable placeholder. Then using Actionscript drawing API we create the graphic, which is a simple circle. Finally it returns that sprite.

---

Step 5: Adding Some Placeholders

Now we’ll create three placeholders using the previous function and put them at different positions on the field. Add the following code in the Main() constructor:

var placeholder1:Sprite = createTurretPlaceholder();

In the above statement we create a variable placeholder1 of type Sprite which receives a placeholder from the above createTurretPlaceholder() function.

placeholder1.x = 200; placeholder1.y = 60;

We position the placeholder on the field.

addChild(placeholder1);

And then we add the placeholder to the stage.

Using the same code, we’ll add two more placeholders to the field – so your Main() function should look like this:

public function Main() {
 var placeholder1:Sprite = createTurretPlaceholder();
 placeholder1.x = 200; placeholder1.y = 60;

 var placeholder2:Sprite = createTurretPlaceholder();
 placeholder2.x = 60; placeholder2.y = 260;

 var placeholder3:Sprite = createTurretPlaceholder();
 placeholder3.x = 350; placeholder3.y = 260;

 addChild(placeholder1);
 addChild(placeholder2);
 addChild(placeholder3);
}

---

Step 6: Turret – Creating the Class

As I mentioned before, the turret is going to be a separate class. This is because turrets need to have specific properties and methods of their own, and to be extended in future to create different type of turrets. This makes them a perfect candidate to be defined in a separate class.

Go on and create a new class called Turret, derived from Sprite, in a file named Turret.as. It should have the following basic code:

package
{
 import flash.display.Sprite;

 public class Turret extends Sprite
 {

  public function Turret()
  {
  }
 }
}

---

Step 7: Turret – The Graphics

Now that we have base structure of the Turret class, the next step is to give the turret some graphics. For that we create a new function called draw() in the class. So put the following function just below the constructor:

private function draw():void {
 var g:Graphics = this.graphics;
 g.beginFill(0xD7D700);
 g.drawCircle(0, 0, 20);
 g.beginFill(0x800000);
 g.drawRect(0, -5, 25, 10);
 g.endFill();
}

As you might have noticed in the code, we draw a circle and a rectangle on it. That’s how our turret is going to look. Now we call this function from the constructor itself [...]

Read more: Make a Tower Defense Game in AS3: Aim and Fire

Fast Game Prototyping with Flashpunk and Minimal Comps

The proper way to build a game in Actionscript (or any other language) is to create a quick prototype and test the gameplay. Then, if the gameplay is good, you refine it. If it isn’t working, you go back to the drawing board and create another prototype. Large game companies often scrap ideas that aren’t working when the prototype is tested.

In reality, it oftens takes so much time to get the basic mechanics working that you would never consider scrapping it, even if it isn’t really a good game. But, it doesn’t have to be that way. Two issues that slow down game development are:

#1: Dealing with basic input/output, collision detection and all of the “simple” things that you need to make a game function. Coding these elements takes hours and has very little to do with making your game awesome.

#2: Fine tuning your game. There are usually several inter-related variables that need to be adjusted. The (slow) way to do this is to make an educated guess, set the values, publish and test. Then, adjust the variable values and try again.

The good news is that there are solutions to both of these problems. The solution to problem #1 is Flashpunk. It’s an open-source AS3 framework for building pixel-based 2D games. It handles a lot of the basic animation, collision detection, keyboard input and other issues so that you don’t have to do it. It’s a pure Actionscript-based library that compiles in FlashDevelop, which is free and open source, so you don’t even need the Flash IDE. I whipped up a sample “game” in Flashpunk below. This only took me a few hours, including the learning curve.

“But, I’m making an “immersive 3D RPG for iPhone” you say? So what? You can still use Flashpunk to do some quick gameplay demos and make sure that your basic gameplay is actually fun. Once you get the hang of Flashpunk, you can whip up a simple game demo in less than a day. It may save you a lot of time down the road. Go here to get the source code and then work through the tutorials. You can be making games by the end of the day.

Now, if you tried my game demo above, you are probably saying “this sucks! I can’t even jump up to the platforms!” That’s where my second time saver comes in. Minimal Comps is a set of basic Actionscript3 components that can help you with your prototyping. In the game above, I’ve added a game tuning panel made with Minimal Comps. To see it, right-click on the stage and choose “Show Testing Console.” This will open the panel with several options. The first button toggles the collision hitbox visibility. If you make the hitboxes visible, you will notice a bug that I left in the game when you move the character to the left. By changing the values in the textfields, you can adjust the game gravity and jump velocity until the gameplay works and feels right.  Minimal comps makes it easy to set up this testing panel for tuning your game in real time [...]

Read more: Fast Game Prototyping with Flashpunk and Minimal Comps

Nape and Starling together? It’s possible!

Hey, friends!

Somebody of you already tried fastest 2D flash physics engine Nape with a GPU 2D rendering framework Starling together and noticed that Body.graphic property is class of flash.display.DisplayObject and it can’t be assigned to the starling.display.DisplayObject instance.

So, some of you just used Box2D, some of you controlled Starling DisplayObjects manually, maybe some did what I did, but keep it away from public, but I like Body.graphic property – it’s really useful and I wish all as3 developers can easily use fastest 2d physics engine with 2D GPU rendering engine.

Today I’m glad to present you modified Nape FP 10+ swcs (release and debug) of the Milestone 7.2 “r3″ (maybe not fully) compatible with the Starling.

I just replaced Body.graphic flash.display.DisplayObject class by the Dynamic class (* in as3) and removed Body.graphic.rotation radians to degrees conversion to make it compatible with Starling in my case.
Now I can use Nape as usual, with usual DisplayObjects, it’s really cool!
Yes, there are possible some more compatibility issues, but this changes was enough in my case and Nape worked with the Starling DisplayObjects fine.

Feel free to download and use this swcs with Starling Framework!
debug swc
release swc

I like a challenge with caxe and flib compiling on Windows in the MinGW I faced while recompiling swc, it was fun!
To get the working swcs on Windows, you should

Read more: Nape and Starling together? It’s possible!

Introducing Starling – a free book from O’Reilly

O’Reilly has just released a free book on the Starling Framework written by Thibault Imbert. This is essentially an updated and enhanced version of the getting started PDF that he wrote around the time of the release. Here is the abstract:

Starling is an ActionScript 3 2D framework developed on top of the Stage3D APIs (available on desktop in Flash Player 11 and Adobe AIR 3). Starling is mainly designed for game development, but could be used for many other use cases. Starling makes it possible to write fast GPU accelerated applications without having to touch the low-level Stage3D APIs.

Most Flash developers want to be able to leverage GPU acceleration (through Stage3D) without the need to write such higher-level frameworks and dig into the low-level Stage3D APIs. Starling is completely designed after the Flash Player APIs and abstracts the complexity of Stage3D (Molehill) and allows easy and intuitive programming for everyone.

Thanks to Thibault for creating a great beginner resource for Starling! You can also check out my video tutorial on Starling over on gotoAndLearn.

Read more: Introducing Starling – a free book from O’Reilly

How to make games

In this article I’m going to be talking about the process behind actually making, testing and publishing a game. It’s aimed at the absolute beginner but there should be something of interest here for the intermediate level reader as well. I’m going to be concentrating on making game with Adobe Flash, but the general techniques are applicable to any platform.

What is a game?

Wikipedia defines a game as:

“…structured playing, usually undertaken for enjoyment and sometimes used as an educational tool”

I would add that a game must contain these three components:

• Interactive element
• Challenge
• Goal

Obviously a game must be interactive, there must be some kind of challenge involved (mental or physical) and in most games there is a predefined goal which the player strives to achieve.

For example, take Pac-Man, one of the most recognisable games there is:

Pac-man

In Pac-man, the interactive component is that you control Pac-Man and can move him left/right/up/down. The goal is to eat all the pills and the challenge is that the ghosts chase Pac-Man and will kill him on touch. The way Pac-Man interacts with the maze-like environment also forms part of the challenge because the maze forces the player to choose the correct route ahead of time in the hopes that a ghost will not head him off at the pass, so to speak.

Pac-Man also contains a nice twist which, in my view, is the key to the game’s addictiveness; when you eat a large pill, all the ghosts turn blue and flee as Pac-Man is able to eat them on touch. This reversal of the game rules provides an excellent contrast to the normal game-play; it feels extremely satisfying to eat a ghost and this reversal has the effect of balancing the game-play so it feels fair.

Read more: How to make games