I am yet to implement bitmap textures and perspective but the majority of the work has been done. At the moment it can wireframe and render an orthogonal view I plan to make the source available once the first Lads game is released.

Here is a demo.

UPDATE 08/04/2011: I have now added perspective projection and camera support.

Games are a powerful medium. While a film can only provide a few hours of entertainment to a group of people, a game can provide potentially limitless entertainment to a potentially limitless audience through the lure and viral spread of social competition. When Breaka commissioned us to create a microsite, we put a game front and centre. A good game needs a great idea, a tonne of play-testing, ten tonnes of optimisation and a solid framework. In this article I’m going to introduce you some of the processes involved in creating the Breaka Island Jetski Challenge.

The First Step In Creating A Jetski Game Is Creating The Jetski

The Jetski Challenge was born as a playable proof of concept, the demo. The demo featured a jetski driving around an infinite spread of water. During this initial phase of development, the most important aspect was making the Jetski look, feel and control like a real jetski, through real water.

Jetskis tilt, roll and flip. With this observation we knew immediately that the jetski had to be represented in three dimensional space (3D). Early tests showed that placing entire 3D worlds in Flash put a heavy burden on even the most powerful computer processors so we had to find a way to respresent the game’s world in something other than 3D. To achieve the look of 3D whilst maintaining the computing performance of 2D, we decided to place the Jetski in a small 3D box and place that 3D box inside a top-down 2D environment. This gave the game its bird-eye-view aesthetic. To render the 3D we used Flash 3D framework Papervision3D. To host it, and eveything else arround it, we wrote our own 2D framework – which would later become the game’s engine. With rendering sorted, we moved onto control and physics.

Jetskis drift, glide, carve and jump. The next step was to give this control to the player and have it reflected in a realistic way. As the jetski speed up we tilted the 3D model’s hull back. As the jetski turned left or right we tilted the model’s hull left or right to imitate lean. We forced the control to lag to give the illusion that the jetski had ability to generate momentum in the water. We zoomed in on the model whenever the jetski jumped and moved a shadow up and left to create the illusion of height. We placed a spray particle generation system at the base of the jetski to imitate the wake. Once each of these techniques were combined into the demo, we had a pretty sweet drivable jetski on our hands.

The Second Step In Creating A Jetski Game Is Creating The Game

While burning around an infinite pond with a turbo-charged jetski may be fun for the developers in the Flash Department, it may not be enough to win over the discerning player. The game needed an angle – a world to drive through and a challenge.

To create the world we crafted a tool. The tool was similar in functionality to the Breaka Island Flag Designer and allowed us to drag and drop checkpoints, obstacles, bonus items, sand banks and trees, amongst other elements, into the game world. With the tool we created three separate tracks: one focused on speed, one focused on stunts and one focused on survival. The aim of the speed track was to design the track with a clear driving line in mind. The aim of the stunt track was to place enough jumps to give the player ample air-time to perform stunts within. The aim of the survival track was to pump the world with enough obstacles to make it hard for the player to navigate.

With each track we crafted a matching game mode. The speed track was given a game mode that recorded the player’s time for three laps. The winning player would have the fastest time around the track. The stunt track was given a mode with a set amount of time. The winning player would be the player that could obtain the highest score from successful stunts. The survival track was given health and a small countdown timer. A player would slowly accumulate score based on the time the survived, dying if they lost all health. Each checkpoint would award them a time bonus allowing them to play for longer. The winning player would be the player that had survived the longest.

With these tracks and modes we built an engine.

The Biggest Step In Creating Any Game Is Creating An Engine

Game engine development is not for the feint of heart. The process can take weeks for even a small game and the only time it works is when its finished. Rather than babble about the process we went through to develop the engine, I thought I’d instead list the technologies we used and developed. A forewarning: This is some technology enthusiast stuff – if the terms ‘byte data’, ‘input events’ and ‘z-indexing’ don’t mean anything to you, you may want to skip this bit.

Input Management
While AS3 has improved control where Keyboard Input is concerned, AS2 was easier to use. An input manager was created to keep track of which keys were pressed and which actions they corresponded to. The net benefit of creating our own input manager is that it allowed multiple key inputs to register as pressed, overriding the caveat of the operating system level key repeating.

Map, Entity, Obstacle Management
A map able to load and house the tracks created in the world designing tool. The map contained the ability to house entities and was in charge of testing collisions, running the game loop and culling off-screen objects. The map also had the ability to draw the water texture according to position co-ordinates, giving the illusion that the water was infinite in all directions and a cool script which turned any vector shape into a sandbank with feathered edges. As all of the games entities and obstacles are contained with the map, the majority of the distance and angle calculation, collisions, depth swapping and camera movement are be handled by it or delegated to it.

