With just a little bit of time, we will create something like this:

Let’s go!

We need 6 buttons: 2 function buttons (Load – to load our leaderboard, Send – to send the score)and 4 buttons to filter the score: daily/weekly/monthly/all

We also need 3 columns (Text fields) to output name/score/date of players.

Main code:

1. initialization function

   initBoardfunction 
   initBoard():void{
   	MochiServices.connect("MochiGameID", root);// connecting to MochiServices
   	MochiScores.setBoardID("LeaderboardID"); // set the board ID to the leaderboard you wish to work
   withbtnDaily.addEventListener(MouseEvent.CLICK, showLeaderboard_d);
   btnWeekly.addEventListener(MouseEvent.CLICK, showLeaderboard_w);
   btnMonthly.addEventListener(MouseEvent.CLICK, showLeaderboard_m);
   btnAll.addEventListener(MouseEvent.CLICK, showLeaderboard_a); 
    
   btnLoad.addEventListener(MouseEvent.CLICK, loadLeaderboard);
   btnSend.addEventListener(MouseEvent.CLICK, sendScore);}

2. request is a list of score: onScoresReceived – callback function that gets the scoresfunction

   loadLeaderboard(e:MouseEvent):void
    
   {
   MochiScores.requestList(this, onScoresReceived);// request the scores and send them to the onScoresReceived method in this object or class}
    
   //description onScoresReceived functionfunction onScoresReceived (args:Object):void{
   if (args.scores != null) {
   allScores = MochiScores.scoresArrayToObjects(args.scores);
   showScore(allScores, 0, 15);
   /*
   * showScore(scores:Object, typeTop:int = 0, countPlaces:int = 10):void
   * @scores - array of objects whose keys are derived from cols
   * @typeTop - values:
   * 		0 : alltime score
   * 		1 : monthly score
   * 		2 : weekly score
   * 		3 : daily score
   * @countPlaces - number of scores. show top 15 players for example
   */
   } else {
   if (args.error) trace("Error: " + args.errorCode);	}}

3. implementation of the showScore function:

   function showScore(scores:Object, typeTop:int = 0, countPlaces:int = 10):void
   {
   var scoresOb:Object;
   var place:int = 1;
   txt_name.text="";
   txt_score.text="";
   txt_date.text="";
   for (var i = 0; i < countPlaces; i++) {
   switch(typeTop) {
   case 0: scoresOb = scores.alltime[i]; break;
   case 1: scoresOb = scores.monthly[i]; break;
   case 2: scoresOb = scores.weekly[i]; break;
   case 3: scoresOb = scores.daily[i]; break;
   }
   if (scoresOb) {
   txt_name.appendText(place++ + " " + scoresOb.name + '\n');
   txt_score.appendText(scoresOb.score + '\n');
   txt_date.appendText(showDate(scoresOb.timestamp) + '\n');
   }
   }
   }

4. function to display the correct date, for users :)

   function showDate(date:Object):String
   {
   var myDate:Date = new Date(date);
   var arMonths:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
   return (arMonths[myDate.getMonth()] + " " + myDate.getDate() + ", " + myDate.getFullYear());
   }

5. to send the score

   function sendScore(e:MouseEvent):void{
   var score:int = 300;
   var name:String = "Typenamehere"
   MochiScores.submit(score, name, this, SubmitComplete);
   }
   function SubmitComplete(ok:Boolean):void{
   if (ok){
   trace("Scores submitted!");
   }else{
   trace("Error");
   }
   }

That’s it. Here, I’ve described how to create a simple leaderboard. With this is simple leaderboard we can also add the current rank of the player, country flags, and a scroll bar…but I’ll save that for another tutorial :)

Download the source here

© uNik for MochiLand, 2012. | Permalink | One comment

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Flash Development, Front Page, MochiLand Topics, Random, Tutorials.

© JonathanChung for MochiLand, 2011. | Permalink | No comment

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Flash Development, Game Design, MochiLand Topics, Tutorials.

Note: This tutorial was originally written for .net magazine. I’m now allowed to publish it here, so read on and enjoy! Grab the files for download before starting!

Retro style games are becoming more popular than ever online. Commonly referred to as “8-bit” these games have pixel-art graphics and “chip tune” music that apes the consoles of old, but often have surprisingly innovative gameplay mechanics. And Flash has turned out to be the perfect tool for creating them, as hit titles like Canabalt and Fathom demonstrate.

Fathom was one of the first games built with Flixel and is a good example of what it can do.

This may seem at odds with a technology known for its vector graphics and timeline animation. But under the hood Flash is perfectly capable of pushing around large volumes of pixels which is exactly what is required. Flixel is a game framework born from a desire to create 8-bit style games. But it has evolved into a powerful way to rapidly create games in Flash. With a strong community and plug-ins available it’s the perfect choice to create our game with. In this two part series we’ll explore how Flixel works and build a retro-styled platform game in the process.

Download the tutorial files and look through the source code alongside reading the article, because for the sake of space not all of it can be included here and we’ve got a lot of ground to cover.

Getting started

For Windows users there is a guide on installing FlashDevelop with Flixel. On Mac OS X you can use Adobe Flash Builder. FlashGameDojo has a tutorial for this. Or run FlashDevelop under Parallels.

Even if you use FlashDevelop / Flash Builder already I’d still recommend following the guides so you become familiar with the Flixel package structure.

Game Design Brief

It helps to have a plan of your game before you start on it. While the plan should never restrict you from iterating your game during development, it will set a base ground on which to build. Here is a concise brief for our game:

“Player controls a chick who can run left/right and jump on platforms across a horizontally scrolling level. The environment is a lush green jungle with trees, grass, flowers and ruins to explore. There will be static and moving platforms and stars to collect. Collect enough stars and the level exit opens. Player cannot die by falling unless he hits the water. Animal baddies move around the platforms and are fatal to touch.”

From this brief we can instantly visualise how the game will look and play. This allows us to break the code structure into logical objects such as Player, Map, Star and Enemy. The artist can also create concept sketches to set the style of the game, and provide a point of reference for the pixel art.

Concept Sketches These help set a visual style for the game, introduce main characters and act as a reference for the pixel art.

It starts with FlxGame

Open Main.as from the “Part 1″ source folder:

public class Main extends FlxGame
{
public function Main()
{
super(320, 240, PlayState, 2, 60, 60);
forceDebugger = true;
}
}

FlxGame is the wrapper for your whole game, setting up Flixel in the process. The call to super sets the resolution of our game (320 x 240), the initial State (PlayState), the zoom level (2) and the frame rates (60 fps).

While 320 x 240 may seem small at a zoom level of 2 it will display at 640 x 480. The up-scaling of retro games is a common trait that helps show-off the detailed pixel art. forceDebugger enables the built-in debugger which is activated by pressing the ‘ key. This lets you view bounding boxes, collision, paths, variables, logs and save out game replays.

Your game can have only one FlxGame class, but it can have many States. States are a way to split your game into logical sections. For example a MainMenuState, a PlayState with the guts of the game and a GameOverState. Only one State can be active at a time.

Getting into a right State

States in Flixel extend FlxState and they are the guts of your game. When the State is initialised it calls the function create. This is used to construct any assets or variables the game needs. Once your game is running Flixel calls the update function every frame. In Flash terms it’s the equivalent of an Enter Frame event. Here is where you handle anything that needs to happen continuously. We’ll use it to detect collision between game objects.

Inside the create function we make two types of object: the Player sprite and some platforms.

player = new Player(32, 100);
floor = new FlxTileblock(0, 208, 320, 32);
floor.makeGraphic(320, 32, 0xff689c16);
add(player);
add(floor);

The floor variable is one such platform. Although we’ll replace it in the final game it’s a great rapid way to provide objects the player can jump on to test the physics. The objects are then added to the State, allowing Flixel to draw them when it renders the scene. It’s similar to addChild in native Flash and the order in which you add defines how they are drawn.

All player specific code is held in the Player class, represented here through the player variable. This keeps it organised and easy to re-use. Before we start that however we need to give our player some wings – quite literally – by preparing the sprite sheet.

Nutmeg The sprite sheet for the pixel hero of our game, drawn in 16 x 18 sized frames.

