Category Archives: Programming

Dargaud cartography, pure JavaScript isn’t so bad…

New year comes with plenty new resolutions, one of them was to finally give a serious try to a small project into pure JavaScript. I used to swear on JavaScript every time it was mentionned. I made several projects using TypeScript and Haxe, and I’m very happy with those techs. But, if there is some strong libraries (Pixi.js, Phaser, three.js) made in pure JavaScript, there are certainly some reasons !? And when you know that those guys are all ex-flashers, you think that they would use a compiled language. But not at all, they don’t want to depend on a company (since Adobe’s failure on Flash…), freedom feeling you said?

Continue reading Dargaud cartography, pure JavaScript isn’t so bad…

Flambe versus the World!

The game.

The (HTML5) engines war
You probably didn’t miss the engines war of the previous month: Unity announced Unity5 with WebGL support (which I already pre-ordered hurrah!) and Unreal Engine 4 did the same with an incredible price. That was for the big guys.
From a more indie friendly point of view, PixiJS continue to kick ass with awesome new features (cacheAsBitmap, blend mode for canvas, SpriteBatch…). Phaser using PixiJS as its rendering engine, is becoming much more popular every day and obviously more stable. PixiJS has really the wind in its sails because OpenFL switched to it for its HTML5 rendering engine!

Continue reading Flambe versus the World!

Live Coding in AS3 using COLT

Hey guys,

I hope many of you have seen this amazing video made by Bret Victor: Inventing on Principle. This is one of the best introduction to live coding if you never heard about it.

Recently, Code Orchestra, released an amazing tool named COLT. It enables live coding in AS3, you will find many great video examples on their page. You can use the tool with a free trial during 15 days, don’t hesitate! It comes with many examples to help you understand the basis, oh and there is one running with the Citrus Engine 😉

Continue reading Live Coding in AS3 using COLT

Create a game like Tiny Wings

Tiny Wings is really a cute game and very fun to play thanks to physics content! It uses Box2D. If you’ve never played the game, give it a quick look :

Generate those type of hills with a physics engine is complicated for a novice. You’ll find cool tutorials on Emanuele Feronato’s website using Box2D and an other on Lorenzo Nuvoletta’s website using Nape.

Someone asks me if it was possible to create this type of game with the Citrus Engine, absolutely! So let’s go for a quick tutorial.

Continue reading Create a game like Tiny Wings

Tiled Map Editor supported in the Citrus Engine

Some days ago, I received a mail from a guy working on a game with the Citrus Engine. It shows me the progress of his game… another blast!
Let me introduce CynicMusic’s game, one of the greatest platformer game I’ve ever seen made with Starling and the Citrus Engine! He hopes to finish it around Christmas, best wishes for Alex Smith. Play the game, graphics are pixel art, and the music is awesome! I really love the mood. I also want to highlight his work on the gameplay : water, reward box… managed by Box2D Alchemy. Take a look on the FPS, 60fps, yep guys I’m impressed!

I had some discussions with Alex about his workflow, he used the Tiled Map Editor to create his levels then export them as PNG files and finally import in Flash Pro. Using Starling, textures images aren’t bigger than 2048*2048. He has created several CitrusSprite with the different PNGs.

I knew the Tiled Map Editor before, but never gave it a serious look! Quickly it appears that it would be really nice to support it directly, but how can we handle the tmx format provided by the software for our map? I found an article on PixelPracht’s website, he wrote some useful classes to parse the map! He made a quick demo for Flixel game engine. It is also possible to create objects inside the software, great news!

So thanks to his work, all hail to him, I’ve been able to write a parser to handle the Tiled Map Editor’s map in the Citrus Engine! Click here to play the demo.
Graphics are free to use, they come from this website.

This is a screenshot of the level :
tiled map

Since the Citrus Engine is not based on grid for collisions detection, I’ve added platform objects. Mixing grid and physics is quick and really a good thing I think. It offers lots of flexibility : you may use both and keep grid interactivity.

Here is the demo code :
Main class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package tiledmap {
 
	import com.citrusengine.core.CitrusEngine;
 
	[SWF(frameRate="60")]
 
	/**
	* @author Aymeric
	*/
	public class Main extends CitrusEngine {
 
		[Embed(source="/../embed/tiledmap/map.tmx", mimeType="application/octet-stream")]
		private const _Map:Class;
 
		public function Main() {
 
            state = new TiledMapGameState(XML(new _Map()));
		}
	}
}

