Tag Archives: flash

Rugby game, AS3 – CE – haXe versions

AS3, Citrus Engine, Flash, Games, Haxe, Programming, , , ,

Two weeks ago at school we made a simple rugby game with graphics provided.
I take this opportunity to compare how I develop the game if I use different framewok :

– in AS3 with linked list and object pooling (refers to this previous tutorial). Obviously it is a little game, and we don’t need complex optimization, but that was a good implementation exercice. Moreover I’ve updated my class 😉

– with the Citrus Engine, managing Box2D. It was not easy to handle physics to have the same result that the basic AS3 version, and actually it is not the same (there is some inertia), but I really like how Box2d handle collision. We can manage before collision, the beginning and the ending. It is really more precise than a hitTestObject. Moreover we can separate art from physic body, and so change easily the “collision box”.

– last night, with lbineau we made a programming evening around haXe (and some beers 🙂 ). The idea was really simple : make the same game, using existing AS3 classes with haXe. I have already given a chance to haXe previously and saw how powerful it is. This time, I see how easy it is to use previous AS3 code. I didn’t rewrite my Opponent and Player class! And I used the fla to link graphics without any trouble! However I’m a bit disappointed : I used most of the time original AS3 objects instead of haXe primary objects. What I need right now is FDT5 with its full haXe support! Can’t wait for it… Oh! If you’re interesting by haXe, you should take a look on NME, it seems to be amazing.

The zip with the three versions.

Introduction to Embed art in the Citrus Engine

AS3, Citrus Engine, Flash, Games, , , , , ,

Update : using metadata tag Embed is not the easiest path if you want to target iOS, take a look on this post using SWC.

Today this is a quick post based on an older one : Create objects and art in the citrus engine.

If you want to target iOS platform for your game, you must know that you can’t load swf at runtime. Indeed all your data must be “packaging” in one file an .ipa. So you are not able to load external data. To pass over that restriction, you need to use the metadata tag Embed properties. This is a blog post for Embedding Ressources with AS3.

So, what we will do today is to adapt the previous post to be able to target iOS. I don’t have enough time to do it entirely, so this will only be an introduction, sorry.

Let’s start now : on your level.fla add AS code to embed some assets :

[Embed(source="../../assets/grass.png")]
var GrassPic:Class;
Grass.picture = GrassPic;
 
[Embed(source="../../assets/elements.png")]
var BackgroundElementPic:Class;
BackgroundElement.picture = BackgroundElementPic;
 
[Embed(source="../../assets/background.png")]
var BackgroundPic:Class;
Background.picture = BackgroundPic;
 
[Embed(source="../../assets/objects/Roseau.swf")]
var RoseauAnim:Class;
Roseau.animation = RoseauAnim;

Here we are using the dynamic property of MovieClip, more information about it : Adobe doc. Don’t forget to name your stage MovieClip!
Then into your background MovieClip add this code :

var className = "com.citrusengine.objects.CitrusSprite";
var params = {
	view: this.picture
}

Don’t forget the this or it will not work! Now, your asset is embed 😉
It is really easy to embed graphics, but what about SWF ? How can we handle animation on this ?

Go back into our two older methods : roseauTouche & roseauFin. And change the code for :

private function _roseauTouche(cEvt:ContactEvent):void {
 
	if (cEvt.other.GetBody().GetUserData() is Hero) {
 
		 ((MovieClip(SpriteArt(view.getArt(cEvt.fixture.GetBody().GetUserData())).content).getChildAt(0) as DisplayObjectContainer).getChildAt(0) as MovieClip).gotoAndPlay("white");
	}
}
 
private function _roseauFin(cEvt:ContactEvent):void {
 
	if (cEvt.other.GetBody().GetUserData() is Hero) {
 
		var roseauMC:MovieClip = MovieClip(SpriteArt(view.getArt(cEvt.fixture.GetBody().GetUserData())).content);
		var loader:Loader = roseauMC.getChildAt(0) as Loader;
		var mc:MovieClip = (loader as DisplayObjectContainer).getChildAt(0) as MovieClip;
		mc.gotoAndPlay("black");
	}
}

Dammit!! It is the same code for this two functions, the first is just more condensed. I will not explain more, because I’m always surprised of those lines… 😀 However you can find informations here and there.

My zip. There is some problem with hero movement (jump and move to travel) due to the update on the last CE’s version. I don’t know where it comes from, but you can use it without problem. I made some test from scratch and it works 😉

I know that there is lot of works to do from there, but that’s a good start. You need to put your level into an asset in your state finally, and see what happen. You would write a new function to ObjectMaker to enable that, probably.

