Guide to Mochi Media services – How to set up a game and enable for Live Update

I am using Mochi Media services for almost four years and I was the first to use their in-game leaderboards, so when I recommend them I know what I am talking about.

What happened during these years? Mochi grew a lot and from a simple service to display ads and let you earn money, like a lot more you can find on the web, became a complete solution to improve players’ experience allowing you to track links, introduce achievements, leaderboards, in-game shops and more, while keeping the main feature: let developers make money with their games.

With this huge set of offers, often new developers get lost and end with adding Mochi APIs without the full control of their power.

This guide will cover all Mochi services with a real world example, to make clear how to get the most out of your game and the Mochi API.

Your first Mochi game

If you aren’t already registered with Mochi Media do it, and once you are logged in select ADD GAME [...]

Read more: Guide to Mochi Media services – How to set up a game and enable for Live Update

Loops With int and uint

AS3 has two integer types: int and uint. In my experience, most AS3 programmers just use int everywhere and ignore uint. This is usually acceptable as the need for unsigned integers is rare compared to their signed counterparts. However, there are significant performance differences between the two. Read on for the impact of uint on [...]

Loops With int and uint

Create a Racing Game Without a 3D Engine

This tutorial will give you an alternative to 3D for racing games in ActionScript 3. No external framework is required for this old-school style example.

---

Final Result Preview

Let’s take a look at the final result we will be working towards:

---

Step 1: Set up the FLA Document

Create a new Flash document set for ActionScript 3.0. I’ll be using dimensions of 480x320px, a frame rate of 30 FPS, and a light blue background. Save the file with a name of your choice.

---

Step 2: Create a Document Class

Besides the FLA, we also need to create a document class. Create a new Actionscript file, and add this code:

package
{
 import flash.display.MovieClip;

 public class Main extends MovieClip
 {
  public function Main()
  {

  }
 }
}

Save this file in the same directory as our FLA. Name it Main.as.

---

Step 3: Link the Main Class with the FLA

In order to compile the code from the Main class, we need to link it with the FLA. On the Properties panel of the FLA, next to Class, enter the name of the document class, in this case, Main.

Then, save the changes on the FLA.

---

Step 4: Draw a Road Line

[...]

Read more: Create a Racing Game Without a 3D Engine

Flixel Power Tools v1.7 – Kaboom!

It’s been a month in development but it’s finally here – Version 1.7 of the Flixel Power Tools has now gone from dev to master – and I urge you all to give it a play! I have also re-organised my site so that the tools and all sub-classes are now easily accessible from the right-hand side bar. More info, more screen shots, less scrolling

V1.7 includes a brand new Demo Suite system (don’t forget to try the Credits button ). It’s now easier and quicker to get to the examples, which is just as well as we’ve over 60 of them in this release. Don’t forget to download the whole package from github, as it includes a Getting Started manual PDF, the full source code to all of the demos, all of the graphical and audio assets (warning: copyright, don’t use commercially!), as well as the tools themselves [...]

Read more: Flixel Power Tools v1.7 – Kaboom!

How to create a Flash platformer using Citrus Engine

More than a year ago I shows you how to create a little game prototype using Citrus Engine.

A year has passed, and now Citrus Engine is back with version 2.0 which promises to let us create complex games in a quick.

For all you specs maniacs, here it is a brief list of features:

* Blazing 50 FPS in the browser on current machines, and 250+ FPS on the desktop (or Adobe AIR).
* Integrated with Box2D physics, which allows for tumbling crates, pulleys, vehicles, and just about anything else you can imagine, without the limitations of a grid.
* Supports multiple rendering methods with very little code. Like blitting and sprite sheets? Citrus Engine’s got it. Prefer animating using the timeline? No problem.
* Hijack the Flash IDE and use it as a level editor, for easily laying out and iterating on level designs.
* Robust documentation includes and ASDoc API, tutorial videos, and a forum.
* Standards-based code API means developers and designers spend more time tweaking the fun stuff, and less time debugging.
* Level-based progressive downloading allows gamers to start playing the game quicker by only downloading what the next level needs.
* Pre-made commonly used objects, like a hero, coins, enemy, platforms, clouds, and more!
* Easily use embedded or dynamic graphics.
* Decoupled architecture allows for custom rendering methods, like blitting or 3D.
* Sound management
* Keyboard and input management
* Built-in particle system
* Intuitive Signals event framework

