퍼즐 게임 만들기3 - 게임화면에 블록 출력하기1

게임화면에 블록 출력하기

 http://gharlic.tistory.com/23

위 게시물에서 CGameLayer.h와 CGameLayer.cpp를 생성하는 것 까지 했을 것이다.

이 번엔 전 게시물에서 만든 리소스를 바탕으로 게임화면에 블록을 출력하도록 하겠다.

 

 

 

 

 

리소스 파일은 어디로?

제작된 리소스 파일들은 위 사진과 같이 프로젝트 폴더\Resources에 위치시키면 된다.

MFC에서 처럼 따로 Visual Studio에서 불러와 ID를 매겨 사용할 필요없이

그냥 저대로 두고 사용할 수 있다.

 

 

 

 

 

먼저 배경 출력하기

 

CGameLayer.cpp

#include "GameLayer.h"
#include "GameObject.h"
#include <stdio.h>
#include <string.h>
 
 
#define COCOS2D_DEBUG 1
USING_NS_CC;
 
cocos2d::Scene* CGameLayer::createScene() {
    //cocos2d::Scene* pScene = cocos2d::Scene::create();
    //CGameLayer* pLayer = CGameLayer::create();
 
    auto pScene = Scene::create();
    auto pLayer = CGameLayer::create();
 
    pScene->addChild(pLayer);
 
    return pScene;
}
 
bool CGameLayer::init() {
    if (!Layer::init()) { return false; }
 
    // 배경 이미지 출력
    cocos2d::Sprite* pBackgroundSprite = cocos2d::Sprite::create("background.png");
    pBackgroundSprite->setPosition(cocos2d::CCPointZero);
    pBackgroundSprite->setAnchorPoint(ccp((float)0, (float)0));
    addChild(pBackgroundSprite);
 
    return true;
}

26행 - background.png를 불러오고 있다.

27행 ~ 28행 - 0,0에 이미지가 위치하게 한다. 참고로 cocos2d-x의 좌표계는 좌측하단이 0,0이다.

2행 - addChild함수를 사용해 Sprite를 화면에 출력한다.

 

Ctrl+F5를 눌러 실행해보면 배경이미지가 출력됨을 알 수 있다.

옆에 검은 테두리는 신경쓸 필요없다. 찜찜하면 이클립스로 넘어가 본인 휴대폰으로 출력해볼 수 있다.

방법은 다음 게시물에 있다. http://gharlic.tistory.com/21

 

 

 

 

 

 

 

일단 육각형 테두리 하나 출력해보기

 

CGameLayer.cpp

#include "GameLayer.h"
#include "GameObject.h"
#include <stdio.h>
#include <string.h>
 
 
#define COCOS2D_DEBUG 1
USING_NS_CC;
 
cocos2d::Scene* CGameLayer::createScene() {
    //cocos2d::Scene* pScene = cocos2d::Scene::create();
    //CGameLayer* pLayer = CGameLayer::create();
 
    auto pScene = Scene::create();
    auto pLayer = CGameLayer::create();
 
    pScene->addChild(pLayer);
 
    return pScene;
}
 
bool CGameLayer::init() {
    if (!Layer::init()) { return false; }
 
    // 배경 이미지 출력
    cocos2d::Sprite* pBackgroundSprite = cocos2d::Sprite::create("background.png");
    pBackgroundSprite->setPosition(cocos2d::CCPointZero);
    pBackgroundSprite->setAnchorPoint(ccp((float)0, (float)0));
    addChild(pBackgroundSprite);
 
    m_winSize = Director::sharedDirector()->getWinSize();
    startGame();
    
    return true;
}
 
void CGameLayer::startGame() {
    Sprite* pGameObjectBack = Sprite::create("blockBack.png");    
    pGameObjectBack->setAnchorPoint(ccp(0.5f, 0.5f));
    pGameObjectBack->setPosition(ccp(100.0f,100.0f));
    addChild(pGameObjectBack, 1);
}

붉은 색으로 처리된 부분이 추가된 부분이다.