I wouldn’t dig into it more, because I’m not sure it is the best way… It is a bit complex if you want to manage animation. The updateAnimation method of PhysicsObject class doesn’t work this way. And moreover there is an other method to embed data :
“Remember you can specify a MovieClip linkage ID as your view property rather than a path to a SWF/PNG. If you’re using Flash Develop, FDT or Flash Builder, you can embed your MovieClip graphics that you made in the Flash IDE using SWCs”.

Anyway that was a cool introduction to embed assets, isn’t it ?

Create a ladder for the Citrus Engine

AS3, Box2D, Citrus Engine, Flash, Games, Physics, , , , ,

Hi, today a quick post about how to create a ladder for the Citrus Engine.
It is a preview version, Michael Kerr requested me for his flash game scripting class !

I’m working with Eric to add it into the original package !!

So here is the result : the ladder in action

Continue reading Create a ladder for the Citrus Engine →

Teleporter, treadmill and cannon

AS3, Box2D, Citrus Engine, Flash, Games, Physics, , , ,

After my game school project (Kinessia), I’m still doing some experiments with the Citrus Engine.

On its latest update, there was some new objects :
– a powerful particle system.
– new objects : missile, reward and reward box.

In this tutorial, I wil explain how to create new specific object which extends a Citrus Engine object.
At the end, we will have : a teleporter, a treadmill and a cannon that fires missile !
An ugly example.

Continue reading Teleporter, treadmill and cannon →

CitrusEngine flash extension

Citrus Engine, Flex, JSFL, , , ,

Hey there,

While improving my skills on the Flash Platform, I started to learn Flex and on an other way JSFL (using for Flash IDE extension).
So I mix them together, and I offer to the CE community my first Flash extension.

You can find it here : https://github.com/alamboley/CitrusEnginePanels
It requires Flash CS5.

On a project, you have always recurrent tasks. Using the CE for your game, you will create a hero and using the right labels for example. Adding a platform, baddy, cloud in the flash IDE to create a level required to create Movie Clip and specify their classname, their filepath (swf, png…) and some others options.

So what can you do with this extension ? In what way it will improve your productivity ?
I made it to be really simple to use, fast and efficient. Things that you can do with it :
– generate the correct labels for your hero, baddy, missile… such as idle, walk, jump… on a label layers !
– add to your level CE objects (hero, platform, coin, cloud…) on a specific layers with the same name and color, with some options (filepath, classname if not the original one), specific options too (oneWay for platform, parallax…).

Notice that you need to create only one time your object and duplicate them on your stage to add many. If you want to create a similar object too, just duplicate it in the library.

All of the CE objects are not in this extension, I will add them later. Before that, I would like to have your opinion about the plugin : how to improve it ? more options ?
I think that somes options for instance the endX and endY should not be included in the moving platform level fla, and be controlled by code…

Any idea is welcome 🙂

Create a breakout game with the Citrus Engine

AS3, Box2D, Citrus Engine, Flash, Games, Physics, Programming, , , , , ,

Today this is a new tutorial on the great Citrus Engine framework. Before starting my school project, I wanted to try using box2D inside the Citrus Engine, so I will show you how create a breakout game !

Click here to play the game, don’t forget to click in the swf to enable keyboard.

Continue reading Create a breakout game with the Citrus Engine →

Webcam picture cutout

AS3, Flash, Php, Webcam, , , , ,

In many websites, for a most immersive surf you take a shot of your face. Often, it is simply a red square. You move your head in, and you take the picture; it is really easy to do. However if you want to take only the head with a circle for exemple it’s a bit more difficult.

This is a script to do that (on the website, the swf is opened with a lightbox and the picture is saved) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