The TiledMapGameState class :

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
package tiledmap {
 
	import com.citrusengine.core.State;
	import com.citrusengine.math.MathVector;
	import com.citrusengine.objects.platformer.box2d.Hero;
	import com.citrusengine.objects.platformer.box2d.Platform;
	import com.citrusengine.physics.Box2D;
	import com.citrusengine.utils.ObjectMaker;
	import com.citrusengine.view.spriteview.SpriteArt;
 
	import flash.geom.Rectangle;
 
	/**
	 * @author Aymeric
	 */
	public class TiledMapGameState extends State {
 
		[Embed(source="/../embed/tiledmap/Genetica-tiles.png")]
		private const _ImgTiles:Class;
 
		private var _level:XML;
 
		public function TiledMapGameState(level:XML) {
			super();
 
			_level = level;
 
			var objects:Array = [Hero, Platform];
		}
 
		override public function initialize():void {
 
			super.initialize();
 
			var box2D:Box2D = new Box2D("box2D");
			//box2D.visible = true;
			add(box2D);
 
			ObjectMaker.FromTiledMap(_level, _ImgTiles);
 
			var hero:Hero = getObjectByName("hero") as Hero;
 
			view.setupCamera(hero, new MathVector(stage.stageWidth / 2, 240), new Rectangle(0, 0, 1280, 640), new MathVector(.25, .05));
 
			(view.getArt(getObjectByName("foreground")) as SpriteArt).alpha = 0.3;
		}
 
	}
}

Here it works on the classic flash display list. It works also on Starling if level dimensions are not above 2048*2048. I’m thinking to use the tile system made by Nick Pinkham (Citrus Engine contributor member) to handle bigger levels! It has been added to the CE, but it’s not 100% stable at the moment.

Again, all the Citrus Engine works & demo are available on its GitHub. Take a look on the map and the different files. Play with it. Don’t hesitate to test this parser and tell me if some important options are missing.

I’ve also gave a look to the Level Architect’s code (official CE’s level editor, created by Eric Smith), for the first time, and can assure that it needs to much work to keep it supported with the new CE version. I prefer to support format from serious tools (Flash Pro, Tiled Map Editor, Gleed) and continue to work hard on the Citrus Engine.

At the moment I’m working on something very huge for the Citrus Engine and I hope to be able to come back soon with very good news. Stay tuned!

Live4Sales, a Plant vs Zombies clone

Edit : Nape version

One week after the Osmos demo, I offer a new game made with the Citrus Engine based on an other popular game : Plant vs. Zombies!

If you have never played this game, try it now!

This is my clone made with the CE working as a browser game, air application, and on mobile devices :
The web demo. I didn’t make a preloader, to have the same source code between each version.
There is no end in the game to be used as a stress test!
Sources are available on the CE’s GitHub.


Continue reading Live4Sales, a Plant vs Zombies clone

Create a game like Osmos

2 days ago, I’ve offered a new beta for the Citrus Engine. I had really good feedbacks, thanks guys for having regard on the engine!
This new beta also introduced a new demo which was again a platfomer game. It’s time to show, thanks to a quick case study, that the Citrus Engine is not only made for platformer games! For this first example, we will create a game like Osmos. I really love this game, it’s zen, gameplay mechanics are easy and powerful, definitely a good indie game.

In 4 hours of work, this is what I made. You can drag & drop atoms.
Source are available on the CE’s GitHub, in the src/games package.

Continue reading Create a game like Osmos

Citrus Engine V3 Beta2

Hey there! On this hot summer day, I’m happy to share a new major beta for the Citrus Engine! There are lots of new features, improvements, bug fixes and a new demo for mobile devices. It is also updated on the last version of each library.

Download it on Google Code or GitHub.

Continue reading Citrus Engine V3 Beta2

An entity/component system’s attempt using Box2D

One year ago, I heard about the Entity/Component Model for the first time. It seemed to be awesome for game design / development. This is 3 links/resources for a good introduction : Gamasutra the Entity Component Model, Entity Systems are the future of MMOG development, Entity Systems. Then Richard Lord has made a very good blog post with code example using his own framework : Ash. And finally, Shaun Smith’s experience using Ash.

All the code example is available on the new Citrus Engine’s GitHub repository. Compile the src/entity/Main.as

During this year, entity/component system has always been something I wanted to try… but that was scary : this is not OOP, that’s a new way of programming. I wanted to add this system to the Citrus Engine as an option to handle complex object. For basic object OOP is great and easy to set up, but for complex game object which may have new abilities on the fly, you’ve quickly a Class with 700 lines of code and conditions. Not easy to maintain some weeks later. The Citrus Engine handles physics engine (Box2D & Nape) & a simple math-based collision-detection system. However it comes built-in with a “platformer” starter-kit based on Box2D, so I made my entity/component system’s experiments using Box2D. And that was not simple.

Continue reading An entity/component system’s attempt using Box2D