Jump to content


Photo
- - - - -

Auto-Tiling


  • Please log in to reply
13 replies to this topic

#1 Chronic

Chronic

    Administrator

  • Global Moderators
  • 2729 posts
  • Version:GM:Studio

Posted 18 November 2010 - 04:34 AM

  • Title: Auto-tiling
  • Description: A quick and easy method to auto-tile
  • GM Version: GM4 to present
  • Registered: No
  • File Type: N/A
  • File Size: N/A
  • File Link: N/A

Auto-tiling by Chronic

When it comes to making levels, it can be very tedious switching between objects to make the landscape continuous. Auto-tiling can help speed up by letting the computer do the work for you using a little binary math. It does this by having the object check its surroundings and then setting its own image_index based on whats beside it.


Getting Started

Add a new script to the project named auto_tile. Now, copy and paste the script below into it.

{
  var dst, obj, up, down, left, right;

  dst = 32;
  obj = object_index;
  up = place_meeting(x,y-dst,obj);
  down = place_meeting(x,y+dst,obj);
  left = place_meeting(x-dst,y,obj);
  right = place_meeting(x+dst,y,obj);

  image_speed = 0;
  image_index = (8*down) + (4*left) + (2*up) + right; 
}
This script should now be called from the Create Event of each object which requires it. Please alter the script as required, especially the dst variable. As explained in the opening paragraph, the object checks its surroundings, this is done using place_meeting(). This function is used to check for a specific object, however if this is not required, it maybe switched to a similar function (note, the returned result must still be either true or false).

The last line is what makes this all work. Using a little binary math, the result will be a number from 0 to 15 which will be used to set the sprite to the correct frame.


Setting up the sprite

Setting up the sprite is actually the hardest part of this, as the frames must be in a certain order for the end result to look correct. First of all, add a new sprite with a total of 16 frames. There are two simple ways to get the frame order correct. The first of these is to draw a number on each frame of the sprite, the other is to add the following to the draw event of your object.

draw_sprite(sprite_index,image_index,x,y);
draw_text(x,y,string(image_index));
Next open the room editor and place the object in a pattern similar to what you see below. Where # is your object, and - is a blank space.

-#-#--###
#####-###
-#-#--###
#####----
-#-#---#-

Run the game and double check that all frames of the sprite can be seen. If a frame is missing, double check the sprite and object pattern then retry.

Once every frame is seen, the sprite should be updated to something more appropriate.


Additional Information and Advice

While auto-tiling is a good method to quickly prototype a level, This process should ultimately not be used in the final game. Using objects to decorate large levels can have drastic impact on a games performance, and the use of tiles should be favoured instead. To put it another way; Objects should never be used for static level decoration unless its required.

If the dst variable is going to remain the same through out the game. It maybe removed and the value hard coded in to the place_meeting() function. If the value does change, then replace the value (32) with argument0 and pass the value as an argument when calling the script.

auto_tile(32);
The same thing can be done with the obj variable.


Closing

Thank you for reading this tutorial, if you have any comments, suggestions or questions please leave a reply. This tutorial will be available on my site soon.
  • 1

My recent tutorials: [Auto-Tiling] [Text Based Menu] [Sprite Based Menu] [View more at my site]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
R.I.P Mom (1951-2008)


#2 lasttea999

lasttea999

    GMC Member

  • GMC Member
  • 290 posts

Posted 20 November 2010 - 01:22 AM

I have an engine that does something like this here, but I never really thought about efficiency and performance and the like... Hmm.

What would be a good way to address the issue of inside corners with your method?
  • 0
Posted ImagePosted Image

#3 Chronic

Chronic

    Administrator

  • Global Moderators
  • 2729 posts
  • Version:GM:Studio

Posted 20 November 2010 - 03:07 PM

I do plan on extending the tutorial to cover the inside corner issue. One very simple solution is to use a different object/sprite for occasions like that. Another is to edit the auto-tiling script to check for the corners also (thus increasing the frame count). I plan on covering both, but i've not had the time to work on it yet.
  • 0

My recent tutorials: [Auto-Tiling] [Text Based Menu] [Sprite Based Menu] [View more at my site]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
R.I.P Mom (1951-2008)


#4 YellowAfterlife

YellowAfterlife

    GMC Member

  • Global Moderators
  • 4157 posts
  • Version:GM:Studio

Posted 20 November 2010 - 03:52 PM

