cocos2dx - 創建地圖及玩家(偽)

接上一節內容:cocos2dx - 環境配置，項目創建

本節主要描述cocos中精靈的創建及點擊事件的使用

打開創建好的test項目，看到下圖的目錄結構，真正的游戲邏輯路徑在src下。

AppDelegate類主要描述啟動應用的一些設置及回調。

HelloWorldScene類是當前顯示界面的場景類。

圖片精靈

開始之前，先去掉HelloWorldScene下init方法的內容。然后創建Sprite類並添加到Scene節點中顯示，如下:

    // 獲取顯示的游戲大小
    Size visibleSize = Director::getInstance()->getVisibleSize();
    // 獲取顯示區域的起始點
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    // 加載圖片精靈
    auto sprite = Sprite::create("1.jpg");
    // 設置位置在屏幕中間
    sprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
    auto size = sprite->getContentSize();
    float scaleX = visibleSize.width / size.width;
    float scaleY = visibleSize.height / size.height;
    float scale = scaleX > scaleY ? scaleX : scaleY;
    sprite->setScale(scale);
    // 添加到節點上
    this->addChild(sprite, 0);

運行結果:

 

游戲畫面看起來有點小，在AppDelegate中找到  designResolutionSize ，並設置合適大小。

static cocos2d::Size designResolutionSize = cocos2d::Size(960, 640);

看起來有點模糊，這里是因為我找的原圖比較小，在加載時做了等比放大拉伸導致。(體會到沒美術的痛苦)

 

屏幕點擊事件

先添加一個玩家對象來表現效果，這里addChild第2個參數表示層級，設為1比上面的圖片高，則顯示在上層。

    // 加載圖片精靈
    m_pPlayer = Sprite::create("player.png");
    // 設置位置在屏幕中間
    m_pPlayer->setPosition(Vec2(visibleSize.width / 2 + origin.x, 100 + origin.y));
    // 添加到節點上
    this->addChild(m_pPlayer, 1);

效果如下:

在init添加如下代碼，並實現具體的 onTouchMoved 等方法

表示監聽this這個窗口的Touch事件，並回調到對應的 onTouchMoved等方法。

    // 添加屏幕點擊事件監聽
    auto dispatcher = Director::getInstance()->getEventDispatcher();
    auto myListener = EventListenerTouchOneByOne::create();
    //如果不加入此句消息依舊會向下傳遞  
    myListener->setSwallowTouches(true);
    myListener->onTouchBegan = std::bind(&HelloWorld::onTouchBegan, this, std::placeholders::_1, std::placeholders::_2);
    myListener->onTouchMoved = std::bind(&HelloWorld::onTouchMoved, this, std::placeholders::_1, std::placeholders::_2);
    myListener->onTouchEnded = std::bind(&HelloWorld::onTouchEnded, this, std::placeholders::_1, std::placeholders::_2);
    dispatcher->addEventListenerWithSceneGraphPriority(myListener, this);

在onTouchMoved加入如下代碼用來控制player移動看效果。

void HelloWorld::onTouchMoved(Touch *pTouch, Event *pEvent)
{
    if (m_pPlayer)
    {
        // 計算移動后的位置
        float desX = m_pPlayer->getPositionX() + pTouch->getDelta().x;

        // 防止超出屏幕
        Size visibleSize = Director::getInstance()->getVisibleSize();
        Vec2 origin = Director::getInstance()->getVisibleOrigin();
        if (desX<origin.x)
        {
            desX = origin.x;
        }
        if (desX>origin.x+visibleSize.width)
        {
            desX = origin.x + visibleSize.width;
        }
        m_pPlayer->setPositionX(desX);
    }
}

這樣游戲中就有了簡單的地圖背景(圖片)及玩家，並且可以進行左右移動。o(∩_∩)o ~