Flixel can automatically create reversed frames so we only draw him facing right. The first frame is an idle pose. Frames 2 and 3 are the walk cycle, and frame 4 is a hurt expression. If you are more comfortable animating inside of Flash Professional then you can create a timeline sequence as usual, export it to a SWF and use a tool such as Grant Skinner’s Zoe (http://easeljs.com/zoe.html) to convert it to a sprite sheet.

Sprites in Flixel are called FlxSprite which is what our Player extends. These differ from regular Flash Sprites in that as well as graphics data they contain extra values to allow you to easily control physics, animation, direction, collision and rotation. Inside Player.as we’ve embedded the sprite sheet:

[Embed(source = '../assets/player.png')] private var playerPNG:Class;

And then tell FlxSprite to use it:

loadGraphic(playerPNG, true, true, 16, 18, true);

This tells Flixel to chop the sheet into 16×18 frames and create reversed versions. Animation works in a similar way to Flash MovieClips.

addAnimation("walk", [0, 1, 0, 2], 10, true);

This creates a new animation sequence called “walk” which cycles through frames 0, 1, 0, 2 at a rate of 10 frames per second. The true parameter makes it loop. To play an animation you use its label:

play("walk");

What goes up must come down

Making the player sprite run and jump smoothly provides us with a great opportunity to explore ones of Flixel’s strengths: its plug-ins. Much like with WordPress and Drupal, the Flixel community release plug-ins which extend the framework further and ultimately save you time.

One such plug-in is FlxControl which is part of the Flixel Power Tools. They are included in the tutorial zips but are constantly updated, so check https://github.com/photonstorm/Flixel-Power-Tools for updates. If downloading fresh there is a Getting Started guide in the Docs folder.

The plug-in needs to be activated and assigned to our player FlxSprite:

if (FlxG.getPlugin(FlxControl) == null) {
FlxG.addPlugin(new FlxControl);
}
FlxControl.create(this, FlxControlHandler.MOVEMENT_ACCELERATES, FlxControlHandler.STOPPING_DECELERATES, 1, true, false);

The parameters tell it that we want the sprite to accelerate and decelerate. If we didn’t pick this the sprite would start and stop immediately making the experience very abrupt.

FlxControl.player1.setCursorControl(false, false, true, true);
FlxControl.player1.setJumpButton("SPACE", FlxControlHandler.KEYMODE_PRESSED, 200, FlxObject.FLOOR, 250, 200);
FlxControl.player1.setMovementSpeed(400, 0, 100, 200, 400, 0);
FlxControl.player1.setGravity(0, 400);

This enables cursor control for the left and right keys, and sets SPACE BAR to be the jump button. The player can only jump if on the floor and will try to jump to a height of 200 pixels. setMovementSpeed allows the sprite to accelerate at 400px/sec up to top speed of 100px/sec. Modify these values to much lower or higher numbers to see the effect! Finally we set some gravity, pulling the player back down to earth. Try changing the gravity value to make the player float or drop like a lead balloon. The best thing you can do to learn about Flixel and its plug-ins is to mess around with them. You never know what might come out of it! I’ve seen whole game ideas born from what were code bugs, so it pays to experiment.

Putting it all together

Run the code at this point and you’ll see we have a cute little chick sprite who can run and leap around at will. It collides smoothly with the ground, and there’s even a platform to leap on. If you press the debug key (‘) you can watch the physics values in real-time. Click the box icon in the top right to turn on the visual outlines.

We have lift off! A running and jumping player with platforms to leap on

Granted it isn’t quite Mario, but we’re not finished just yet.

Building a Level Map with DAME

Green blocks are all well and good, but we need a proper level for the player to explore. Flixel has built-in support for Tile Maps which are an efficient and fast way to construct game levels. Tile Maps work by using Tile Set in a series of tiles aligned to a fixed-size grid. Here is the Tile Set created for our game:

The Tile Set used to draw the game map, complete with water, plants and platforms.

Each tile is 16×16 pixels in size, and you can see that some of them join together to form game objects such as the platform in the bottom right. The organisation of the Tile Set is up to you (or your artist!), but it’s sensible to leave big chunks of empty tiles should you need to insert new tiles later on in development. Tiles are separated into two types: Tiles you can collide with, and tiles you never collide with. In Flixel this is determined by the tile number and is called the Collide Index. Every tile after the index is treated as a tile you collide with. In our Tile Set you’ll see on the top row items such as flowers, bushes and shrubs. These are all non-colliding tiles, as we don’t want our player getting stuck on flowers.

With our Tile Set created we now need to design the level. To do this we use a Tile Map Editor. For this tutorial we’ll use an editor called DAME. Although the interface takes some getting used-to, the actual map view in DAME is rendered directly with Flixel so you know for sure that what you see in the editor is how it appears in game.

DAME can be downloaded from http://dambots.com/dame-editor/ and works on Windows, OS X and Linux. Create 3 map layers in DAME, one for the Sky background, one for the level itself and one for the stars which the player can collect. You can find our DAME maps by downloading the tutorial files and looking in “Nutmeg Part 2 – The Map”. With the Map Layer selected click on a tile in the Tile window and then paint with it, just like an art package:

Tile Map Editor DAME in action showing part of the level created for the game

Once you are happy with the design of your level you can export the map data to a CSV file from the File ñ Export menu.

Lights, Camera, Action

Add a new class to the project called Level1 that extends FlxGroup. This is Flixel’s way of grouping display objects together and keeps our code logical and structured. We can also check for collision against a whole group, which is significantly faster than checking every element individually. Our map is held in a local variable:

map = new FlxTilemap;
map.loadMap(new mapCSV, mapTilesPNG, 16, 16, 0, 0, 1, 31);
add(map);

loadMap takes our CSV map data exported from DAME, and an embedded Tile Set png and creates a Tile Map object which is then added to the group. The same process is repeated for the Sky background.

Back in the PlayState we add the level to the display. But before we can unleash the player we tell Flixelís camera system to follow them around and restrict the camera to the map boundary:

FlxG.camera.setBounds(0, 0, level.width, level.height);
FlxG.camera.follow(player, FlxCamera.STYLE_PLATFORMER);

The last task is to add a collision check into the PlayState update function:

FlxG.collide(player, level);

With the map loaded, the camera set and collision running we can now test the game. The chick now happily bounces around the level, landing on platforms and not colliding with flowers.

Sprinkling a little stardust

Now we’ve a pretty landscape to traverse we’ll add stars for the player to collect, and display the total collected as a score in the game. Flixel has a text function called FlxText which we use to display the score:

>

score = new FlxText(0, 0, 100);
score.scrollFactor.x = 0;
score.scrollFactor.y = 0;

The score is added at the top left of the screen and has a scrollFactor of zero. This means the text will be locked in place at the coordinates given, and not scroll around as the camera moves.

In the DAME map the Stars layer was exported to a CSV file and weíll use this map data to create Star sprites. The function parseStars in the Level1 class works by looping through the CSV map data, and for every tile it creates a new Star sprite at those coordinates. All of these sprites are added to an FlxGroup called stars. In the PlayState update function we check to see if the player is colliding with a star:

FlxG.overlap(player, level.stars, hitStar);

If a collision occurs this will call the function hitStar, passing in the two objects that collided, in this case the player and the star he hit. The star is removed from the game and the score increased:

star.kill();
FlxG.score += 1;
score.text = FlxG.score.toString() + " / " + level.totalStars.toString();

Finally the score text is updated to show them how many stars they’ve collected, and how many are left. With this one small addition we’ve now got a real playable game with an objective to collect all stars:

Reach for the stars With the stars in place our game now has a purpose - try to complete the level

In part 2 we will introduce baddies for you to avoid, sound effects, a user interface (HUD) and Game Over sequence. If you feel inspired to build your own games be sure to visit http://flixel.org which is home to a vibrant developer community. You’ll also find stacks of Flixel related tutorials at http://www.photonstorm.com along with the Flixel Power Tools plug-ins. Finally for reference to the classic games of old http://www.retrogamingtimes.com is well worth a visit.

The following 2 parts were the “box-outs” that appeared in the print article. I’ve included them here because they’re interesting :)

Adam Saltsman talks about why he created Flixel

I guess it was around 7 years ago that I tried to make a little “game engine”, something that would allow me to make Super NES style games. It just seemed like a fun thing to do. After a few abortive attempts in C++ / Python / Java I finally settled on AS3. It was the pixel-level stuff in it that really interested me. However I’d grown very cautious about “engine building” and not actually making any games. So I stuck with AS3 and created game after game, and noticed which patterns evolved. The games kept getting more complex, and re-used code from previous projects, and eventually those parts I was seeing in every project got moved to their own folder. I think a lot (if not most) developers have a similar folder somewhere, just a pile of “really handy” code.

Originally this was just for me, something I’d use to sketch new game designs in. But it wasn’t long before I thought that with a little polish here and there I might be able to release it publicly. Turns out it needed a lot of polish (and still does), but I really like where it’s going. Lately I have been thinking a lot about how to “make stuff that matters”, which is a very loose idea, but something I obsess over, for better or worse. I think Flixel is a cool thing. It’s not really “art” in and of itself, but it contributes to the cultural food chain, and that makes me feel like a hero.

Eventually it would be great to add official support for a physics engine like Nape, and port it over to Molehill, the hardware-accelerated Flash Player by the end of the year. I am very hesitant to ever add game-specific features to the framework, but these all seem like good general systems and will just make making games easier and more fun.

At the risk of leaving out something awesome I would say the following games are shining examples of Flixel in action:

Canabalt
Station 38
Tuper Tario Tros
Cat Astro Phi

Cat Astro Phi Designed to look, sound and feel like a Gameboy Classic title it's a good example of what Flixel is capable of.

Pushing Pixels

Mastering the style of pixel art

Professional pixel artist Ilija Melentijevic explains how he created the artwork for Nutmeg:

Pixel art is a time-consuming but rewarding approach to creating game graphics. If you have little screen space such as on a mobile device, or are simply looking for that charm and precision it offers, then itís worth making the extra effort. Also, it’s incredibly fun!