Ok, the boring part is over. Now take this little prototype I made in 20 minutes (yes, 20 minutes):

Look at what we have:

* The hero (on the bottom right)
* A pushable crate (on the bottom left)
* Some platforms around the stage
* A moving platform
* An enemy (on the upper right corner)
* A coin (on the upper right corner)

Move the hero with LEFT and RIGHT and jump with SPACE. Try to grab the coin. See what happens if you touch the enemy. The game mechanics are complex enough to represent a level of a good platformer. But it took me only a few lines to do it.

This is the main class [...]

Read more: How to create a Flash platformer using Citrus Engine

Well-Armored Warrior:ActionScript 3.0 Decorator for Beginners

Decorating an Object
In looking over the chapter on the Decorator pattern in our book I’ve felt that maybe I picked too complex a set of examples. In a Decorator example on this blog I attempted to remedy that with a very easy yet somewhat abstract example. However, I’ve decided to try and have a hugely [...]

Read more: Well-Armored Warrior:ActionScript 3.0 Decorator for Beginners

Quick Tip: How to Randomly Shuffle an Array in AS3

Sometimes you have a set of items — could be Strings, could be Numbers, could be Objects, whatever — whose order you want to randomise. This is particularly useful for quizzes and games of chance, but comes in handy in all sorts of other applications. The easiest method I’ve found for doing this is to stick all the items in an Array and then shuffle it like a deck of cards. But how can we do that…?

As a simple example, we’ll use the letters of the alphabet:

var letters:Array = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

There are different approaches we can take to actually sorting this array.

---

The Naive Approach

We could create a second array, and copy each element of the first into a random position in the second:

The code for that might look like this (see this Quick Tip on getting a random integer within a specific range for more details):

var letters:Array = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
var shuffledLetters:Array = new Array(letters.length);

var randomPos:int = 0;
for (var i:int = 0; i < letters.length; i++)
{
 randomPos = int(Math.random() * letters.length);
 shuffledLetters[randomPos] = letters[i];
}

But there’s one huge problem. What if the random position picked for C is 6 as well?

Here, A gets overwritten, and will therefore not be in the shuffled array. That’s not what we want, so we need to check that the slot is empty before copying the letter over, and pick a different slot if it isn’t: [...]

Read more: Quick Tip: How to Randomly Shuffle an Array in AS3

How to make Angry Birds – part 2

Hello and welcome back to my blog!

This is the 2nd part of my series on how to make a game like Angry Birds by Rovio - and its been a while coming… You can read the first part here.

The Game

Ok, so here is the game so far; there are three demo levels to show the level progress system and some simple looking characters and block types. Apologies for the programmer art

Catch up

Ok, so last time I had covered how to draw the background graphics and made a start on how the world is going to be composed in terms of collision.

What I’m going to cover in this article is the physics part; stability and optimisations. The physics engine that I’ve created for this game is based on the technology I’ve discussed in my previous articles:

Physics engines for dummies
Collision detection for dummies
Speculative contacts – a continuous collision engine approach

Level

A level is defined as a bunch of instances of static rigid bodies and dynamic rigid bodies plus a visual layer which covers up the statics – I use this other layer because otherwise there would be a slight visible gap between adjacent static blocks, which we don’t want since the texture is supposed to be continuous.

A level must inherit the base class Code.Level. I’ve done this so I can predefine certain things about each level – such as the instance names for the hero characters, and the sling-shot which I need to reference in code.

Characters and blocks

