2011/03/16에 해당되는 글 3건

Sprite Sheet 제작툴 Zwoptex

아이폰 2011. 3. 16. 00:55




1. Zwoptex 란?
이미지를 모아서 Sprite Sheet (텍스처맵) 을  쉽게 만들 수 있게 해주는  MacOs 기반의 툴이다. 

 


2. Zwoptext의 특징 
Trimming : 이미지의 투명한 부분을 잘라주어 파일사이즈를 절약할 수 있게 해주는 기능 
Rotation : 개별 이미지를 회전시켜주는 기능 
Automatic Layout : 3가지 알고리즘을 이용해서, 이미지 파일들을 정렬시켜주는 기능(애니메이션 생성시)
Sprite Updating : 외부 프로그램에서 읽고 있는 이미지 소스파일을 변경하면, 해당 변경사항을 적용시켜주는 기능 
One-Click Publish : Sprite Sheet을 변경할 때마다, 텍스처 이미지와 좌표리스트 파일을 생성해주는 기능 




3. Zwoptex 다운받기 
 아래 주소에서 Zwoptext 다운을 받아 설치한다. 
http://zwoptexapp.com/






4. Zwoptex의 간략한 사용법 
 Zwoptex 를 실행시키고, 8개의 애니메이션 이미지 파일을 로드한 그림이다.



Zwoptex는 디폴트로 로드한 이미지의 투명한 부분을 잘라내어( trim), 최종 Sprite Sheet의 크기를 줄이려고 한다.  
애플리케이션에서 텍스처맵을 읽기 쉽게 하기 위해서, 위와 같이 triming 없이 이미지를 정렬해보자. 모든 이미지를 선택하고, 
툴바에서 Untrimming 버튼을 클릭하면, 위와 같이 이미지들이 정렬될 것이다.
 
좌측 Layout 패널에서는 정렬 알고리즘과 정렬시 기준으로 사용할 값을 선택할 수 있다.  어떤 값을 변경시에는 항상 Apply를
클릭해서, 변경사항을 적용시켜야 한다. 
 
Canvas 패널은 이미지들이 정렬되는 배경의 크기와 색을 지정할 수 있도록 해준다. 배경의 크기가 작다면, 이미지들이  겹쳐지게
되는데, 이때 width, height 값을 조정하고, Apply 를 클릭하여  배경의 크기를 변경할 수 있다. 

생성할 Sprite의 수정을 마친 후 ,  툴바의 Publish 버튼 클릭하면, Generic/Cocos2D 포맷으로 텍스처 이미지와 이미지에 대한
좌표를 담은 파일(plist) 을  저장 할 수 있다. 

이후 게임엔진에서 이미지와 좌표 정보를 담은 파일을 읽어, 애니메이션을 구현 할 수 있다. 

 



'아이폰' 카테고리의 다른 글

푸시 메시지 포맷  (0) 2011.04.07
애플 푸시 서비스  (0) 2011.04.07
Sprite Sheet 제작툴 Zwoptex  (0) 2011.03.16
애플리케이션 응답성 향상을 위해 동시성 사용하기  (0) 2011.03.15
OpenGL ES 게임 프레임웍  (0) 2011.02.14
OpenGL ES 사용  (0) 2011.02.14
sprite, Sprite Sheet, Zwoptex, 애니메이션, 텍스처맵
트랙백 0개 , 댓글 0개

2D 맵 에디터 Tiled

게임개발로그 2011. 3. 16. 00:34




 1. Tiled 란?
Tiled 는 2차원 타일기반의 게임을 개발하기 위한 범용 맵 에디터로,  사용하기 쉬우며  다양한 게임 엔진과 함꼐 사용할 수 있다.
프리 소프트웨이며, QT 프레임웍을 사용하여 C++로 작성되었다. Tiled 특징은 다음과 같다.  




2. Tiled의 특징 
XML 기반 맵포맷의 범용 맵에디터이다. 
orthogonal 과 isometric 맵을 지원한다
커스템 객체들을 픽셀단위 정밀도로 배치할 수 있다.
undo/redo 와 copy/paste 를 지원한다. 
타일 ,레이어, 오브젝트, 맵에 커스텀 속성을 추가할 수 있다. 
외부에 변경된 타일셋을 자동으로 리로드한다. 
필요할 때, 타일맵의 크기를 변경할 수 있다. 
stamp와 fill brush 같은 호율적인 타일에디팅 도구를 제공한다. 





3. Tiled 설차하기
아래 사이트에서 Tiled를 다운로드하여 설치하자. 
http://www.mapeditor.org/





