동국대 앱창작터 4일차:cocos2d-x 고급기능

4일차:고급기능 모바일게임과정II:Cocos2d-X

목차

패럴렉스노드 사용하기

타일맵 사용하기

파티클 사용하기

모바일게임과정II:Cocos2d-X 2

패럴렉스노드 사용하기


패럴렉스 기본 사용법

CCParallaxNode

화면을 스크롤하는 클래스

여러 개의 배경 이미지를 스크롤할 때 시차스크롤이 가능함


디바이스보다 큰 배경 스크롤하기


배경과 스프라이트 동시에 움직이기


이동 버튼으로 배경 움직이기


배경과 스프라이트 같이 이동시키기


다음 코드로 수정


캐릭터 배경 끝까지 이동시키기


타일맵 사용하기


타입맵이란?

타일

일정한 크기와 모양을 가진 그림 조각

타일맵

게임에서 이들 조각을 맞춰서 게임의 배경을 완성하고 이렇게 완성된 배경을 ‘타일맵’이라고 함

배경이 크고 또한 장면이 많을 경우 배경이 되는 비트맵을 모두 메모리에 읽어들여야 한다면 매우 큰 메모리가 필요

타일을 사용해서 반복하게 되면 메모리를 적게 사용하고도 게임 플레이에 필요한 배경을 만들 수 있음


Cocos2d-x의 타일맵

TMX 타일맵 맵타입

정사각형(Orthogonal) 맵 마름모형(Isometric) 맵 육각형(Hexa) 맵

타일 임베디드 타일은 지원하지 않음 임베디드 타일세트만 지원(타일세트는 내장, 이미지는 내장 안함) 한 레이어당 하나의 타일세트만 지원

레이어 레이어 수 무제한 각 레이어는 내부적으로 CCTMXLayer(CCSpriteBatchNode의 서브클래스)에 의해 표현

각 타일은 CCSprite(CCTMXLayer의 상위)로 표현

오브젝트 그룹 Tiled는 오브젝트 그룹 지원


정사각형(Orthogonal) 맵

마름모형(Isometric) 맵

육각형(Hexa) 맵


타일맵 만들기

Tiled

타일맵 에디터

www.mapeditor.org

정사각형 맵, 마름모형 맵만 지원 (육각형 맵 미지원)


http://www.mapeditor.org/

실행화면


새 맵 만들기 (File -> New)


새 타일세트 (Map -> New Tileset)


맵 그리기 기능 버튼

Undo

Redo

Execute Command

Random Mode

Stamp Brush

Bucket Fill Tool

Eraser

Rectangular Select


저장 (File -> Save)


타입맵출력하기


타일맵 레이어 추가하기

타일드가 지원하는 레이어 종류

타일 레이어(Tile Layer): 배경이 되는 레이어

오브젝트 레이어(Object Layer): 캐릭터나 몬스터 등이 출현하는 장소를 지정하는 레이어


레이어 이름 변경: "Background"로 수정


레이어 추가 (Layer -> Add Object Layer)

이름: Object


오브젝트 관련 툴바 버튼


Object Properties

이름: “SpawnPoint"


드래곤 이동 만들기


드래곤 이동시 장애물 만들기

새로운 레이어 추가


새 레이어 추가 (Layer -> Add Tile Layer)

이름: Items


타일세트

크기: 67x34

투명도: 50%

이름: metaset.png

새 타일세트 추가

이름: Meta


Tile Properties

붉은색 타일-Name: Wall, Value: Yes

초록색 타일-Name: Items, Value: Yes


새 레이어 추가

이름: MetaInfo

장애물: 붉은색 타일, 수박: 초록색 타일


드래곤이 먹을 아이템 만들기


파티클 사용하기


파티클 시스템이란?

파티클 시스템

작은 그래픽들이 모인 커다란 집합체

파티클: 작은 그래픽들

이 집합체를 이용하면 표현하기 매우 어려운 효과들은 표현할 수 있음

연기가 퍼지는 장면, 불타는 효과, 안개가 퍼진 모습, 폭탄이 터지는 장면, 미사일이 날아갈 때의 효과, 비 내리는 화면, 눈 내리는 화면 등

동적이고 급변하는 효과를 표현하는데 적합


파티클 시스템 사용해 보기


파티클 시스템: 눈, 비 내리기


파티클 시스템:좀 더 복잡한 파티클 효과


파티클 디자이너

파티클 디자이너

파티클을 시각적으로 생성하는 프로그램

http://www.71squared.com/en/particledesigner


동국대 앱창작터 4일차:cocos2d-x 고급기능

Technology