Each of the two characters and every block used in the game are designed in the Flash IDE, and each of them references a base class that I’ve defined in the code. This is so that I can parse the children of a level at runtime and create the appropriate rigid bodies at the correct mapped locations for the physics engine.

Rigid-bodies

There are the following base classes (stone and wood use the same base class):

• HeroCharacter
• EnemyCharacter
• ProxyRectangleIce
• ProxyRectangle
• ProxyRectangleStatic
• ProxyTriangleStaticDown
• ProxyTriangleStaticUp

These are interpreted at level creation time, using a loop similar to this: [...]

Read more: How to make Angry Birds – part 2

DAME 2 Released – My Favourite Game Map Editor!

Although I’ve been beta testing this for a while now, Charles Goatley today officially released DAME 2. I first started using DAME back in September 2010 when the first version was released on the Flixel forums, and it has gone from strength to strength since then. Charles has done a wonderful job keeping on-top of bug reports and dealing with feature requests, and v2 is easily the single biggest update yet.

DAME is a traditional 2D Tile Map Editor running on Adobe AIR, which means it works across Windows, Mac and Linux. The map editing view is generated with Flixel, so if you use it for a Flixel game you know it’s going to look exactly the same as it does in the editor. It has a comprehensive export system and custom scripts can be written in Lua. From simple CSV or XML data to writing out fully blown AS3 classes.

Version 2 brings interface refinements and a lot of new map building tools to the table, including:

• Certain windows (tile palette, sprites, layers and properties windows) are now dockable.
• Isometric tilemap support – support for diamond, staggered diamond and skewed. Tile matrix and brushes all still work as expected with these layer types.
• Tiles can be stacked on top of each other.
• Improved visuals for selected tiles.
• Improvements to drawing on tilemaps.
• Can draw lines on tilemaps.
• Flood fill for tilemaps.
• Can select, move and scale regions in tile drawing mode.
• Can copy and paste in tile drawing mode.
• Right click when drawing brings up context menu.
• New configurable 16 colour palette for drawing.
• Tiles can be animated.
• Can have per tile properties.
• Can repeat tilemaps on individual axes.
• Can use any system font for text boxes.
• Can use bitmap fonts for text boxes.
• Increased undo history.
• New Sprite Trails – automatically populate a path with a series of sprites.
• Sprites can be automatically sorted for depth.
• Sprites can use a Z value for height placement.
• All object layers can be aligned with an isometric tilemap layer to allow exported positions to be relative to the tilemap’s ‘real’ coordinate system.
• Aligned shapes on shape layers will rotate/skew to fit the tilemap shapes.
• Can change the frame for any sprite to be different from the sprite entry.
• Tile sprites are now spritesheets – can scale and translate the image within.
• Can rip an image to create a tilemap layer and tileset.
• Choice of themes for DAME.
• Importing dam projects with sprites improved to find pre-existing matches in current project.
• Can save sprite entry lists separate to a .dam project as a .dsf (DAME Sprite File), allowing you to have multiple sharing one list of sprites.
• Can move an entire group in real-time.
• More of the session is saved in a .dam file allowing you to resume editing where you left off much easier.
• Tiles now preview in tilemap layer properties window.
• Can gives shapes different colours.

DAME 2 Released – My Favourite Game Map Editor!

Introduction to Box2D for Flash and AS3

Box2D is a popular physics engine with a solid Flash port, which was used to create the excellent game Fantastic Contraption. In this tutorial, the first of a series, you’ll get to grips with the basics of Box2D 2.1a for Flash and AS3.

---

Step 1: The Boring Setup

I’m going to assume you already know how to set up a basic Flash project using your editor and workflow of choice, whether that means creating a FLA with a document class, a pure AS3 project in a different editor, or whatever. I’m using FlashDevelop, but you should use whatever you feel comfortable with.

Create your project, and name the main class Main.as. Give it some boilerplate code; mine looks like this:

