Tips for drawing tilesets

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:

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

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?

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

Tested on device and it works perfectly :slight_smile:

(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

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?

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

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

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

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:

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.

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

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/

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.

@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

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.

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

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

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

  • Caleb