[ CitrusEngine ] オブジェクト – Hero – 1/2

前回は、CitrusEngineの導入方法についてご紹介いたしました。
今回から、２回に分けてCitrusEngineに用意されているHeroクラスについてご紹介いたします。

Heroクラスご紹介の１回目は、Heroオブジェクトの生成と画像設定です。

＜前準備＞

	//Box2d空間の作成
	var box2D:Box2D = new Box2D("box2d");
	add(box2D);

	//地面作成
	var ground:Platform = new Platform( "ground", { width:stage.stageWidth, height:10, x:stage.stageWidth * 0.5, y:stage.stageHeight - 5 } );
	add( ground );
　　　　　　　　　　

Heroクラスは、プレイヤーが操作することの出来るオブジェクトを生成するクラスとなります。
キーボードの左右下キーで「左右移動／かがむ」、スペースキーで「ジャンプ」のアクション動作が標準機能として備わっており、物理オブジェクトも自動的に生成されます。

Heroの生成は以下の通りです。

	var hero:Hero = new Hero( "myHero" );
	add( hero );
　　　　　　　　　　

コンストラクタに文字列を渡しています。
この文字列はHeroクラスが持つnameプロパティに設定されるもので
Heroクラスを生成するときは、必ず指定する必要があります。

生成後のオブジェクトを追加するには、StarlingStateクラスが持つ add関数 を使用します。
ActionScriptやStarlingではオブジェクトの追加は addChild関数 なので、間違わないよう注意して下さい。

座標の指定は、StarlingのDisplayObjectと同じく x/yプロパティ　で設定することが出来ます。

	hero.x = 400;
	hero.y = 0;
　　　　　　　　　　　　　　

次の説明に移る前に、一度この状態で実行してみます。
表示オブジェクト(以下viewと表記)の設定を行っていないので、何も表示されません。

ですが、この段階で既にHeroオブジェクトは正常に生成されています。
物理オブジェクトの可視設定を行い、Heroオブジェクトを確認してみましょう。

	//Box2d空間にあるオブジェクトの可視化設定
	box2D.visible = true;
　　　　　　　　　　　　　　

真ん中の四角い箱がHeroオブジェクトです。　これで正常に生成されていることが確認できました。
下にある緑の線は、Box2d空間を作成したときに用意した地面のオブジェクトになります。

それでは、Heroクラスのご紹介に戻ります。
続いては、viewの設定です。
CitrusEngineに用意されているオブジェクト（ Hero/Enemy/Platform/CitrusObject等 ）がもつviewプロパティは非常に柔軟性があり、様々な方法でviewを設定することが出来ます。

	//埋め込み画像
	[Embed(source="../../../assets/idle.png")]
	private var heroBitmap:Class;


	//StarlingのQuadでviewを設定
	var square:Quad = new Quad( 50, 50, 0xFF00FF );
	hero.view = square;

	//埋め込みBitmapでviewを設定
	hero.view = heroBitmap;

	//StarlingのTextureでviewを設定
	var heroTexture:Texture = Texture.fromBitmap( new heroBitmap() );
	hero.view = heroTexture;

	//StarlingのImageでviewを設定
	var heroTexture:Texture = Texture.fromBitmap( new heroBitmap() );
	var heroImage:Image = new Image( heroTexture );
	hero.view = heroImage;

	//画像パスを指定してviewを設定
	// ※相対パスで指定する場合、埋め込み時に指定するパスは、埋め込み処理を記載するasファイルがRootとなるが
	//  この指定方法でのRootは、出力されるswfになるため注意
	hero.view = "../assets/idle.png";
　　　　　　　　　　　　　　

viewを設定することが出来ましたが、設定した画像が地面に埋もれてしまっています。

これは、物理オブジェクトのサイズが設定した画像と異なっているためです。
この問題を解決するには、Heroクラスがもつ width/heightプロパティ を設定する必要があります。

	//heroの横幅に画像の横幅と同じ値を設定
	hero.width = hero.view.width;

	//heroの縦幅に画像の横幅と同じ値を設定
	hero.height = hero.view.height;
　　　　　　　　　　　　　　

CitrusEngineのオブジェクトが持つプロパティは、生成時に設定することも出来ます。

Heroクラスのコンストラクタ定義は、第２引数がObject型のparamsとなっており
Hero生成時に各種パラメータが設定されたObject型の変数を渡すこと可能です。

Object型にパラメータを設定するときのキーは、Heroクラスが持つプロパティと同じものを指定します。

	var params:Object = {
							x 		: XXX			//x座標データ
							y 		: XXX			//y座標データ
							width 	: XXX			//widthデータ
							height 	: XXX			//heightデータ
							view 	: XXX			//viewデータ
						 };
　　　　　　　　　　

Object型を使用したオブジェクト生成

	//テクスチャ生成
	var heroTexture:Texture = Texture.fromBitmap( new heroBitmap() );
	//Image生成
	var heroImage:Image = new Image( heroTexture );
	//Heroオブジェクト生成
	var hero:Hero = new Hero( "myHero", { x:400, y:0, width:heroImage.width, height:heroImage.height, view:heroImage } );
	add( hero );
　　　　　　　　　　　　　　

簡単なご紹介となりましたが、以上で本記事は終了となります。
最後まで御覧いただきありがとうございました。

＜CitrusTest.as＞

package  {
	//Starling及び、Box2Dのインポート
	import citrus.core.starling.StarlingState;
	import citrus.physics.box2d.Box2D;
	import citrus.objects.platformer.box2d.Hero;
	import citrus.objects.platformer.box2d.Platform;

	import starling.textures.Texture;
	import starling.display.Image;
	
	//StarlingStateを継承する
	public class CitrusTest extends StarlingState {

		[Embed(source="../../../assets/Hero/idle.png")]
		private var heroBitmap:Class;

		//コンストラクタ
		public function CitrusTest()
		{
			super();
		}

		//初期化処理のところで色々と配置する
		override public function initialize():void
		{
			super.initialize();
			
			//Box2d空間の作成
			var box2D:Box2D = new Box2D("box2d");
			box2D.visible = true;
			add(box2D);

			//地面作成
			var ground:Platform = new Platform( "ground", { width:stage.stageWidth, height:10, x:stage.stageWidth * 0.5, y:stage.stageHeight - 5 } );
			add( ground );
			

			//Texture生成
			var heroTexture:Texture = Texture.fromBitmap( new heroBitmap() );

			//Image生成
			var heroImage:Image = new Image( heroTexture );

			//Heroオブジェクト生成
			var hero:Hero = new Hero("myHero", { x:400, y:0, width:heroImage.width, height:heroImage.height, view:heroImage }  );
			hero.view = heroImage;
			
			//heroの横幅に画像の横幅と同じ値を設定
			hero.width = hero.view.width;

			//heroの縦幅に画像の横幅と同じ値を設定
			hero.height = hero.view.height;	

			add( hero );
		}
	}
}
　　　　　　　　　　　　　　

＜次回の更新について＞
次回は、Heroクラスのアニメーションとイベント追加について説明していきます。

---

弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。

---