TypeScriptでenchant.jsを使ってサンプルを作ってみる その5 |
TypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」を作成しました。
https://github.com/kazenetu/enchantjs-typescript
「starter/use-framework/template/」を使ってサンプルプログラムを開発しています。
今回のゴール
前回ではタップ(またはクリック)すると落下するグラフィックを表示しました。
今回はグラフィックの表示にRf.ETS.FrameWork.Spriteではなく、Rf.ETS.FrameWork.Characterを使って実装します。
また、Rf.ETS.FrameWork.Spriteとの違いを分かりやすくするため、アニメーションも実装します。
落下前はアニメーションを行い、落下時はアニメーションを停止します。
前提
ビルド環境の構築を参照して、下記を実行してください。
※バージョンが1.0.7に更新されています。
・ templateフォルダの展開
・ npm installの実行
ソースコード
https://github.com/kazenetu/blog-reports/tree/master/reports/05-ETS-HowTo-05/template
開発環境
下記がインストールされている前提です。
カッコ内は私の環境です。
・Node.js(5.6.0)
・npm(3.8.3)
Rf.ETS.FrameWork.Characterとは
Rf.ETS.FrameWork.Spriteクラスのサブクラスです。
下記の機能が追加されています。
・アニメーション設定(パターンなど)
・アニメーション制御
実装手順
1.template/assets/resources/ に 表示させるグラフィック(chara.png)を追加してください。
2.template/main.tsを開き、下記の実装をしてください。
※処理を追加していないメソッドは除外しています。
class GameMain extends Rf.ETS.FrameWork.GameMain {
//フィールド
private sprite: Rf.ETS.FrameWork.Character = null; //※1
private isFall:boolean = false;
private fallSpeed:number = 0;
/**
* 初期化イベント
* @method
* @name FrameWork.GameMain#onInitialize
*/
protected onInitialize(): void { //※2
//サイズを320x480に変更
this.screenWidth = 320;
this.screenHeight = 480;
//fpsを設定
this.fps = 20;
}
/**
* リソース設定イベント
* @method
* @name FrameWork.GameMain#resourceLoad
*/
protected onResourceSetting(): void { //※3
//this.resourceManager.SetResourcePathメソッドでリソースのルートパスを設定
this.resourceManager.SetResourcePath("./assets/resources/");
//リソースのキーとファイルパスを記述
this.resourceManager.AddResourceName("charaImage", "chara.png");
}
/**
* ロードイベント
* @method
* @name FrameWork.GameMain#onLoad
* @param {Object} parent - 親Group
*/
protected onLoad(parent: enchant.Group): void { //※4
//グラフィックを生成
this.sprite = new Rf.ETS.FrameWork.Character(32, 32, parent); //※4.1
//イメージの設定(Rf.ETS.FrameWork.Sprite独自の機能)
this.sprite.FileName = this.resourceManager.GetResourceName("charaImage"); //※4.2
//その他の設定(Rf.ETS.FrameWork.Character独自の機能) //※4.3
this.sprite.charaIndex = 0;
this.sprite.Dir = Rf.ETS.FrameWork.Direction.Down;
this.sprite.touchEnabled = true;
this.sprite.x = 100;
this.sprite.y = 100;
//グラフィックのタップで落下するイベント //※4.4
this.sprite.on(enchant.Event.TOUCH_END,(e:enchant.Event)=>{
if(this.isFall === false){
this.isFall = true;
this.fallSpeed = 2;
//アニメを停止させる(Rf.ETS.FrameWork.Character独自の機能) //※4.5
this.sprite.SuspendAnime();
}
});
}
/**
* 実行イベント
* @method
* @name FrameWork.GameMain#onRun
*/
protected onRun(): void { //※5
//歩行アニメする(Rf.ETS.FrameWork.Character独自の機能)
this.sprite.Run();
//タップされた場合はグラフィックを落下させる
if(this.isFall){
this.sprite.y += this.fallSpeed;
if(this.fallSpeed < 10){
this.fallSpeed += 1;
}
if(this.sprite.y > 480){
this.sprite.y = 100;
this.isFall = false;
//アニメを再開させる(Rf.ETS.FrameWork.Character独自の機能)
this.sprite.ResumeAnime();
}
}
}
}
実装内容は以下のとおりです。
※太字は前回からの修正点です。
- フィールドの定義
- sprite
キャラクタクラス - isFall
落下フラグ(trueで落下状態) - fallSpeed
落下スピード(2->10)
- sprite
- onInitializeメソッド(一回だけ呼ばれる)
- 画面サイズとfps(1秒間の描画回数)を設定
- onResourceSettingメソッド(一回だけ呼ばれる)
実装を追加したメソッドです。- リソースのルートパスを設定する
- リソースのキーとファイルパスの組み合わせを設定する
- onLoadメソッド(一回だけ呼ばれる)
- 「sprite」フィールドの生成
※Rf.ETS.FrameWork.Sprite独自の書き方 - リソースの設定
※Rf.ETS.FrameWork.Sprite独自の書き方 - その他の設定
※Rf.ETS.FrameWork.Character独自の機能
・キャラクタの種類(charaIndex)
・キャラクタの向き(Dir)
※Rf.ETS.FrameWork.Character独自の機能
・タップ(クリック)可能
・位置を設定 - イベント定義(タップ・クリックでspriteを落下させる)
- アニメを停止させる(Rf.ETS.FrameWork.Character独自の機能)
※イベント定義(タップ・クリックでspriteを落下させる)内の処理
- 「sprite」フィールドの生成
- onRunメソッド(描画ごとに呼ばれる)
* 歩行アニメする(Rf.ETS.FrameWork.Character独自の機能)- 「落下フラグ」フィールドがtrueの場合、「sprite」フィールドを落下させる。
- 画面下まで落下したら
- もとの場所に戻し、「落下フラグ」フィールドをfalseに設定する。
- アニメを再開させる(Rf.ETS.FrameWork.Character独自の機能)
3.npm run build または gulp defaultでビルドを行います。
おわりに
今回はより簡単にキャラクターのグラフィックを利用できるように修正しました。
次回はキャラクタグラフィックを変更した上でその対応をしてみます。
よかったらクリックしてください。
にほんブログ村