cocos2dxの<code>ClippingNode</code>を使えば、クリッピングマスクのような効果ができます。この機能で、ユーザーアイコンを丸く表示させてみる。
<h2>まず普通にアイコンを表示させる</h2>
<pre><code class="language-cpp">auto avatar = Sprite::create(&quot;avatar.jpg&quot;);
// Spriteを作成
	
avatar-&gt;setPosition(visibleSize/2);
// 画面中央に配置
	
this-&gt;addChild(avatar);
</code></pre>
これで、プレビューすると：
<img src="/assets/44172a6ffe6110aee4912276a69e36ed2ec96781:normal.png" alt="">
<h2>ClippingNodeを使ってアイコンを丸くする</h2>
<h3>ClippingNodeを作成</h3>
<pre><code class="language-cpp">auto clipping = ClippingNode::create();
</code></pre>
<h3>マスクの形を作る</h3>
背景が透明にした黒い円の画像<code>mask.png</code>を用意した。
<img src="/assets/9c56f62b478143de01a365c8875095e8ac2c568a:normal.png" alt="">
この画像の<code>Sprite</code>を作成する。
<pre><code class="language-cpp">auto clippingShape = Sprite::create(&quot;mask.png&quot;);
</code></pre>
<h3>アイコンをクリップする</h3>
この画像をマスクとして使うには、<code>ClippingNode</code>の<code>setStencil</code>メソードを使う：
<pre><code class="language-cpp"> clipping-&gt;setStencil(clippingShape);
 clipping-&gt;setInverted(false);
 clipping-&gt;setAlphaThreshold(0.0f);
</code></pre>
これで、<code>clipping</code>に<code>addChild</code>された<code>Sprite</code>はすべて<code>mask.png</code>の形にクリップされる。（黒い部分と重なってる部分だけ表示される）
<pre><code class="language-cpp">clipping-&gt;addChild(avatar);
this-&gt;addChild(clipping);
</code></pre>
プレビューすると：
<img src="/assets/0caf52abf7273e9ec00f203ab5ac7facb18d77d8:normal.png" alt="">
できた！
<h2>感想</h2>
この記事でマスクの形は画像を使っているが、これは円とういう形がちょっと特殊で、cocos2dxの<code>DrawNode</code>で描画するのがめんどくさいからのだ。もしポリゴンなどみたいな簡単な形だと、<code>DrawNode</code>で形を作成してマスクとして使ったほうが便利かもしれない。

cocos2d-xでクリッピングマスク

cocos2dxで図形を描画するには<code>DrawNode</code>というクラスを使えば簡単にできる。
<h2>点を描く</h2>
<pre><code class="language-cpp"> auto draw = DrawNode::create();
 draw-&gt;drawDot(Vec2(visibleSize/2), 10.0f, Color4F(1.0f, .6f, .5f, 1.0f));
 // drawDot(ポジション, 半径, 色);
</code></pre>
<img src="/assets/e563cfa0a0f43668f5251dc5c19dce5936d10582:normal.png" alt="">
<h2>線を描く</h2>
<pre><code class="language-cpp"> draw-&gt;drawSegment(Vec2(0, visibleSize.height/2), Vec2(visibleSize.width, visibleSize.height/2), 2.0f, Color4F(.5f, 1.0f, .7f, 1.0f));
 //drawSegment(スタートポイント,エンドポイント,太さ,色);
</code></pre>
<img src="/assets/b590c0d7de8250558be5afdaec3a811b8d3dec5d:normal.png" alt="">
<h2>三角を描く</h2>
<pre><code class="language-cpp"> draw-&gt;drawTriangle(Vec2(visibleSize.width/4, visibleSize.height/4), Vec2(visibleSize.width/2, visibleSize.height*3/4), Vec2(visibleSize.width*3/4, visibleSize.height/4), Color4F(.8f, .9f, .6f, 1.0f));
 //drawTriangle(１番目の点,２番目の点,３番目の点,色);