38행 - 육각형 테두리 이미지인 blockBack.png를 불러온다.

39행 - 이미지의 어느 위치를 좌표기준으로 정할지를 선택한다.

         x, y각각 0.0f ~ 1.0f까지 설정할 수 있다. 0.5f면 이미지의 중앙으로 하겠다는 것이다.

40행 - 화면의 좌측하단의 0,0을 기준으로 100,100에 위치시킨다.

41행 - 2번째 인자 '1'은 이미지를 출력하는 Depth값이다.

         배경이미지는 설정하지 않았으므로 '0'이 되고

         배경이미지 보다 위에 위치하기 위해 '1'을 줬다.

 

실행시켜보면 좌측하단에 육각형 테두리가 출력됬음을 볼 수 있다.

 

 

 

 

테두리를 화면에 벌집모양으로 뿌려보자

 

Common.h

#ifndef PuzzleTest_Common
#define PuzzleTest_Common
#include "cocos2d.h"
 
USING_NS_CC;
 
#define DESIGN_WIDTH    1080.0f
#define DESIGN_HEIGHT    1920.0f
 
#define ROW_COUNT        18
#define COLUMN_COUNT    5
 
#define TYPE_COUNT        6
 
#define OBJECT_WIDTH    150
#define OBJECT_HEIGHT    130
 
class Common {
public :
    static float ComputeX(Point point);
    static float ComputeY(Point point);
    static CCPoint ComputeXY(float x, float y);
};
 
#endif

 Common클래스의 내용을 구현하기 위해 Common.cpp도 Classes폴더에 추가시켰다.

4~7행 - 블록의 가로 좌표를 결정한다.

8행 - 블록의 세로 좌표를 결정한다.

 

 꽤나 복잡한 식을 사용해서 블록의 위치를 결정하고 있다.

각각이 어떤 역할을 하는지는 결과화면을 비교해서 알아보겠다.

 

 

 좌측 : 정상적인 식

 우측 : ComputeX에서 "90 +"가 없을 때

가장 앞에 있는 상수는 블록의 집합이 시작되는 좌표를 결정한다.

 

 

 

 좌측 : 정상적인 식을 2줄까지만 출력

 우측 : ComputeX에서 if문 없이 return 90 + point.x*OBJECT_WIDTH*1.5; 식만 사용

ComputeX에서 if문은 y값이 홀수인 짝수인지를 판별하고 그에 따라 다른 결과를 반환한다.

짝수 행은 + OBJECT_WIDTH*0.75 식으로 블록 길이의 3/4만큼 더 뒤에서부터 출력하면 맞게 된다.

 

 

 

 

 좌측 : 정상적인 식을 3줄까지만 출력

 중앙 : ComputeY에서 CCDirector::sharedDirector()->getWinSize().height - 535.0f - 을 빼고 출력

 우측 : ComputeY에서 / 2 를 빼고 출력

 

CCDirector::sharedDirector()->getWinSize().height 식은 현재 구동중인 기기의 화면크기에서 세로길이를 구해오는 함수이다.

cocos2D-x의 좌표계는 좌측하단부터 시작한다. 일반적인 y축과 방향이 반대인 것이다.

일반적인 y축 방향으로 개발하기 위해 '전체길이 - 좌표'식으로 방향을 맞추는 것이다.

 

ComputeY에서 / 2는 블록이 맞물리게 하기 위해서 개행을 반칸 씩만 하게 하는 역할을 한다.

 

 

GameLayer.cpp

void CGameLayer::startGame() {
    for (int x = 0; x < COLUMN_COUNT; x++) {
        for (int y = 0; y < ROW_COUNT; y++) {
 
            Sprite* pGameObjectBack = Sprite::create("blockBack.png")
 
            pGameObjectBack->setAnchorPoint(ccp(0.5f, 0.5f));
            pGameObjectBack->setPosition(Common::ComputeXY((float)x, (float)y));
 
            addChild(pGameObjectBack, 1);
        }
    }
}

 

 

 

 

다음 게시물에서 계속..