[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を読み込むことが出来ます。


以上でぇぇぇぇぇす。

Macでgitサーバを構築の巻

どうも、俺＠仕事中です。
今備忘録を書かないと忘れてしまうので、サボってる訳ではありません。

僕はXcodeで開発するときにgitを使ってソース管理をしています。
標準で使えるので多くの人も使っていると思います。

gitはローカルリポジトリだけでもソース管理ができますが、
今回自分でgitサーバを立てる（共有リポジトリの作成）必要があったのでメモ。


まず、ローカルリポジトリを作成します。
これはXcodeのプロジェクトを作成する際にgitリポジトリ管理とすることで勝手にXcodeがやってくれます。

Xcodeの場合はこの手順でプロジェクト新規作成の時点で、gitのイニシャルコミットまで完了します。
内部的には

git init
git add .
git commit -m "initial commit"

まで済んでる（と思います）。


次にgitサーバを作ります。
適当な場所にサーバの公開ディレクトリとなる基底フォルダ（名前も任意）を作成します。

mkdir ~/Documents/gitserver

そしてのフォルダ内に先ほど作成したXcodeプロジェクト用のディレクトリを作成し、共有リポジトリとするためののコマンドを叩きます。
ここでは仮にプロジェクト名を「TestProject」とします。

mkdir ~/Documents/gitserver/TestProject.git
cd ~/Documents/gitserver/TestProject.git
git init --bare --shared

これで共有リポジトリが出来ました。

さて、次は外部からgitプロトコルで接続するための設定です。
まず設定ファイル（git-daemon.plist）を作成します。

cd ~/Library/LaunchAgents
vim git-daemon.plist

パスは適宜変えて下さい。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<plist version="1.0">
<dict>
 <key>KeepAlive</key>
 <false>
 <key>Label</key>
 <string>git-daemon</string>
 <key>ProgramArguments
<array>
  <string>git</string>
  <string>daemon</string>
  <string>--export-all</string>
  <string>--enable=receive-pack</string>
  <string>--base-path=/Users/koexuka/Documetns/gitserver</string>
 </array>
 <key>RunAtLoad</key>
 <true>
 <key>ServiceDescription</key>
 <string>git-daemon</string>
</true></false></dict>
</plist>

kikaigyo/plist - GitHub から拝借させて頂きました。


次に、gitをデーモンとして起動させるようにします。

launchctl load -w git-daemon.plist

最後にローカルリポジトリから作成した共有リポジトリを登録します。

git remote add origin git://MY_iMac/TestProject.git

My_iMacの部分は自分のMacのIPアドレスやホスト名、またはlocalhostでOKです。


これで設定は完了しましたので、あとは別のPCから

git clone git://MY_iMac/TestProject.git

が成功すれば完了です！！！


以上でぇぇぇぇぇぇす。

Xcode cannot run using the selected device

どうも、俺です。

Xcodeでビルドしようとした際に
「Xcode cannot run using the selected device」というエラーが出てビルド出来ないあなたへ。

"Xcode cannot run using the selected device"に苦しんだ数日間 - マキシぐんだんの中の人のブログ
に同様の問題の対応方法がありますが、僕の場合は少し違いました。

Info.plistの"Target Membership"にチェックが入ってしまっていたことが原因。
チェックを外して解決しました。


以上でぇぇぇぇぇぇす。

[cocos2d-x] CCSpriteの画像を切替える

どうも、俺＠眠いです。

CCSpriteのテクスチャ画像をA→Bへ切り替える方法をメモ。

// まず最初の画像 a.png
CCSprite *aSprite = CCSprite::create(“a.png”);

// b.pngへ切り替える
aSprite->setTexture(CCTextureCache::sharedTextureCache()->addImage(“b.png”));
aSprite->setTextureRect(CCRectMake(0,0,aSprite->getContentSize().width, aSprite->getContentSize().height));

もしCCSpriteFrameCacheやCCSpriteBatchNodeを使っている場合は、

// 何らかのスプライトシート
CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile(“a.plist”, “a.png");

// 最初の画像 a.png
CCSprite *aSprite = CCSprite::createWithSpriteFrameName(“a.png”);

// b.pngへ変える
CCSpriteFrame *spriteFrame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(“b.png”);
aSprite->setDisplayFrame(spriteFrame);

以上でぇぇぇぇぇす。