</code></pre>
<img src="/assets/e9023952660ab8e001843a9eddcfa2c6eb9de3e6:normal.png" alt="">
<h2>ポリゴンを描く</h2>
ポリゴンは複数の点が接続して囲まれた部分の図形。点のコントロールをうまく使えれば、理論上どんな形でも作れる。３Dゲームのキャラクターなども大量なポリンゴンで作られたのだ。
<pre><code class="language-cpp"> std::vector&lt;Vec2&gt;vecs;
 //点を格納用
 int radius = 200.0f;
 //半径
 int point_num = 6;
 //点の数
 for (int i = 0; i &lt; point_num; i++)
 {
 vecs.push_back(Vec2(visibleSize.width/2 + radius*cos(PI/180*(90+360*i/point_num)), visibleSize.height/2 + radius * sin(PI/180*(90+360*i/point_num))));
 }
 // 中心から、半径がradiusの円を描くように点を配置。
</code></pre>
<code>PI</code>を定義するには、#includeの直後に<code>#define PI 3.1415926</code>を入れてください。
<pre><code class="language-cpp"> draw-&gt;drawPolygon(&amp;vecs[0], point_num, Color4F(.5f, .6f, 1.0f, 1.0f), 0, Color4F::BLACK);
 //drawPolygon(点の配列, 点の数, 色, アウトラインの太さ,アウトラインの色);
</code></pre>
<img src="/assets/6f9566eae4df2f34031896ec793cf9a6a9f0a021:normal.png" alt="">
点の数を増やしてみよう：
<pre><code class="language-cpp"> int point_num = 12;
 //点の数
</code></pre>
<img src="/assets/071b7fbd7a33cccea209b662fc6a0a1aa4bee2f7:normal.png" alt="">
円に近づいたね、点の数さらに増やすと：
<pre><code class="language-cpp"> int point_num = 48;
 //点の数
</code></pre>
<img src="/assets/1f090d0a910b74091969cd6a4fca526086e8b5f6:normal.png" alt="">
完璧な円ができた！
<h2>カーブを描く</h2>
<pre><code class="language-cpp"> draw-&gt;drawQuadraticBezier(Vec2(0, visibleSize.height/2), Vec2(visibleSize.width/2, visibleSize.height), Vec2(visibleSize.width, visibleSize.height/2), 24, Color4F::WHITE);
 // drawQuadraticBezier(スタートポイント,コントロールポイント,エンドポイント,カーブを構成する線の数（滑らかさ）,色);
</code></pre>
<img src="/assets/380facb0574855ea006b913b931f137b3efba19b:normal.png" alt="">
滑らかにする：
<pre><code class="language-cpp"> draw-&gt;drawQuadraticBezier(Vec2(0, visibleSize.height/2), Vec2(visibleSize.width/2, visibleSize.height), Vec2(visibleSize.width, visibleSize.height/2), 24, Color4F::WHITE);
</code></pre>
<img src="/assets/54b89a2368efd99341100e81a207f34db8bfe229:normal.png" alt="">
<h2>感想</h2>
<code>DrawNode</code>を使えば、描きアプリは簡単に作れると思うので、いつか作ってみる。そして<code>ClippingNode</code>と組み合わせると結構面白いことができそうではないかと思っている。

cocos2d-xのdrawnodeで図形を描く!

ゲームの処理を行う時に、一定時間間隔で繰り返しや遅延などを実現するには、タイマーが必要です。cocos2dxには<code>schedule</code>という便利なタイマー機能があります。
<h2>フレームごとに繰り返し<code>scheduleUpdate</code></h2>
このメソードを使うと、クラス内の<code>update()</code>メソードがフレームごとに実行されます。この<code>update()</code>メソードは所謂「メインループ」のことです。<code>scheduleUpdate</code>を使うには、まずヘッダーファイルに<code>update()</code>メソードの定義をします。
<pre><code class="language-cpp">	void update( float frame ) // updateじゃないとだめです！
</code></pre>
そして、ソースコードでメソードの宣言をします。（HelloWorldというクラス内を想定します。下記同様）
<pre><code class="language-cpp">	void HelloWorld::update( float frame )
	{
		CCLOG(&quot;だるい&quot;);
	}
