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

COCOS2D-Xで作る音楽ゲーム 第3回

cocos2dx_landscape

最近はMacbook Air(2012 Mid)を持ってちょっと場違い感のあるカフェやビール専門店などに入り、オリジナルゲームの案を練ったり設計したりしているTempleです。

さて、これまでに引き続きCOCOS2D-Xのお話です。

前回までは「COCOS2D-Xの導入」の記事ですが、今回からは「COCOS2D-Xの実装」とし、全5回に分けて、簡単な音楽ゲームの完成を目指します。

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

「COCOS2D-X 実装編」

  • 第3回 「NowLoading...」画面と読み込み機能を作る  < いまここ
  • 第4回 タイトル画面と曲選択画面を作る
    1. 前編 画面の骨格を作る
    2. 後編 曲選択の仕組みを作る
  • 第5回 ゲーム画面を作る(見た目編)
  • 第6回 ゲーム画面を作る(機能編)
  • 第7回 結果画面を作る

 

Section 1 : ゲームを作る前の準備

はじめに、第1回でやった方法でプロジェクトを作成し、最初に作られているHelloWorldScene.cpp と HelloWorldScene.hppを削除します。
削除したら、新しくMainScene.cppとMainScene.hppを作成して以下のように変更します。

ここまでいったら、第1回の記事を参考に、AppDelegateでHelloWorldSceneとなっている箇所をMainSceneに変更しましょう。
ただし、第1回ではcreateSceneとなっているところがありますが、今回はcreateに名前が変わっているので、そこに注意してください。

Section 2 : 画面サイズを固定しよう

アプリを作るときは、iPhoneだとiPhone5やiPhone6で画面サイズが変わっています。 そのため、どの端末でも画面サイズを同じにするという処理は自然と必要になりますので、こんな処理をinit関数に入れておきます。

肝心なのは見てのとおり、6行目と7行目です。
6行目は画面サイズを固定する前準備、という考えでいいですが、7行目が肝心になります。

7行目の「setDesignResolutionSize」は、第1引数に画面の幅、第2引数に画面の高さ、第3引数には「引き伸ばし方」を設定します。
第1、第2引数はそれぞれ幅と高さですが、この第3引数がちょっとわかりにくいです。今回指定した「SHOW_ALL」は、「画面をiPhoneの画面いっぱいになるように幅と高さを引き伸ばし、第1引数と第2引数に入力した比率になるよう調整する」という意味です。
申し訳ないのですが、ここの中身を細かく説明すると、それだけで記事が1つ書けるかもしれないので、この説明で今は理解して頂けると。

この処理を入れたときの画像がこちらになります。

indblog_01

 

画像の赤い四角がx=0,y=0、緑の四角がx=320,y=240、青の四角がx=640,y=480に設置した画像になります。
赤と青が緑よりも小さく見えるのは、各座標と四角形の中心が対応しているからです。

 

Section 3 : スレッドを作成しよう

よくゲームで遊んでいると、画面のどこかに「NowLoading...」とか「読み込み中...」とかが出て、画面が切り替わるのを待つ、というのがあります。ここでは事前に読み込んでおきたいデータを読み込んでいますが、その際、「プレイヤーにはNowLoadingのアニメーションが見えていて、裏ではせっせとデータを準備している」のは想像できるかと思います。
ここで作るのは、「裏でせっせとデータを準備する」部分になります。

百聞は一見に如かず、といいますし、まずはソースコードを見てください。スレッドはinit関数の中に作成します。

これがスレッドを作成した状態です。

注目したいのは、コメントにしている「POINT 1」と「POINT 2」です。
「POINT 1」には読み込む処理を、「POINT 2」に読み込みがすべて終わった後の処理を記述します。
読み込む処理では、画像や音楽、セーブデータなどの読み込み作業を行ったり、外部のデータベースとの通信を行う場合もあります。
読み込みが終わった後の処理では、別の画面に遷移させるといった処理が多いかと思います。

今回は音楽ファイルの読み込みを行うので、音楽ファイル「music_001.mp3」を読み込み、タイトル画面のSceneクラス「TitieScene」へ遷移するという方法で組んでみましょう。

ここで新しく出てきたのは「SimpleAudioEngine.h」と「TitleScene.hpp」ですが、それぞれCOCOS2D-Xに標準搭載されている音楽の読み込みや再生・停止などの機能と、次回で作るタイトル画面のSceneクラスを読み込んでいます。
そして先程の「POINT 1」のところで音楽の読み込み処理を、「POINT 2」のところで別シーンへの遷移の処理を記述しています。

Section 4 : NowLoading...を作る

さて、けっこうな分量になってきたので、最後はさっくりといきましょう。まずはソースコードから。

まずは「NowLoading」という文字を出します。
文字を出す際には「Label」を使用し、「createWithTTF」でフォントとサイズを指定して作成、場所決め、反映。と3行程で作れます。(今回は私がよく使うフリーフォント「源暎ゴシック」を使用しています)

しかし、ただ文字を出しただけだと、見た目は動いてるか止まってるかわかりません。ので、「NowLoading」の背後で回転するスプライトを加えてやりましょう。

一気にズガンとコードが増えましたが、こちらも単純なことしかしていません。

はじめに、回転も何もしないスプライト「loading_sprite」を作ります。setTextureRectで幅50px、高さ50pxの正方形を作り、矩形の中心座標はそのままに。色は灰色。表示位置はラベルと同じ場所にします。

次に回転させるアニメーションですが、「RotateBy」というクラスで作成します。第1引数に「何秒間回すか」、第2引数に「何度回すか」を指定します。

これを作ったら、あとは「loading_sprite」のrunAction関数を呼び出し、引数に作ったアニメーションを指定すれば動きますが、これでは1秒後にとまってしまいますので、アニメーションをずっと行うように対応しましょう。

新しく加えた「loading_repeat」は、RepeatForeverクラスで作成されたものです。これに作成したアニメーションを指定してやると、アニメーションを指定したスプライトが破棄されるまで、指定したアニメーションを繰り返すことになります。

あとは、永続化したアニメーションをloading_spriteのrunActionに指定して、loading_spriteをMainSceneクラスに登録すればOK。

indblog_03

 

これで、よくゲームで見るような「何か読み込んでるっぽい画面」ができたと思います。
余談ですが、マルチスレッドの部分はロード画面のほかにもいろんなところで応用できる気がしますので、今回以外にもよく出るかもしれません。

まとめ

今回はゲームでよく見る読み込み中の画面を作りました。
読み込み中の画面は音楽ゲームだけでなく、いろんなジャンルのゲームで出てくる画面なので、この作り方は覚えておいて損はないと思います。
今回みたいに文字と回っている画像だけでなく、工夫すれば背景をキャラクターが走っていたり、ゲームの説明動画を流したりと、工夫ひとつでゲームの見た目が大きく変わるので、いろいろ調べて追加してみるのも面白いかもしれません。

次回となる第4回では、タイトル画面と曲選択画面を作っていきます。

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