Basic level editor for a tile based game

I am sharing with you a basic level editor made for the platform engine but easily adaptable to any tile based game made by Daniel Felipe Rodriguez

Your recent set of tutorials about the platform engine inspired me so I decide to contribute to your cause, I made a really really basic level editor but I’m sure it will help the level design, and maybe some future projects because the editor can be adapted really easy to any game.

In a future I will do a better editor, but this was just a quickly one, because really love this tutorials, continue with the good work!

The editor is made in AS3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var currentTile:int = 0;
 
var horizontalTiles:int = 20;
var verticalTiles:int = 10;
 
var totalTiles:int = mcCurrentTile.totalFrames;
 
var levelTilesContainer:Sprite = new Sprite();
 
makeSelectionTiles();
makeLevelTiles();
 
function makeSelectionTiles():void {
	var container:Sprite = new Sprite();
	container.x = 200;
	container.y = 20;
 
	for (var i:int; i<totalTiles; i++) {
		var tile:Tile = new Tile();
		tile.gotoAndStop(i + 1);
		container.addChild(tile);
		tile.x = (tile.width - 1) * i;
		tile.addEventListener(MouseEvent.MOUSE_DOWN, selectionClick);
	}
	addChild(container);
}
 
function selectionClick(evt:MouseEvent):void {
	currentTile = evt.currentTarget.currentFrame;
	updateCurrentTile();
}
 
 
function updateCurrentTile():void {
	mcCurrentTile.gotoAndStop(currentTile);
}
 
 
function makeLevelTiles():void {
	var xPos:Number = 0;
	var yPos:Number = 0;
 
	for (var i:int=0; i<verticalTiles; i++) {
		for (var j:int=0; j<horizontalTiles; j++) {
			var tile:Tile = new Tile();
			tile.x = xPos;
			tile.y = yPos;
			tile.name = "" + i + j;
			tile.addEventListener(MouseEvent.MOUSE_DOWN, levelClick);
			levelTilesContainer.addChild(tile);
			xPos += (tile.width - 1);
		}
		yPos += (tile.height - 1);
		xPos = 0;
	}
	levelTilesContainer.x = 50;
	levelTilesContainer.y = 100;
 
	addChild(levelTilesContainer);
 
}
 
function levelClick(evt:MouseEvent):void {
	evt.currentTarget.gotoAndStop(currentTile);
}
 
btnGenerate.addEventListener(MouseEvent.MOUSE_DOWN, generateClick);
 
 
function generateClick(evt:MouseEvent):void {
	var array:String = "[ ";
 
	for (var i:int=0; i<verticalTiles; i++) {
		array += "[";
		for (var j:int=0; j<horizontalTiles; j++) {
			var target:DisplayObject = levelTilesContainer.getChildByName("" + i + j);
 
			if (j == (horizontalTiles - 1)) {
				array += (MovieClip(target).currentFrame  - 1);
			} else {
				array += (MovieClip(target).currentFrame - 1) + ", ";
			}
		}
		if (i == (verticalTiles - 1)) {
			array += "] ]";
		} else {
			array += "],\n";
		}
	}
	trace(array);
}

And this is the result: once you click on “Generate” the script will trace the array.

For this reason there is no way to see the result online, you have to download the source and execute it inside Flash.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (20 votes, average: 4.65 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 21 comments

  1. Niall Lavigne

    on October 8, 2008 at 2:02 pm

    Wow, that looks pretty sweet, nice job Daniel. Now to learn AS3…

  2. Andrius

    on October 8, 2008 at 2:42 pm

    Good. But I need AS2 version :)

  3. Daniel

    on October 8, 2008 at 3:14 pm

    AS2 version will be easy to do with the as3, I love OOP(so hate as2) for this reason made it in as3, if I get some free time will make the as2. remember its a really! really!! really!!! basic editor, but if tou are in a hurry :-).

  4. dix huit

    on October 8, 2008 at 3:55 pm

    Cool. Any news on the WordPress arcade plugin yet?

  5. Emanuele Feronato

    on October 8, 2008 at 4:19 pm

    still working on it…

  6. Josh of Cubicle Ninjas

    on October 8, 2008 at 4:58 pm

    Both Emanuele and Daniel are kings among men. This made my day! :)

  7. Gecko

    on October 8, 2008 at 7:15 pm

    Argh! DARN YOU AS3!
    I can’t wait for the as2 version!

  8. Javier Lázaro

    on October 8, 2008 at 7:59 pm

    AS2 version, please…

  9. Jerry

    on October 8, 2008 at 9:11 pm

    I click on generate and nothing happens?

  10. brart

    on October 8, 2008 at 9:27 pm

    Jerry, read the text under the editor

  11. Arxanas

    on October 9, 2008 at 12:01 am

    Wow, that’s really good! Can you convert it to AS2, though, because I really suck at AS3.

    Could you also maybe explain how it works, in case we want to make our own custom level editors fitted to our own needs?

    Also, to Daniel Felipe Rodriguez, whoever you may be, you might want to add a legend at the bottom of the legend editor. Awesome work!

  12. Prankard

    on October 9, 2008 at 1:49 am

    This editor only traces out the level array. Basically, the traced array should be the same for both versions of the engine (both AS2 and AS3).

    But obviously you need flash 9 or greater to export AS3 (unless you have flash 8 with the beta AS3).

    Just remove all the “level[0] = ” etc and replace it with:
    level = *insert traced level here*

  13. Daniel

    on October 9, 2008 at 3:10 am

    @Prankard yes the editor make the array of arrays in one big array, and its the same in as2 and as3.
    For the as2 fans I have develop an as2 version, can found it in the forums http://www.triquitips.com/viewtopic.php?f=23&t=641&p=4516
    Enjoy.

  14. Daniel Rodriguez

    on October 9, 2008 at 3:24 am

    @Arxanas, well it works really good to be something I made really fast :-), just need to change the tile movieclip and add other keyframes, I copy the emanuele movieclip tile, for this reason have his tiles.

  15. AS3 Tilegame Editor

    on October 16, 2008 at 5:06 pm

    [...] again from the blog of Emanuele Feronato I created a very nice editor in Flex for my tilegame. The original was only Flash, but I converted it to Flex (which I think is a lot easier to create such interface [...]

  16. Aksel

    on November 19, 2008 at 1:13 am

    Hey, what you could do, is to use System.setClipboard(array); instead of tracing the whole map. That would do so you can just get the map code directly to the “copy paste” thing.

  17. Tile based game: Level Editor

    on December 26, 2008 at 8:11 pm

    [...] Can find more info in his post, here. [...]

  18. Daniel Rodriguez

    on December 26, 2008 at 8:16 pm

    @Aksel Thanks, its done.
    More updates in this new post.
    http://tutorials.group84.com/2008/12/tile-based-game-level-editor.html

  19. Daniel

    on June 24, 2009 at 2:43 pm

    Man! You take a rock of work down of my shoulders – thank you so much!

  20. AS3 level editor : Emanuele Feronato

    on September 18, 2009 at 12:27 am

    [...] a year ago I blogged about a basic level editor for a tile based game, and now Philipp Zins from Germany show us his AS3 level editor- I made the level editor in [...]

  21. Jonathan

    on December 3, 2011 at 12:22 pm

    Darn AS3! C’mon AS2!!