4. Tiled의 간략한 사용법
애플리케이션을 실행시키면 다음과 같은 인터페이스로 구성되어 있다. 



 Tiled Map Editor를 사용하여 2가지 방식의 맵을 생성할 수 있다. orthogonal 맵은 그림과 같은 하늘에 내려다 보는듯한 시점의 
맵이다. isometric 맵은 고전 RPG인 파랜드 택틱스 같은 게임에서 사용됐던 비스듬한 시점에서 보는 듯한 방식이다.
최초에 2가지 방식 중  타입을 지정하고, 타일 한개의 픽셀 크기와 가로, 세로가 몇개의 타일로 구성되어 있는지 크기를 지정
해서 맵을 생성해한다. 이렇게 생성된 맵파일은 .tmx 라는 확장자를 갖는다. 

우측하단의 Tilesets 은 맵을 구성하기 위해 필요한 타일들로만 구성된다.  타일이미지 샘플이라 생각할 수 있다. 원하는 타일을
선택하여 맵에 타일을 배치할 수 있다.  이와 같이  타일셋 이미지를 하나로 구성해야,  애플리케이션에서 로딩시 메모리를 절약
할 수 있다. 

이렇게 배치된 타일들은 게임에서 의미있게 해석되기 위해서 레이어들로 구분되어 그려진다.  
Background , Objects, Forground, Meta 와  같은 레이어들은 서로 다른 z 축 값을 가지는데, 위 그림에서는 Background 레이어가
가장 바닥에 그려진다.   각 레이어들은 동일한 깊이를 갖는 Sprite 집합 이라 생각할 수 있으며, 게임엔진에서 레이어 이름을 통해
레이어 내 Sprite 들을 얻어올 수 있다. 

tileset 에 있는 특정 타일들에는 타일속성을 키와 값 형태로 지정할 수 있으며, 게임엔진에서 특정 타일좌표에 있는 타일의 속성을
읽어와서  게임 로직을 처리할 수 있다. (예를 들면, 아이템인지 장애물인지 판단할 수 있다.)
위 그림에서 Objects 라는 이름을 갖는 레이어만  오브젝트 레이어이며, 나머지 레이어들은 타일 레이어이다. 이름에서 의미하듯
오브젝트 레이어는  배경이 아닌,  게임에서 특징한 의미를 갖는 객체들이 위치하는 레이어이다.  게임 로직을 구성하기 위해 사전에 미리 속성정보를 알아야 할 대상을 위해 사용한다. 




File 메뉴에서 새로운 맵을 생성하는 다이얼로그 창이다. 

이 맵은 32 pixel x 32pixel 크기의 타일이 가로, 세로 50개가 배치된 크기를 갖는다. 



Map 메뉴에서 새로운 타입셋을 추가하는 다이얼로그 창이다 




이렇게 생성한 맵을  저장한 파일 TileMap.tmx 의 내용은 다음과 같다.  
Cocos2D 게임엔진에서 이 파일을 읽어서 타일들의 정보들을 가져와 맵을 구성할 수 있다.  
<?xml version="1.0" encoding="UTF-8"?>

<map version="1.0"orientation="orthogonal"width="50"height="50"tilewidth="32"tileheight="32">

<tileset firstgid="1"name="tmw_desert_spacing"tilewidth="32"tileheight="32"spacing="1"margin="1">

<image source="tmw_desert_spacing.png"/>

</tileset>

<tileset firstgid="49"name="meta_tiles"tilewidth="32"tileheight="32"spacing="1"margin="1">

<image source="meta_tiles.png"/>

<tile id="0">

<properties>

<property name="Collidable"value="True"/>

</properties>

</tile>

<tile id="1">

<properties>

<property name="Collectable"value="True"/>

</properties>

</tile>

</tileset>

<layer name="Background"width="50"height="50">

<data encoding="base64"compression="gzip">

   H4sIAAAAAAAAA+3Uyw6CMBCF4a7EhYo7bwmp8ZIoiu//do6Ji4YgaZGWEf/Ft+uEczJkCmNMMTIbse1gpyC7ay+O4hrgJA4Kstd7hGbqMhOD7bGHDZxlH//T42bab1L9pt0V9riYz3epbHlT9vT92CoxEZmYKsjT5OxpIXKx9Hj7cAzdr87tMXSWJpmn+bvHLGAm5T+YR/TaXZWoxyqidcJ9fMsqyPCL2TBOVkEGAAAAAAAAAAAQxxPutT2PECcAAA==

</data>

</layer>

<objectgroup name="Objects" width="50" height="50">

<object name="SpawnPoint"x="77"y="432"/>

</objectgroup>

<layer name="Foreground"width="50"height="50">