Perhaps this is not the first time this approach is being used(I've suggested similar method too :) ), but appears to be most user-friendly\readable.

Since discovering tile order is the most time-consuming part of using this method of auto-tiling, I guess I could help:
Posted Image
- template, non-transparent (<gm8)
Posted Image
- template, transparent (>=gm8)
Posted Image
- one of tilesets that come with Game Maker 8, sorted for using with this script.
  • 1
If my posts contain broken links, try looking around my website. I gradually make blog posts for any examples I make.
_.png_.gif

#5 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 20 November 2010 - 06:40 PM

Nice job, though you should put Yellow's images on the OP to help users figure out how to organize their tiles.

Also, to get inside-corners working you would need 256 images. It's possible to get them all, but I don't really think the ends would justify the means.
  • 0

#6 Nocturne

Nocturne

    Nocturne Games

  • Administrators
  • 25708 posts
  • Version:GM:Studio

Posted 20 November 2010 - 06:49 PM

Nice job, though you should put Yellow's images on the OP to help users figure out how to organize their tiles.

Also, to get inside-corners working you would need 256 images. It's possible to get them all, but I don't really think the ends would justify the means.


@Brod, I got a script that does EVERY possible combination of tiles (I think) and it uses 47 images only... (click)... or is it a mathematical thing given that Chronics version is 2,4,8 etc...?

@Chronic, that is a lovely and simple script! I´d love to optimise my version to something as condensed as that...

Edited by Mark13673, 20 November 2010 - 08:14 PM.

  • 0

U1FVsm3.png

40799.png


#7 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 20 November 2010 - 06:56 PM

Oh silly me, I forgot to subtract the unnecessary tiles. (My calculations took into account tiles that don't have tiles left/right/above/below them, greatly increasing the amount)

Edited by brod, 20 November 2010 - 06:57 PM.

  • 0

#8 Chronic

Chronic

    Administrator

  • Global Moderators
  • 2729 posts
  • Version:GM:Studio

Posted 30 November 2010 - 04:34 PM

I've not had time to make the update to this tutorial that i mentioned earlier, so sorry to anyone waiting on it, but it'll probably be a while.
  • 0

My recent tutorials: [Auto-Tiling] [Text Based Menu] [Sprite Based Menu] [View more at my site]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
R.I.P Mom (1951-2008)


#9 olsureshot

olsureshot

    GMC Member

  • New Member
  • 19 posts

Posted 10 January 2011 - 12:02 AM

Here's the formula for 8 directions:

image_index = (128*SE) + (64*S) + (32*SW) + (16*W) + (8*NW) + (4*N) + (2*NE) + E;

It's a very simple expansion.
Just as a point of curiosity, I looked at the Civilization III terrain files, and they do things precisely this way. The road graphic has 256 tiles, and they are exactly in the order that would be produced by using this equation.
Congratulations Chronic! Your method is probably the best there is, if the major gaming companies are using it...
  • 0
"A human being should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. Specialization is for insects."
-- Robert A. Heinlein

#10 Chronic

Chronic

    Administrator

  • Global Moderators
  • 2729 posts
  • Version:GM:Studio

Posted 10 January 2011 - 02:25 AM

Yeah, that's one way to expand it to 8 directions, but its also a lot of tiles to draw. Math is not my strong point, but i'm certain there has to be a method that will require less tiles.
  • 0

My recent tutorials: [Auto-Tiling] [Text Based Menu] [Sprite Based Menu] [View more at my site]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
R.I.P Mom (1951-2008)


#11 lasttea999

lasttea999

    GMC Member

  • GMC Member
  • 290 posts

Posted 10 January 2011 - 02:59 AM

That can be narrowed down to 47 tiles, right? My engine uses a bunch of if statements...
  • 0
Posted ImagePosted Image

#12 JonathanPzone

JonathanPzone

    GMC Member

  • GMC Member
  • 1215 posts
  • Version:GM:Studio

Posted 11 July 2011 - 02:01 AM

Nice tutorial. Hopefully people who plan on doing any kind of path tiling should look into this as it would probably make their lives a lot easier.

But if I may make a suggestion, you could easily replace the addition and multiplication with bitwise operators (which makes sense as you're basically working in binary), which I believe is faster.

So instead of:
image_index = (8*down) + (4*left) + (2*up) + right; 

You could use:
image_index = right | up<<1 | left<<2 | down<<3 ; 

  • 0

BRB 3 years for University


#13 snuffysam

snuffysam

    GMC Member

  • GMC Member
  • 238 posts
  • Version:Mac

Posted 11 October 2012 - 01:41 AM

I have a weird problem happening here.
For some reason when I test it with that -##- thing you posted, the corners work fine. But in certain parts of the game, the corners just show themselves as regular lines.
Do you know what might be causing this?
  • 0

#14 csanyk

csanyk

    GMC Member

  • GMC Member
  • 624 posts
  • Version:GM:Studio

Posted 12 October 2012 - 08:04 PM

  • Title: Auto-tiling
  • Description: A quick and easy method to auto-tile
  • GM Version: GM4 to present
  • Registered: No
  • File Type: N/A
  • File Size: N/A
  • File Link: N/A

[snip]

Closing


Thank you for reading this tutorial, if you have any comments, suggestions or questions please leave a reply. This tutorial will be available on my site soon.


Having NOT worked with tiles very much in my projects, I have very poor understanding of this tutorial from just reading it. It would be very helpful if you provided a demo project so I could look at running code. Please consider making a simple demo to show what this technique can do.

Thanks!
  • 1