It’s a good idea to start from the big picture. First make a mock-up of a game scene, defining the style, colours, characters, etc. Once you have such solid foundation it’s easy to turn it into actual game assets. Your art must fit and enhance the game, not just look nice on its own, so make sure everything reads well and speaks to the player in a consistent way. In a busy shooter, use colours to separate bullets from power-ups, or to make the foreground objects pop out. Immersion is a priority in any game, and understanding what’s going on plays a big part in this. Fire up your favourite games and look how the pros do it.

There are a number of tools you can use and they vary widely. Some people even use Microsoft Paint! Many professionals use Photoshop and it certainly gets the job done, but I prefer a dedicated pixel-oriented program. Closest to the industry standard is Cosmigo Promotion which boasts an impressive set of features and will look familiar to Photoshop users. My personal favourite is the 100% free GraFX2. Currently it lacks animation, but otherwise provides for an unparalleled workflow and ease of use.

Make sure you join an active pixel art community that will provide both feedback and motivation. PixelJoint lets you comment, rate and vote on other people’s work, submit your own, and even take part in weekly challenges, perhaps the best way to hone your skills.

For a less casual approach consider Pixelation, a community focused on pushing the medium forward. Here you’ll find discussions on theory, game art analysis, collaborations and more. Many masters of the form frequent the forum, so it’s a great place to post your work to get some constructive critique.

View Ilija’s artwork at http://www.photonstorm.com/topics/art

GraFX2 A lightweight and free (as in free beer) pixel-pushing program for Windows, Mac and Linux

© Photon Storm for MochiLand, 2011. | Permalink | 6 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Flash Development, Front Page, Game Design, MochiLand Topics, Tutorials.

Download Alternativa 3D 8.

This tutorial consist of these parts:
- move the car with keyboard controls
- follow the car with the camera

The final app will look like this:

(*requires Flash Player with Molehill)

To understand the car’s movement let’s do a little bit of math. I’ve got inspired by this tutorial and this one. But anyway, there is no rocket science involved. Just a simple trigonometric functions and that’s great, because anyone can do it easily.

Speed / Acceleration

When you press UP key, you add acceleration to the speed. When DOWN key, you subtract acceleration from the speed. When none of them is pressed, you slow down by multiplying actual speed by 0.96 – note it can be whatever, depends on how fast or slow you want to slow down.

// don't allow to speed up more than maximum speed
if (accelerate && speed0.3) {
		speed*=0.96;
	} else {
		speed=0;
	}
}

Steering / Rotation

When we press LEFT or RIGHT key, we turn the car by Math.PI/40 radians (4.5 degrees). Again, pass number that fits you best.

if (turn_left) {
	steering += Math.PI/40;
}
if (turn_right) {
	steering -= Math.PI/40;
}

You will also find that the solution above is not exactly correct, because we can turn the car even when standing on place with zero speed. To fix that, we will multiply the angle by speed/speedMax (a number between 0-1). Now it will behave correctly

if (turn_left) {
	steering += Math.PI/40*(speed/speedMax);
}
if (turn_right) {
	steering -= Math.PI/40*(speed/speedMax);
}

When we are done with speed and acceleration, we can apply it to our car. To calculate the real position of the car, we have to use a simple trigonometric functions – sine and cosine. Note that we know only speed (vector magnitude) and steering (angle, rotation of the car).

By the definition of the sine and the cosine, we are able to calculate the position (X and Y) of the car from the angle and speed.

car.rotationZ = -steering;
 
car.x += speed*Math.sin(steering);
car.y += speed*Math.cos(steering);

Let’s have a look what we have achieved so far:

(source code here)

Camera that follows the car

To add a so called “follow camera”, we have to do one simple thing – keep it behind the car in a specific distance, again by using trigonometric functions.

camera.x = car.x + Math.sin(car.rotationZ)*cameraDistance;
camera.y = car.y - Math.cos(car.rotationZ)*cameraDistance;
camera.rotationZ = car.rotationZ+Math.PI; // Math.PI = 180 deg

Right now, we have a camera, that follows the car. Try the demo here (source). But as you see, it feels very hard to play. So we add a little bit of smoothing interpolation to make the game smoother to play.

var targetX:Number = car.x + Math.sin(car.rotationZ)*cameraDistance;
var targetY:Number = car.y - Math.cos(car.rotationZ)*cameraDistance;
var targetZRotation:Number = car.rotationZ+Math.PI;
 
camera.x -= (camera.x - targetX)*.2;
camera.y -= (camera.y - targetY)*.2;
camera.rotationZ -= (camera.rotationZ - targetZRotation)*.2;

Now it feels much better. Try the final app here.

You will have also tons of questions, like adding slipping, physics, collisions, etc. Well – next time ;)

Source

Download the source code

The complete source code looks like this:

package
{
	import alternativa.engine3d.core.Camera3D;
	import alternativa.engine3d.core.Object3D;
	import alternativa.engine3d.core.Resource;
	import alternativa.engine3d.core.View;
	import alternativa.engine3d.materials.FillMaterial;
	import alternativa.engine3d.materials.TextureMaterial;
	import alternativa.engine3d.primitives.Box;
	import alternativa.engine3d.resources.TextureResource;
 
	import flash.display.Sprite;
	import flash.display.Stage3D;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display3D.textures.Texture;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.geom.Point;
	import flash.ui.Keyboard;
 
	[SWF(width="800", height="600", frameRate="30")]
	public class CarWithFollowCamera extends Sprite
	{
		private var rootContainer:Object3D = new Object3D();
 
		private var camera:Camera3D;
		private var stage3D:Stage3D;
 
		private var speed:Number = 0
		private var steering:Number = 0
 
		private var accelerate:Boolean;
		private var brake:Boolean;
		private var turn_left:Boolean;
		private var turn_right:Boolean;
 
		private var cameraDistance:Number = 800;
 
		[Embed(source="sand.jpg")]
		private var texture:Class;
 
		private var car:Object3D;
		private var carBody:Box;
		private var carFront:Box;
 
		public function CarWithFollowCamera()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			// CAMERA
			camera = new Camera3D(0.1, 10000);
			camera.view = new View(stage.stageWidth, stage.stageHeight);
			addChild(camera.view);
 
			// init camera settings
			camera.rotationX = deg2rad(70);
			//camera.y = -300;
			camera.rotationZ = Math.PI;
			camera.z = -400;
 
			rootContainer.addChild(camera);
 
			// CAR
			car = new Object3D();
			// car body
			carBody = new Box(200,300,100);
			var material:FillMaterial = new FillMaterial(0xFFFF00, 0.8);
			carBody.setMaterialToAllSurfaces(material);
			carBody.y = -200;
			car.addChild(carBody);
			// car front
			carFront = new Box(200,100,100);
			carFront.setMaterialToAllSurfaces(new FillMaterial(0xFFFF00,.9));
			car.addChild(carFront);		
 
			car.z = -50;
			rootContainer.addChild(car);
 
			// MAP
			generateRandomMapOfCubes()
 
			// INIT Stage3D
			stage3D = stage.stage3Ds[0];
			stage3D.addEventListener(Event.CONTEXT3D_CREATE, onContextCreate);
			stage3D.requestContext3D();
 
		}
 
		public function followCarWithCamera():void{
 
			// Simple smoothing
			var targetX:Number = car.x + Math.sin(car.rotationZ)*cameraDistance;
			var targetY:Number = car.y - Math.cos(car.rotationZ)*cameraDistance;
			var targetZRotation:Number = car.rotationZ+Math.PI;
 
			camera.x -= (camera.x - targetX)*.2;
			camera.y -= (camera.y - targetY)*.2;
			camera.rotationZ -= (camera.rotationZ - targetZRotation)*.2;
 
		}
 
		private function loop(event:Event):void{
 
			if (accelerate && speed<100) { 				speed+=2; 				 			}else if (brake) { 				speed-=2; 			}else{ 				if (Math.abs(speed)>0.3) {
					speed*=0.96;
				} else {
					speed=0;
				}
			}
 
			if (turn_left) {
				steering += Math.PI/40*(speed/100);
			}
			if (turn_right) {
				steering -= Math.PI/40*(speed/100);
			}
 
			car.rotationZ = -steering
 
			car.x += speed*Math.sin(steering);
			car.y += speed*Math.cos(steering);
 
			followCarWithCamera();
 
			camera.render(stage3D);
		}
 
		public function onKeyDown(e:KeyboardEvent):void {
			if (e.keyCode==38) {
				accelerate=true;
			}
			if (e.keyCode==40) {
				brake=true;
			}
			if (e.keyCode==37) {
				turn_left=true;
			}
			if (e.keyCode==39) {
				turn_right=true;
			}
		}
		public function onKeyUp(e:KeyboardEvent):void {
			if (e.keyCode==38) {
				accelerate=false;
			}
			if (e.keyCode==40) {
				brake=false;
			}
			if (e.keyCode==37) {
				turn_left=false;
			}
			if (e.keyCode==39) {
				turn_right=false;
			}
		}
 
		// HELPER METHODS // not important to study them
 
		protected function onContextCreate(event:Event):void
		{
			for each(var resource:Resource in rootContainer.getResources(true)){
				resource.upload(stage3D.context3D);
 
			}
 
			stage.addEventListener(Event.ENTER_FRAME, loop);
 
			stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
			stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
 
		}
 
		public function generateRandomMapOfCubes():void{
 
			var ground:Box = new Box(10000,10000,1);
			ground.setMaterialToAllSurfaces(new FillMaterial(0xCCCCCC,0.3));
			rootContainer.addChild(ground);
 
			for(var i:uint = 0;i<30;i++){
				var height:Number = Math.random()*700+200;
				var b:Box = new Box(Math.random()*700+200,Math.random()*700+200,height);
				b.setMaterialToAllSurfaces(new FillMaterial(0xCCCCCC,0.5));
 
				b.z = -height/2;
				b.x = 5000-Math.random()*10000;
				b.y = 5000-Math.random()*10000;
 
				rootContainer.addChild(b);
 
			}
		}
 
		public function rad2deg(radnum:Number):Number{
			return radnum*180/Math.PI;
		}
 
		public function deg2rad(degnum:Number):Number{
			return degnum*Math.PI/180;
		}
	}
}

