Tips for drawing tilesets

Solar2D General Questions/Discussion
#30

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
#31

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:

#32

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.

#33

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
#34

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/

#35

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.

#36

@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
#37

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.

#38

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
#39

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

#40

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

  • Caleb
#41

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

#42

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

  • Caleb
#43

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

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

#44

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

  • Caleb
#45

Well, I’ve tried everything :wink: Tried with or without @2x-file.

Could you please check attached project. It’s very simple: http://aatosmedia.fi/tmp/dusktest.zip

Don’t know what is the proper way to do this, but what do you think about this:

  1. Draw tileset (tile 64x64): tileset@2x.png  (spacing 8px)    (for retina)
  2. Reduced tile size to 32x32: tileset.png (spacing 4px)
  3. Made a new Tiled project with tile 32x32 and spacing 4.

Caleb - I really appreciate your help :slight_smile:

#46

Ok, I think I’ve figured it out. This is because Dusk tries to auto-scale objects to fit the screen. To disable this, comment out line #146 of Dusk/dusk_core/layer/tilelayer.lua, or set your config scale mode to “none”. I’ll see if I can add a non-manual fix for this to Dusk in the future.

  • Caleb
#47

Thanks Caleb! That was the case indeed.

If I set the

map.setCameraFocus(mario) map.setTrackingLevel(0.1)

I can see sometimes blinking lines. I’ve set the spacing (4 px for 32x32 tiles and 8px for @2x tiles) and set the texture filter

display.setDefault("minTextureFilter", "nearest") display.setDefault("magTextureFilter", "nearest")

You once mentioned, that there is also one more thing you can do OR is the problem that I’m using physics?

#48

Is this on device, or on the simulator? The simulator sometimes shows blinking lines, but not usually the device.

As long as you have a fairly recent version of Dusk, have your tiles set to static body type, have spacing, and have the correct texture filter, you should be ok.

  • Caleb
#49

Tested on device and it works perfectly :slight_smile: