Isometric games look cool and almost make us believe that it is a 3D game. Creating these isometric levels can be a very demanding process, unless you rely on some tools to make things easier for you. There are tools such as Tiled, Mappy, TileStudio , and DAME which helps us with level designing, but there are not many professional tools for isometric-level designing. Dame and Tiled are the ones capable of handling isometric designs among which Tiled is the easiest one to understand. Let us try creating our own simple solution, which can be easily updated for use with any flat isometric-level design.
In this chapter, we will cover the following topics:
- Befriending Feathers UI
- Creating AIR desktop applications, which will work on Windows, Linux, and Mac
- Creating the isometric-level designer
- Adding the capability to export level data and capture designed scenes
- Using Starling graphics extension to create isometric grids
- Adding the capability to visually edit registration points
We will create an AIR desktop application, which can work across all machines supporting AIR. Using AIR helps us get access to files that are loading and saving. We will be using file access to:
- Dynamically load all tile images from a folder
- Save the level data in the form of a text file
- Capture the designed level as screen grab for comparing with a coded level later on
From the previous chapter, we know that we need a ground-layer array, an overlay-layer array, a registration points dictionary, and a screen offset point value for effectively displaying any flat isometric level. By flat, I mean that our isometric level has a single ground level and there are no elevated tiles. For this purpose, the level editor will require the following minimal features:
- Ability to load all tile images from a folder recursively
- Ability to paint the ground layer
- Ability to paint the overlay layer
- Ability to fill a layer with any selected tile, which is called flood filling
- Ability to export created level data
- Ability to screen grab the design
- Ability to reset each layer
- A visible isometric grid for reference
- Ability to edit the registration point of nonstandard tiles and export that data too
The code for the designer app is available in the Chapter 4 folder.
If you have not heard about Feathers UI, then I implore you to check it out at http://feathersui.com/. Feathers UI provides Flex or fl.controls - like components which save a lot of work. Created by Josh Tynjala, who is a very active figure in the Starling community—this one is a must have for everyone's code repository. In the code, we have added Feathers UI and the aeon desktop theme source files as a dependency and also copied the graphic assets into the assets folder. Once the Starling root is created, we initialize the theme to set it up, as follows:
new AeonDesktopTheme();
We will be using Button, ImageLoader, ScrollContainer, Panel, and Radio controls from Feathers UI.
The Starling graphics extension enables drawing APIs, which were originally available in the flash display list Sprite class. We will use the Shape class to create our isometric grid from the IsoHelper class, as shown in the following code:
public static function createIsoGrid(cols:uint,rows:uint,tileWidth:Number,tileHeight:Number):Shape{
var tempSprite:Shape=new Shape();
var d:Point=new Point(0,tileHeight*rows);
var c:Point=new Point(tileWidth*cols,tileHeight*rows);
var b:Point=new Point(tileWidth*cols,0);
var a:Point=new Point(0,0);
tempSprite.graphics.lineStyle(1,0x000000);
var srcPt:Point=new Point(0,a.y);
var destPt:Point=new Point(0,0);
for(var i:uint=0;i<=cols;i++){
if(i==0||i==cols){
tempSprite.graphics.lineStyle(1,0xff0000);
}else{
tempSprite.graphics.lineStyle(1,0x000000);
}
srcPt.x=a.x+(i*tileWidth);
srcPt.y=a.y;
destPt.x=d.x+(i*tileWidth);
destPt.y=d.y;
srcPt=IsoHelper.cartToIso(srcPt);
destPt=IsoHelper.cartToIso(destPt);
tempSprite.graphics.moveTo(srcPt.x,srcPt.y);
tempSprite.graphics.lineTo(destPt.x,destPt.y);
}
for(i=0;i<=rows;i++){
if(i==0||i==rows){
tempSprite.graphics.lineStyle(1,0xff0000);
}else{
tempSprite.graphics.lineStyle(1,0x000000);
}
srcPt.x=d.x;
srcPt.y=a.y+(i*tileHeight);
destPt.x=b.x;
destPt.y=b.y+(i*tileHeight);;
srcPt=IsoHelper.cartToIso(srcPt);
destPt=IsoHelper.cartToIso(destPt);
tempSprite.graphics.moveTo(srcPt.x,srcPt.y);
tempSprite.graphics.lineTo(destPt.x,destPt.y);
}
return(tempSprite);
}In the preceding code, we find the four corners of the isometric plane and draw lines updating the columns and rows in a loop. There is another helper function called createFilledSingleIsoGrid, which returns a single filled isometric grid.