이 튜토리얼에서는 최신 버전의 Cocos2D-X를 설치해야 합니다(이 튜토리얼을 작성할 당시 2.1.4로 업데이트됨). 아직 최신 버전의 Cocos2D-X가 없다면 먼저 다운로드하고 터미널에서 다음 명령을 실행하여 템플릿을 설치하세요:
cd ~/Downloads/cocos2d-x-2.1.4 ./install-templates- xcode.sh -f -u 그런 다음 iOS\cocos2d-x\cocos2dx 템플릿을 사용하여 Xcode에서 새 프로젝트를 만듭니다. 다음을 클릭하고 프로젝트 이름을 TileGame으로 지정하고 프로젝트를 Universal로 설정한 후 다음을 클릭하고 생성을 클릭합니다.
이번 프로젝트에서는 ARC를 사용하게 되므로 ARC에 대해 처음 들어보신 분이라면 먼저 ARC에 대해 알아보시기 바랍니다. 템플릿은 기본적으로 ARC를 사용하지 않지만 운 좋게도 쉽게 수정할 수 있습니다. 편집\리팩터\Objective-C ARC로 변환으로 이동합니다. 아래로 스크롤하여 main.m, AppDelegate.cpp, HelloWorldScene.cpp 파일만 선택한 다음 확인을 클릭하고 마법사를 완료합니다.
대상 선택(raywenderlich에서)
만들고 실행한 다음 모든 것이 제대로 작동하는지 확인하세요. 표준 "Hello World" 화면을 볼 수 있어야 합니다.
다음으로 게임 리소스 압축 파일을 다운로드합니다. 압축된 파일에는 다음 콘텐츠가 포함되어 있습니다:
플레이어 개체에 사용할 스프라이트.
cfxr 유틸리티(튜토리얼에서 사용하게 될)로 생성된 일부 사운드 효과.
개러지밴드(Garage Band)가 제작한 배경음악도 함께 제공됩니다.
사용하게 될 타일 설정 중 일부 - 이는 사용하게 될 지도 편집기와 함께 제공되지만 다른 콘텐츠에 더 쉽게 포함시킬 수 있을 것 같습니다.
나중에 자세히 설명할 몇 가지 추가 "특별" 벽돌입니다.
리소스를 다운로드한 후 이를 열고 TileGameResources 폴더를 프로젝트의 리소스 그룹으로 드래그합니다. 프로젝트 메뉴에서 Resources 그룹을 마우스 오른쪽 버튼으로 클릭하고 "TileGame"에 파일 추가를 선택합니다… Resources/TileGameResources 폴더를 선택하고 항목을 대상 그룹의 폴더에 복사(필요한 경우) 및 추가된 폴더에 대한 그룹 만들기가 선택되었는지 확인합니다. 마침을 클릭합니다.
모든 것이 순조롭게 진행되면 모든 파일이 프로젝트에 나타납니다.
타일 게임(raywenderlich 제작)
이제 지도 만들기를 시작하겠습니다!
지도 만들기
Cocos2D-X는 오픈 소스 Tiled Map Editor를 기반으로 지도를 만들고 TMX 형식으로 저장하는 것을 지원합니다.
타일드 맵 편집기를 다운로드하세요. 이 튜토리얼을 작성하는 시점의 최신 버전은 0.9.0입니다.
그런 다음 Tiled를 실행하고 File\New로 이동하여 다음과 같이 대화 상자를 채우십시오.
새 맵(raywenderlich에서)
방향 영역에서, 직교 또는 아이소메트릭 중에서 선택할 수 있습니다. 여기서 직교를 선택합니다.
다음에는 지도의 크기를 설정합니다. 픽셀이 아닌 벽돌로 되어 있다는 점을 기억하세요. 더 작은 지도를 만들 것이므로 여기서는 50×50을 선택해야 합니다. Tiled는
새 지도 대화상자 맨 아래에 전체 지도의 크기(픽셀 단위)가 표시됩니다.
이는 지도 크기(50타일)에 길이와 너비를 기준으로 타일 크기(32픽셀)를 곱하여 계산됩니다.
마지막으로 너비와 높이를 지정합니다. 여기서 선택하는 것은 아티스트가 설정한 타일에 따라 다릅니다. 이 튜토리얼에서는 Tiled Editor와 함께 제공되는 32×32 크기의 샘플 타일 중 일부를 사용합니다. 이를 선택하고 확인을 클릭합니다.
다음으로 지도를 그리려면 타일 설정을 추가해야 합니다. 메뉴 표시줄에서 지도를 클릭한 다음 새 타일셋을 끄고... 대화 상자를 다음과 같이 입력하세요:
새 타일셋(raywenderlich에서)
이미지를 얻으려면 찾아보기를 클릭하고 자신의 TileGame/Resources/TileGameResources 폴더로 이동한 다음 이전에 Resource Zip에서 다운로드한 tmw_desert_spacing.png 파일을 선택하고 프로젝트에 추가하세요. 파일 이름을 기준으로 이름이 자동으로 채워집니다.
너비와 높이도 벽돌의 크기이므로 32×32로 설정할 수 있습니다. 가장자리 및 간격의 경우:
가장자리는 Tiled가 실제 벽돌 픽셀을 찾기 시작하기 전에 현재 벽돌에 대해 건너뛰어야 하는 픽셀 수(너비 및 높이 포함)에 관한 것입니다.
간격은 실제 타일 픽셀을 결정하고 다음 타일 데이터로 이동한 후 타일링이 진행되어야 하는 픽셀 수(너비 및 높이 포함)입니다.
tmw_desert_spacing.png를 보면 각 벽돌이 1픽셀의 검은색 가장자리로 둘러싸여 있는 것을 볼 수 있으며, 이는 가장자리 및 간격 설정 1에 대해서도 설명합니다.
타일(raywenderlich에서)
확인을 클릭하면 타일 세트 창에 렌더링된 타일이 표시됩니다. 이제 그리기를 시작할 수 있습니다. 툴바에서 스탬프
브러시 아이콘을 클릭한 다음 지도의 아무 곳이나 클릭하여 벽돌을 배치합니다.
타일셋(raywenderlich에서)
그러니 계속해서 지도를 그리세요. 최대한 창의력을 발휘하세요! 나중에 충돌 콘텐츠가 필요하므로 최소한 몇 개의 건물을 지도에 추가해야 합니다.
타일셋(raywenderlich에서)
콘텐츠 그리기를 더 쉽게 만들려면 몇 가지 단축키 방법을 살펴보세요. 가장 일반적으로 사용되는 방법은 다음과 같습니다.
타일세트 선택기에서 일련의 타일 주위에 상자를 드래그하고 동시에 여러 개의 인접한 타일을 드롭할 수 있습니다.
보기\확대 및 보기\축소를 통해 확대 및 축소할 수 있습니다.
스탬프 브러시 도구를 기반으로 지도를 편집할 때 z 키가 회전합니다.
새로운 기능 중 미니맵이 눈에 띌 수도 있습니다. 미니맵을 볼 수 있는 좋은 기능이에요! 미니맵 하단의 미로에서 나의 잘못된 시도에 집중합니다. 빨간색 상자는 기본 편집 창에 표시되는 영역을 나타냅니다.
타일셋(raywenderlich에서)
다음 영역을 스크롤할 때 이 미니맵 보기를 염두에 두세요.
이 튜토리얼의 리소스는 지도 앞에 표시되므로 게으른 경우에는 그냥 사용해도 됩니다. 이렇게 하면 Tiled에서 지도를 열고 지도가 어떻게 설정되어 있는지 파악해야 합니다.
지도 그리기를 마쳤으면 레이어 보기에서 타일
레이어를 두 번 클릭하고 이름을 배경으로 변경하세요. 그런 다음 File\Save를 클릭하고 파일을 TileGame 프로젝트의 TileGame
\Resources\TileGameResources에 저장하고 파일 이름을 TileMap.tmx로 지정한 다음 기존 파일을 덮어씁니다.
나중에 다른 용도로 Tiled를 사용하게 되지만 지금은 이 지도를 게임에 가져오겠습니다!
Cocos2D-X 장면에 타일 맵 추가
HelloWorldScene.h를 열고 #include "cocos2d.h" 뒤에 다음 콘텐츠를 추가하세요.
사용 ?namespace?cocos2d;
이것은 편집자가 cocos2d 네임스페이스를 사용하도록 지시하므로 모든 항목에 cocos2d 접두어를 붙일 필요가 없습니다.
그런 다음 중괄호 뒤에 클래스 정의에 다음을 추가합니다:
private:?CCTMXTiledMap?*_tileMap;?CCTMXLayer?*_Background;
타일 맵 자체를 추적하기 위한 인스턴스 변수 하나와 맵의 배경 레이어를 추적하기 위한 또 다른 인스턴스 변수를 생성합니다. 타일 맵 레벨에 대해서는 나중에 자세히 알아보겠습니다.
다음으로 HelloWorldScene.cpp를 다음 콘텐츠로 바꿉니다:
CCTMXObjectGroup?*objectGroup?=?_tileMap->objectGroupNamed("Objects");if(objectGroup?==? NULL ){?CCLog("tile?map?has?no?objects?object?layer");?return?false;?}CCDictionary?*spawnPoint?=?objectGroup->objectNamed("SpawnPoint");int?x ? =?((CCString)*spawnPoint->valueForKey("x")).intValue();?int?y?=?((CCString)*spawnPoint->valueForKey("y")).intValue(); ?=?new?CCSprite();?_player->initWithFile("Player.png");?_player->setPosition(ccp(x,y));this->addChild(_player);?this->setViewPointCenter( _player->getPosition());
마지막 줄에는 예표가 있습니다. 하지만 걱정하지 마세요. 곧 도착할 것입니다.
잠시 멈춰서 객체 레벨과 객체 그룹에 대해 설명하겠습니다. 먼저 CCTMXTiledMap 개체(layerNamed 아님)의 objectGroupNamed 메서드를 통해 개체 레이어를 검색한다는 점에 유의하세요. 특별한 CCTMXObjectGroup 개체를 반환합니다.
그런 다음 objectGroup은 objectNamed 메서드를 호출하여 CCDictionary를 얻고 x 및 y 축, 너비 및 높이와 같은 개체에 대한 유용한 정보를 포함합니다. 튜토리얼의 이 부분에서 주의해야 할 것은 x 및 y 축을 플레이어 스프라이트의 위치로 설정하는 것뿐입니다.
코드 블록 끝에서 플레이어의 위치를 식별하기 위한 뷰를 설정합니다.
이제 HelloWorldScene.h에 다음 콘텐츠를 추가합니다:
//?In?the?public?section?void?setViewPointCenter(CCPoint?position);
그리고 새 메소드를 추가합니다. HelloWorldScene.cpp로 이동합니다(파일 맨 아래에 있음):
void?HelloWorld::setViewPointCenter(CCPoint?position)?{CCSize?winSize?=?CCDirector::sharedDirector()->getWinSize ( );int?x?=?MAX(position.x,?winSize.width/2);?int?y?=?MAX(position.y,?winSize.height/2);?x?=?MIN ( x,?(_tileMap->getMapSize().width?*?this->_tileMap->getTileSize().width)?–?winSize.width?/?2);?y?=?MIN(y,? ( _tileMap->getMapSize().height?*?_tileMap->getTileSize().height)?–?winSize.height/2);?CCPoint?actualPosition?=?ccp(x,?y);CCPoint?centerOfView? = ?ccp(winSize.width/2,?winSize.height/2);?CCPoint?viewPoint?=?ccpSub(centerOfView,?actualPosition);?this->setPosition(viewPoint);?}
벽돌에 대한 설명입니다. 이 함수가 카메라의 중앙 위치를 설정한다고 상상해 보세요. 이를 통해 사용자는 지도의 x, y 축 어디든 이동할 수 있습니다. 하지만 특정 지점을 표시하고 싶지 않을 수도 있습니다. 예를 들어 화면이 지도 가장자리를 넘어가는 것을 원하지 않을 수 있습니다. 검은색 테두리!)