© TomKrcha for MochiLand, 2011. | Permalink | 5 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Flash Development, Front Page, Game Design, MochiLand Topics, Tutorials.

I also made a few assumptions, firstly I used my thumbs as the basis for determining the size of the controller’s thumb stick ‘head’ – I have quite big thumbs so I assumed that this would suffice for most people. The second one was more technical. As most PC games tend to rely heavily on keyboard input (and Flash web games even more so) for controlling your ship / player; I opted to emulate the 4 arrow keys – Up, Down, Left and Right instead of using co-ordinate translation*. There were a few reasons for key input emulation over co-ordinate translation. The first one I have already outlined. The second was to do with ease of conversion; as most Flash games use the keyboard already adding in the virtual controller shouldn’t require a major update to any pre-existing code. Lastly, there is the testing and debugging.

*I am working on a version that uses co-ordinate translation and will post it up soon.

Designing The Controller

The first thing to consider is the actual visual appearance of your controller – in my case this was going to be a thumb stick like those found on the Playstation or XBox controllers. For ease of mapping the users touch input on the thumb stick you really need two elements. First the thumb area, i.e. the place where the user places their thumb; secondly you need a surround. The surround is useful for two reasons. It provides a visual indication to the user on how far the thumb stick moves as well as allowing you to use this as the boundaries of your entire controller for the purpose of determining where the users thumb actually is and more importantly when they lift their thumb up. You can see a simple design for the entire thumb stick controller (including both the thumb and surround) in the image on the right.

Interestingly you don’t actually need to have any visuals if you don’t want them. Some games forgo them and just map the users thumb location. This can be confusing for some so depending on type of users you are expecting to attract to your game may determine whether you can remove the visual elements entirely. If in doubt make the controllers slightly transparent.

As their is a visual aspect to this controller it makes sense to leverage Flash Professional CS5 – you can do this all in Flash Builder if you wish, but it makes the initial set up easier using a more visual tool. Create a new FLA file and save it somewhere on your machine with the file name VirtualControllers. Next create a new ActionScript 3.0 class, call it ThumbStick.as and save it in the same directory as the one that contains VirtualControllers.fla. I use a package structure for my classes so I have nested folders as the image shows. You don’t have to do this if you don’t want to and in this article you’ll be using a flat package structure.

Before we start writing code though you need to create a symbol in the Library for the controller, and import the image assets for both the surround and the thumb stick (which you can download via the link at the bottom of this article, or create your own).

• Create a new symbol (Insert > New Symbol…)
• Call this new symbol ThumbStick
• Locate the downloaded assets for the surround and the thumb stick and import them in to your library (File > Import > Import to library)
• Flash Pro CS5 will automatically create two new symbols (Symbol1 and Symbol2) in your Symbol library
• Open the Symbol library (Window > Library)
• Select Symbol1 and rename it based on the graphic it contains (it’ll either be the surround or the thumb image)
• Repeat this process for Symbol2

Once you have renamed the symbols you need to edit them both to make sure that the enclosed image is centred in the middle of the symbol, as well as making sure that they are set as MovieClip symbols not Graphic symbols (which is what they will be by default).

• Right click on the Surround symbol in your library
• Select Properties from the context menu
• When the properties dialog opens change the top Type drop down from Graphic to MovieClip
• Click OK to apply and close this dialog window
• Repeat this for the Thumb symbol too
• With the Thumb symbol still selected double click it to enter edit mode
• The stage should update with the image asset placed approximately in the middle of the screen
• Select the image (a bounding blue box should appear)
• From the Properties panel (Window > Properties) set the X and Y values to -45, this will centre the Thumb image as it’s 90×90 pixels
• Repeat this for the Surround symbol, except set the X and Y values to -75 as the Surround image is 150×150. Again this will centre it

Now you have the main elements of your Thumb Stick controller defined you’ll need to combine them. To do this first edit the symbol you created called ThumbStick

• Double click on the ThumbStick symbol in your Library to enter edit mode
• Rename the default layer in your Timeline (Window > Timeline) to Thumb by right clicking on the layer and selecting Properties from the context menu
• A dialog will open where you can set the new layer name. You can also just double click the layer to edit it directly
• Create a new layer in the Timeline panel (click the New Layer icon in the bottom left of the Timeline) and name it Surround
• Make sure you still have the Surround layer selected
• Drag the Surround symbol from your library and make sure it is centred in the middle of your symbol
• With the Surround symbol still selected open the Properties panel and give it an instance name of surround
• Once you are happy with its position select the Thumb layer
• With the Thumb layer selected drag the Thumb symbol on to the stage of the ThumbStick symbol, making sure it’s on the Thumb layer
• Again centre the Thumb symbol so it is in the exact centre (note the cross hair in the middle of the symbols in the image)
• And as with the Surround symbol, open the Properties panel (making sure it is still selected) and give the Thumb symbol the instance name of thumb

Quick Tip

If the bitmap assets are looking a bit ‘jaggy’ you can always apply smoothing to them by right clicking on each image in the library and selecting Properties from the context menu. When the dialog opens just tick the Smoothing checkbox and click OK to apply.

Now you have the FLA and ActionScript files saved we can get about creating the initial code. The first thing you need to do is make sure your class extends Sprite (by default it doesn’t extend anything). You’re also going to need some private variables to store some of the controllers info in. To that end add the following (or just copy and paste the code below):

Defining The Controller

Now that you have a design, and you have created your actual controller symbol, you need to start thinking about adding the code to actually control it when the user interacts with it. The best approach is to break this process down initially as a bulleted list of its functional parts. The list will likely look something like this:

• Move thumb stick in a circular motion
• Limit thumb stick movement to within the surround
• Return thumb stick to centre of controller when the user removes their thumb
• Dispatch an event when the user moves the thumb stick

Obviously you are free to add more items to the list but these four cover the basic functionality. With that in mind lets start coding…

Writing The Code

The first thing you need to do is make sure that your ThumbStick class extends Sprite – by default Flash Professional creates non-inheriting classes. Now your code will look like this (I’ve applied a bit of formatting to my structure in case yours is formatted slightly differently)

package
{
  import flash.display.Sprite;

  public class ThumbStick extends Sprite
  {
    public function ThumbStick()
    {
    }
  }
}

To do this you need to add a couple of event listeners. These will deal with responding to the touch events when the user presses down with their thumb as well as when they remove it. Even though you can directly interact with the symbols you have within your controller (as you gave them instance names), the code hinting in Flash Professional’s code editor doesn’t kick in – so I tend to make a private variable that I map to the symbol to make this easier.

The code below has the handlers included as well as the event listeners so you can see the flow and structure (there is a problem with this code and I’ll explain what it is in a moment)

package
{
  import flash.display.Sprite;
  import flash.events.TouchEvent;

  public class ThumbStick extends Sprite
  {
    private var _thumb  :Sprite;
    private var _surround:Sprite;

    public function ThumbStick()
    {
      _thumb = thumb;
      _surround = surround;

      _thumb.addEventListener(TouchEvent.TOUCH_BEGIN, onThumbDown);
      _thumb.addEventListener(TouchEvent.TOUCH_END, onThumbUp);
      _surround.addEventListener(TouchEvent.TOUCH_END, onThumbUp);
    }

    protected function onThumbDown(e:TouchEvent):void
    {
      trace("Thumb Down");
    }

    protected function onThumbUp(e:TouchEvent):void
    {
      trace("Thumb Up");
    }
  }
}

One approach is to check the type of hardware you are running on and adjusting the code flow based on that by using the Capabilities() class. So if I update the code above further I can test to see if this is running on an ARM based processor or not (i.e most Smart phones and tablets). I can then tailor how the code is initialized.

package
{
  import flash.display.Sprite;
  import flash.events.TouchEvent;
  import flash.system.Capabilities;
  import flash.events.MouseEvent;

  public class ThumbStick extends Sprite
  {
    private var _thumb  :Sprite;
    private var _surround:Sprite;

    public function ThumbStick()
    {
      _thumb = thumb;
      _surround = surround;

      if(Capabilities.cpuArchitecture == "ARM")
      {
            _thumb.addEventListener(TouchEvent.TOUCH_BEGIN, onThumbDown);
        _thumb.addEventListener(TouchEvent.TOUCH_END, onThumbUp);
  _surround.addEventListener(TouchEvent.TOUCH_END, onThumbUp);
      }
      else
      {
      _thumb.addEventListener(MouseEvent.MOUSE_DOWN, onTestThumbDown);
        _thumb.addEventListener(MouseEvent.MOUSE_UP, onTestThumbUp);
  _surround.addEventListener(MouseEvent.MOUSE_UP, onTestThumbUp);
      }
    }

    protected function onThumbDown(e:TouchEvent):void
    {
      trace("Thumb Down");
    }

    protected function onThumbUp(e:TouchEvent):void
    {
      trace("Thumb Up");
    }

    // These are just for testing within Flash Pro
    protected function onTestThumbDown(e:MouseEvent):void
    {
      trace("Mouse Down");
    }

    protected function onTestThumbUp(e:MouseEvent):void
    {
      trace("Mouse Up");
    }
  }
}

