前回は、Starlingのfilterクラスについてご紹介いたしました。
今回は、ゲームエンジンのCitrusEngineについてご紹介いたします。
■CitrusEngineとは・・・
CitrusEngineとは、ゲーム製作を簡単に行えるようにしたフレームワークです。
以下の内容についてまとめてみました。
・Citrusを使用すると容易に作れるゲーム
・Starlingや通常のFlashを使用したほうがよいゲーム
◆Citrusを使用すると容易に作れるゲーム
CitrusEngineの公式サイトで記載されている例(http://citrusengine.com/examples/)のような、プラットフォームゲーム(※)を簡単に作成できます。
※プラットフォームゲームとは、地面にのったキャラクターが動作する、
スーパーマリオのような横スクロールアクションゲームのこと。
また、カメラ機能もあるので、画面をはみ出すようなマップを視点移動して表示するシムシティのような
ゲームも簡単に実現できるかと思います。
◆Starlingや通常のFlashを使用したほうがよいゲーム
2Dゲームの場合となりますが、奥行きが必要なゲームは、
オブジェクトの表示の並び換えが容易に出来なかったので(CitrusEngineに限らずStarlingも？)向いてないのかと思います。
また、かまいたちの夜などのサウンドノベルゲームのように、画像を貼ったり、文字を表示するのが主なゲームについては
CitrusEngineを使わなくてもStarlingもしくは、Stage3Dを使用しないFlashで簡単に実現可能です。
■CitrusEngineの導入について
以下にCitrusEngineの導入手順について、簡単に説明していきます。
1.公式ホームページを開き、”Download complete engine”を選択して、フルパッケージ(※)のSWCファイルをダウンロードします。
http://citrusengine.com/download/
※フルパッケージは、CitrusEngine以外のフレームワーク(StarlingやFeathers等のCitrusと合わせて使用出来るフレームワーク)が全て入っているパッケージのことです。
”Download complete engine”ボタンの少し下部に、フレームワークの組み合わせ毎にパッケージが記載されているので、
プロジェクトのサイズ、必要なものだけ入っているほうが良い方はこちらで選んでダウンロードして使用するのも良いかと思います。
この記事では、フルパッケージのものを使用して、説明します。
2.”flaファイル”の作成については、弊社記事”Starling Frameworkを使う”を参考に作成します。
3.次に手順1でダウンロードした”CEV3-1-9-ALL.swc”を「libs/bin」下に格納します。
4.次に手順2で作成したflaファイルを開き、「ファイル」-「ActionScript設定」を選択し、
「ライブラリパス」タブを選択して、手順3で格納したswcファイルを追加します。
ここまでで、プロジェクトの作成が終了です。
■CitrusEngineのベースクラスの作成
CitrusEngineを動かす上でのベースクラスを作成していきます。
ベースクラスは、StarlingCitrusEngineクラスを継承して作成します。
package {
//Citrusインポート
import citrus.core.starling.StarlingCitrusEngine;
import citrus.core.starling.ViewportMode;
import flash.events.Event;
//FrameRate、Width、Height等をここで指定
[SWF(frameRate="50", width="800", height = "600", backgroundColor="#000000")]
//StarlingCitrusEngineを継承する
public class Main extends StarlingCitrusEngine {
}
}
作成したベースクラスに、コンストラクタを作成し、初期値を設定していきます。
今回は、画面サイズ変更等で再描画した際に画像の表示が消えてしまうのを防ぐコードを記述します。
//コンストラクタ
public function Main() {
Starling.handleLostContext = true; //こちらの値をtrueにすることで再描画時に画像が消えない
}
次にこのクラスがStageに追加された際のEvent関数”handleAddedToStage”をオーバーライドし、
Starlingのセットアップ関数を記載します。trueを設定することで、左上のデバッグ情報を表示することが出来ます。
//本クラスがStageに追加された際にコールされる
override protected function handleAddedToStage(e:Event):void
{
super.handleAddedToStage(e); //親クラスをコール
setUpStarling(true); //Starlingのセットアップを行う
}
次にStarlingの準備が出来た際にコールされる関数”handleStarlingReady”を作成し、
そのタイミングでStarlingCitrusEngineの変数”state”にStarlingStateクラスを継承した
クラスを格納します。StarlingStateクラスを継承したクラスについては、後述で説明します。
//Starlingの準備が出来た際にコールされる
override public function handleStarlingReady():void
{
state = new CitrusTest();
}
ここまでで、CitrusEngineのベースクラスの作成は終了となります。
次にStarlingStateクラスを継承したクラスを作成していきます。
■CitrusEngineの描画を行う基盤クラスの作成について
CitrusEngineの描画を行う基盤となるクラスが、StarlingStateクラスとなります。
こちらを作成していきます。
作成時に、コンストラクタの記述、初期化関数”initialize”をオーバーライドして作成してください。
また、作成時には、親クラスの関数を呼び出す記述を忘れず記載してください。
package {
//Starling及び、Box2Dのインポート
import citrus.core.starling.StarlingState;
import citrus.physics.box2d.Box2D;
import citrus.objects.platformer.box2d.Crate;
import citrus.objects.platformer.box2d.Enemy;
import citrus.objects.platformer.box2d.Hero;
import citrus.objects.platformer.box2d.MovingPlatform;
import citrus.objects.platformer.box2d.Platform;
//StarlingStateを継承する
public class CitrusTest extends StarlingState {
//コンストラクタ
public function CitrusTest() {
super(); //親クラスのコンストラクタをコールする
}
override public function initialize():void {
super.initialize(); //親クラスのinitializeをコールする
}
}
}
ここまでで、CitrusEngineの描画を行うベースの説明が終了となります。
■Citrus特有のクラスについて
CitrusEngineでは、ゲーム作成に特化したクラスが多々存在します。
今回は、クラスの一部を紹介させて頂きます。
・Heroクラス – ユーザーが操作するキャラクタークラス(スーパーマリオで例えたらマリオ)
キーボードの左右キーで左右に動作し、スペースキーでジャンプします。
・Enemyクラス – 敵キャラクターのクラス(スーパーマリオで例えたらクリボー)
・Coinクラス – Heroクラスが触れることで消えるクラス(スーパーマリオで例えたらコイン)
・Platformクラス – キャラクターが乗ることが出来る地面のクラス
・MovingPlatformクラス – キャラクターが乗ることが出来る動く地面のクラス
上記のように、クラスの名前もなんとなくクラス名で意味がわかりやすいクラスになっています。
■簡単描画について
今回は細かく説明しませんが、CitrusEngineはBox2D(※)を使用して、キャラクターの
動作に反映し、アクションゲームの当り判定等の処理を簡単にしています。
※物理エンジンのこと。
下記の実装では、Box2D空間を作成し、Heroクラス、Platfromクラスを作成した内容となっております。
詳しくは、これらのクラスについては、次回からの記事で詳しく説明していきます。
//Box2d空間の作成
var box2D:Box2D = new Box2D("box2d");
box2D.visible = true; //Box2Dが反映されているオブジェクトの範囲を色付けで表示してくれるクラス
add(box2D);
//Heroクラスの作成
var heroTest:Hero = new Hero("HeroTest", { width:40, height:40, x:400, y:0, view:heroPng } );
add(heroTest);
//Platformクラスの作成
var platformTest:Platform = new Platform("PlatfromTest", { width:900, height:50, x:200, y:150 } );
add(platformTest);
ここまでで、CitrusEnigneの導入、ベース作成についての説明を終了いたします。
サンプルは、星の画像が簡単な動作をするものとなっております。
＜Main.as＞
package {
//Citrusインポート
import citrus.core.starling.StarlingCitrusEngine;
import citrus.core.starling.ViewportMode;
import flash.events.Event;
import starling.core.*;
//FrameRate、Width、Height等をここで指定
[SWF(frameRate="50", width="800", height = "600", backgroundColor="#000000")]
//StarlingCitrusEngineを継承する
public class Main extends StarlingCitrusEngine {
//コンストラクタ
public function Main() {
Starling.handleLostContext = true; //こちらの値をtrueにすることで再描画時に画像が消えない
}
//本クラスがStageに追加された際にコールされる
override protected function handleAddedToStage(e:Event):void
{
super.handleAddedToStage(e);
setUpStarling(true);
}
//Starlingの準備が出来た際にコールされる
override public function handleStarlingReady():void
{
state = new CitrusTest();
}
}
}
＜CitrusTest.as＞
package {
//Starling及び、Box2Dのインポート
import citrus.core.starling.StarlingState;
import citrus.physics.box2d.Box2D;
import citrus.objects.platformer.box2d.Crate;
import citrus.objects.platformer.box2d.Enemy;
import citrus.objects.platformer.box2d.Hero;
import citrus.objects.platformer.box2d.MovingPlatform;
import citrus.objects.platformer.box2d.Platform;
//StarlingStateを継承する
public class CitrusTest extends StarlingState {
//星画像
[Embed(source="./star.png")]
private var heroPng:Class;
//コンストラクタ
public function CitrusTest() {
super();
}
//初期化処理のところで色々と配置する
override public function initialize():void {
super.initialize();
//Box2d空間の作成
var box2D:Box2D = new Box2D("box2d");
box2D.visible = true; //Box2Dが反映されているオブジェクトの範囲を色付けで表示してくれるクラス
add(box2D);
//Heroクラスの作成
var heroTest:Hero = new Hero("HeroTest", { width:40, height:40, x:400, y:0, view:heroPng } );
add(heroTest);
//Platformクラスの作成
var platformTest:Platform = new Platform("PlatfromTest", { width:900, height:50, x:200, y:150 } );
add(platformTest);
}
}
}
＜次回の更新について＞
次回は、Heroクラスについて説明していきます。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。