Leichtgewicht

During the last weeks I studied the Spark project a lot. It fascinates me as a project. Of course there are drawbacks, but in general, all-in-all the sub-projects are charming me with a lot of creativity, well crafted code or just by being fresh.

I want to support the open-source community around flash, especially Libspark, and because of that I’ve decided to give it a try:  this is the first article in a new series “I am proud to introduce to you”:

Libspark: CharacterWalker

The CharacterWalker is one of the poor documented parts of Libspark. In fact its even kind of hidden, but I saw it and it immediately triggered my old love for rpg’s. I was eager to finally see myself in 32px wandering around the screen.

The few 5 classes available don’t do a lot, in essence they take a BitmapData instance in 3 common formats and create a figure with it that animates. The available formats are:

• RPG Maker 2000
• RPG Maker XP
• RPG Maker VX

To try it out I chose to use the VX format. I could have used a predefined character of the program but I really wanted to see my work on the screen.

As in most RPG’s the character has to be shown from front, back, left and right side. To animate the character its necessary to have at least 3 frames that show the movement.

The painting was quite some work for me, who never did serious pixelart. Luckily the next part was a lot easier: just import the CharacterWalkerVX and pass-in the PNG as BitmapData and you get a walking me:

package
{
	import org.tarotaro.flash.animation.CharacterWalkerVX;
	import flash.display.*;

	public class SimpleTest extends Sprite
	{
		[Embed(source="martin.png", mimeType="image/png")]
		private static const CHARACTER: Class;
		private static const CHARACTER_BD: BitmapData = Bitmap( new CHARACTER() ).bitmapData;

		public function SimpleTest()
		{
			var walker: CharacterWalkerVX = new CharacterWalkerVX( CHARACTER_BD );
			walker.startWalking();
			addChild( walker );

			var walker2: CharacterWalkerVX = new CharacterWalkerVX( CHARACTER_BD );
			walker2.x = 32;
			walker2.left();
			walker2.startWalking();
			addChild( walker2 );
		}
	}
}

Okay: a complete iso-engine was be a bit oversized but I could do at least a small example. For that I’ve created a wrapper class called CharacterMover, it allows to just pass-in your CharacterWalker and you’ll get the handy method walkSteps( leftSteps: int = 0, topSteps: int = 0 ). With this the character started to move on the screen.

package
{
	import flash.events.Event;	

	import at.leichtgewicht.libspark.characterWalker.CharacterMover;
	import org.tarotaro.flash.animation.CharacterWalkerVX;
	import flash.display.*;

	public class WalkingTest extends Sprite
	{
		[Embed(source="martin.png", mimeType="image/png")]
		private static const CHARACTER: Class;
		private static const CHARACTER_BD: BitmapData = Bitmap( new CHARACTER() ).bitmapData;

		private var _mover: CharacterMover;
		private var _leftMultiplier: int = -1;

		public function WalkingTest ()
		{
			var walker: CharacterWalkerVX = new CharacterWalkerVX( CHARACTER_BD );
			_mover = new CharacterMover( walker );
			addChild( _mover );

			_mover.addEventListener( Event.COMPLETE, onWalkingComplete );
			onWalkingComplete();
		}

		private function onWalkingComplete( event: Event = null ): void
		{
			_leftMultiplier *= -1;
			_mover.walkSteps( 5 * _leftMultiplier );
		}
	}
}

That wasn’t enough! I just had to make it controllable by keyboard. So I went on to create a KeyboardCharacterMover which wraps the CharacterMover and listens to the stage’s key press. Because stage was still default gray, I’ve decided to add a little color background and some small features as well as another character. Here is the full example:

Download Sources

I know its a very playful first entry. I hope you enjoyed this first trip to japanese open-source anyway. If you have got special interests about other parts of libspark or other open-source libraries, let me know and I will if I can write about it in my next entry.

Thanks Tarotaro! Thanks Spark team!

Tags: ActionScript 3, Flash, libspark, The Spark Project

filed as Uncategorized
RSS 2.0 feed
You can leave a response, or trackback from your own site.