The next functionality you need to implement is the actual ability to move the thumb stick. This is pretty easy to do and I’ve just created two methods to control this – one to deal with the actual movement when the user is touching the thumb stick, and one to reposition the thumb stick back to the centre of the surround

protected function initDrag():void
{
  _thumb.startDrag();
}

protected function resetThumb():void
{
  _thumb.stopDrag();
  _thumb.x = 0;
  _thumb.y = 0;
}

If you test it now it should function in a similar manner to the example below. Clicking and dragging the thumb stick moves it (try the example below). Releasing the mouse button will centre it back to its original position in the middle of the surround – note that while you can click and drag the thumb stick with your mouse, but it isn’t confined by the boundaries of the surround. This isn’t exactly what we want. Worry not though, you’ll be addressing that next.

Setting Controller Boundaries

As I mentioned earlier, this gives you basic drag functionality within your virtual controller and repositions the thumb stick on releasing the mouse button. However it doesn’t restrict the movement to within the actual controller surround. So with out further ado let’s jump right in the deep end and start with some Trigonometry :p. I’m not going to give you a trig primer here, but I will explain where applicable what is actually happening – if you want to know more there are many good resources online (a simple google search should suffice)

The first thing you need to do is add in a new event listener to monitor the thumb stick as you move it so it can be restricted when it hits the desired position at the boundaries of the controller surround. Now, normally you’d probably use the MouseEvent.MOUSE_MOVE event to monitor the movement of the thumb stick. However this event is quite expensive in terms of event dispatching and usage compared to the Event.ENTER_FRAME event. With that in mid you need to add the following line to end of the initDrag() method

addEventListener(Event.ENTER_FRAME, onThumbDrag);

removeEventListener(Event.ENTER_FRAME, onThumbDrag);

protected function onThumbDrag(e:Event):void
{
  // Store the current x/y of the knob
  var _currentX    :Number = _thumb.x;
  var _currentY    :Number = _thumb.y;

  // Store the registration point of the surrounding 'joystick holder'
  var _registrationX  :Number = _surround.x;
  var _registrationY  :Number = _surround.y;

  // Subtract the two from each other to get the actual x/y
  var _actualX  :Number = _currentX - _registrationX;
  var _actualY  :Number =  _currentY - _registrationY;

  // Calculate the degrees for use when creating the zones.
  _degrees = Math.round(Math.atan2(_actualY, _actualX) * 180/Math.PI);

  // Calculate the radian value of the knobs current position
  var _angle     :Number = _degrees * (Math.PI / 180);

  // As we want to lock the orbit of the knob we need to calculate x/y at the maximum distance
  var _maxX    :Number = Math.round((_radius * Math.cos(_angle)) + _registrationX);
  var _maxY    :Number = Math.round((_radius * Math.sin(_angle)) + _registrationY);

  // Check to make sure that the value is positive or negative
  if(_currentX > 0 && _currentX > _maxX || _currentX < 0 && _currentX < _maxX)     _thumb.x = _maxX;   if(_currentY > 0 && _currentY > _maxY || _currentY < 0 && _currentY < _maxY)
    _thumb.y = _maxY;
}

private var _degrees  :Number;
private var _radius  :Number = 25;

The Math ‘Bit’

That’s all well and good in theory, but how does that actually get applied in the code above? Well let’s start at the beginning of the method and look at each block of code so you can get a clearer understanding of the actual flow. First up you have a set of local storage variables. These just contain references to the position of the thumb stick and the surround:

// Store the current x/y of the knob
var _currentX    :Number = _thumb.x;
var _currentY    :Number = _thumb.y;

// Store the registration point of the surrounding 'joystick holder'
var _registrationX  :Number = _surround.x;
var _registrationY  :Number = _surround.y;

// Subtract the two from each other to get the actual x/y
var _actualX  :Number = _currentX - _registrationX;
var _actualY  :Number =  _currentY - _registrationY;

// Calculate the degrees for use when creating the zones.
_degrees = Math.round(Math.atan2(_actualY, _actualX) * 180/Math.PI);

// Calculate the radian value of the knobs current position
var _angle     :Number = _degrees * (Math.PI / 180);

// As we want to lock the orbit of the knob we need to calculate x/y at the maximum distance
var _maxX    :Number = Math.round((_radius * Math.cos(_angle)) + _registrationX);
var _maxY    :Number = Math.round((_radius * Math.sin(_angle)) + _registrationY);

// Check to make sure that the value is positive or negative
if(_currentX > 0 && _currentX > _maxX || _currentX < 0 && _currentX < _maxX)   _thumb.x = _maxX;     if(_currentY > 0 && _currentY > _maxY || _currentY < 0 && _currentY < _maxY)
  _thumb.y = _maxY;

Where’s The Thumb Again?

One thing you will have already noticed is that if your mouse moves outside of the thumb stick symbol, when you release it, the thumb stick doesn’t return to the centred position in the middle of the surround. This is because there is no event registered to capture the release of the thumb stick if you accidentally move out of it. This needs resolving as it is highly likely that your user will move their thumbs beyond the bounds of the thumb stick when playing your game (it’s just one of those things as they aren’t looking at the controller and as it’s virtual there isn’t any real feedback that they have extended beyond the desired bounds).

To fix this you could just register the stage and respond when the users releases the thumb stick. This is fine desktop / web apps as they don’t generally support multi-touch so you can only interact with one element at a time with the mouse. On devices this isn’t the case. Because you can have multiple touch points if you listened for the release via the stage if you have a virtual button – for firing your ships guns for example – then every time you lifted your finger off the button it would reset the thumb stick. Not ideal really.

A better way would be to create a invisible area that sits behind the actual controller graphics and listens for the release. That way it doesn’t matter if the user moves off the actual thumb stick symbol as this area would still respond to the release. Now one thing you would need to decide upon if you chose to implement this is how big should this ‘run off’ area be? Well that can be a bit subjective, but if you think about how the user will hold their device to use the controller then that should give you a good starting point.

For starters you don’t need it to cover a massive area – if fact I would say no more than a third of the width of the screen (working on the premise that the game is probably displayed as landscape). After all it’s unlikely the user will move their thumb a big distance given that they will be holding the device at the same time. If in doubt, test it out until you get a happy medium.

In the example below I have updated the ThumbStick symbol in Flash Professional by adding another layer called ‘Boundary’ and placed a new 25×25 pixel filled (red) circlular symbol in it. I gave it the instance name of boundary and made sure the layer was underneath all of the other layers in the ThumbStick symbol.

Obviously 25×25 pixels in size isn’t going to be that useful. However once you map the symbol to a variable in your ThumbStick() class you can easily set its dimensions. That way you could easily add in a getter/setter that would allow you to dynamically set the dimensions of the controller. In the code below I’ve just set this boundary symbol’s width and height with hard values within the constructor.

private var _thumb    :Sprite;
private var _surround  :Sprite;
private var _boundary  :Sprite;

private var _degrees  :Number;
private var _radius  :Number = 25;  

public function ThumbStick()
{
  _thumb = thumb;
  _surround = surround;
  _boundary = boundary;
  _boundary.width = 200;
  _boundary.height = 200;

  if(Capabilities.cpuArchitecture == "ARM")
  {
    _thumb.addEventListener(TouchEvent.TOUCH_BEGIN, onThumbDown);
    _thumb.addEventListener(TouchEvent.TOUCH_END, onThumbUp);
    _surround.addEventListener(TouchEvent.TOUCH_END, onThumbUp);
    _boundary.addEventListener(TouchEvent.TOUCH_END, onThumbUp);
  }
  else
  {
    _thumb.addEventListener(MouseEvent.MOUSE_DOWN, onTestThumbDown);
    _thumb.addEventListener(MouseEvent.MOUSE_UP, onTestThumbUp);
    _surround.addEventListener(MouseEvent.MOUSE_UP, onTestThumbUp);
    _boundary.addEventListener(MouseEvent.MOUSE_UP, onTestThumbUp);
  }
}

Summary

In this article you got a good foundation in how to approach creating a virtual controller that can be used on touch based devices (and we’ll be looking in to that part of the process in more detail in part 2). You also saw how to restrict the movement of the thumb stick to within the actual controller surround; as well as what should happen if the user accidentally moves their thumb off of the thumb stick and then removes their thumb from the screen.

With the foundation set you can now leverage this to add further enhancements such as dispatching events when the user moves the controller so that you can wire it in to your game easily.

You can read the second part of this article here: Virtual Controllers For Touch Based Devices (pt.2)

Related Files

VirtualController_pt1.zip

