Tips for drawing tilesets

Solar2D General Questions/Discussion
#1

We have great tools (Tiled, Dusk and so on) to make tiled games, but could you share some tips how to draw tilesets.

For example what software you use? Is there any “tileset drawing software” or useful Photoshop plugins available?

If you use Photoshop, any tips on this (grid, scaling and so on)…?

Here are a few tips that I’ve have found very useful. If you have made any test with Corona and tiled maps, I’m pretty sure you have encountered “flickering lines” problem:

Please, share your tips and questions :slight_smile:

#2

(I’m assuming by “tile maps” you’re referring to tilesets. Tile maps are what you load in your game; tilesets are what you use to create tile maps)

I create pixel-art tiles on PikoPixel (http://twilightedge.com/mac/pikopixel/), then I pack them with TOAD (https://github.com/GymbylCoding/Dusk-Engine/tree/master/TOAD). TOAD allows you to add spacing around tiles, which is one of the three steps you can take to get rid of flickering lines. For non-pixel-art, I use Sketch or Pixelmator (depending on the tiles required), then pack them with TOAD.

But I’d definitely recommend creating tiles separately, then packing them. Doing that allows you to keep different tiles separated, and gives more flexibility with spacing, margin, and layout.

  • Caleb
#3

Thanks Caleb! Yes I ment tilesets. I modified the post :wink:

Why you use Pikopixel, Sketch or Pixelmator and not Photoshop? For example what are the benefits using PikoPixel?

And a question to all tileset masters. If I’ve understood correctly, you should have at least two different size of the same tilesets (for example one for iPhone4 and other for iPhone5). Or should there be even more sizes? And do you design the tileset for the retina display and then scale them down?

#4

PikoPixel is great for pixel graphics, Sketch is great for vector graphics, and Pixelmator is great for bitmap graphics. They’re all capable enough, fast enough, and powerful enough to do everything I need, so why Photoshop?

Plus, when I bought Sketch, it was $49.99, and I got Pixelmator on sale for $14.99. PikoPixel is free. Contrast that with Photoshop, $9.99 per month. In half a year, I’d have paid the same price for a subscription-based art program as I paid for both Sketch and Pixelmator combined. Quite nasty, especially for a 15-year-old who isn’t the richest person in the world :P.

I usually make tiles 64x64, then scale them down to 32x32 for non-retina devices. If you start with big, it’s easier to adapt them for non-retina screens. Don’t forget to make the spacing on your retina tilesets twice that of your normal tilesets, though!

  • Caleb
#5

I understand the price issue, though if you have/master Photoshop, there isn’t really a reason to change?  I really have to check Sketch, but mainly 'cause it sounds promising for web development :wink:

About spacing. So if I make tiles of 64x64, should I use spacing of 2 pixels and 1 pixel spacing with 32x32 tiles?

And is it really a spacing (transparent area)? Based on the post from Rakoonic I mentioned in my the first post, I understood that you should have spacing and it should contain the same pixels as the border of the tile (gutter?). Please, check the pic below. Maybe I confuse margin, spacing and gutter, but my background is web design, so my apologies :wink:

gutter.png

#6

The important thing about spacing and scale is that it needs to be even for @2x so that you can halve it for @1x. So you can do 4px/2px, or 6px/3px, but not 5px/2.5px. I usually use 4px/2px or even 8px/4px to keep things even throughout the tileset.

Also, with the things Dusk has in place to remove tile flickering, you only need to add spacing and set the texture filter. Dusk ought to take care of the rest. If you use spacing and (for some reason) you still see flickers after setting the texture filter and everything, you’re able to extrude the tileset anyway because you have several pixels of room between tiles (another good reason to use 4/2 or 8/4 instead of 2/1 spacing).

  • Caleb
#7

I’m using Photoshop (Elements 10), to create graphics and to export to tiles I’m using simple jsx script which convert visible layers to tileset. My two cents :slight_smile:

#8

Hi there, guys, I’ve found a cool post about mobile app design from real professionals, so I decided it will be useful for all, involved in designing.

#9

One more thing I forgot! Pixel art tilesets should not be created at @2x. They should be created at normal size. Just change the texture filter to nearest-neighbor, and everything will be great. Since pixel art is meant to be pixelated, retina devices don’t have a problem with normal sized images.

  • Caleb
#10

Thanks to all! Great tips!

A few extra questions:

What about games like these? Is this basicly a tiled game? Are the collision tiles a bit like as drawn with purple (pic on the right)?

tiles_collision.png

@info09 - Is the script you mentioned available somewhere?

@Caleb - You said that you create tiles separately and then pack them. Do you mean you have one image of for example 32x32 and every tile is in its own layer? I assumed it is easier to make the tiles blend nicely if you draw multiple tiles.

And last quite good article about 2d platformers logic: http://higherorderfun.com/blog/2012/05/20/the-guide-to-implementing-2d-platformers/

#11

This is only true when device has exactly double or triple (or etc) higher resolution than your texture. But now when even iPhone models  having totally different resolutions, pixels in nearest scaling are scaled not proportionally on most devices and the final results are not so good.

@Aatos Media - PM me then I can send it to you.

#12

@Aatos Media:

Yes, you can definitely make that sort of a game with tiles. That particular one looks like it uses a more complex system, but platformers in general are usually tile-based. As for the collisions, that looks about right, though usually, as is mentioned in the article you posted (I already had it bookmarked!), each tile is given either a height map or a two-point surface, then you can tile them as need be.

And for packing, I mean that I make each tile as a different image, then combine them into one tileset as a separate step. You can make each tile a different layer in your editor, and then “mass export” them all as single tiles. It sounds like @info09’s script does this by packing them together at the same time.

@info09:

Very true. Thanks for the note.

  • Caleb
#13

Thanks Caleb (again :wink: ). I didn’t get this “each tile is given either a height map or a two-point surface, then you can tile them as need be.”. Could you please tell a bit more about this.

#14

What I meant was that each tile is given as its collision data in one dimension either a height map, defining the way the tile’s surface varies along its length (useful for irregular terrain), or a two-point surface, defining where the tile’s surface starts in the Y-axis at the left and where the tile’s surface stops on the right (useful for regular terrain). For example, a height map for a 45-degree slope (using percentage instead of pixels because it’s clearer) would be something like (0%, 25%, 50%, 100%) if you clipped the tile up into 4 sections. A two-point surface would be (0%, 100%), meaning “slope starts at the bottom and ends at the top”.

  • Caleb
#15

I’m still a bit confused.

So I made 64x64 tiles and added 4px spacing to every border. So the tiles are now 64x64 plus total 8 pixels spacing (72x72 total).

Then I made a new Tiled project with 64x64 tiles and import tileset that is 64x64 with 4 spacing. This is how it looks in Corona, Tiled and Photoshop.

What I’m missing?
 

problem.jpg

#16

In your tileset, the margin is also 4px. “Margin” is space around the whole thing, “spacing” is spacing between tiles.

  • Caleb
#17

Thanks Caleb!

Ok, I understood that the 4px spacing is for one tile only (total 8) :wink:

Now I made 64x64 tiles with spacing 4px and no margin. But…

Please, could you check the pic below. Everything seems to work fine but with iPhone5 the tile proportions are weird. Also with iPad and iPad retina.

problem2.jpg

#18

Hm… That looks weird. What are your scaling options in your config.lua? What’s your screen size in config.lua?

  • Caleb
#19

application = {
    content = {
        width = 640,
        height = 960,
        scale = “letterBox”,
        fps = 30,
        audioPlayFrequency = 22050,

        
        imageSuffix = {
                ["@2x"] = 2,
        },
        
    }
 
}

#20

Do you have an @2x tileset as well as your normal one?

  • Caleb