デス指名くらいました。yukiです。
今回は2Dゲーム用フレームワーク「Cocos2d-x」について紹介します。
間違ってたらごめんなさい。
概要
2Dゲームを作るためのフレームワークです。
特徴として、
・C++/JavaScript/Luaで書ける
・コード1つで、ブラウザ、PC(Windows,MacOSX,Linux)、スマートフォン(iOS,Android,WindowsPhone)に幅広く対応できる
・シーンやレイヤーの概念がはじめから用意されていて、(個人的には)わかりやすく書きやすい
・CocosIDE(統合開発環境),CocosStudio(UIエディタ、アニメーションエディタなど)と言ったサポートソフトがあって便利
・Cocos2d-xに対応している他社製ライブラリ、ソフトウェアなどがたくさんある
などがあります。実際に企業で使われていたりと、今注目されているフレームワークのひとつです。
という訳で、簡単に説明しつつ簡単にブロック崩しを作ってみました。
今回はCocos Code IDEを利用して開発して、
言語はJavaScript(現状Cocos Code IDEはJavaScriptとLuaにしか対応していない)、バージョンは3.1を使用しました。
シーンとレイヤー
Cocos2d-xではシーン管理にSceneとLayerが用意されています。
Sceneは各画面遷移に使われる画面の1単位。
Layerは各Sceneに格納して、主に画像表示に階層を付けることが出来る。
これを使うと、
例えばタイトル画面、ゲーム画面、リザルト画面などに対して、それぞれSceneを作ることが出来る。
例えばゲーム画面のSceneの中には残り時間を表示するためのレイヤー、自機を表示するためのレイヤー、敵キャラクターを表示するためのレイヤー、と言ったようにそれぞれ種類に応じて分割できる。
と言ったような使い方が出来ます。
今回はシーンは1つだけ、その中のレイヤーも1つだけつかってます。
画像の表示
では、試しにブロック崩しのボールを描画してみることにします。
まず、このようにして画像を生成します。
this.ball = new cc.Sprite(res.ball_png);
次に、各パラメータを与えてレイヤーに加えてみましょう
this.ball.attr({ x: size.width / 2, y: size.height / 2, speed: cc.p(4.0,4.0), size: this.ball.getContentSize(), }); this.addChild(this.ball);
たったこれだけで画像が表示出来ます。
ボールを動かしてみる
ボールを動かすために、毎フレームごとに呼ばれる処理をループで実装する必要があります。
Cocos2d-xではまず、
scheduleUpdate();
をコンストラクタなどに記述することでループ処理用の関数を利用することが出来ます。
JavaScriptの場合では
update: function()
この関数が該当しています。
まとめ
基本的にはこんな感じでプログラムを書いていきます。
完成したプログラムはこんなかんじになりました。
もっと良いやり方があるかも。
https://github.com/yuki1051/BlockCrush
説明が雑でしたが、便利なのでぜひ使ってみてください。