© MikeJones for MochiLand, 2011. | Permalink | 6 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Flash Development, Front Page, Industry News, MochiLand Topics, Tutorials.

Setting-up FlashDevelop and Flixel for the first time

Last updated March 22nd 2011 for FlashDevelop version: 3.3.4 and Flixel version: 2.43

Hello World

The popularity of Flixel attracts a lot of new developers. Often they are coming into it not from Flash, but from other languages and game making tools. There’s nothing wrong with this, but it’s all too easy to fall at the first hurdle: simply getting a clean working development environment set-up. One which you can then hit “compile” and see the all-magic “Hello World” appear, rather than a blank white window or an error message.

There are lots of tutorials on setting-up FlashDevelop (see “Further Reading” for some), and a few on getting started with Flixel. But they are mostly out of date, and none of them marry the two things together. So I hope to address that in this tip. I’ll keep this tip updated as major new versions of FlashDevelop and Flixel are released.

OS X dudes, take a different path

First things first. You need to be using Windows. FlashDevelop IS coming for OS X soon. You can also run it under Parallels. And there are builds in development that you can download from the forum, but I’m not covering it here. Sorry if that excludes you. You’re welcome to come back and join us at the point where we integrate Flixel, as that will still be relevant to you.

Windows people, let’s continue …

The Development Process

It’s important you understand what each part of your development environment does. It’s easy to get mixed-up with terminology, and not really knowing where in the chain a certain piece fits. The following diagram shows the build process:

FlashDevelop is our editor, our IDE. It’s where you’ll type in all the code, and spend the majority of your time.

When it comes time to test your code, FlashDevelop will run a program called mxmlc.exe which is part of the Flex SDK. It’s the job of this program to grab everything it needs, and fire it off to the compiler. The main compiler is written in Java, hence the requirement for Java 1.6 to be installed on your PC.

At this point it’s very easy to get confused by the word “Flex” or even the involvement of Java. Traditionally Flex has been associated with Flex Builder, the Adobe application used for creating mostly dull and dry… sorry, for creating rich internet applications. Flex Builder uses MXML files to control UI layout amongst other things. Adobe since renamed it to FlashBuilder (I guess they get a kick out of confusing people). But you don’t need to care about this. All you need to know is that the Flex SDK contains the compiler, and that is what FlashDevelop uses. As for the presence of Java in this equation: the compiler is written in Java. But it doesn’t create java apps.

What the compiler does is to take your Flixel /†ActionScript 3 source code and process it.

Providing there were no errors, the compiler will have turned your code into machine code, and output a SWF file.

SWF files need to be loaded into Flash Player to be viewed. Most people are familiar with experiencing flash within their web browser, but you can (and will!) also download a stand-alone Flash Player to run SWF files from Windows, without needing a browser.

Once your SWF is loaded into Flash Player, your game will begin!

This whole process is repeated over and over during development. So let’s create this environment locally, and put together a set of flixel template files that will allow you to roll-out future projects quickly and easily.

Downloading spree

Java 1.6

As we’ve seen above the Flex SDK requires Java 1.6+ in order to compile. This isn’t standard with Windows, so unless you are a Java developer and have a Java IDE installed such as Eclipse or Netbeans, you’ll need to download and install Java first.

Go here: http://www.oracle.com/technetwork/java/javase/downloads/index.html

You need Java Platform SE (SE standards for “Standard Edition”). The current release is Java SE 6 Update 24, but any newer version should work just as well. Download the JRE (Java Runtime Environment) version. Get the 32-bit version, even if you run a 64-bit version of Windows. Install it and disable all of the annoying Sun Java update alerts.

FlashDevelop

Download and install FlashDevelop. I’m not going to screen shot the whole process, because to be fair if you can’t click “Next” a couple of times then you’re probably not yet ready to be coding games. The only important thing to note is this: When FlashDevelop asks you if you want to download and install the Flex SDK – SAY YES!

Flash Player

Flash Player is typically installed as a plug-in in most web browsers. This means if you drag a SWF file onto your browser, it should play. This is a less than ideal way to test your games though, so we’ll download the stand-alone Flash Player in two versions: Release and Debug.

Go here: http://www.adobe.com/support/flashplayer/downloads.html

and get these two files:

Download the Windows Flash Player 10.2 Projector content debugger (EXE, 6.36MB) and
Download the Windows Flash Player 10.2 Projector (EXE, 5.37MB)

If a later version of Flash Player is available when you read this, get those instead.

You will now have 2 EXE files. Copy them somewhere you are not likely to accidentally delete them!

Debug Player vs. Release Player

If you drag a SWF file onto either of these new Flash Player exes it will open and play. The reason for getting both is that one is the Debug Player, and the other is the Release Player. The Debug Player (the one with _sa_debug in its name) contains the ability for your games to throw run-time errors, view redraw regions and report back to the Flash Debugger (fdb) that FlashDevelop uses. This last part is vital for your sanity, as it will report and catch errors during testing back to you (where-as Release Player typically fails silently).

You should always develop using the Debug Player, and then test it on the Release Player before you go live. Release Player will give you a free speed-boost, as it doesn’t contain all the debugging baggage, so it runs quicker. It’s also what the majority of people seeing flash on the web are using. If your game is running a little slow under Debug, it may well be fine under Release.

Configure Flash Player to open SWFs

By default if you double-click a SWF file in Windows it’ll probably ask you to select a program to launch it with, or it may launch your browser. To change this behaviour so it opens SWFs with the Debug Player we just downloaded do the following:

Find a SWF file on your hard drive, right-click it and select Properties. You’ll see a properties window similar to this:

Click the “Change …” button to get this:

Click on the “Browse …” button and then select the Flash Player Debugger EXE you just downloaded. Make sure that “Always use the selected program to open this kind of file” is checked and click OK. Once you’re done it will look like the above window. And what’s more, double-clicking SWF files will now automatically launch them into Flash Player. Don’t worry, this action won’t change the way your web browser runs Flash. That will still work in the same way.

flixel

Adam (the creator of flixel) keeps the source code on github.com – a social source sharing site. There are 3 branches of flixel at the moment: Master, Dev and Beta. We’re only interested in the Beta branch, as it’s the most up to date and feature packed (at the time of writing). Don’t be overly concerned about the label “beta”, I’ve used it successfully in several large games without issue.

So point your browser to https://github.com/AdamAtomic/flixel/tree/beta

.. and click the big Downloads button, and pick the .zip package.

You’ll have a new file called AdamAtomic-flixel-719aabe.zip ready for use in a moment.

Project Folder

You now need to decide where you want to create all of your Flash projects.

I personally have a folder called “Flash” on one of my drives, which is then broken down into “Games”, “Demos”, and various other things. For the sake of this tutorial I’ll assume you have picked somewhere to keep all of your work, and I’ll refer to that place as your Projects Folder.

Extract the flixel zip file you just downloaded into your Projects Folder. It will create a new folder called AdamAtomic-flixel-719aabe – rename it to “flixel 2.43” (for your sanity more than anything). You’ve now got the latest release of flixel. In the docs folder you’ll find documentation. In the org folder is everything we’ll need in a moment when we create our first flixel project.

Create your first FlashDevelop Project

Note: If you know that FlashDevelop works fine on your PC, skip this step.

If all went well earlier you should have a shiny new FlashDevelop icon on your desktop. Double-click it to get started and the “New Project” window should appear (if it doesn’t click on the Project menu item and pick New)

You’ll be presented with this:

Select “AS3 Project”, give it a Name (I used “Testing Flex Compiles” above) and set the Location to be your Project Folder. Have “Create directory for project” ticked and click OK. It may now prompt you for some details, such as your name, fill them in once and it will remember them.

A big blank empty FlashDevelop project will open. In the Project window you should see 3 folders like below:

The folders are:

bin – Where the final SWF file gets compiled to
lib – You can put external compiled library files here, such as SWCs †(don’t put AS3 source code here)
src – The source folder, where all of the project source code lives

I automatically create 3 new folders at the same level:

assets – Where all assets that the game requires are placed, this is sub-foldered into graphics, music, maps and sound
dame – When creating level tilemaps I always use the map editor DAME, and store my tilemaps here
psds – High-res and working graphics are stored here. I call it psds only because I use Photoshop

Obviously you don’t have to create these 3 folders, but I would strongly recommend you do create an assets folder. The difference between assets and psds is that psds for me contains all of the work in progress graphics and Photoshop files. Where-as assets contains the PNGs exported out of Photoshop, for final use in my game.

If you expand the src folder you’ll find a file called Main.as inside. Double-click it to edit it.

This file is created automatically by FlashDevelop and it’s where your journey with flash coding begins. We want to see if the Flex compiler is working, so we’ll add in a couple of lines of code. Modify the init function so it looks like this:

[[code]]czoyNjY6XCINCnByaXZhdGUgZnVuY3Rpb24gaW5pdChlOkV2ZW50ID0gbnVsbCk6dm9pZA0Kew0KCXJlbW92ZUV2ZW50TGlzdGVuZXJ7WyYqJl19KEV2ZW50LkFEREVEX1RPX1NUQUdFLCBpbml0KTsNCgkvLyBlbnRyeSBwb2ludA0KDQoJdmFyIHJlZGJveDpTcHJpdGUgPSBuZXcgU3tbJiomXX1wcml0ZTsNCg0KCXJlZGJveC5ncmFwaGljcy5iZWdpbkZpbGwoMHhGRjAwMDAsIDEpOw0KCXJlZGJveC5ncmFwaGljcy5kcmF3UmVje1smKiZdfXQoMCwgMCwgMTAwLCAxMDApOw0KDQoJYWRkQ2hpbGQocmVkYm94KTsNCn0NClwiO3tbJiomXX0=[[/code]]

