バーチャルパッド(アナログスティック)【cocos2d】

プログラム

さっそく本題ですがプログラムは以下の通りです．

バーチャルパッド(アナログスティック) cocos2d · GitHub

ボタンとボタン台

今回作成したバーチャルパッドは二つのパーツからなります．

一つ目は移動させるボタン((CCSprite*)Button)で，これは指の動きに合わせて動きます．
二つ目はボタン台((CCSprite*)ButtonBack)で，これの上にボタンを載せており，ボタン台自体は指に合わせて動きません．

なぜ二つのパーツにしたかというと，今回のバーチャルパッドは固定の位置にあるのでは無く，始点(タッチを開始した点)に出現し，そこからどれだけ指を動かしたかによって操作するため，視覚的に始点を分かりやすくするためです．
ボタンのみだと，ボタンを動かした後は始点が分かり難くなります。

プログラム的にはButtonBackにButtonをaddchildしており，ボタン台を始点に移動させたとしても，単純にボタンの移動距離を見ればどれだけ操作キャラクターを動かせばいいか分かるからです．

処理の流れ

流れは以下の通りです

1. タッチされた場所にボタン台を表示する(addchildしているのでボタンも表示される)
2. タッチしたまま指が動いたらボタンを動かす
3. 一定範囲(円状)よりボタンは動かない
4. ボタンの移動距離をみてプレイヤーを操作(上記プログラム内には該当箇所無し)
5. タッチされたまま指が動いたら
6. タッチが終了したらボタン台を消す(addchildしているのでボタンも消える)

重要点は移動距離の制限です．ボタンがどこまででも行ってしまうとコントローラーにならないので，動かせる直接距離(MaxMoveRate)を設定しています．
またアナログスティックですので，移動範囲は円状である必要があります．
ですので，sqrt(Distance.x * Distance.x + Distance.y * Distance.y)にて始点からの終点(指が動いた後の点)の距離を求め，atan2f(Distance.y, Distance.x)にて角度を求めて，その角度のまま距離を制限しています．ベクトルの方向をそのままに大きさを制限していると考えると分かり易いかと思います．

動画

実際にこのバーチャルパッドを使っているアプリが姫でぃふぇんすになります．
ゲーム内容は敵から姫を守るゲームで，操作キャラを敵にぶつけてダメージを与えて倒します．
https://itunes.apple.com/jp/app/jidifensu/id627154425?mt=8&ign-mpt=uo%3D4&at=10l8JW&ct=hatenablog

また，参考にプレイ動画を撮ってみました．操作キャラは白髭の老人で，今回はReflector(Tryモード)を使って撮影しています．

画質は良い感じ！音関係もずれたりしてますが撮れてるのでブログ用には十分かと．

---