Proが発表されてそろそろ3週間。手元に届いた方もいるのではないでしょうか。買い換えようと思っても財布が現在の気温と同じくらい寒いTempleです。今回もCOCOS2D-Xでゲームを作っていきますよ。結果画面を作る第4回は単純な画面ですが、簡単にできる部分と工夫が必要な部分がはっきりと分かれているため、前編と後編に分けて記事を作ります。前編では、これまでに出てきたラベルやタップなど、COCOS2D-Xの基本的な部分を中心に作っていきます。後編では、アニメーションやスケジュールなど、よりゲームっぽい動作に近くなるように作っていきます。タイトル画面を作るタイトル画面のクラスとなる「TitleScene」クラスを作成していきます。init();};いろいろと書いていますが、基本的に第3回でも出てきたラベルの作成と、第2回で出てきたタップの処理を入れているだけになります。ビルドしてこんな画面になったら、Section2に進みましょう。曲の選択画面を作るSection2ではこんな感じに、ジャケット画像・曲名・BPMを表示させるだけの画面を作っていきます。ここで作るのは「MusicSelectScene」クラスと「MusicSelectJacketLayer」クラスの2つです。はじめに「MusicSelectScene」クラスから。init();};ここでお馴染みのfor文を使います。みてのとおり、for文を使って、曲の数だけMusicSelectJacketLayerを作っては貼り付け・・・をしていますね。ほかには、曲名をつけたり、BPM(演奏のテンポを表す単位)を表示したり、ジャケットの絵を表示したりしています。今回は簡単に音符のマークにしました。次はMusicSelectJacketLayerの中身です。movedJacket(int);};一気に内容が増えましたが、そんなに怖いことはしていません。MusicSelectJacketLayerを作るときに呼ぶcreate関数の引数に、曲のID、表示する位置、ジャケット画像のファイル名、BPMを設定します。MusicSelectJacketLayer();」のあとに、引数に設定した値や文字をそれぞれ保存しておき、init関数で呼び出せるようにします。init関数では、保存した値や文字列を使い、ジャケット画像、曲名、BPMを表示していきます。ジャケット画像のX座標は、選択中の曲を中央、未選択をそれぞれ画面の左右に設定するため、MainSelectJacketLayer.hppに、あらかじめ中央・右端・左端のX座標を、print_vec_xという配列で設定しておきます。Y座標については、画面中央からずれないのでずっと240のままなので、print_vec_yは240と設定しておきます。曲名やBPMについては、ジャケットの下に表示させればいいので、X座標を基準にして、Y座標を画面下にずらせばOKです。まとめ第4回前編は、これまでの内容の復習にちょうどいい内容になったのではないでしょうか。ラベルを画面に出したり画像を出したりするのは、リファレンスや解説サイトを見ずとも書けるようになっているかもしれませんね。第4回後編では、内容が一気に濃くなりますが、徐々にゲームっぽくなっていく画面を楽しみつつ、私はウイスキー片手に執筆していきます。indexともに世界をアップグレードできる、そんな日を夢見て。