First Steps

Alright, I’ve used a couple of hours to start. As I said in my latest post I’m using Adobe Air and these amazing libraries:

Citrus Engine
Starling
Feathers
Signals
Nape

Along with my Robot Mexican Monkey helper.

So, first thing was to have a Map. I used Adobe Flash Pro CC 2014 to build the map, using Movie Clips with Linkage Names (Class Names).

Screenshot 2014-07-27 12.28.25

Then I made this class to export this data to a JSON file.

[cc lang=”actionscript”]package {

import flash.display.MovieClip;
import flash.events.Event;
import flash.display.DisplayObject;
import flash.utils.getQualifiedClassName;

import flash.net.FileReference;

public class Maps extends MovieClip {

public function Maps() {
var output: Array;
output = [];
addEventListener(Event.EXIT_FRAME, update);
function update(event: Event = null): void {
var level: Array;
level = [];
output.push(level);
for (var i: int = 0; i < numChildren; i++) {
var child: DisplayObject = getChildAt(i);
if (child) {
level.push({
x: Math.round(child.x),
y: Math.round(child.y),
width: Math.round(child.width),
height: Math.round(child.height),
rotation: child.rotation,
type: getQualifiedClassName(child)
});
}
}
if (totalFrames == currentFrame) {
removeEventListener(Event.EXIT_FRAME, update);
var string: String = JSON.stringify(output, null, ‘ ‘);
//trace(string);
var fr: FileReference = new FileReference();
fr.save(string, ‘maps.json’);
stop();
}
}
}
}
}[/cc]

The exported data looks like this:

[cc lang=”actionscript”][
[
{
"x": -20,
"rotation": 0,
"y": -20,
"width": 1421,
"height": 721,
"type": "camera"
},
{
"x": 100,
"rotation": 0,
"y": 160,
"width": 40,
"height": 60,
"type": "hero"
},
{
"x": 1140,
"rotation": 0,
"y": 220,
"width": 80,
"height": 80,
"type": "goal"
},
{
"x": 940,
"rotation": 0,
"y": 340,
"width": 100,
"height": 160,
"type": "left"
},
{
"x": 620,
"rotation": 0,
"y": 260,
"width": 100,
"height": 200,
"type": "right"
},
{
"x": 1220,
"rotation": 0,
"y": 20,
"width": 100,
"height": 280,
"type": "left"
},
{
"x": -120,
"rotation": 0,
"y": 0,
"width": 100,
"height": 260,
"type": "right"
},
{
"x": -20,
"rotation": 0,
"y": 220,
"width": 740,
"height": 40,
"type": "platform"
},
{
"x": 940,
"rotation": 0,
"y": 300,
"width": 280,
"height": 40,
"type": "platform"
},
{
"x": 620,
"rotation": 0,
"y": 460,
"width": 320,
"height": 40,
"type": "platform"
}
]
][/cc]

Then inside of my project I parse this info and create the environment. The Camera movieclip is used to limit the viewport.

The original game was limited only to a 1 touch with the possibility of using powers, also some elements in the environment reacted to your touches. This time, I’m going to change it to 2 or 3 buttons.

1 Button will toggle your movement, another will make your character jump (a feature requested for the first game) and a third button will trigger special powers.

Here it is the first test (you have to see it in HD fullscreen or you won’t see the map).