Press F5 and FlashDevelop will compile and try to run your SWF.

If all has gone well (no typos, no set-up mistakes, etc) then Flash Player will open with an 800×600 sized white window, with a red square in the top left of it. Ok so it’s hardly Super Mario, but everyone has to start somewhere right?!

Your first flixel project

Create a new FlashDevelop project, but this time pick the Project type “AS3 Project with Preloader”, call it “Goodbye Cruel World” and click OK.

The same 3 folders as before will be created. Create any extra ones you need (hint: assets!)

Before we code anything we’re going to configure the Project Properties. To do this click on the Project menu and pick Properties. Change the Dimensions to 640 x 480, the Background colour to black and the Framerate to 60 fps. Also ensure that the Target is Flash Player 10 and in the Test Movie panel it says “Play (FlashViewer default)”. It should look like this:

This told FlashDevelop that we want our game to be 640×480 in size, have a black background by default, run at 60 frames per second and that we’ll test it in the Flash Player associated with SWF files (which we set-up earlier).

Now remember that zip file we downloaded from github? The one actually containing flixel? Go back to where you extracted it and copy the org folder into the src folder of your new project. Do NOT include docs, build_docs.sh, flx.py or license.txt. Just take the org folder and nothing else.

If you do this correctly the Project structure window in FlashDevelop will look like this:

It’s very important to note the structure here. The org folder is sitting at the root (the top) of the src folder. This is vital. If you have it located anywhere else it’ll fail to compile. In the shot above I’ve expanded out the org/flixel folder so you can see the contents. You’ll also notice the Main.as file as before, and a new Preloader.as file.

Right-click the src folder and select “Add – New Class …”:

In the panel that appears ignore everything other than the Name (which will default to NewClass). Change it to FirstGame and click OK.

Repeat this process again, only instead of calling the class FirstGame, call it MenuState.

Repeat the process one final time, and call it PlayState.

By the end of this our Project window has the following files, all in the correct place:

Before we dive in, it’s worth talking about how flixel structures itself. This is best illustrated with a diagram:

When the SWF is loaded into Flash Player the code in the Preloader will run. This will carry on running until the SWF has fully loaded.

At this point the class Main gets created.

Main in turn creates a new class: FlxGame – this is the start-up class for flixel, it tells flixel what size your game is, if it should be zoomed and which state to run by default.

FlxGame then calls the FlxState you nominated, and things kick off from here.

Technically Main and FlxGame can be bundled into the same class file. I don’t like to do this personally as I’ll explain in a future tutorial, but there’s nothing wrong in doing so.

Right, time to put some code into those files we created!

Edit Main.as

Open Main.as in FlashDevelop and edit it to this:

[[code]]czo0NTY6XCINCnBhY2thZ2UNCnsNCglpbXBvcnQgZmxhc2guZGlzcGxheS5TcHJpdGU7DQoJaW1wb3J0IGZsYXNoLmV2ZW50cy5FdmV7WyYqJl19bnQ7DQoNCglbRnJhbWUoZmFjdG9yeUNsYXNzPVwiUHJlbG9hZGVyXCIpXQ0KDQoJcHVibGljIGNsYXNzIE1haW4gZXh0ZW5kcyBTcHJpe1smKiZdfXRlDQoJew0KDQoJCXB1YmxpYyBmdW5jdGlvbiBNYWluKCk6dm9pZA0KCQl7DQoJCQlpZiAoc3RhZ2UpIGluaXQoKTsNCgkJCWVsc2V7WyYqJl19IGFkZEV2ZW50TGlzdGVuZXIoRXZlbnQuQURERURfVE9fU1RBR0UsIGluaXQpOw0KCQl9DQoNCgkJcHJpdmF0ZSBmdW5jdGlvbiBpbntbJiomXX1pdChlOkV2ZW50ID0gbnVsbCk6dm9pZA0KCQl7DQoJCQlyZW1vdmVFdmVudExpc3RlbmVyKEV2ZW50LkFEREVEX1RPX1NUQUdFLCBpe1smKiZdfW5pdCk7DQoNCgkJCXZhciBnYW1lOkZpcnN0R2FtZSA9IG5ldyBGaXJzdEdhbWU7DQoNCgkJCWFkZENoaWxkKGdhbWUpOw0KCQl9DQp7WyYqJl19CX0NCn0NClwiO3tbJiomXX0=[[/code]]

In short, it’s just made your flixel game visible.

Edit FirstGame.as

Open FirstGame.as in FlashDevelop and edit it to this:

[[code]]czoxNzM6XCINCnBhY2thZ2UNCnsNCglpbXBvcnQgb3JnLmZsaXhlbC5GbHhHYW1lOw0KDQoJcHVibGljIGNsYXNzIEZpcnN0R2FtZSB7WyYqJl19ZXh0ZW5kcyBGbHhHYW1lDQoJew0KCQlwdWJsaWMgZnVuY3Rpb24gRmlyc3RHYW1lKCkNCgkJew0KCQkJc3VwZXIoMzIwLCAyNDAsIHtbJiomXX1NZW51U3RhdGUsIDIpOw0KCQl9DQoJfQ0KfQ0KXCI7e1smKiZdfQ==[[/code]]

In this case our SWF dimensions were 640×480, but the size set here is 320×240 with a zoom level of 2. So basically every pixel is going to appear doubled-up in size, for that 8-bit retro style ;) MenuState is the FlxState that will be called first.

Edit MenuState.as

Open MenuState.as in FlashDevelop and edit it to this:

[[code]]czo3MDE6XCINCnBhY2thZ2UNCnsNCglpbXBvcnQgb3JnLmZsaXhlbC4qOw0KDQoJcHVibGljIGNsYXNzIE1lbnVTdGF0ZSBleHRlbmR7WyYqJl19cyBGbHhTdGF0ZQ0KCXsNCgkJcHJpdmF0ZSB2YXIgZ2FtZVRpdGxlOkZseFRleHQ7DQoJCXByaXZhdGUgdmFyIHN0YXJ0R2FtZUJ1dHtbJiomXX10b246Rmx4QnV0dG9uOw0KDQoJCXB1YmxpYyBmdW5jdGlvbiBNZW51U3RhdGUoKQ0KCQl7DQoJCQlzdXBlcigpOw0KCQl9DQoNCgkJe1smKiZdfW92ZXJyaWRlIHB1YmxpYyBmdW5jdGlvbiBjcmVhdGUoKTp2b2lkDQoJCXsNCgkJCXN1cGVyLmNyZWF0ZSgpOw0KDQoJCQlGbHhHLm17WyYqJl19b3VzZS5zaG93KCk7DQoNCgkJCWdhbWVUaXRsZSA9IG5ldyBGbHhUZXh0KDAsIDE2LCAzMjAsIFwiTXkgRmlyc3QgR2FtZSFcIik7DQoJe1smKiZdfQkJZ2FtZVRpdGxlLmFsaWdubWVudCA9IFwiY2VudGVyXCI7DQoNCgkJCXN0YXJ0R2FtZUJ1dHRvbiA9IG5ldyBGbHhCdXR0b24oMTEwLHtbJiomXX0gOTAsIHN0YXJ0R2FtZSk7DQoJCQlzdGFydEdhbWVCdXR0b24ubG9hZFRleHQobmV3IEZseFRleHQoMCwgMCwgMTAwLCBcIlN0YXJ0IHtbJiomXX1HYW1lXCIpKTsNCg0KCQkJYWRkKGdhbWVUaXRsZSk7DQoJCQlhZGQoc3RhcnRHYW1lQnV0dG9uKTsNCgkJfQ0KDQoJCXByaXZhdGUgZntbJiomXX11bmN0aW9uIHN0YXJ0R2FtZSgpOnZvaWQNCgkJew0KCQkJRmx4Ry5tb3VzZS5oaWRlKCk7DQoNCgkJCUZseEcuc3RhdGUgPSBuZXcge1smKiZdfVBsYXlTdGF0ZTsNCgkJfQ0KCX0NCn0NClwiO3tbJiomXX0=[[/code]]

Look at the flixel documentation for details on what all of these things do. Or, as you’re now cooking with the power of FlashDevelop you can get context-sensitive help on most flixel functions by simply clicking inside of the braces and pressing CTRL+SHIFT+SPACE. You’ll see a pop-up like this, and as you move along through the parameters it’ll tell you what each of them do.

Edit PlayState.as

Open PlayState.as in FlashDevelop and edit it to this:

