58,936

Views

Beginner

Level

22

Comments

Tiles & Tilesets

by Jon (Updated on 2014-01-26)


What are the building blocks of a scene? The scene’s terrain or “land” is typically made up of Tiles. Much like the tiles on your kitchen counter or bathroom, Tiles in a game are uniformly sized pieces of land that conform to a grid.

This article will cover the basics of importing and working with tiles.

 

Contents

  • Importing a Tileset
  • Collision Shapes
  • Animated Tiles
  • Working with the Tileset
  • Mobile Games & Tilesets
  • Troubleshooting
  • The Tile API

 

Importing a Tileset

Step 1 - Create It

Go to this menu item: File > Create New > Tileset

 

Step 2 - Name It

 

Step 3 - Import the Tile Sheet

You'll now see this window.

1) Click "Choose Image" to pick out the tile sheet you want to import. (You can also copy it to the clipboard and paste it in.)

2) Pick out the Tile Width/Height. This will determine how your tile sheet is cut up. In most cases, this is 32x32 or 16x16.

3) The spacing and border fields are for cases where your tiles are spaced apart. This is rare.

 

That's it! Click Add to finish the import.

 

Collision Shapes

Now that you've uploaded your tileset, you will want to set the collision shapes for your tiles. You can either...

  1. Choose an existing collision shape (or none at all)
  2. Create a custom collision shape.

Picking a shape is simple - just click on any entry within the Collision Bounds pane. This even works when multiple tiles are selected (click and drag to select multiple tiles in the left pane).

If you prefer to make a custom shape, click the + button. You'll get a choice between creating a box (rectangle) or a convex polygon.

 

To learn more about tile collision shapes and how to define custom shapes, we've got a full article for this:

Setting Tile Collision Shapes

 

Animated Tiles

Some games use Animated Tiles to bring a scene to life. Here's how you convert a plain tile to an animated one.

1) Open up a Tileset.

2) Click on the Tile you'd like to animate in the left pane.

3) You'll now see information in the right-hand pane. The bottom part of this pane should look familiar. It's the same as the one you use for managing an Actor's animations.


From this point, it's the same process and user interface as working with Actor Animations. Namely:

  1. Import frames from an image strip/sheet.
  2. Edit the frame durations, if necessary.

 

Working with the Tileset

You can alter a tileset's row and column count by clicking directly on the row and column headers.

Tip: You can select multiple tiles at a time by clicking and dragging. What's the use of this? You can edit multiple collision bounds at the same time, a major time saver.

 

Mobile Games & Tilesets

If you've worked with mobile games, you'll know by now that all graphics should be imported at a higher resolution, in order to support larger resolution displays and tablets.

You also know that in all other respects, you author your game at "1x" resolution. We just swap the high-res graphics in on the fly if the game is played on a higher resolution Device. This detail is never known to you.

What is the bottom line for tilesets?

1) Import Tilesets at 2x/4x.
2) Specify the Tile Width, Tile Height and other parameters in 1x.

For example, if your game's regular tile size is 32 x 32, you should import a tile sheet where the tiles are 64 x 64 (or 128 x 128 if you intend to targe, but you still say that the tile size is 32 x 32.

 

Troubleshooting

1) If possible, keep the tile size for all tilesets and scenes the same. This will spare your headaches in the long run.

2) When defining custom polygon shapes for Tiles, you can only use convex polygons. If you need to make a concave polygon, split it into several convex polygons instead.

3) In rare situations, a scene may crash in game if the terrain is complex enough to exceed our engine's internal limit - there's no exact number, but it's on the order of hundreds, possibly thousands of sides. This happens because we combine all of the shapes into larger ones to improve performance.

This can be worked around by alternating the terrain to break up the large, offending shape into 2 smaller land masses.

 

The Tile API

What if you want to change a scene's terrain at runtime? For example, you're making a game with automatically-generated dungeons.

You'll need to use some code, but we've got a special Tile API for this. As of Stencyl 3, this API is now available as a set of blocks rather than just code.

 

Summary

  • Tiles are uniform building blocks for scenes.
  • You can specify custom collision shapes for tiles and animate them.
  • Tiles get auto-combined by Stencyl into large land masses in order to improve performance.
Disclaimer: All articles are geared towards Stencyl 3.0 and above. Use comments to provide feedback and point out issues with the article (typo, wrong info, etc.). If you're seeking help for your game, please ask a question on the forums. Thanks!

22 Comments

TheUnfortunateHobbit
When it says import from tilesheet, THERE'S NOTHING THERE
0 1 week, 3 days ago
Bso69
One thing I noticed with the tile shrinking, and hope this helps, is that when you make a tile it needs to be twice the size you want it shown in the game. Example: I want a 16x16 tile size means I need to make it 32x32 pixels before importing. Hope that helps someone
0 1 month, 3 weeks ago
CupCat
one major problem is that each time i edit the tileset image i have to add it to the tileset again and set all collisions again and rebuild the level im using the tileset in from scratch. this makes me unable to use the program as i edit a tileset hundreds of times during the process, sometimes just because a single pixel looks off, and i cant rebuild the tileset and the level every time that happens.
1 4 months, 4 weeks ago
GarrowGlitch
sucks that you cant move tiles to organize. when i import, they go all over the place and i have to delete rows to get them in proper spots
0 5 months, 3 weeks ago
herumi555
this is anoyying, they didn't say about shrinking images. i have set of tiles, but always shrunk everytime i upload to the project. did i have to split it again?
split the tiles 1 by 1 and upload ti the project 1 by 1. please make it clear

0 6 months, 6 days ago
samasabi
dis confusing
me no get it
me caveman

0 8 months, 6 days ago
acarnivorousocean
So many people who can't read disclaimers...
0 8 months, 3 weeks ago
Ltex82
When making my own tile sets should i save as JPEG or GIF?
-1 9 months, 3 days ago
Pepster
To make a tile transparent:
1. In your dashboard, right click the tileset you want.
2. Select edit.
3. In the newly oppened tab, left click the tile you want to make transparent.
4. You will see it opens a box titled "Collision Bounds".
5. Select the "No Collision" option, which is usually in the top-left corner.
Hope this helped :)
Sorry for my bad english.

0 10 months, 2 weeks ago
Here2game
How do I A.make a color on a tileset transparent,B.give indivisual tiles properties
0 10 months, 3 weeks ago

Sign In to Comment