Tilebased games in Flash 5 – Part 1
Tilebased games have been done basicly since the dawn of the computergames era. Back in the days when we had computers like the 48k Spectrum ZS and Commondore 64 there were no 32mb graphic cards or 128mb rams to store the graphic and code. The gamedevelopers had to work pretty hard to squeeze everything in, and if you look back today and see what they did, it´s rather impressive. What they had to do, was to work out really smart solutions to fit it all in, this often meant ‘recycling’…
So what´s so good about tiles then? Filesize, speed, easy mapbuilding, collision detection and so on… If you don´t get it, hopefully you will after reading this and experimenting on your own.
If you ever owned a C64, spectrum, nintendo, sega, atari, amiga or whatever, chances that you have played tilebased games are 100%. But you might haven´t noticed and that´s the whole idea. If you look at some old nintendo classics like Super mario bros or Zelda, you will easily spot the different tiles and see how they were built. If you look at for example Super mario bros you can see that the bushes and the cloud-tops use the exact same tiles, just a different color. Tiles can be flipped horizontal and vertical to be used again and again to create different looks, and much more.
The basic idea is to put tiles(squares of graphic) next to eachother in a grid to create maps. The first thing we can do is to create a couple of tiles, lets just a make a black and white one to keep it simple.
Make a movieclip(ctrl-F8), name it ’tile’. In the first frame draw a white square with a black hairline, make it 16×16 (width x height), center it. In the second frame, make a copy of the first one and fill it with black. Now we got two simple tiles.
So lets move on…
Now we need to create a map. This is best done with a multidimensioal array, don´t worry it´s easier than it sounds. It can look something like this:
myMap = [ [1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,1], [1,0,1,0,0,0,0,1], [1,0,0,0,0,1,0,1], [1,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1] ];
So lets explain this, the varible ‘myMap’ is an array containing six elements, these elements are in their turn arrays. What we got then is a twodimensioal array. So what good will this do then? Well this is our map, at least it will be.
The 1:s will be black tiles and the 0:s will be white tiles.
Now lets make function that draws our simple map.
But first let´s go back to the tile-movieclip we made earlier, open the library(ctrl-L), rightclick the tile-mc choose linkage, check ‘export this symbol’, then write ’tile’ in the identifer-field.
Now open your actionscript window on the first frame on the main timeline. Put the myMap-array there.
On to the mapdrawing-function.
Let´s look at the whole thing first and then we’ll go through it step by step later.
// ### code start // no scaling of the flashmovie... fscommand ( "allowscale", false ); // constants of the tiles width and height tileW = 16; tileH = 16; // our map-array myMap = [ [1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,1], [1,0,1,0,0,0,0,1], [1,0,0,0,0,1,0,1], [1,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1] ]; // the mapdrawing-function function buildMap (map) { var mapWidth = map[0].length; var mapHeight = map.length; for (var i = 0; i < mapHeight; ++i) { for (var j = 0; j < mapWidth; ++j) { this.attachMovie("tile", "t_"+i+"_"+j, ++d); this["t_"+i+"_"+j]._x = (j*tileW); this["t_"+i+"_"+j]._y = (i*tileH); this["t_"+i+"_"+j].gotoAndStop(map[i][j]+1); } } } // calls the mapdrawing-function with the argument myMap buildMap (myMap); // ### code end
Try at and see if it works, if it dosen’t, read carefully and make sure you followed everything, or if you´re lazy, download a fla.
Here´s what mine looks like:
So now let´s step through the code.
We started by setting some constants:
tileW = 16; tileH = 16;
These are just the width and the height of out tiles, we use them later on in the mapdrawing-function to give each tile a correct x and y position.
Then we have the function:
function buildMap (map) {
We pass one argument, which is the map we want to draw, in this case we pass myMap.
Then we set two variables:
var mapWidth = map[0].length; var mapHeight = map.length;
Here we measure the maps width and height, in tiles.
The first one, map[0].length, checks to see how long the first element in the map-array are, or the length of the first array in the big array, if you will.
this one:
myMap = [ ->[1,1,1,1,1,1,1,1]<-, [1,0,0,0,0,0,0,1], [1,0,1,0,0,0,0,1], [1,0,0,0,0,1,0,1], [1,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1] ];
So it will return 8.
The second one, map.length, will check how long the big array is:
myMap = ->[ [1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,1], [1,0,1,0,0,0,0,1], [1,0,0,0,0,1,0,1], [1,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1] ]<-;
Returns 6.
So now we know that we´re dealing with a 8×6 map.
Next up we have two loops:
The first one is the height-loop and the second one is the width-loop.
for (var i = 0; i < mapHeight; ++i) { for (var j = 0; j < mapWidth; ++j) { this.attachMovie("tile", "t_"+i+"_"+j, ++d); this["t_"+i+"_"+j]._x = (j*tileW); this["t_"+i+"_"+j]._y = (i*tileH); this["t_"+i+"_"+j].gotoAndStop(map[i][j]+1); } }
So what happens is, the first time the height-loop(i) is equal to 0, then comes the width-loop(j), it will loop from 0 to one less than mapWidth(8), 7 that is(arrays first element is 0).
For each loop through the width-loop, we will attach our tile-movieclip:
this.attachMovie("tile", "t_"+i+"_"+j, ++d);
We give it uniqe name and a uniqe depth.
Then we´ll position this tile based on were we are in the height- and width loops, we also use our constants tileW and tileH to calulate this:
this["t_"+i+"_"+j]._x = (j*tileW); this["t_"+i+"_"+j]._y = (i*tileH);
Then we make sure that the tile is drawn correctly, remember 1 should be black and 0 should be white. By checking ‘map[i][j]’, we know where we are in the map-array. Lets say i is equal to 2 and j is equal to 5. Then we are here:
myMap = [ [1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,1], [1,0,1,0,0,->0<-,0,1], [1,0,0,0,0,1,0,1], [1,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1] ];
Remember when navigating in an array 0 is always the first element, 1 is the second and so on.
So:
this["t_"+i+"_"+j].gotoAndStop(map[i][j]+1);
Makes the tile go to the first frame(white) if it´s a 0 in the map-array and the second frame if it´s a 1.
That´s it! Now you have built a map! Now go experiment with this for a while, change the map, make some other tiles adn so on… Hopefully you understand the advantage of using this technique, when it comes to mapbuilding. If not, you will when we move on to, adding a character and the easy implementing of collision detection.
-
using the new site features to give a more detailed summary of Codevember 2016 with better presentation, text, imag… twitter.com/i/web/status/1…
-
Ok, with this I can already consider myself a Vtuber? 僕はすでにVtuberですか? Metahumansのサンプルは素晴らしいです。 ありがとうEpic! #UE4… twitter.com/i/web/status/1…
-
Finally got #UE4 running on the C64. youtube.com/watch?v=GxopZT…
-
GSK Visualising Advanced Tech Part 2: Look Dev. This week we are going through our visual journey and all the data… twitter.com/i/web/status/1…
-
made this piece based on @TheGreatFrogLDN's phoenix ring. all built in @notchvfx using my new field/pyro sim nodes. https://t.co/XWOuYLlrkL
Categories
Blogroll
- actionscript microcosmos
- Alternativa Platform blog
- Andre Michelle
- Antti Kupila
- Ars Thanea Blog
- astatic notes
- b-log – betriebsraum weblog
- betaruce
- blog-o-fobik
- blog.joa-ebert.com
- Cheezeworld
- Chris O'Shea
- Coding Cowboys
- CreativeApplications.Net
- Darren Richardson
- Dead End Thrills
- Designchapel
- Everyday Flash
- Everything Visual
- flash platform!
- franto.com
- gaming your way – blog
- gBlog
- generalrelativity
- generalrelativity
- Keeping track of myself
- KevLinDev Blog
- lessrain blog
- metablog
- Mike Chambers
- MoiK78 blog
- moockblog
- neurofuzzy
- North Kingdom
- Over Here
- Peter Elst
- peter nitsch.net
- Photon Storm
- PICNIC WITH PANIC
- pixelbreaker
- pixelconsumption
- Play with Motion
- polygonal labs
- Power-up Media Blog
- Quasimondo
- Razorberry's Adobe Flash Blog
- RIAgora
- ricardo cabello
- Simon Wacker
- simppa.fi/blog
- Sönke Rohde
- The efnx code blog
- toxi.in.process
- trace(myBitmapdata);
- UnitZeroOne
- w3blog
Archives
- December 2020
- December 2019
- December 2018
- September 2018
- December 2017
- November 2017
- December 2016
- December 2015
- December 2014
- December 2013
- May 2013
- April 2013
- December 2012
- July 2012
- June 2012
- January 2012
- December 2011
- October 2011
- December 2010
- December 2009
- January 2009
- December 2008
- December 2007
- June 2007
- February 2007
- December 2006
- October 2006
- September 2006
- August 2006
- June 2006
- December 2005
- October 2005
- September 2005
- August 2005
- March 2005
- December 2004
- November 2004
- October 2004
- September 2004
- August 2004
- June 2004
- April 2004
- March 2004
- December 2003
- September 2003
- August 2003
- July 2003
- May 2003
- April 2003
- February 2003
- January 2003
- December 2002
- November 2002