[[code]]czozMDY6XCINCnBhY2thZ2UNCnsNCglpbXBvcnQgb3JnLmZsaXhlbC4qOw0KDQoJcHVibGljIGNsYXNzIFBsYXlTdGF0ZSBleHRlbmR7WyYqJl19cyBGbHhTdGF0ZQ0KCXsNCgkJcHJpdmF0ZSB2YXIgcGxheWVyOkZseFNwcml0ZTsNCg0KCQlwdWJsaWMgZnVuY3Rpb24gUGxheVN0YXtbJiomXX10ZSgpDQoJCXsNCgkJCXN1cGVyKCk7DQoJCX0NCg0KCQlvdmVycmlkZSBwdWJsaWMgZnVuY3Rpb24gY3JlYXRlKCk6dm9pZA0KCQl7e1smKiZdfQ0KCQkJc3VwZXIuY3JlYXRlKCk7DQoNCgkJCXBsYXllciA9IG5ldyBGbHhTcHJpdGUoKTsNCg0KCQkJYWRkKHBsYXllcik7DQoJCX17WyYqJl19DQoJfQ0KfQ0KXCI7e1smKiZdfQ==[[/code]]

F5 = The moment of truth

Press F5 to test your game.

FlashDevelop will invoke the compiler and if all was well, it’ll launch Flash Player with your SWF in. Hopefully you’ll see this:

And clicking Start Game will show a black screen with a small white square in it.

Success! You’ve just compiled and launched your first flixel project :)

You’ve also got a good FlashDevelop template here to use for future games. Just copy the whole project folder, rename it and you’re good to go once more.

Before you know it you’ll be creating games like this too:

:)

If you have any trouble with any part of this tutorial, please post about it on the official Flixel forums: http://flixel.org/forums

Further Reading

To learn about the Flex 3 compiler design there is a great white-paper on the Adobe site.

To understand how mxmlc works, read this article by Senocular.

A Beginners Guide to FlashDevelop is a great article if you want to learn more about what FlashDevelop can do.

And the Flash Game Dev Tips Google Code Project page contains lots of other tips you can use with your new-found flixel skills.

© Photon Storm for MochiLand, 2011. | Permalink | 4 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Flash Development, MochiLand Topics, Tutorials.

Robertson Auditorium Presentations

• Opening Keynote – Jameson Hsu, CEO, Mochi Media
• Panel: 4 keys to a successful social game
• Panel: Money in Flash: Next Gen Monetization Games
• Adobe Tools and Services for Flash Games
• The Mochis Award Show
• Panel: Monetizing Your Game Outside of Sponsorship
• Panel: Everything About Sponsorship & Licensing
• The ups and downs of getting a premium flash game to success

Fisher Room Presentations

• Canabalt: Behind the Skyline
• From Bedroom to Medium Sized Office… The Nitrome Story
• PushButton Engine 101
• Flash Games Invade the 3rd Dimension! Papervision3D
• haXe for Flash Game Developers
• Boxhead (unreleased) Deconstruction

Photos

Hop on over to Flickr or watch the slide slow below.

Coverage

• 3D engine in 10 lines* – Seb Lee-Delisle’s 3D Particle code from FGS preso
• Monetizing Your Game Outside of Sponsorship – Great panel transcript and recap by Adrian Crook of FreeToPlay.Biz
• Haxe for Flash Development – GameDev.net
• Adobe Tools and Services for Flash Games – GameDev.net
• Pushbutton Engine 101 – Ben Garney – GameDev.net
• Panel – 4 Keys to a Successful Social Game that All Game Developers Should Know – GameDev.net
• Addicting News: Flash Gaming Summit (The First Three Hours) – AddictingGames.com blog
• Flash Gaming Summit 2010 – Untold Entertainment
• Flash Gaming Summit Report #1: The Longest Day – 8bitrocket
• Top Flash games honored at The Mochis 2010 – Gamezebo
• The 7 Elements Of Social Game Success – Social Times
• Flash Indie Game Interweb Mash-up: March 9, 2010: Flash Gaming Summit Edition – 8bitrocket
• So, How Was The Flash Gaming Summit? – ActiveDen
• Flash Gaming Summit: Retrospect – Jmtb02

Until next year, follow @fgsummit on Twitter and also subscribe for updates to the mailing list (right side-bar) on the Flash Gaming Summit website.

© ada for MochiLand, 2010. | Permalink | 10 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Flash Development, Game Design, Games Industry, Industry News, Mochi Media Announcements, MochiLand Topics, Tutorials.

© Vadim Starygin for MochiLand, 2009. | Permalink | 28 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Games Industry, MochiLand Topics, Tutorials.

Visit the Triqui MochiAds Arcade plugin for WordPress official page for more details. Note that this plugin was independently developed (kudos to Emanuele!) so please direct any questions you have about it to him.

© ada for MochiLand, 2009. | Permalink | 8 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Flash Development, MochiLand Topics, Tutorials.

What were we trying to achieve?

The game portal we wanted to build was slightly different from the usual. Rather than grabbing an RSS feed from somewhere like Kongregate and re-publishing everything they publish, we wanted to hand-pick our favourite games and just publish them. Quality over quantity; unless you’re talking about cupcakes.

Naturally we still wanted all the normal things that game portals do (categories, RSS feeds of games, ratings, comments etc). Both of us being programmers, we considered writing our own game portal software for, oh I don’t know, maybe 6 seconds? We ultimately decided against this because it would take too long and maintaining the code would be a bit of a nightmare (seriously, you have never seen my code).

We took a look at the portal software that was already out there. The two main players were Arcadem Pro and PHPAS. They both had some neat features alright, but overall the solutions seemed too messy. They did way more than we could ever want or need, and it really just seemed like way too much effort to apply our own design to either theme. In our search for simplicity and flexibility, it turned out we had been looking at the solution every time we visited our blog.

WordPress: The Unlikely Hero

WordPress is a blogging platform that I’m sure many of you are already familiar with. It powers millions of blogs all over the Internet, but we were able to take many of the features it offers and use them to build our portal.

So, what makes it great for a game portal?!

Our basic need was simply to publish games that we had hand-picked from various sources, and include a few details about the game and our own mini-review. We thought about it for a little while and realised that the process of publishing games for the portal was very similar to how we published out blog posts. The features that WordPress offered also made many aspects of managing the portal a lot simpler.

• 1. RSS Feeds: WordPress automatically creates RSS feeds of content published through it, so we had a ready-made feed where people could subscribe to see game releases right in their feed reader.
• 2. Pretty URLs: They’re nice to look at and it’s easy for users to remember them. Google is pretty fond of them too. All these factors make games on the portal a whole lot easier to find.
• 3. Scheduled Posts: This one’s a beauty. You could spend one night queueing up your planned releases for the next couple of months and then fly out to the Bahamas while WordPress sits at home in the rain, busily publishing out your games just like you told it to.
• 4. Comments: WordPress makes it very easy for your users have their say about each game that you post.
• 5. Categories & Tags: It’s super simple to add games to specific categories or tag them with specific keywords straight out of the box.

A little help from our friends

Of course, WordPress didn’t bow to our every command straight out of the box. We wanted our users to be able to rate the games that we published, and, being the Twitter nerds that we are, we wanted to announce the launch of each game via Twitter on our dedicated Gambrinous Games feed. Luckily, all of these issues were easily rectified by the vast WordPress developer community. We added the following plugins to help us along the way:

• Twitter Tools: A nice a simple plug-in that will automagically add new posts to Twitter.
• WP-PostRatings: Add ratings to each post in WordPress. It also has a nice feature to allow you to customise what information gets displayed around the star ratings.
• Akismet: This comes with WordPress and is a must for any blog that accepts comments. It will filter out all those nasty Viagra ads.

Already at this point, we had the bones of our game portal. There was one more feature in WordPress that came in handy, and that was Custom Fields. There was certain information that wasn’t easily conveyed through WordPress’ default functionality or through plug-ins. Certain things like setting the width and height of the flash game or setting thumbnails and screen-shots of each game we publish.

To get around this, we added a few custom fields to our blog posts for each piece of information that we needed, then added it to our WordPress theme where required. It really was remarkably painless.

The Science Bit

We brought everything together in a WordPress theme. We took the default Kubrick theme and modified it to fit our needs. The excellent WordPress Codex served as our guide throughout this process, required reading if you’re going to be making your own templates. The first thing you need to understand is the anatomy of a WordPress theme. All themes are stored in individual folders named after the theme. If you created a theme called “My Super Game Portal”, it would be found here:

/wp-content/themes/my-super-game-portal/

Another handy feature of WordPress themes is the functions.php file. Simply create a file called functions.php in your theme folder and add any custom functions to it. Everything you put in there will be available to your theme automagically. We have custom functions for pulling our top rated games and our newest games out of the database.

The final technical detail you really need to know before being able to customise your own WordPress theme is how to use those custom fields I mentioned earlier. One way we use the custom fields is to set the width and height of each game that we publish.

To use these fields in our template, we simply use the following code on the game page (single.php):

<?php
echo get_post_meta($post->ID, 'game_width', true);
    echo get_post_meta($post->ID, 'game_height', true);
?>

That should be enough to get you started. For more information, you should check out the Theme Development article within the WordPress Codex.

Finally and in Conclusion

So, that’s how we did it. It was quick and simple, and all made possible by our new friend WordPress. What are you doing still reading? Go and use WordPress to build that game portal you’ve been talking about for the last 2 months!

© Peter McKenna for MochiLand, 2009. | Permalink | 54 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Art / Visual Design, MochiLand Topics, Tutorials.