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).