Sound Management
To house the rocking soundtrack, sound effects and engine noises, a multi-track sound manager was created. The sound manager allows sounds to be grouped into tracks in a similar fashion to that found in DAW software. The sound manager could loop sounds, play multiple sounds, maintaining track volume or sound volume control.

3D Rendering
To render the jetski we used the popular Papervision3D libraries. PV3D is an invaluable tool for 3D in flash, maintained by the Flash Community. Those interested should also take a look at Away3D, which we used for the rest of the Breaka Island website.

Asset Management, Zip Compression
To store the game’s assets we used the NoChump Zip Compression Library. This allowed the games assets to be of minimal file size and embedded directly into the SWF file. The zip data was managed by a custom asset management library.

Game Over, Man, Game Over

All of these elements tied together with some Cru magic are a part of what allowed the game to come to life. Make sure you have a play through of the end product on breakaisland.com.au. See if you beat the high score.

I announce the first public release of TweenDark, an open source, lightweight, fast AS3 tweening engine.

Click here to read more.

So, I’ve been doing some more work on Rotat towards rotation. In this tech demo, the wall collision has been removed in favour of the ability to climb walls.

I am certain that this has opened up some interesting gameplay possibilities – especially as the two behaviours can complement each other.

EDIT: The demo has been updated with more accuracy and wall clipping included. We’re still buggy, but coming…

This is an early demo of the newly rewritten Rotat Engine.

Left / Right walk, space jumps.

Some of the cool features it has:

• Tight, pixel-based collision detection.
• Real-time gravity.
• Camera control.

The core has also been made in a very robust MVC-like pattern.

This game will be a Handsome Lads game; as this is a technology blog, any further announcements about it will probably be made there.

So I’m starting to take a look at Flash Player 10′s 3D capabilities. I was initially a little disappointed with what was offered, but at a closer glance, this plane-based 3D engine allows me to create my very own polygon-based rooms.

What I have above is a working example of one such 3D room. This sample is a tech-demo for the evolution of Rotat the Rat’s level tools, a game that has nothing else in common with Rotat the Rat.

