[Javascript]Cocos2d-xでブロック崩しをつくってみた[AdventCalendar2日目]

[Javascript]Cocos2d-xでブロック崩しをつくってみた[AdventCalendar2日目]

misw No Comment

デス指名くらいました。yukiです。

今回は2Dゲーム用フレームワーク「Cocos2d-x」について紹介します。

間違ってたらごめんなさい。

概要

http://www.cocos2d-x.org

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

説明が雑でしたが、便利なのでぜひ使ってみてください。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最新情報を更新中!

Twitterに、新歓情報をはじめ最新の情報を掲載しています。