Flash Toony prototype ported to Haxe

April 23, 2012 • Game design, Users contributions by Emanuele Feronato • 8 Comments

It seems Flash Toony prototype is getting quite an interest because some days after the iPhone port made with Corona SDK, it’s the time for Julian Liebl from Nortlight Games to show us the Haxe port of the prototype.

Haxe can be compiled to all popular programming platforms with its fast compiler – JavaScript, Flash, NekoVM, PHP, C++, C# and Java (soon) – which means your apps will support all popular mobile devices, such as iOS, Android, Windows Mobile, webOS and more.

package;

import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import haxe.Timer;
import flash.Lib;
import flash.Vector;
import flash.geom.Point;

/**
 * @author Emanuele Feronato ported by Julian Liebl from Flash to Haxe
 */

class Toony extends Sprite {
	
	var timer:Timer;
	var returnPoint:Point;
	var movingToony:Sprite;
	var draggableToonies:Array<Sprite>;
	var fallingToonies:Vector<Sprite>;

	public function new() {
		super();
		init();
		construct();
		create();
	}

	public function init(){
		movingToony = null;
		draggableToonies = new Array();
		fallingToonies = new Vector();

		//init Timer
		timer = new Timer(2000);
		timer.run = newToony;
	}

	public function construct(){
		//lets create a toony with the shape of a circle
		var circle:Sprite = constructShape(0);

		//lets create a toony with the shape of a rectangle
		var rectangle:Sprite = constructShape(1);

		//lets create a toony with the shape of a round rectangle
		var roundRectangle:Sprite = constructShape(2);

		draggableToonies.push(circle);
		draggableToonies.push(rectangle);
		draggableToonies.push(roundRectangle);
	}

	//let's code the shapes ourself. That's badass ;)
	public function constructShape(index:Int):Sprite{
		var returnSprite:Sprite = new Sprite();
		switch(index){
		    case 0:
		    	returnSprite.name = "circle";
				returnSprite.graphics.beginFill(0x0621a9);
				returnSprite.graphics.drawCircle(40, 40, 40);
				returnSprite.graphics.endFill();
			case 1:
				returnSprite.name = "rectangle";
				returnSprite.graphics.beginFill(0xff0000);
				returnSprite.graphics.drawRect(0 , 0, 80, 80);
				returnSprite.graphics.endFill();
			case 2:
				returnSprite.name = "round rectangle";
				returnSprite.graphics.beginFill(0xFFCC00);
				returnSprite.graphics.drawRoundRect(0 , 0, 80, 80,40,40);
				returnSprite.graphics.endFill();
		    default:
		        trace("Not known index. Returing empty Sprite.");
		}
		return returnSprite;
	}

	public function create(){
		// creation of the four draggable toonies
		var loops:Int = 0;

		for (toony in draggableToonies) {
			toony.x=loops*100+80;
			toony.y=370;
			toony.buttonMode=true;

			addChild(toony);
			toony.addEventListener(MouseEvent.MOUSE_DOWN,toonyClicked);

			loops++;
		}
		// main game loop
		addEventListener(Event.ENTER_FRAME,update);

		// event to be triggered when the player releases the mouse button
		Lib.current.addEventListener(MouseEvent.MOUSE_UP,toonyReleased);
	}

	private function newToony():Void {
		// it's simple: I just create a new Toony instance and place it
		// randomly in the game field with a random frame shown
		var toony:Sprite = constructShape(Math.ceil(Math.random()*draggableToonies.length)-1);
		addChild(toony);
		toony.x=Math.random()*580;
		toony.y=-32;
		
		toony.alpha=0.5;
		// pushing the newly created toony into toonies vector
		fallingToonies.push(toony);
	}

	private function toonyClicked(e:MouseEvent):Void {
		returnPoint = new Point(e.target.x, e.target.y);
		// if I am not moving any toony...
		if (movingToony==null) {
			// setting the toony I am about to move to the toony I just pressed the mouse on
			movingToony=e.target;
		}
	}

	private function toonyReleased(e:MouseEvent):Void {
		// if I am moving a toony...
		if (movingToony!=null) {
			// looping through toonies vector
			for (toony in fallingToonies) {
				// if I am touching a falling toony with the same shape as the toony I am currently moving...
				// (that is: if both toonies are showing the same frame...)
				if (toony.hitTestPoint(mouseX,mouseY,true) && movingToony.name==toony.name) {
					// the toonies match!! Highlighting the falling toony
					toony.alpha=1;
				}
			}
			// putting the moved toony back to its place
			movingToony.y=returnPoint.y;
			movingToony.x=returnPoint.x;
			// setting the variable which hold the moving toony to null
			// I am not moving any toony now
			movingToony=null;
		}
	}

