Tag Archives: actionscript3

Box2D Sound Spectrum

This week is really challenging : my second year school project has started this week. It’s a team project with a graphic designer, a designer, a project manager and me as a developer. Our concept sounds very promising!

No matter, this short introduction explained that I’m really busy, so this experimentation is not perfect due to a lack of time…
Anyway, click here to see a sound spectrum made with Box2D and the Citrus Engine using BitmapData.

Continue reading Box2D Sound Spectrum

Finally using SWC for art in the Citrus Engine

Two days ago, I introduced a way to target iOS with the Citrus Engine using the metadata tag Embed. Forget that way, it is really painful.

Instead of using Embed everywhere and probably rewrite method for the CE’s ObjectMaker, we will use a SWC file. Refering to Wikipedia, an Adobe SWC file is a package of precompiled Flash symbols and ActionScript code that allows a Flash or Flex developer to distribute classes and assets, or to avoid recompiling symbols and code that will not change. SWC files can be generated by the Flash authoring tool, and by Flex. They are sometimes referred to as class libraries and cannot be directly executed by the Flash Player.

So in this file, there will be our level with all its graphics, animations, sounds… We will not have anymore external datas. Moreover our level in the flash IDE will not contain only rectangle shape like previously, but our graphics and animations :
Screenshot of the level
It’s more user friendly isn’t it ? My hero is always a rectangle shape because I’ve not the orignal fla right now.

So to do that just import your graphics and animations into your fla’s library. I recommend to create a movie clip named Level and put it on the stage, name it and add a simple trace code into it to inform what is your current level. We will add all our layers and objects in!
Then put the graphics inside your original Background movie clip for example. Next, inside the movie clip’s properties check export for ActionScript3 and set as class Background. Finally add this code into the movie clip :

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

Before, we had a background.jpg now we have a class!

For animation it’s the same, but be careful : if you use it in code after it may have a problem of duplicate name, so in my case with the “Roseau” animation, my view is set up as RoseauAnimation. My library :
library screenshot

Now that your level is set up export it as SWC, then import it in your project. And finally to create your level in the Citrus Engine :

package {
 
	import com.citrusengine.core.CitrusEngine;
 
	import LevelA1_fla.Level_1;
 
	public class Main extends CitrusEngine {
 
		public function Main() {
 
			super();
 
			state = new GameState(new Level_1());
		}
	}
}

Et voilà! You can download my zip. There is still the problem with hero deplacement coming from the new version, anyway if you start a new project from scratch with this one, all will work fine!

Now you just have to import sounds/videos in your SWC too…
Be careful if you use a SWC and target the Web, because the swf becomes heavy and if there isn’t an external preloader, people may leave before played your game!

Finally if you want to have great performance on your mobile game, you should take a look on CE blitting method. And you may use Embed metadata tags to add your assets to your game state. I recommend to add them directly in your class, don’t use the level editor. Programming is not always easy 😉

Doubly linked list and object pooling

After holidays, it’s time to get back to work 🙂
I was really busy last month, so this is some news on what I did and what is going on :

– I’ve made some experiments with the Citrus Engine on the Hero adding some functionality. But what appears is the Hero class becomes more and more complex… So I asked its creator if he knows a system/model which has a modular way to add features to the hero. And he gives me some information about the Entity/Component model. Woah, it is awesome! It’s really a new way of thinking about programming. No more OOP. This is 3 useful links/resources if you are interested : Gamasutra the Entity Component Model, Entity Systems are the future of MMOG development, Entity Systems. This links are very interesting, but there isn’t any implementation. You can find implementations with the PushButton Engine (flash), Artemis (java). However it is really complex, so I was not able to create a Component/Entity System for the CE due to my lack of experience… but if its creator has time, he will do!

– I was in holidays at Praha (Czech Republic), amazing city/country! And beer is really cheap 🙂

– I’m currently reading the book of Jesse Schell, The Art of Game Design it’s a masterpiece! Really, really interesting, lots of awesome advices. Approved & Recommended!

– I’m working/designing my next portfolio. It will be nice… 😉

– On Thursday 15 September, I go back to the Gobelins school! And I will make a point with Tiffany about Kinessia. We are thinking to create the game for mobile. I hope we will have enough time (there are already lots of project at school…), so stay tuned!

– Mobile, tablet and game design/programming is interesting me more and even more. This is two good links on mobile game programming : Starting with AIR for Android and iOS – building one app for both platforms, and Building mobile games in Adobe AIR – optimization techniques.

– And finally I’m also waiting FDT5 to invest more time in haXe and WebGL!

I think it’s enough for the news at the moment! Now it’s time to speak about the topic, this week I wanted to make some algorithms, doubly linked list and object pooling are a good exercice. Previously I made an oral in my school to introduce recurisivity and data structures (pdf link in french). Doubly linked list and object pooling are techniques optimizations used in game development and especially on mobile devices.

Continue reading Doubly linked list and object pooling

Create objects and Art in the Citrus Engine

Update : if you want a version with a SWC for targeting iOS, please refers to this post.

Hey ! I started to make my school game project this week. I advance quickly, it should be fine for the end of june !

For this third tutorial on the Citrus Engine, I explain better how you can use the Flash IDE as Level Editor, and I show two classes that I’ve created for my game. Here is what you will have.

Continue reading Create objects and Art in the Citrus Engine

Create a breakout game with the Citrus Engine

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

Playing with Blend Mode

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 !

Dynamic variable in AS3

An other short practical script to access to dynamic variable into a loop :

var fiole1:Fiole1, fiole2:Fiole2, fiole3:Fiole3, fiole4:Fiole4, fiole5:Fiole5;
for (var i:uint = 1; i < 6; ++i) {
 
	this["fiole" + i].addEventListener(MouseEvent.MOUSE_OVER, _over);
	this["fiole" + i].addEventListener(MouseEvent.MOUSE_OUT, _out);
}

Simple BevelFilter

Some months ago, I was at Turbulent Média Inc. in Montréal, Canada as a flash trainee. During this internship I discovered the BevelFilter class.
At this time, I’m creating my Portfolio (it will be online soon), and I reuse an effect discovered there for buttons.
Here is my button.

And now the simple code without any Tween !

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
package {
 
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.filters.BevelFilter;
   import flash.filters.BitmapFilter;
 
   public class Bevel extends Sprite {
 
       private var _effect:BevelFilter;
       private var _filter:BitmapFilter;
       private var _myFilters:Array;
       private var _angle:uint;
 
       public function Bevel():void {
 
	    btn.addEventListener(Event.ENTER_FRAME, _animation);
	}
 
	private function _animation(evt:Event):void {
 
	   _effect = new BevelFilter(5, _angle, 0xFFFFFF, 1, 0x000000, 10, 10, 1);
	   _filter = _effect;
	   _myFilters = [];
	   _myFilters.push(_filter);
	   btn.filters = _myFilters;
 
	    _angle +=2;
 
	    if (_angle > 360) {
		_angle = 0;
	    }
         }
    }
}