Cocos2d-x Ver 3.x Scal9Scene（1つの画像で色々な大きさのボタンを作る）

アプリケーションには色々な大きさのボタンが使われていますが、ボタンには共通のデザインを使うことが多いですが、ボタンのサイズ毎に違う画像を作るのが手間が掛かります。伸縮してもデザインが崩れないストレッチ画像を指定することによりひとつの画像を色んな大きさのボタンの背景として使うことができます。

ストレッチ画像を用意

ストレッチ画像は、9パッチ画像とも呼ばれています。9つの区切りに4隅の部分は大きさを変えずに、その他の部分は実際に表示する画像サイズに合わせて伸縮させて表示します。

下記のボタンが横幅、縦と伸縮表示させることができます。

Cocos2dx 3.x C++言語

TopScale9Scene.hを次のように変更してみてください。

#ifndef __Scale9Sprite__TopScale9Scene__

#define __Scale9Sprite__TopScale9Scene__

#include "cocos2d.h"

USING_NS_CC;

class TopScale9Scene :public Layer

{

protected:

    // コンストラクタ

    TopScale9Scene();

    // デストラクタ

    virtual ~TopScale9Scene();

    // メソッド CREATE_FUNCとの連携

    bool init() override;

public:

    static cocos2d::Scene* createScene();

    CREATE_FUNC(TopScale9Scene);

};

#endif /* defined(__Scale9Sprite__TopScale9Scene__) */

TopScale9Scene.cppを次のように変更してみてください。

#include "TopScale9Scene.h"

#include <ui/CocosGUI.h>

USING_NS_CC;     // cocos2d

using namespace ui;

// _/_/_/ コンストラクタ プロパティー _/_/_/

TopScale9Scene::TopScale9Scene()

{

}

// MainScene デストラクタで解放 メモリーリークを防ぐ

TopScale9Scene::~TopScale9Scene()

{

}

// createSceneはLayerをSceneに貼り付けて返すクラスメソッドです。

// 自分自身(TopScale9Scene)を生成し、空のSceneに貼り付けて返す簡単な処理を行っているだけです。

// これでほかのシーンからの遷移が楽に行えます。

Scene* TopScale9Scene::createScene()

{

    auto scene = Scene::create();

    auto layer = TopScale9Scene::create();

    scene->addChild(layer);

    return scene;

}

bool TopScale9Scene::init()

{

    if ( !Layer::init() )

    {

        return false;

    }

    // 画面サイズを取得

    Size winSize = Director::getInstance()->getVisibleSize();

    //マルチレゾリューション対応がどうとか

    Point origin = Director::getInstance()->getVisibleOrigin();

    // バックグランドカラー

    auto background = LayerColor::create(Color4B::BLUE,

                                         winSize.width,

                                         winSize.height);

    // バックグランドカラー 第2引数は表示順

    this->addChild(background, 0);

    /////////// setScale9 ///////////

    // ボタン生成

    Button *button = Button::create();

    // setScale9

    button->setScale9Enabled(true);

    // ボタンサイズ

    button->loadTextureNormal("button9.png");

    // ボタンサイズ（x:幅 y:高さ 数値で可変できる）

    button->setSize(Size(400,160));

    // タイトルテキスト

    button->setTitleText("Button");

    // フォントサイズ

    button->setTitleFontSize(80);

    // ボタン配置位置

    button->setPosition(Vec2(winSize.width / 2, winSize.height / 2));

    // ボタン表示

    addChild(button);

    return true;

}

GitHub Scale9Sprite_Cocos2d-x

▫️参考にしたページ

cocos2d-xのCCScale9Spriteで画像を部分的に引き延ばす

目　次