</code></pre>
最後に、この<code>update()</code>メソードを実行したいところに、<code>this-&gt;scheduleUpdate()</code>を書くと。「だるい」が大量発生します。
<h2>一定時間間隔で繰り返し<code>schedule</code></h2>
もし、繰り返しの時間間隔を指定したい場合は、<code>schedule</code>を使います。フレームごとの繰り返しと違って、<code>schedule</code>は実行されるメソードも指定することができます。例として、ヘッダーファイルに<code>Hello()</code>というメソードを定義しましょう。
<pre><code class="language-cpp">	void Hello(float frame); // float型のパラメータが必要です。
</code></pre>
もちろん、宣言をします。
<pre><code class="language-cpp">	void HelloWorld::Hello(float frame)
	{
		CCLOG(&quot;こんにちは&quot;);
	}
</code></pre>
3秒に一回「こんにちは」を繰り返すとしましょう。
<pre><code class="language-cpp">	schedule(schedule_selector(HelloWorld::Hello), 3.0f); 	
</code></pre>
これで、プログラムを実行すると、cocos2dxが3秒ごとに挨拶してくれる。
<h2>実行の遅延</h2>
<code>scheduleOnce</code>を使うと、メソードが一回だけ実行されるので、これを利用してメソードの実行を送らせることができます。前の「こんにちは」の例を使いましょう。上記の
<pre><code class="language-cpp">	schedule(schedule_selector(HelloWorld::Hello), 3.0f);
</code></pre>
を
<pre><code class="language-cpp">	scheduleOnce(schedule_selector(HelloWorld::Hello), 3.0f);
</code></pre>
に入れ替えれば、「こんにちは」の挨拶は3秒遅らせて実行されることになります。
<h2>タイマーを止める</h2>
「だるい」大量発生がよろしくないので、止めたい場合は:
<pre><code class="language-cpp">	this-&gt;unScheduleUpdate();
</code></pre>
を実行すればいいです。メソードが指定されたタイマーを止める時は：
<pre><code class="language-cpp">	this-&gt;unschedule(schedule_selector(&lt;メーソド&gt;));
</code></pre>
を使います。「こんにちは」の例だと：
<pre><code class="language-cpp">	this-&gt;unschedule(schedule_selector(HelloWorld::Hello));
</code></pre>
になります。
もし、すべてのタイマーを止めたいなら、
<pre><code class="language-cpp">	this-&gt;unscheduleAllSelectors();
</code></pre>
を使えば良いのです。
<h2>感想</h2>
ゲームアプリはほぼイベント駆動型なので、ループをうまく使いこなせるかどうかが重要だと思います。cocos2dxの<code>runAction</code>が非常に便利だが、実際に大量なアニメーション同時進行だとコントロールしにくいので、結局最後<code>runAction</code>が実行してるかどうかをチェックするには、<code>update</code>のループで<code>getRunningActionNumber</code>が0になってるどうかで判断になってしまいます。自分の結論ですが、基本のUI系アニメーションは<code>runAction</code>で済ませます。複雑なゲーム処理などはメインループを使うのがおすすめです。

cocos2d-xのscheduleメソード

cocos2dxで作成したゲームにソーシャル機能を入れたい時に、プラットフォームによって実装方法が変わります。もちろん、ゼロから自分でC++でライブラリを書くのもありですが、できれば各プラットフォーム自体を提供したAPIを使ったほうが無難です。
しかし、**iOSはobjective-C、AndroidはJavaを使用しています。直接そのAPIは利用できません。**C++でそのAPIにアクセスする方法を考えなくてはいけません。
<h2>C++とObjective-Cの共存</h2>
Objective-CはCをベースにした言語です。Cと共存できるC++は、Objective-Cとも共存できます。実xcodeではC++をObjective-Cと共存させるのが非常に簡単です。ソースの拡張子を<code>mm</code>にすればいいのです。
<img src="/assets/f2227956acbf51ecd41f13eff3a8d240f65b0ce9:normal.png" alt="" title="こうすればいい">
例えば新規したcocos2dxのプロジェクトに<code>HelloWorldScene.cpp</code>というファイルがあります。それを<code>HelloWorldScene.mm</code>にリネームすれば、中にObjective-Cを書いてxcodeはちゃんとコンパイルしてくれます。
<h2>cocos2dxでObjective-Cを使ってHello,World!</h2>
<h3>準備</h3>
振起したcocos2dxプロジェクトにある<code>HelloWorldScene.cpp</code>の拡張子を<code>mm</code>にします。これからObjective-Cを書くわけですが、cocos2dxはプラットフォーム別けにマクロを用意しました。
<pre><code class="language-cpp">	#if (CC*TARGET*PLATFORM == CC*PLATFORM*IOS)
		// ここにiOSプラットフォーム用コードを書く
	#endif
