dcsimg
A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: Organising Tile-Based Graphics

  1. #1
    Robot Master the--flash's Avatar
    Join Date
    Jul 2005
    Location
    The year 20XX...
    Posts
    132

    Organising Tile-Based Graphics

    Heytherehitherehothere.

    I'm about to begin working on a tile-based game, but one thing has me really stumped: how do people organise the graphics for their tiles? I base most of my techniques off the tonypa tutorials (store all the tiles in objects, each tile object is called Tile#, and to choose the tile name you access an array with a bunch of numbers, and add it to the string "Tile")

    The problem is, there's always more tile graphics than simple tile types. Like, if I have 1 walkable tile, and 1 non-walkable, I probably have 10 graphics for each. How do I organise this? I checked at...

    http://oos.moxiecode.com/

    ...and clicked the Zelda game. If you build a map, you can see his array. Rather than just a bunch of numbers in his map arrays, he places an array with two things: a number, for the tile type, and a letter+number in a string. I just don't know how to properly use anything but a number to choose a graphic for the tile MC to go to. Usually, the tile# coorosponds to the frame, but with so many graphics I can't do that.

    I thought of just using letters for the graphics, and somehow converting them to numbers, but I'm not sure how...does anyone have any advice on how they do this?

  2. #2
    Funkalicious TOdorus's Avatar
    Join Date
    Nov 2006
    Location
    Nijmegen, Netherlands
    Posts
    697
    Every tile class can have it's own Frame property, so you can still use the numbers in an array. You just have multiple wall classes. A frame in a gotoAndStop() can also be a string gotoAndStop("Grass"), you just got to label the frame Grass. To do this click on a frame and you should be able to see "label" in the properties tab.

  3. #3
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,379
    Like Todorus said, create a GAS engine and then use the first letter (if you can) of each tile type as the linkage name. Then in your array the sixth grass tile would be "g6" in your array and you can do this:

    Code:
    var mapdata = map[i][j];
    var type = 	mapdata.split("")[0];
    var frame = Number(mapdata.split("")[1]);
    var m = attachMovie(type, type + getNextHighestDepth(), getNextHighestDepth());
    // etc...
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

  4. #4
    Please, Call Me Bob trogdor458's Avatar
    Join Date
    Aug 2006
    Location
    Pensacola, FL
    Posts
    915
    I always use two dimensional arrays to store tile information
    You can access the data with stuff like array[etc][etc]

    This is very useful as I've had tiles loaded with all sorts of information:
    graphic, tiletype, elevation, etc.

    I doubt I could easily compact all the information I needed into a single value
    I think I might've even had information related to diplacement graphics at one point, when I was trying to get extremely cool lighting effects

    It worked, and I managed to get my displacement maps fine, but the tiles were ugly so I scrapped it

  5. #5
    Member
    Join Date
    Jan 2009
    Posts
    90
    On a tangentially related point, is there an easy way to automatically embed many bitmaps into a project? The way I currently do it is (I'm typing this from memory so the syntax may be slightly off);

    [Embed(source="/assets/img/image1.png")]
    private var image1Bitmap:Class;

    Then I have an object (textures) that contains references to the bitmap data:

    textures['image1'] = (new image1Bitmap as BitmapAsset).bitmapData;

    Now whenever I need that bitmap data I can access it by the identifier textures['image1']. Which is great and all, but it's really tedious to have to do all three steps whenever I want to add a new image to the project. Besides writing a Perl script to scan a directory for pngs and generate the necessary ActionScript, is there an easier way to get a large number of assets embedded into a project?

  6. #6
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,379
    I use the IDE and I typically just go File -> Import To Library... If you're not using the IDE I'm not really sure how to help you.
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

  7. #7
    Robot Master the--flash's Avatar
    Join Date
    Jul 2005
    Location
    The year 20XX...
    Posts
    132
    Oh em gee. I completely forgot about labels for frames and all that, this makes it so much easier! Thanks very much for all the help, guys!

  8. #8
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,379
    If you name the frames the same as the frame number, you don't have to convert the tile string to a number as I did in the above example.
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

  9. #9
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,379
    Another way to do it would be to lay down what I call a "gauntlet" function. Beforehand, I arranged a single tile sheet that housed every single world tile. Then, whenever I would draw one I would say ok, go through the gauntlet function and that function would set all the attributes for that tile. For instance, tiles 0-100 were simple wall tiles, so it would set "walkable" to false. Tiles 101-115 were stair tiles, so it would set "walkable" to true and "slope" to 1 or -1. It might be easier if I just post the example. Keep in mind that I really don't suggest using this method as it does not allow for flexibility, especially if you go back and change your tileset later on.

    Code:
    /*****************************
    Platformer v.01 Tile Set Module
    *****************************/
    function makeObj(y, x) {
    	var temp = game["t" + y + "_" + x] = new Object();
    	temp.x = x;
    	temp.y = y;
    	spriteAttribSet(temp);
    }
    function spriteAttribSet(tile) {
    	var itemNumber = map[tile.y][tile.x];
    	// default values
    	tile.ambient = false;
    	tile.walk = false;
    	tile.climb = false;
    	tile.cloud = false;
    	tile.slope = false;
    	// is it a wall?
    	if (itemNumber < 432) {
    		tile.walk = false;
    	}
    	// is it a ladder?           
    	if (itemNumber > 431 and itemNumber < 442) {
    		tile.walk = true;
    		tile.climb = true;
    		if (itemNumber >= 436) {
    			tile.cloud = true;
    		} else {
    		}
    	}
    	// is it a background?   
    	if (itemNumber > 441 and itemNumber <= 564) {
    		tile.walk = true;
    	}
    	// is it a lighting?   
    	if (itemNumber > 564 and itemNumber < 693) {
    		tile.walk = true;
    		tile.ambient = true;
    	}
    	// is it a slope?   
    	if (itemNumber > 692 and itemNumber < 717) {
    		tile.walk = true;
    		if (itemNumber > 705) {
    			tile.slope = 1;
    		} else {
    			tile.slope = -1;
    		}
    	}
    	// is it a cloud?   
    	if (itemNumber > 716 and itemNumber < 726) {
    		tile.walk = true;
    		tile.cloud = true;
    	}
    	// is it a blank?   
    	if (itemNumber > 725) {
    		tile.walk = true;
    	}
    }
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center