Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Tips for drawing tilesets
Started by Aatos Media Jan 23 2015 11:04 PM

- - - - -
24 replies to this topic
tiled dusk gutter map tilesets tile map
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

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 :)



[TOPIC: post.html]
#2

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

(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



[TOPIC: post.html]
#3

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

(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)

 

Thanks Caleb! Yes I ment tilesets. I modified the post ;)

 

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?



[TOPIC: post.html]
#4

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

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



[TOPIC: post.html]
#5

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

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 ;)

 

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 ;)

 

gutter.png



[TOPIC: post.html]
#6

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

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



[TOPIC: post.html]
#7

Netox

[GLOBAL: userInfoPane.html]
Netox
  • Enthusiast

  • 75 posts
  • Corona SDK

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 :)



[TOPIC: post.html]
#8

michael13tompson

[GLOBAL: userInfoPane.html]
michael13tompson
  • Observer

  • 3 posts
  • Corona SDK

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.



[TOPIC: post.html]
#9

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

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



[TOPIC: post.html]
#10

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

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/

 



[TOPIC: post.html]
#11

Netox

[GLOBAL: userInfoPane.html]
Netox
  • Enthusiast

  • 75 posts
  • Corona SDK

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

 

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.



[TOPIC: post.html]
#12

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

@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



[TOPIC: post.html]
#13

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

Thanks Caleb (again ;) ). 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.



[TOPIC: post.html]
#14

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

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



[TOPIC: post.html]
#15

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

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



[TOPIC: post.html]
#16

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

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

 

- Caleb



[TOPIC: post.html]
#17

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

Thanks Caleb!

 

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

 

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



[TOPIC: post.html]
#18

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

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

 

- Caleb



[TOPIC: post.html]
#19

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

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

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



[TOPIC: post.html]
#20

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

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

 

- Caleb



[TOPIC: post.html]
#21

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

Well, I've tried everything ;) 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 :)



[TOPIC: post.html]
#22

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

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



[TOPIC: post.html]
#23

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

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?



[TOPIC: post.html]
#24

Caleb P

[GLOBAL: userInfoPane.html]
Caleb P
  • Corona Geek

  • 1,424 posts
  • Corona SDK

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



[TOPIC: post.html]
#25

Aatos Media

[GLOBAL: userInfoPane.html]
Aatos Media
  • Contributor

  • 128 posts
  • Corona SDK

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 :)




[topic_controls]
[/topic_controls]