[cocos2d-x] CCClippingNodeで画像をくり抜く

どうも、俺＠もう帰るで。

今日はcocos2d-xのCCClippingNodeを使うめもめも。
※cocos2d-xはv2.1.5

先日、「スライディングフロッグ」というゲームアプリをリリースしました。
→iOSはコチラ
→Androidはコチラ

このゲームの結果画面で、メダルが穫れたときにメダルをキラリっと処理しているのですが、
そこでCCClippingNodeを使っています。

では、どう使うのか、サンプルコードを記していきます。

まず前処理として、iOS側ではAppController.mmの

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions NS_AVAILABLE_IOS(3_0);

メソッドを変更する必要があります。

EAGLViewインスタンスを生成する箇所を、

    EAGLView *__glView = [EAGLView viewWithFrame: [window bounds]
                                     pixelFormat: kEAGLColorFormatRGBA8
                                     depthFormat: GL_DEPTH24_STENCIL8_OES
                              preserveBackbuffer: NO
                                      sharegroup: nil
                                   multiSampling: NO
                                 numberOfSamples:0 ];

と変更します。

次に、結果画面を表示するシーン（ResultScene.cppとする）の処理です。
１）メダルSpriteを置く

CCSprite *medalSprite = CCSprite::create("medal.png");
// 適当なpositionに
medalSprite->setPosition(ccp(100, 100));
this->addChild(medalSprite);

２）光らせるSpriteを用意する

CCSprite *content = CCSprite::create("effect.png");
// 左から右へ動かすので、メダルの左側へ
content->setPosition(ccp(medalSprite->getPositionX()-medalSprite->getContentSize().width,
                         medalSprite->getPositionY()));

３）マスクする画像（メダル）を用意する

// 上記のmedalSpriteとは別に用意する
CCSprite *stencil = CCSprite::create("medal.png");
// メダルSpriteと同じpositionに
stencil->setPosition(medalSprite->getPosition());

４）CCClippingNode生成する

CCClippingNode *clippingNode = CCClippingNode::create();
clippingNode->setStencil(stencil);
// 小さい値にする
clippingNode->setAlphaThreshold(0.01f);
// 光らせるSprite
clippingNode->addChild(content);
// アンカーポイントをセットしておく
clippingNode->setAnchorPoint(ccp(0,0));
// 画面の左下へsetPosition()する
clippingNode->setPosition(ccp(0,0));
// 念のため、CCClippingNodeのサイズを画面全体に..不要?
clippingNode->setContentSize(CCSize(CCDirector::sharedDirector()->getWinSize().width,
                                    CCDirector::sharedDirector()->getWinSize().height));
this->addChild(clippingNode);

５）光らせるSpriteを左から右へ動かす

content->runAction(CCMoveBy::create(0.5f,
                                    ccp(medalSprite->getContentSize().width, 0)));

これで出来るはず（！？）です。

ちなみにAndroidの場合は、Cocos2dxActivity.javaを編集します。

    public Cocos2dxGLSurfaceView onCreateView() {
//      return new Cocos2dxGLSurfaceView(this);
        Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSurfaceView(this);
        glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8); 
        return glSurfaceView;
    } 

以上でぇぇぇぇぇす。

cocos2d-x CCLocalizedStringを使ってローカライズ対応する

どうも、俺＠休み中です。

 cocos2d-x(v2.1.5)で開発したゲームアプリもローカライズ対応させよう、
ということで、 有志の方がgithubで公開しているCCLocalizedStringを使わせてもらいました。

sue602/CCLocalizedStringDemo

まず、githubからcloneしてから
CCLocalizedString.cpp/CCLocalizedString.hをドラッグ＆ドロップでプロジェクトに放り込みます。

git clone https://github.com/sue602/CCLocalizedStringDemo.git

使い方はとてもシンプル。
例えば日本語圏(japan.png)・英語圏(english.png)でそれぞれ違う画像を表示させたい場合は、
表示させたいSceneで、

#include “CCLocalizedString.h”

... 中略 ...
CCSprite *someSprite = CCSprite::create(CCLocalizedString(“FILE_NAME”, “some_comment"));

とします。
第1引数（”FILE_NAME"）が変換対象となるキーです。
第2引数はコメント？

次に、ローカライズ用の設定ファイルを言語ごとにResource/フォルダに用意します。
今回は日本語と英語なのでLocalized_jpとLocalized_enになります。
それぞれのファイルに、
・Localized_jp

FILE_NAME = “japan.png”;

・Localized_en

FILE_NAME = “english.png”;

のように “キー” = “値” というフォーマットで記述します。

これで端末の言語設定によって使われるファイルを切り替えられます。

ただ、このままだと日本語・英語圏以外の言語環境でアプリを起動した場合、
ファイルが見つからずにクラッシュしてしまいました。
（やり方間違えてるのかな、、）
なので、CCLocalizedString.cppを少しいじります。

    // Get data of file
    fileContents = CCFileUtils::sharedFileUtils()->getFileData( fullPath.c_str( ) , "rb", &fileSize );

    // ここから
    if (fileContents==NULL) {
        // ファイルがない場合はLocalized_enを読み込む
        fileContents = CCFileUtils::sharedFileUtils()->getFileData( "Localized_en", "rb", &fileSize );
    }
    contents.assign(fileContents,fileContents+fileSize-1);

こうしておけば、対応していない言語環境の場合は
Localized_enを読み込むことが出来ます。


以上でぇぇぇぇぇす。