package
{
 import flash.display.Sprite;
 import flash.events.Event;

 [Frame(factoryClass="Preloader")]
 public class Main extends Sprite
 {

  public function Main():void
  {
   if (stage) init();
   else addEventListener(Event.ADDED_TO_STAGE, init);
  }

  private function init(e:Event = null):void
  {
   removeEventListener(Event.ADDED_TO_STAGE, init);
   getStarted();
  }

  private function getStarted():void
  {

  }

 }

}

Don’t worry about the [Frame] metatag — that’s just how FlashDevelop creates a preloader. All you need to know is that getStarted() is run when the SWF has fully loaded. Create a function of the same name that runs when your Main class has loaded.

I’m also going to assume you’re comfortable with using a separate library or API in your project. Download Box2DFlash 2.1a from this page (I’m using the Flash 9 version), and extract the zip to wherever you normally put your APIs. Next, add a classpath to point to the \Source\ folder from the zip. Alternatively, you could just extract the contents of the \Source\ folder to the same directory as your Main class.

Great! That was easy. Let’s start using Box2D.

---

Step 2: A Whole New b2World

“If you want to make an apple pie from scratch, you must first create the universe,” wrote Carl Sagan; if we want to make a few physics objects, we only need to create a world.

In Box2D, a world is not a planet or an ecosystem; it’s just the name given for the object that manages the overall physics simulation. It also sets the strength of gravity — not just how quickly objects accelerate but also in which direction they fall.

We’ll create a vector to set the gravity before creating the world itself:

import Box2D.Common.Math.b2Vec2;

//...

private function getStarted():void
{
 var gravity:b2Vec2 = new b2Vec2(0, 10);
}

A b2Vec2 is a Box2D Euclidean vector (the second 2 stands for 2D again, because it’s possible to have a 3D Euclidean vector). Daniel Sidhion wrote an excellent tutorial explaining what Euclidean vectors are (they are nothing to do with the Vector class in AS3), so check that out if you’re not sure. But briefly, think of a Euclidean vector as an arrow:

This arrow shows b2Vec2(4, 9); it points down and to the right. Our gravity vector, then, will point straight down. The longer the arrow, the stronger the gravity, so later on in the tutorial you could try changing the gravity vector to b2Vec(0, 2) to simulate a much weaker gravity, much like that on the Moon.

Now we’ll create the world itself:

import Box2D.Dynamics.b2World;

//...

public var world:b2World;

//...

private function getStarted():void
{
 var gravity:b2Vec2 = new b2Vec2(0, 10);
 world = new b2World(gravity, true);
}

The second parameter we pass to b2World() tells it that it can stop simulating objects that it doesn’t need to simulate any more, which helps speed up the simulation but is completely irrelevant to us at the moment.

Run the SWF to check there are no errors. You won’t be able to see anything yet, though. The world is currently completely empty!

---

Step 3: Reinvent the Wheel

Let’s create a simple circular object; this could represent a rock, a basketball, or a potato, but I’m going to see it as a wheel [...]

Read more: Introduction to Box2D for Flash and AS3

Videotutorial: Controlling the desktop with your mobile device via P2P

Last year I wrote two tutorials connected with local network connections via P2P:
MAX Racer Remote Device Controller in AIR for Android
and
Local Flash Peer-to-Peer Communication over LAN (without Cirrus/Stratus)

Right now you can watch the video tutorial showing how to do this:

Note that such application can run on iOS, BlackBerry Tablet OS and Android.

Read more: Videotutorial: Controlling the desktop with your mobile device via P2P

SWFRETools

SWFRETools are a collection of tools built for vulnerability analysis of the Adobe Flash player and for malware analysis of malicious SWF files. The tools are partly written in Java and partly in Python.

The following tools are part of the SWFRETools:

• Flash Dissector: Binary viewer for SWF files
• SWF Parser: Build your own tools using this parser
• Minimizer: Automatically minimize crashing SWF files
• FP Debugger: Trace the Flash Player dynamically
• StatsGenerator: Generate stats over SWF files

Read more: SWFRETools