Jump to content

Resizing Tilesets


Go to solution Solved by druphoria,

Recommended Posts

I'm running into a very frustrating issue. For the second level in my platformer game, I'm trying to use a tileset that I downloaded where each tile is 16x16. Because the first level uses 32x32 tiles, I'm trying to resize this tileset to be 32x32. I've tried several things, all to no avail.

 

1) Tried scaling up the tilemap layer using:

this.layer.scale = {x:2, y:2};

This worked in getting the tiles to scale up only in appearance (the collisions still behaved as if the tiles were 16x16), so obviously was no good.

 

2) Tried changing the tile width/height properties in the actual tilemap JSON file itself. This didn't work (the tile images themselves didn't scale, only the spaces given for the tiles changed).

 

3) Tried using an image editor (http://apps.pixlr.com/editor/) to double the size of the tileset image file directly, and then use the resized tileset file when creating my level in Tiled Editor. This didn't work because for some reason resizing the tileset caused the borders of the tiles to render incorrectly (for example, there might be a thin layer of pixels at the border of the tile that was not there before). I noticed this with several different tilesets that I tried to resize, all downloaded from different sources. Here's an example of what happened when I tried to resize a tileset (this tile is supposed to be all purple), and then imported it into Tiled. Just to better illustrate what is happening, I used the "Bucket Fill Tool":

 

 post-9593-0-69659900-1415496679_thumb.jp

 

If anybody can help me with this problem, I would very much appreciate it. There must be some way that I can use a tileset that doesn't have 32x32 tiles.

post-9593-0-69659900-1415496679_thumb.jp

Link to post
Share on other sites

So that was #3 of the things that I tried. I tried to double the image size (using http://apps.pixlr.com/editor/) and what ended up happening was the borders of the tiles would render incorrectly in Tiled like in the image that I attached to the original post. I tried this with several different tilesets, including the cybernoid tileset in phaser-examples, and I noticed similar problems in all of them.

Link to post
Share on other sites
  • Solution

I just tried resizing again with Gimp image editor (http://www.gimp.org/) and the problem is no longer happening. Also tested it with the "cybernoid" 16x16 tileset from phaser-examples and it worked for that one as well. To others who face this issue, follow these steps:

1) Open your image in Gimp

2) Image -> Scale Image

3) Double the dimensions

4) Make sure "Interpolation" is set to None

5) Export the image.

 

SoulBeaver - thanks for the suggestion about vectorizing - wasn't familiar with this concept, so I decided to try vectorizing the image just for the hell of it and the result looks pretty cool.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...