	private function update(e:Event):Void {
		// if I am moving a toony...
		if (movingToony!=null) {
			// updating toony position according to mouse position
			movingToony.x=mouseX-movingToony.width/2;
			movingToony.y=mouseY-movingToony.height/2;
		}

		var loop:Int = 0;

		for (toony in fallingToonies) {
			// moving toonies down
			toony.y++;
			// removing toonies from the stage if they are too close to the bottom of the stage
			if (toony.y>280) {
				toony.parent.removeChild(toony);
				fallingToonies.splice(loop,1);
			}
			loop++;
		}
	}

	public static function main () {
		Lib.current.addChild(new Toony ());
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

package;

import flash.display.Sprite;

import flash.events.MouseEvent;

import flash.events.Event;

import haxe.Timer;

import flash.Lib;

import flash.Vector;

import flash.geom.Point;

/**

* @author Emanuele Feronato ported by Julian Liebl from Flash to Haxe

class Toony extends Sprite {

var timer:Timer;

var returnPoint:Point;

var movingToony:Sprite;

var draggableToonies:Array<Sprite>;

var fallingToonies:Vector<Sprite>;

public function new() {

super();

init();

construct();

create();

}

public function init(){

movingToony = null;

draggableToonies = new Array();

fallingToonies = new Vector();

//init Timer

timer = new Timer(2000);

timer.run = newToony;

}

public function construct(){

//lets create a toony with the shape of a circle

var circle:Sprite = constructShape(0);

//lets create a toony with the shape of a rectangle

var rectangle:Sprite = constructShape(1);

//lets create a toony with the shape of a round rectangle

var roundRectangle:Sprite = constructShape(2);

draggableToonies.push(circle);

draggableToonies.push(rectangle);

draggableToonies.push(roundRectangle);

}

//let's code the shapes ourself. That's badass ;)

public function constructShape(index:Int):Sprite{

var returnSprite:Sprite = new Sprite();

switch(index){

case 0:

returnSprite.name = "circle";

returnSprite.graphics.beginFill(0x0621a9);

returnSprite.graphics.drawCircle(40, 40, 40);

returnSprite.graphics.endFill();

case 1:

returnSprite.name = "rectangle";

returnSprite.graphics.beginFill(0xff0000);

returnSprite.graphics.drawRect(0 , 0, 80, 80);

returnSprite.graphics.endFill();

case 2:

returnSprite.name = "round rectangle";

returnSprite.graphics.beginFill(0xFFCC00);

returnSprite.graphics.drawRoundRect(0 , 0, 80, 80,40,40);

returnSprite.graphics.endFill();

default:

trace("Not known index. Returing empty Sprite.");

}

return returnSprite;

}

public function create(){

// creation of the four draggable toonies

var loops:Int = 0;

for (toony in draggableToonies) {

toony.x=loops*100+80;

toony.y=370;

toony.buttonMode=true;

addChild(toony);

toony.addEventListener(MouseEvent.MOUSE_DOWN,toonyClicked);

loops++;

}

// main game loop

addEventListener(Event.ENTER_FRAME,update);

// event to be triggered when the player releases the mouse button

Lib.current.addEventListener(MouseEvent.MOUSE_UP,toonyReleased);

}

private function newToony():Void {

// it's simple: I just create a new Toony instance and place it

// randomly in the game field with a random frame shown

var toony:Sprite = constructShape(Math.ceil(Math.random()*draggableToonies.length)-1);

addChild(toony);

toony.x=Math.random()*580;

toony.y=-32;

toony.alpha=0.5;

// pushing the newly created toony into toonies vector

fallingToonies.push(toony);

}

private function toonyClicked(e:MouseEvent):Void {

returnPoint = new Point(e.target.x, e.target.y);

// if I am not moving any toony...

if (movingToony==null) {

// setting the toony I am about to move to the toony I just pressed the mouse on

movingToony=e.target;

}

private function toonyReleased(e:MouseEvent):Void {

// if I am moving a toony...

if (movingToony!=null) {

// looping through toonies vector

for (toony in fallingToonies) {

// if I am touching a falling toony with the same shape as the toony I am currently moving...

// (that is: if both toonies are showing the same frame...)

if (toony.hitTestPoint(mouseX,mouseY,true) && movingToony.name==toony.name) {

// the toonies match!! Highlighting the falling toony

toony.alpha=1;

}

// putting the moved toony back to its place

movingToony.y=returnPoint.y;

movingToony.x=returnPoint.x;

// setting the variable which hold the moving toony to null

// I am not moving any toony now

movingToony=null;

}

private function update(e:Event):Void {

// if I am moving a toony...

if (movingToony!=null) {

// updating toony position according to mouse position

movingToony.x=mouseX-movingToony.width/2;

movingToony.y=mouseY-movingToony.height/2;

}

var loop:Int = 0;

for (toony in fallingToonies) {

// moving toonies down

toony.y++;

// removing toonies from the stage if they are too close to the bottom of the stage

if (toony.y>280) {

toony.parent.removeChild(toony);

fallingToonies.splice(loop,1);

}

loop++;

}

public static function main () {

Lib.current.addChild(new Toony ());

}

and the result, compiled as SWF, is:

You should know how to play, drag and drop the shapes in the bottom row to match falling shapes.

In the zipped archive Julian shares with us, you can find the complete source code as well as the Flash and Mac App builds.

Rate this post: 1 Star

(5 votes, average: 4.60 out of 5)

Loading ...

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 8 comments

Chris Foster

on April 24, 2012 at 3:02 am

While haXe allows you to compile to multiple target the code above is strictly SWF only isn’t it? Using the ‘flash’ package in your imports means you’re using Flash-specific classes that won’t publish to other targets. You’ll get ‘class not found’ errors when you compile.

The best solution I’ve found so far to ‘write once, compile for anything’ is NME (http://haxe.nme.org) – If you replaced the ‘flash’ package imports in the class above with ‘nme’ package imports you’ll get something that compiles perfectly to SWF and html5 (and presumably others I didn’t test), but still needs a little work in html5 due to some issues with returning the draggable sprites to their origin when dropped.

I’m not disparaging haXe, or the cool work done by Emanuel and Julian, but to imply that the code above is cross-platform seems incorrect.
Chris Foster

on April 24, 2012 at 3:03 am

Sorry, I mistyped the URL for NME – it should be http://haxenme.org
Joshua Granick

on April 24, 2012 at 9:04 pm

Hi Emanuele,

Yesterday I decided to try and port your Toony prototype game sample using even fewer changes from the original Actionscript.

If you’re interested, its posted here:

http://www.joshuagranick.com/blog/2012/04/23/go-from-flash-to-nme-in-5-minutes/

Thanks again for all of the samples you’ve shared over the years. Several of your posts were influential for me when I began learning how to use Box2D :)
ico

on April 24, 2012 at 10:04 pm

well there is a bug the blue whent behind the yellow and i cant use it any more
Joshua Granick

on April 25, 2012 at 3:17 am

Chris,

Although it’s generally best to use the nme.* package when leveraging NME, Julian’s code is completely valid. Haxe supports a “remap” option which will change packages dynamically at runtime. By default, NME compiles using “–remap flash:nme”, so even if you use the flash.* package, the code compiles properly.

In my experience, everything works very consistently in Flash and all of NME’s C++ targets. There’s some inconsistency when targeting HTML5 as well, but it can be done, and its getting better over time. I’d call HTML5 support “beta” for now. The Jeash project was only recently merged into NME, officially.
Joshua Granick

on April 25, 2012 at 3:18 am

Sorry, I didn’t mean at runtime. I meant at compile time. The “remap” option will redirect the root of a package at compile time
Julian Liebl

on April 25, 2012 at 11:31 am

Hi,

@Chris: As Joshua already said, the remap feature of nme handles the flash lib “problem”. Normally I would also use nme.* instead of flash.* because you might run into problems ones a package is available for flash but not for nme (rare case). But for porting the remapping of classes is a great time saver.

@ico: These bugs will happen from time to time. I have the same problem with emanueles prototype. Prototypes are just a prove of concept. We are currently making a toony clone for webOS just for fun. It will be open sourced (just follow my tech blog if you are interested http://diesistmein.name). These bugs will be removed then.

@Joshua: Glad that you could even do less changes to the code. I wasn’t familiar with the integration of swf files in haxe. I always learn new stuff thanks to you :)
Flash Toony prototype ported to Haxe – Emanuele Feronato « eaflash

on April 30, 2012 at 9:09 am

[...] on http://www.emanueleferonato.com Share this:TwitterFacebookLike this:LikeBe the first to like this [...]

italian geek and PROgrammer

This post has 8 comments

ico