【第2回】Cocos2dxでマルバツゲームを作る(タイトル画面編) – Cocos2dx v4.X対応 | ページ 2

ボタン
HelloWorldを消す
1. 実行
最後に

ボタン

素材ダウンロード

「Start」ボタンと「Exit」ボタン画像を用意しました。

ダウンロードボタンからダウンロードしてください

title_start ダウンロード

title_exit ダウンロード

リソースフォルダに保存

ダウンロードした、title_start.png,title_end.pngをResourcesの中に保存します。

Visual Studioに追加

ソリューションエクスプローラー>Resources　を右クリックして

追加>既存の項目をクリックします

ファイルダイアログがでるのでtitle_start.png, title_end.pngを選択して追加ボタンを押して追加してください。

追加するとソリューションエクスプローラー>Resources　に　title_start.png, title_end.pngが追加されます

Exitボタン追加

ソリューションエクスプローラー>Source File>Classes>HelloWorldScene.cpp　を開きます。

60行目のCloseNormal.png, CloseSelected.pngをtitle_exit.pngに変更して下さい

変更前

    auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    if (closeItem == nullptr ||
        closeItem->getContentSize().width <= 0 ||
        closeItem->getContentSize().height <= 0)
    {
        problemLoading("'CloseNormal.png' and 'CloseSelected.png'");
    }
    else
    {
        float x = origin.x + visibleSize.width - closeItem->getContentSize().width/2;
        float y = origin.y + closeItem->getContentSize().height/2;
        closeItem->setPosition(Vec2(x,y));
    }

変更後

    auto closeItem = MenuItemImage::create(
        "title_exit.png",
        "title_exit.png",
        CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    if (closeItem == nullptr ||
        closeItem->getContentSize().width <= 0 ||
        closeItem->getContentSize().height <= 0)
    {
        problemLoading("'title_exit.png' and 'title_exit.png'");
    }
    else
    {
        float x = origin.x + visibleSize.width / 2;
        float y = origin.y + visibleSize.height / 2 - closeItem->getContentSize().height / 2;
        closeItem->setPosition(Vec2(x, y));
    }
    // create menu, it's an autorelease object
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);

MenuItemImageでは

第1引数:表示画像
第2引数:プッシュ時の画像
第3引数:クリック時のイベント処理

になります。

auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

CC_CALLBACKでは、HelloWorld::menuCloseCallbackが呼ばれます。

void HelloWorld::menuCloseCallback(Ref* pSender)
{
    //Close the cocos2d-x game scene and quit the application
    Director::getInstance()->end();
    /*To navigate back to native iOS screen(if present) without quitting the application  ,do not use Director::getInstance()->end() as given above,instead trigger a custom event created in RootViewController.mm as below*/
    //EventCustom customEndEvent("game_scene_close_event");
    //_eventDispatcher->dispatchEvent(&customEndEvent);
}

実行

正しく画像が反映されているか確認します。

「Ctrl + F5」で実行ができます。

Exitボタンが表示されました。

Exitクリックをすると画面が閉じます。

Startボタン追加

ソリューションエクスプローラー>Source File>Classes>HelloWorldScene.cpp　を開きます。

先ほど変更したMenuItemImageの前に新たにスタートボタン用のMenuItemImageを作成します。

変更前

    auto closeItem = MenuItemImage::create(
        "title_exit.png",
        "title_exit.png",
        CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    if (closeItem == nullptr ||
        closeItem->getContentSize().width <= 0 ||
        closeItem->getContentSize().height <= 0)
    {
        problemLoading("'title_exit.png' and 'title_exit.png'");
    }
    else
    {
        float x = origin.x + visibleSize.width / 2;
        float y = origin.y + visibleSize.height / 2 - closeItem->getContentSize().height / 2;
        closeItem->setPosition(Vec2(x, y));
    }
    // create menu, it's an autorelease object
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);

変更後

closeItemのPositionを変更しました。

float y = origin.y + startItem->getPosition().y - startItem->getContentSize().height;

Startボタンの下にExitボタンが来るようにしたいので、StartボタンのポジションからStartボタンの高さ分下にExitボタンが来るようにしています。

