ブロックチェーン・AI・システム開発の株式会社INDETAIL

COCOS2D-Xで作る音楽ゲーム 第4回(前編)

2016.11.15
Temple

cocos2dx_landscape

新MacBook Proが発表されてそろそろ3週間。手元に届いた方もいるのではないでしょうか。買い換えようと思っても財布が現在の気温と同じくらい寒いTempleです。

今回もCOCOS2D-Xでゲームを作っていきますよ。今ではもう(中古以外では)手に入らない11inchのMacBook Airで。

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

「COCOS2D-X 実装編」

第4回は単純な画面ですが、簡単にできる部分と工夫が必要な部分がはっきりと分かれているため、前編と後編に分けて記事を作ります。

前編では、これまでに出てきたラベルやタップなど、COCOS2D-Xの基本的な部分を中心に作っていきます。
後編では、アニメーションやスケジュールなど、よりゲームっぽい動作に近くなるように作っていきます。

Section 1 : タイトル画面を作る

タイトル画面のクラスとなる「TitleScene」クラスを作成していきます。

いろいろと書いていますが、基本的に第3回でも出てきたラベルの作成と、第2回で出てきたタップの処理を入れているだけになります。

ビルドしてこんな画面になったら、Section2に進みましょう。

indblog_04

Section 2 : 曲の選択画面を作る

Section2ではこんな感じに、ジャケット画像・曲名・BPMを表示させるだけの画面を作っていきます。

indblog_05

ここで作るのは「MusicSelectScene」クラスと「MusicSelectJacketLayer」クラスの2つです。
はじめに「MusicSelectScene」クラスから。

ここでお馴染みのfor文を使います。みてのとおり、for文を使って、曲の数だけMusicSelectJacketLayerを作っては貼り付け・・・をしていますね。
ほかには、曲名をつけたり、BPM(演奏のテンポを表す単位)を表示したり、ジャケットの絵を表示したりしています。今回は簡単に音符のマークにしました。

さて、次はMusicSelectJacketLayerの中身です。

一気に内容が増えましたが、そんなに怖いことはしていません。

まず、MusicSelectJacketLayerを作るときに呼ぶcreate関数の引数に、曲のID、表示する位置、ジャケット画像のファイル名、BPMを設定します。
そしたら、MainSelectJacketLayer.cpp:7行目の「MusicSelectJacketLayer *pLayer = new MusicSelectJacketLayer();」のあとに、引数に設定した値や文字をそれぞれ保存しておき、init関数で呼び出せるようにします。

init関数では、保存した値や文字列を使い、ジャケット画像、曲名、BPMを表示していきます。

ジャケット画像のX座標は、選択中の曲を中央、未選択をそれぞれ画面の左右に設定するため、MainSelectJacketLayer.hppに、あらかじめ中央・右端・左端のX座標を、print_vec_xという配列で設定しておきます。Y座標については、画面中央からずれないのでずっと240のままなので、print_vec_yは240と設定しておきます。

曲名やBPMについては、ジャケットの下に表示させればいいので、X座標を基準にして、Y座標を画面下にずらせばOKです。

まとめ

第4回前編は、これまでの内容の復習にちょうどいい内容になったのではないでしょうか。

ラベルを画面に出したり画像を出したりするのは、リファレンスや解説サイトを見ずとも書けるようになっているかもしれませんね。

第4回後編では、内容が一気に濃くなりますが、徐々にゲームっぽくなっていく画面を楽しみつつ、私はウイスキー片手に執筆していきます。

関連タグ:

Temple

職種:エンジニア 家に帰れば、cocos2d-xで何かしら作るか、オンラインゲームやるか、楽曲アレンジやるか。 外に出れば、スタバでcocos2d-xで何かしら作るか、ビール呑むか、音ゲーやるか。 そんな普通の人間です。

コメントを残す