<data encoding="base64"compression="gzip">

   H4sIAAAAAAAAA+3UQQ0AAAwCMZzMv8vJINlaBRceJNA17YDHbA9c5+cAAAAAAAAAfln1IckFECcAAA==

</data>

</layer>

<layer name="Meta"width="50"height="50">

<data encoding="base64"compression="gzip">

   H4sIAAAAAAAAA+3UUQqAIBAFQK9k9z9c9CeVZAm2ygwI/iy8VdeU1pM7ViSr9VGzfagZJZ/2bzOVNRH6OZSZ7s7+qSaK3vuIomWWZ5rz2fuomSUnV63/HP8wW2NFPu/I2ViTNwcAAAAAAOvaAbuBPXIQJwAA

</data>

</layer>

</map>



'게임개발로그' 카테고리의 다른 글

2D 맵 에디터 Tiled  (0) 2011.03.16
아이폰 2D 게임엔진 Cocos2D  (1) 2011.03.16
게임 개발 기초  (2) 2011.02.14
게임 시스템 모듈 구성  (0) 2011.02.13
DirectX 와 OpenGL  (0) 2011.02.13
3차원의 기초  (0) 2011.02.13
iphone game, Tiled, 맵 에디터, 아이폰게임
트랙백 0개 , 댓글 0개

아이폰 2D 게임엔진 Cocos2D

게임개발로그 2011. 3. 16. 00:09



 아이폰용 2차원 게임엔진으로 많이 사용되고 있는 Cocos2D에 대해서 알아보자. 


1. Cocos2D의 역사 
Cocos2d는 파이썬 기반의 오픈소스 게임 라이브러리로 부터 시작했다. 아르헨티나의 Los Cocos 지역에 50명의 파이썬
개발자가 모여 컨런스를  가졌고,  2008년 1월 6명의 개발자의 의해 오픈소스 게임라이브러리로 태어났다. 이후 아이폰으로
포팅되었으며, 애플의 제약이 해제되면서 앱스토어에 다수의 게임이 cocos2D를 기반으로 개발되었다. 2010년  5월 1.0 버전이
릴리지 되었으며,  계속 발전중이다. 
OpenGL ES는 강력한 그래픽 엔진이지만, 상대적으로 어렵고 생산성이 떨어진다.  cocos2D는 이런 복잡함을 감추고  
상위수준에서 게임 애니메이션을 사용할 수 있도록 지원한다.  또한  Box2D 와 Chipmonk라는 물리엔진을 포함하고 있다.
Box2D는 C++ 언어로 작성되어 생산성이 좋은 반면 상대적으로 참고자료가 적다. Chipmonk는 역사가 더 오래되어 샘플코드 및 참고자료가 더 많다는 장점이 있다.  일반적으로 개발자들은 Box2D를 더 선호한다. 
최상위 수준에서 CCDirector, CCScene, CCLayer, CCSprite 객체를 사용하게 되며, 접두어로  CC를 사용한다.



2. Cocos2D 설치하기 
Cocos2D  템플릿을 Xcode에 설치하는 방법을 알아보자. 



1. Cocos2D 홈사이트에서 최신버전을 다운받는다. 
   http://cocos2d.org





2. 압축을 해제하고, 내부 폴더로 이동하여 터미널에서 다음과 같은 명령을 실행한다. 
./install_template.sh




3. Xcode를 실행하면 아래와 같은 Cocos2D 사용자 템플릿이 추가됐을 것이다. 





3.  Cocos2D 템플릿 삭제하기 
나중에 이 템플릿을 제거하고 싶다면, 다음 경로에서 해당 템플릿을 삭제하면 된다. 
/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Project Templates/Application



4. 2D 게임 개발을 위한 보조툴 
2D 게임 개발을 위한 보조툴인 이차원 맵 에디터인 Tiled와 Sprite 편집기인 Zwoptex 를 Cocos2D 와 사용하면 좀더 쉽게
아이폰용 게임을 개발할 수 있다. 다음 포스팅에서 이 툴들을 사용하는 방법에 대해서 간략히 알아보겠다. 




'게임개발로그' 카테고리의 다른 글

2D 맵 에디터 Tiled  (0) 2011.03.16
아이폰 2D 게임엔진 Cocos2D  (1) 2011.03.16
게임 개발 기초  (2) 2011.02.14
게임 시스템 모듈 구성  (0) 2011.02.13
DirectX 와 OpenGL  (0) 2011.02.13
3차원의 기초  (0) 2011.02.13
Box2d, Chipmonk, cocos2d, cocos2d 설치, 아이폰 게임엔진
트랙백 0개 , 댓글 1개
  • geek 2012.05.30 19:30 ADDR 수정/삭제 답글

    역시 로그님 ^^ 잘 보고 갑니다.

1

티스토리툴바