lp6m’s blog

いろいろかきます

cocos2d-x: 角丸のボタン用の画像をつくる

cocos2d-xでゲームを作ってる。わからないことだらけで全然進まない。少しずつわかってきた感じ。

角丸のボタンってデザインがいいかんじなのでゲームで使いたいと思ってまああるだろうとおもって調べてみたら公式にはない。

ここにスプライトに角丸のマスクをする方法が載ってたのでコピー。(ほとんどこれのおかげ.自分で追加したの10行程度・・)
http://discuss.cocos2d-x.org/t/how-can-i-create-sprite-with-rounded-corner/15403/7discuss.cocos2d-x.org
あとは適当に色設定したり、文字表示する用にした。
RoundedBoxSpriteというクラス名にした。

RoundedBoxSprite::setParam(Size size,Color3B BGColor,float CornerRadius,int CornerSegment,std::string String,Color3B FontColor,int FontSize)

CornerRadiusは角の円の半径,CornerSegmentは角あたりの点の数(増やすほど円に近づく).
※2015 04/03 修正 
cocos2d-x Ver3.2だと正常に動作しません(スプライトを描画すると背景が真っ白になる)
解決策:
AppDelegate.cppに以下を追加

void AppDelegate::initGLContextAttrs()
{
    //set OpenGL context attributions,now can only set six attributions:
    //red,green,blue,alpha,depth,stencil
    GLContextAttrs glContextAttrs = {8, 8, 8, 8, 24, 8};

    GLView::setGLContextAttrs(glContextAttrs);
}

AppDelegate.hのAppDelegateClassのpublicメソッドに

    virtual void initGLContextAttrs();

を追加.
サンプル:
f:id:lp6m:20150402052229p:plain

使い方はこんな感じで。

#include "RoundedBoxSprite.h"
bool HelloWorldScene::init(){
    if(!Layer::init()){
        return false;
    }
    Color3B MyColor[6]={
        Color3B(111,201,88),
        Color3B(1,186,184),
        Color3B(65,154,210),
        Color3B(253,96,167),
        Color3B(230,75,133),
        Color3B(253,168,0)
    };
    std::string strarray[6]={
        "トレーニング",
        "プロフィール",
        "お知らせ",
        "オプション",
        "ヘルプ",
        "クレジット"
    };
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    for(int i=0;i<6;i++){
        auto test = RoundedBoxSprite::create();
        test->setParam(Size(350,80),MyColor[i],10,10,strarray[i],Color3B::WHITE,40);
        test->setPosition(visibleSize.width/2,visibleSize.height-250-i*100);
        this->addChild(test);
    }
}

コードはここ。
RoundedBoxSprite.cpp

RoundedBoxSprite.h