package {
 
	import com.adobe.images.PNGEncoder;
 
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.external.ExternalInterface;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.media.Camera;
	import flash.media.Video;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.URLRequestHeader;
	import flash.net.URLRequestMethod;
	import flash.utils.ByteArray;
 
        /**
	 * @author Aymeric
	 */
 
	public class CaptureTete extends Sprite {
 
		public var button:Sprite;
 
		private var _cam:Camera;
		private var _video:Video;
 
		private var _bitmapData:BitmapData;
		private var _bitmap:Bitmap;
 
		private var _conteneur:Sprite;
		private var _drawPanel:Sprite;
 
		public function CaptureTete() {
 
			_cam = Camera.getCamera();
			_video = new Video(320, 240);
 
			_bitmapData = new BitmapData(_video.width, _video.height);
			_bitmap = new Bitmap(_bitmapData);
 
			_video.attachCamera(_cam);
			_video.x = _bitmap.x = 20;
			_video.y = _bitmap.y = 40;
 
			addChild(_video);
 
			_conteneur = new Sprite();
			addChild(_conteneur);
 
			_drawPanel = new Sprite();
			_drawPanel.graphics.clear();
			_drawPanel.graphics.lineStyle(2, 0xeea41e);
			_drawPanel.graphics.beginFill(0xDEFACE, 0);
			_drawPanel.graphics.drawCircle(80, 80, 80);
			_drawPanel.graphics.endFill();
			_conteneur.addChild(_drawPanel);
			_drawPanel.x = 100;
			_drawPanel.y = 100;
 
			button.buttonMode = true;
			button.addEventListener(MouseEvent.CLICK, _captureImage);
		}
 
		private function _captureImage(e:MouseEvent):void {
 
                        button.removeEventListener(MouseEvent.CLICK, _captureImage);
 
			_bitmapData.draw(_video);
			_conteneur.addChild(_bitmap);
 
			_conteneur.setChildIndex(_drawPanel, _conteneur.numChildren - 1);
 
			_cam = null;
			removeChild(_video);
			_video = null;
 
			_bitmap.mask = _drawPanel;
 
			_bitmapData = new BitmapData(320, 240,true,0x000000);
			_bitmapData.draw(_conteneur);
 
			var bitmap:Bitmap = new Bitmap(_bitmapData);
			_conteneur.addChild(bitmap);
 
			var bmd:BitmapData = new BitmapData(160, 160);
			var rect:Rectangle = new Rectangle(100, 100, 160, 160);
			bmd.copyPixels(_bitmapData, rect, new Point(0, 0));
 
			var pngStream:ByteArray = PNGEncoder.encode(bmd);
 
			var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
 
			var savePNG:URLRequest = new URLRequest("save.php");
			savePNG.requestHeaders.push(header);
			savePNG.method = URLRequestMethod.POST;
			savePNG.data = pngStream;
 
			var urlLoader:URLLoader = new URLLoader();
			urlLoader.load(savePNG);
 
			urlLoader.addEventListener(Event.COMPLETE, _loaded);
		}
 
		private function _loaded(evt:Event):void {
 
			evt.target.removeEventListener(Event.COMPLETE, _loaded);
			ExternalInterface.call("closeLightbox");
		}
	}
 
}

You can found the external library made by Mike Chambers : as3corelib.

The Php script to save it :

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
 
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
 
	$png = $GLOBALS["HTTP_RAW_POST_DATA"];
	$img = $_GET["img"];
	$filename = "images/img_". mktime(). ".png";
	file_put_contents($filename, $png);
} else {
	echo "Encoded PNG information not received.";
}
 
?>

To go further, we can draw our own circle or an other shape. Using a Php Session for the filename is cool too !
Exemple (don’t worry, I do not save ! 😉 )

Flash Circle Preloader

Flash, , , ,

A beautiful preloader is important for a flash website. Indeed, if you need to load much data, your preloader will be visible all during this time. And if it is not interssant, visitors may leave your website.

Here are some examples of interesting preloader : http://www.prettyloaded.com.

Most often, preloader are made by graphic designer on 100 frames without using any code.
Developpers integrate them, and use gotoAndStop on an enterFrame to display the loading progression.

This is my circle preloader.
To make this, I used 2 masks moving like the circle. Of course it could be done with code, but it would be a headlock with cosinus and sinus !
You can find the source here.

Playing with Blend Mode

AS3, Flash, , ,

Recently, I tried some BlendMode in AS3. Thanks to them we can reproduce some cool effects of Photshop.
This is a simple script to do that. I thought it’s a nice effect !

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

package {
 
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.Point;
 
	[SWF(backgroundColor="#000000", frameRate="31", width="600", height="500")]
 
	/**
	 * @author Aymeric
	 */
 
	public class MouseFollower extends Sprite {
 
		private var _container:Sprite;
 
		private var _bData:BitmapData;
		private var _img:Bitmap;
		private var _circle:Shape;
 
		public function MouseFollower() {
 
			_container = new Sprite();
                        _container.visible = false;
			this.addChild(_container);
 
			_bData = new BitmapData(600, 500, true, 0x00FF00);
 
			_img = new Bitmap(_bData);
 
			_circle = new Shape();
 
			this.addChild(_img);
 
			_container.addChild(_circle);
 
			this.addEventListener(Event.ENTER_FRAME, _ef);
		}
 
		private function _ef(evt:Event):void {
 
			_circle.graphics.clear();
			_circle.graphics.beginFill(Math.random()*0xFFFFFF);
			_circle.graphics.drawCircle(0, 0, 10);
			_circle.graphics.endFill();
 
			var diffx:int =	mouseX - _circle.x;
			var diffy:int = mouseY - _circle.y;
 
			_circle.x +=diffx * 0.05;
			_circle.y +=diffy * 0.05;
 
			_bData.draw(_container, null, null, BlendMode.ADD);
			_bData.applyFilter(_bData, _bData.rect, new Point(), new BlurFilter(5, 5, 2));
		}
	}
}

This two lines are important if you want to keep an eye on your CPU usage :
_circle.graphics.clear();
_circle.graphics.endFill();
BlendMode are more than ever CPU’s eater !