</code></pre>
早速使ってみよう、<code>#include &quot;HelloWorldScene.h&quot;</code>の直後に下記のコード追加
<pre><code class="language-cpp">	#if (CC*TARGET*PLATFORM == CC*PLATFORM*IOS)
 		#import &lt;Foundation/Foundation.h&gt;
	#endif
</code></pre>
**Objective-Cでは<code>#include</code>ではなく、<code>#import</code>を使っています。**そして<code>&lt;Foundation/Foundation.h&gt;</code>ですが、これはiOSアプリ開発用言語cocoaの基盤ライブラリです。これを<code>import</code>することで、<code>NSString</code>,<code>NSArray</code>などcocoaのオブジェクトが使えるようになります。
<h3>ネームスペース衝突</h3>
<code>&lt;Foundation/Foundation.h&gt;</code>を<code>import</code>すると、このようなエラーが出てくるはずです。
<img src="/assets/8e21fc7c9f38487c7f1523f57c2db772582c0c68:normal.png" alt="" title="エラー">
これは,Objective-Cにも<code>Size</code>という構造体があるからです、解決方法は簡単です。ネームスペースをつけてあげれば良い。
<pre><code class="language-cpp">cocos2d::Size visibleSize = Director::getInstance()-&gt;getVisibleSize();
</code></pre>
<h3>NSStringを作成</h3>
<code>NSString</code>はObjective-Cの文字列オブジェクトです。下記ように作成できます。
<pre><code class="language-objective-c">NSString* helloWorldAsString = @"Hello World";
</code></pre>
**Objective-Cの文字列前に<code>@</code>をつけるのが一般的です。**さて、それをC++のcocos2dxで表示させよう。普通にC++書けば良いです。
<pre><code class="language-cpp">	// Objective-Cです
	NSString *helloWorldAsString = @&quot;Hello World&quot;;
	
	// C+++です
	auto label = cocos2d::Label::createWithSystemFont([helloWorldAsString UTF8String], &quot;HiraKaku-W6&quot;, 36);
	// ラベル作成
	
	label-&gt;setPosition(visibleSize/2);
	// ポジションをセット
	
	this-&gt;addChild(label);
	// レンダリング
</code></pre>
<code>cocos2d::Label::createWithSystemFont</code>の一番目のパラメターに<code>[helloWorldAsString UTF8String]</code>をパスしました。<code>[helloWorldAsString UTF8String]</code>はObjective-Cの文法で、C++で解釈すると<code>helloWorldAsString-&gt;UTF8String()</code>という感じです。**<code>UTF8String</code>メソードを利用して、<code>NSString</code>の文字列をCの<code>char*</code>型に変換できます。**コンパイルしてみると：
<img src="/assets/3c938a5c6845d2e522cedd657745b81135268e86:normal.png" alt="" title="結果">
成功しました！
<h2>感想</h2>
xcodeのおかげで、C++とObjective-Cとの共存は簡単にできちゃいます。今度はJavaとの連携を書いてみます。でもC++とJavaとの連携は意外と面倒くさいので、時間がかかるかもしれません。。

Chain Zhang

2014年の更新

ブログ: cocos2d-xでクリッピングマスク

ブログ: cocos2d-xのdrawnodeで図形を描く!

ブログ: cocos2d-xのscheduleメソード

ブログ: cocos2d-xでObjective-Cコードをコールする