tile의 Extrude

TexturePacker Extrude 기능은 타일사용시 유용한 기능입니다.
corona sdk에서 타일을 이용할때 꼭 필요한 기능입니다.
만약 사용하지 않는다면 움직임시 약간의 잔상 문제가 발생합니다.

MTE 0v990 Tilesets, Map Structure, Getting Started word.pdf 문서에 나오는 내용입니다.

Creating Tilesets
1. Find or create the images you will use for your tiles.

You can separate pre-existing tilesets into individual images using programs like Gimp.
A. Load a tileset into Gimp.
B. Click and drag from the vertical ruler to place guides between each column of tiles.
C. Click and drag from the horizontal ruler to place guides between each row of tiles.
D. Go to Filters -> Web -> Slice…
E. Choose the desired output folder, image type, and name prefix. Do not add spacing.
F. Click OK.

2. Open Texture Packer or your preferred alternative and add your tile images.
3. Under layout, disable Auto Alias and Trim.
4. Change Border Padding and Shape Padding to 0.
5. Change Extrude to 1.
6. Export your tileset.
7. Open Tiled and load a map or create a map; set the tile size to the original size of the
tiles before extrusion. A 32x32 tile with an extrusion of 1 is 34x34 pixels, however the
tile size in Tiled should be set to 32x32.
8. Go to Map -> New Tileset… and browse to your new tileset.
9. Set Tile Width and Tile Height to the original size of your tiles before extrusion.
10. Set Margin to 1 and Spacing to 2.
11. Set Drawing Offset X and Y to 0.
You are now free to create your map. The Tileset window in Tiled will display the
extruded tiles correctly, and Corona will display the tiles with minimal edge artifacts even
when scaling is used. Tilesets without any extrusion will work (Margin and Spacing
should be set to 0), but they will often show flickering edge boundaries in Corona,
particularly if MTE's blockScale is set to anything other than their native size.
The latest daily builds of Corona SDK add nearest-neighbor OpenGL rendering,
which may alleviate the need for extruded tilesets if a retro 16-bit graphics style is
desired.

해당기능이 어떤 기능인지 정확히 알아야 합니다.
일단 texturepacker 를 실행시켜 차이를 알아보도록 하겠습니다.

Extrude 를 이용하면 tile 사이에 마지막 이미지 한줄이 복사가 됩니다.
이렇게 사용하기 위해서는 32*32 낱개의 이미지가 필요하게 됩니다. 이미 존재하는 32*32 타일 이미지를 이용하려면 분해를 해서 일일이 넣어줘야 하는데 여간 귀찮은 일이 아닙니다.

그래서 python을 이용해서 만들어 보았습니다.


python 2.7을 설치합니다.
잘안되면 아래와 같이 설치합니다.

os가 64bit를 사용하더라도 32bit를 설치하도록 합니다.
버전은 2.7.3, 높은 버전을 설치하면 안됩니다.


https://www.python.org/download/releases/2.7.3/

• Windows x86 MSI Installer (2.7.3) (sig)

http://www.pythonware.com/products/pil/#pil117

• Python Imaging Library 1.1.7 for Python 2.7 (Windows only)

python으로 extrude 1이 되도록 스크립트를 만들었습니다.
tiled에서 로딩할때는 10. Set Margin to 1 and Spacing to 2. 설정으로 로딩하면 됩니다.

import Image

savefilename = "tiles32_new.png" """ 저장할 파일 이름 """
loadfilename = "tiles32_raw.png" """ 로딩할 파일 이름 """
tilesize = 32 """ 타일크기 """


image = Image.open(loadfilename)
win = ImageTk.Tkinter.Tk()

xtilecount = image.size[0]/tilesize
ytilecount = image.size[1]/tilesize

print "tilecount:",xtilecount,ytilecount
newsize=( int(xtilecount*(tilesize+2)) , int(ytilecount*(tilesize+2)) ) 
print newsize
newimg=Image.new("RGBA",newsize) 
 
for j in range(0,ytilecount):
 for i in range(0,xtilecount):
  box = (i*tilesize,j*tilesize,i*tilesize+tilesize,j*tilesize+tilesize)
  print box
  cutting = image.crop(box)

  newimg.paste(cutting,(i*(tilesize+2),j*(tilesize+2)))
  newimg.paste(cutting,(i*(tilesize+2)+2,j*(tilesize+2)))
  newimg.paste(cutting,(i*(tilesize+2),j*(tilesize+2)+1))
  newimg.paste(cutting,(i*(tilesize+2),j*(tilesize+2)+2))
  newimg.paste(cutting,(i*(tilesize+2)+2,j*(tilesize+2)+2))
  newimg.paste(cutting,(i*(tilesize+2)+1,j*(tilesize+2)))
  newimg.paste(cutting,(i*(tilesize+2)+1,j*(tilesize+2)+2))
  newimg.paste(cutting,(i*(tilesize+2),j*(tilesize+2)+1))
  newimg.paste(cutting,(i*(tilesize+2)+2,j*(tilesize+2)+1))
  newimg.paste(cutting,(i*(tilesize+2)+1,j*(tilesize+2)+1))

newimg.save(savefilename,"PNG")

처리 하기전 tile

처리 후 tile

타일 출처
http://adamatomic.com/bomberplanet/assets.html