auto startItem = MenuItemImage::create(
        "title_start.png",
        "title_start.png",
        CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    if (startItem == nullptr ||
        startItem->getContentSize().width <= 0 ||
        startItem->getContentSize().height <= 0)
    {
        problemLoading("'title_start.png' and 'title_start.png'");
    }
    else
    {
        float x = origin.x + visibleSize.width / 2;
        float y = origin.y + visibleSize.height / 2 - startItem->getContentSize().height / 2;
        startItem->setPosition(Vec2(x, y));
    }
    auto closeItem = MenuItemImage::create(
        "title_exit.png",
        "title_exit.png",
        CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    if (closeItem == nullptr ||
        closeItem->getContentSize().width <= 0 ||
        closeItem->getContentSize().height <= 0)
    {
        problemLoading("'title_exit.png' and 'title_exit.png'");
    }
    else
    {
        float x = origin.x + visibleSize.width / 2;
        float y = origin.y + startItem->getPosition().y - startItem->getContentSize().height;
        closeItem->setPosition(Vec2(x, y));
    }
    // create menu, it's an autorelease object
    auto menu = Menu::create(startItem, closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);

実行

正しく画像が反映されているか確認します。

「Ctrl + F5」で実行ができます。

StartボタンとExitボタンがが表示されました。

StartボタンかExitボタンをすると画面が閉じます。

HelloWorldを消す

画面上部にあるHelloWorldを消します。

ソリューションエクスプローラー>Source File>Classes>HelloWorldScene.cpp　を開きます。

Label::createWithTTFでHelloWorldのラベルを描画しています。

下記の該当コードを消すとHelloWorldのラベルがなくなります。(labelがSceneに追加されなくなるので、表示されません)

auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);
    if (label == nullptr)
    {
        problemLoading("'fonts/Marker Felt.ttf'");
    }
    else
    {
        // position the label on the center of the screen
        label->setPosition(Vec2(origin.x + visibleSize.width/2,
                                origin.y + visibleSize.height - label->getContentSize().height));
        // add the label as a child to this layer
        this->addChild(label, 1);
    }

実行

正しく画像が反映されているか確認します。

「Ctrl + F5」で実行ができます。

これでタイトル画面ぽくなりました。

最後に

タイトル画面はできましたが、startボタンを押すと画面が閉じてしまうため、次回は画面遷移を行いたいと思います。

今回のHelloWorld.cppのソースコードです。

/****************************************************************************
 Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
 
 http://www.cocos2d-x.org
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in
 all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 ****************************************************************************/
#include "HelloWorldScene.h"
USING_NS_CC;
Scene* HelloWorld::createScene()
{
    return HelloWorld::create();
}
// Print useful error message instead of segfaulting when files are not there.
static void problemLoading(const char* filename)
{
    printf("Error while loading: %s\n", filename);
    printf("Depending on how you compiled you might have to add 'Resources/' in front of filenames in HelloWorldScene.cpp\n");
}
// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Scene::init() )
    {
        return false;
    }
    //width : 480 height : 320
    Size visibleSize = Director::getInstance()->getVisibleSize();
    //x : 0, y : 0
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    /////////////////////////////
    // 2. add a menu item with "X" image, which is clicked to quit the program
    //    you may modify it.
    // add a "close" icon to exit the progress. it's an autorelease object
    auto startItem = MenuItemImage::create(
        "title_start.png",
        "title_start.png",
        CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    if (startItem == nullptr ||
        startItem->getContentSize().width <= 0 ||
        startItem->getContentSize().height <= 0)
    {
        problemLoading("'title_start.png' and 'title_start.png'");
    }
    else
    {
        float x = origin.x + visibleSize.width / 2;
        float y = origin.y + visibleSize.height / 2 - startItem->getContentSize().height / 2;
        startItem->setPosition(Vec2(x, y));
    }
    auto closeItem = MenuItemImage::create(
        "title_exit.png",
        "title_exit.png",
        CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    if (closeItem == nullptr ||
        closeItem->getContentSize().width <= 0 ||
        closeItem->getContentSize().height <= 0)
    {
        problemLoading("'title_exit.png' and 'title_exit.png'");
    }
    else
    {
        float x = origin.x + visibleSize.width / 2;
        float y = origin.y + startItem->getPosition().y - startItem->getContentSize().height*1.5;
        closeItem->setPosition(Vec2(x, y));
    }
    // create menu, it's an autorelease object
    auto menu = Menu::create(startItem, closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);
    /////////////////////////////
    // 3. add your codes below...
    // add a label shows "Hello World"
    // create and initialize a label
    // add "HelloWorld" splash screen"
    auto sprite = Sprite::create("title_bg.png");
    if (sprite == nullptr)
    {
        problemLoading("'title_bg.png'");
    }
    else
    {
        // position the sprite on the center of the screen
        sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
        // add the sprite as a child to this layer
        this->addChild(sprite, 0);
    }
    return true;
}
void HelloWorld::menuCloseCallback(Ref* pSender)
{
    //Close the cocos2d-x game scene and quit the application
    Director::getInstance()->end();
    /*To navigate back to native iOS screen(if present) without quitting the application  ,do not use Director::getInstance()->end() as given above,instead trigger a custom event created in RootViewController.mm as below*/
    //EventCustom customEndEvent("game_scene_close_event");
    //_eventDispatcher->dispatchEvent(&customEndEvent);
}