package djw.display {

	import cru.interfaces.ISizeable;
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Rectangle;

	/**
	 * The Widget class is a blank container designed to override inbuilt resizing
	 * methods. A Widget can be extended in place of a Sprite where redrawing is to
	 * be automatically handled.
	 *
	 * Widgets are practical for the creation of scalable user interface elements.
	 *
	 * Widgets also have stage management functions including automatic event
	 * listener population.
	 *
	 * Widgets can also size to targets, stages or rectangles.
	 *
	 * @author Dale J Williams / Cru Digital;
	 */
	public class Widget extends Sprite implements ISizeable {

		public static const VERSION			:String		= "2.0.0";

		protected var _width				:Number		= 0;
		protected var _height				:Number		= 0;
		private var _onDraw					:Function;
		private var _stageResizable			:Boolean;
		private var _onAddedToStage			:Function;
		private var _onRemovedFromStage		:Function;
		private var _managedListeners		:Array;
		private var _stageListeners			:Array;

		/**
		 * Widgets are designed to be blank on instanciation. Though a drawing
		 * function can be set at this stage, it is not required or recommended.
		 * @param	on_draw		Will set the drawing function on instanciation. This
		 * is not required and can set later using the onDraw setting.
		 * @param	stage_resizeable	Will set the drawing function to call
		 * whenever the stage is resized.
		 */
		public function Widget(on_draw:Function = null, stage_resizeable:Boolean=false) {
			if(on_draw != null)
				onDraw = on_draw;
			stageResizable = stage_resizeable;
		}

		/**
		* drawNextRender can be called whenever a change requires the Widget to need
		* to redraw. This is the recommended drawing function.
		* The drawNextRender function will call the onDraw function, if set, on next
		* render.
		*/
		public function drawNextRender():void {
			if (stage) {
				super.addEventListener(Event.RENDER, _callDraw, false, 0, true);
				super.addEventListener(Event.ENTER_FRAME, _callDraw, false, 0, true);
				stage.invalidate();
			}
		}

		/**
		 * Can be used to cancel a drawNextRender function before it is called.
		 */
		public function cancelNextRender():void {
			if (hasEventListener(Event.RENDER)) super.removeEventListener(Event.RENDER, _callDraw);
			if (hasEventListener(Event.ENTER_FRAME)) super.removeEventListener(Event.ENTER_FRAME, _callDraw);
		}

		/**
		* Forces the onDraw function to be called immediately. Calling redraw instead
		* of drawNextRender will force the visual update before the next render. This
		* method will override stage management.
		*/
		public function redraw():void {
			cancelNextRender();
			if (_onDraw != null)
				_onDraw();
		}

		/**
		 * Adds a stage managed event listener. Event listener is active when stage is present.
		 * @param	type		Event type
		 * @param	listener	Function to call
		 * @param	target		Optional target to assign listener to
		 */
		public function manageEventListener(type:String, listener:Function, target:Object = null, ...targets):void {
			targets.push(target)
			for each(target in targets){
				if (!target) target = this;
				if (!_managedListeners) _managedListeners = [];
				_managedListeners.push([type, listener, target]);
				if (stage) target.addEventListener(type, listener);
			}
			_manageStageFunctions();
		}

		/**
		 * Removes a stage managed event listener.
		 * @param	type		Event type
		 * @param	listener	Function to call
		 * @param	target		Optional target to assign listener to
		 */
		public function unmanageEventListener(type:String, listener:Function, target:Object = null, ...targets):void {
			if (!_managedListeners) return;
			targets.push(target);
			for each(target in targets){
				if (!target) target = this;
				if (target.hasEventListener(type)) {
					var managedListener:Object;
					for (var i:int = 0; i < _managedListeners.length; i++) {
						managedListener = _managedListeners[i];
						if (managedListener[0] == type && managedListener[1] == listener)
							_managedListeners.splice(i, 1);
						target.removeEventListener(type, listener);
					}
				}
			}
		}

		/**
		 * adds a managed event listener to the stage
		 * @param	type
		 * @param	listener
		 */
		public function manageStageEventListener(type:String, listener:Function):void {
			if (!_stageListeners) _stageListeners = [];
			_stageListeners.push([type, listener]);
			if (stage) stage.addEventListener(type, listener);
		}

		/**
		 * removed a managed event listener from the stage
		 * @param	type
		 * @param	listener
		 */
		public function unmanageStageEventListener(type:String, listener:Function):void {
			if (!_stageListeners) return;
			var stageListener:Array;
			for (var i:int = 0; i < _stageListeners.length; i++) {
				stageListener = _stageListeners[i];
				if (stageListener[0] == type && stageListener[1] == listener)
					_stageListeners.splice(i, 1);
			}
			if (stage) stage.removeEventListener(type, listener);
		}

		/**
		 * Automatically sets width and height to target dimensions
		 */
		public function sizeTo(target:DisplayObject, call_draw:Boolean = true):void {
			_width = target.width;
			_height = target.height;
			if (call_draw) redraw();
		}

		/**
		 * Automatically sets x and y to target position
		 */
		public function positionTo(target:DisplayObject):void {
			x = target.x;
			x = target.x;
		}

		/**
		 * Automatically sets width and height to target's bounds rectangle
		 */
		public function sizeToRect(rect:Rectangle, call_draw:Boolean = false):void {
			x = rect.x;
			y = rect.y;
			width = rect.width;
			height = rect.height;
			if (call_draw) drawNextRender();
		}

		/**
		 * Automatically sets width and height to stage dimensions
		 */
		public function sizeToStage(redraw:Boolean=true):void {
			_width = stage.stageWidth;
			_height = stage.stageHeight;
			if (redraw) drawNextRender();
		}

/*--------------------------------------------------------------------------------------------
	PRIVATE FUNCTIONS
---------------------------------------------------------------------------------------------*/

		private function _callDraw(e:Event=null):void {
			if (stage)
				if (_onDraw != null)
					_onDraw();
			if (e) cancelNextRender();
		}

		private function _manageStageResize(e:Event=null):void {
			if (stage && _stageResizable)
				stage.addEventListener(Event.RESIZE, _callDraw);
			else if (e) stage.removeEventListener(Event.RESIZE, _callDraw);
		}

		private function _callAddedToStage(e:Event = null):void {
			for each(var managedListener:Array in _managedListeners)
				managedListener[2].addEventListener(managedListener[0], managedListener[1]);
			for each(var stageListener:Array in _stageListeners)
				stage.addEventListener(stageListener[0], stageListener[1]);
			if (_onAddedToStage != null)
				_onAddedToStage();
		}

		private function _callRemovedFromStage(e:Event = null):void {
			for each(var managedListener:Array in _managedListeners)
				managedListener[2].removeEventListener(managedListener[0], managedListener[1]);
			if (_onRemovedFromStage != null)
				_onRemovedFromStage();
		}

		private function _manageStageFunctions(e:Event=null):void {
			addEventListener(Event.ADDED_TO_STAGE, _callAddedToStage);
			addEventListener(Event.REMOVED_FROM_STAGE, _callRemovedFromStage);
		}

/*--------------------------------------------------------------------------------------------
	GETTERS AND SETTERS
---------------------------------------------------------------------------------------------*/

		/**
		* If set to true, the Widget will automatically call the drawing function.
		*/
		public function set stageResizable(value:Boolean):void {
			_stageResizable = value;
			if(value){
				super.addEventListener(Event.ADDED_TO_STAGE, _manageStageResize);
				super.addEventListener(Event.REMOVED_FROM_STAGE, _manageStageResize);
			} else {
				super.removeEventListener(Event.ADDED_TO_STAGE, _manageStageResize);
				super.removeEventListener(Event.REMOVED_FROM_STAGE, _manageStageResize);
			}
			_manageStageResize();
		}

		/**
		 * onDraw is the drawing function. The drawing function is called whenever
		 * Widget renders, provided it is set. It is good practice to set this value
		 * in your Widget's constructor.
		 */
		public function set onDraw(value:Function):void {
			if(value != null)
				super.addEventListener(Event.ADDED_TO_STAGE, _callDraw);
			else super.removeEventListener(Event.ADDED_TO_STAGE, _callDraw);
			_onDraw = value;
			_callDraw();
		}		

		/**
		 * A Widget's width value must be set by either itself or its container.
		 * Without a width and height a Widget is invisible. The behaviour of width
		 * overrides Sprite's default width behaviour.
		 * Setting width will cause callDrawNextRender to be called.
		 */
		override public function get width():Number { return _width; }
		override public function set width(value:Number):void {
			_width = value;
			drawNextRender();
		}	

		/**
		 * A Widget's height value must be set by either itself or its container.
		 * Without a height and width a Widget is invisible. The behaviour of height
		 * overrides Sprite's default height behaviour.
		 * Setting height will cause drawNextRender to be called.
		 */
		override public function get height():Number { return _height; }
		override public function set height(value:Number):void {
			_height = value;
			drawNextRender();
		}	

		/**
		 * The superWidth value can be used to access the Sprite's native width parameter.
		 * This will access the player's native scaling behaviour and should not be used at
		 * the same time as the overriden width value.
		 */
		public function get superWidth():Number { return super.width; }
		public function set superWidth(value:Number):void {
			super.width = value;
		}	

		/**
		 * The superHeight value can be used to access the Sprite's native height parameter.
		 * This will access the player's native scaling behaviour and should not be used at
		 * the same time as the overriden height value.
		 */
		public function get superHeight():Number { return super.height; }
		public function set superHeight(value:Number):void {
			super.height = value;
		}

		/**
		 * The onAddedToStage method is called when the StageWidget is added to the
		 * stage, provided it is set. It is good practice to set this value
		 * in your StageWidget's constructor.
		 */
		public function set onAddedToStage(value:Function):void {
			_onAddedToStage = value;
			_manageStageFunctions();
		}

		/**
		 * The onRemovedFromStage method is called when the StageWidget is added to
		 * the stage, provided it is set. It is good practice to set this value
		 * in your StageWidget's constructor.
		 */
		public function set onRemovedFromStage(value:Function):void {
			_onRemovedFromStage = value;
			_manageStageFunctions();
		}

	}

}

All it takes to make sure this class will redraw itself on width or height calls or stage resize is to set the onDraw function to whichever function calls the graphics API or positions the elements. Snazzy!

The platform is incredibly easy to use for AS3 programmers. I am considering making it available as a component for MXML users.

I have an early working example based on my own website, available here.

Ice Break are giving a way a Holden SS – V ute to the person lucky enough to find it under the cap. They’re also giving a bunch of petrol-powered, remote-controlled Holden utes to the mosty skilled drivers in an online game called Drift’n'Drag.

Drift’n'Drag is a Cru Digital (the company I am gainfully employed at) concept and, you guessed it, I programmed them both.

The website’s development was handled by my collegue Matt, the art and concept by Cru Digital, the portfolio by De Pasqualle.

I would strongly recommend you check it out, it’s my most proud programming work yet. Who knows, if you get good enough at the game you could even win the remote controlled ute!

http://www.icebreak.com.au – click to visit.

This website was designed by Make themselves, I was given a week to develop it from scratch.

Make Communications Website