logo header
logo header
logo header
logo header
  • 2016.08.03
  • Game技術ブログ

COCOS2D-Xで作る音楽ゲーム 第2回:導入編 [後編]

cocos2dx_landscape

 

札幌もようやく暑くなりビールがおいしい季節なので、休日はビール片手にCOCOS2D-Xでカタカタとゲームを作っていました。Templeです。

さて、開発環境を整えた前回はプロジェクトができたばっかりの状態で終わりましたが、第2回では、ゲームを作るときにあると便利な「グリッド線」と、特定の画像をタップしたら別の場所に移動する「瞬間移動で逃げるCOCOSロゴ」を作成していきます。

COCOS2D-Xで作る音楽ゲーム シリーズ記事
「COCOS2D-X 導入編」第1回 第2回  < いまここ

「COCOS2D-X 実装編」

Phase 0 : いろいろ作る…その前に

「さあ、作るぞ!」という前に、ちょっと下ごしらえしましょう。

作成したばっかりのプロジェクトを見てみると、AppDelegateから呼ばれているクラス名がHelloWorldSceneとなっていますが、これだと違和感があるので、新しくMainSceneというクラスを作成して、AppDelegate.cppでHelloWorldSceneとなっている箇所をすべてMainSceneに変更します。

これでビルドすると、真っ暗な画面と、左下に何やらステータスのような文字が表示されます。この状態から作っていきましょう。

Phase 1 : グリッド線を作ろう!

まずは、グリッド線を引く関数を作ります。いたってシンプルです。

drawGridLine関数の頭にあるoriginとapp_sizeですが、アプリ内の起点座標(0,0)とゲームの縦と横の幅を取得しており、今回作っているグリッド線やボタンなどを配置する際に必須となります。

そして作成したdrawGridLine関数を、init関数のreturn直前に追加します。

これでビルドすると、こんな感じの画面になります。

blog02_1

Phase 2 : 逃げるCOCOSロゴを作ろう!

さて、いよいよスマートフォンらしい操作である「タップ」を使ったものとして「逃げるCOCOSロゴ」を作成します。

はじめに「タップしたら逃げる」という動作を持つクラスの骨組みを作成します。

init関数にいろいろ書かれていますが、やっていることは

 ・画像の読み込み
 ・ランダムな値を時間から取ってくる
 ・ロゴの初期位置をランダムに決める
 ・画面上の起点と幅・高さを取ってくる
 ・タップしたときの動作を設定する

の5つだけです。

この中で重要なのがonTouchBeganとonTouchEndedの2つで、この2つが「タップした瞬間」と「指を話した瞬間」の動作を決めています。
ほかにもonTouch~~の関数はありますが割愛し、今回はこの2つのうち、onTouchBeganに「タップしたら別のところに移動する」動作を作ります。

最後に、作成したtapVanishクラスをMainSceneで呼び出します。このとき、MainScene.hppにtapVanish.hppをインクルードする一文を添えてください。

これでビルドして成功すると、以下のような画面が出ます(ロゴの位置は、起動ごとにランダムで設定されます)。

そして実機やシミュレーターでCOCOSロゴをタップした瞬間、別の場所に移動したのが確認できれば成功です!

blog02_2

 

さて、今回で「プレイヤーが何かしら操作できる」画面になりました。

次回から、いよいよこの画面を「音楽ゲームっぽく」していきます。

ともに世界をアップグレードできる、そんな日を夢見て。
Upgrade the World!