CharacterクラスはSpriteクラスを継承しています。 必要に応じてSpriteクラスの情報も参照してください。
Characterクラスは、RPGなどでよく利用されるキャラクターを表現するためのクラスです。 より簡単な表現は、足踏みをするSpriteクラスです。 Spriteと同じように、このようにすれば、簡単にキャラクターを登録出来ます。
var c1 = new Character(32, 32, game.r("chara"));
var c2 = new Character(32, 32, game.r("chara"));
c1.moveTo(10, 10);
c2.moveTo(100, 100);
c1.appendTo(game.currentScene);
c2.appendTo(game.currentScene);
ただ、この状態ではまだSpriteクラスとの違いである足踏みをしません。 足踏みをさせるためには、上下左右を持つキャラクターのキャラチップを先に用意する必要になります。 簡単なチップですが、今回はこれを利用します。 これを用いて、このようなスクリプトを書いてみましょう。
window.onload = function() {
	var game = new Game(480, 480);
	game.preload({eye: "eye.png"});
	game.loaded.handle(function() {
		var charaLeft = new Character(32, 32, game.r("eye"));
		charaLeft.angle(Angle.left);
		charaLeft.moveTo(0, 100);
		var charaRight = new Character(32, 32, game.r("eye"));
		charaRight.angle(Angle.right);
		charaRight.moveTo(32, 100);
		var charaUp = new Character(32, 32, game.r("eye"));
		charaUp.angle(Angle.up);
		charaUp.moveTo(64, 100);
		var charaDown = new Character(32, 32, game.r("eye"));
		charaDown.angle(Angle.down);
		charaDown.moveTo(96, 100);
		game.currentScene.append(charaLeft);
		game.currentScene.append(charaRight);
		game.currentScene.append(charaUp);
		game.currentScene.append(charaDown);
	});
}
上下左右の向きを持ったキャラクターが表示されます。 http://jgame-js.sourceforge.jp/eye.html キャラクターチップは色々な種類に対応しており、例えばアニメーションが停止と足踏みの二つではなく、左→中央→右のようなタイプでも対応する事が出来ます。 少しわかりづらいですが、このキャラチップを使ってみましょう。 似たようなスクリプトですが、animeCntというフィールドを使ってアニメーションが3であることを指定したスクリプトを利用します。
window.onload = function() {
	var game = new Game(480, 480);
	game.preload({eye: "eye3.png"});
	game.loaded.handle(function() {
		var charaLeft = new Character(32, 32, game.r("eye"));
		charaLeft.animeCnt = 3;
		charaLeft.angle(Angle.left);
		charaLeft.moveTo(0, 100);
		var charaRight = new Character(32, 32, game.r("eye"));
		charaRight.animeCnt = 3;
		charaRight.angle(Angle.right);
		charaRight.moveTo(32, 100);
		var charaUp = new Character(32, 32, game.r("eye"));
		charaUp.animeCnt = 3;
		charaUp.angle(Angle.up);
		charaUp.moveTo(64, 100);
		var charaDown = new Character(32, 32, game.r("eye"));
		charaDown.animeCnt = 3;
		charaDown.angle(Angle.down);
		charaDown.moveTo(96, 100);
		game.currentScene.append(charaLeft);
		game.currentScene.append(charaRight);
		game.currentScene.append(charaUp);
		game.currentScene.append(charaDown);
	});
}
3パターンですので、アニメーションは「左→中→右→中→左」の順になります。 http://jgame-js.sourceforge.jp/eye3.html さらに、複数のキャラクターを同時に扱う事も出来ます。今度はこれを利用してみましょう。 やはり同じようなスクリプトですが、今度はcharaColとcharaSeqを指定しています。
	window.onload = function() {
	var game = new Game(480, 480);
	game.preload({eye: "eye-multi.png"});
	game.loaded.handle(function() {
		var charaLeft = new Character(32, 32, game.r("eye"));
		charaLeft.charaCol = 2;
		charaLeft.charaSeq = 0;
		charaLeft.angle(Angle.left);
		charaLeft.moveTo(0, 100);
		var charaRight = new Character(32, 32, game.r("eye"));
		charaRight.charaCol = 2;
		charaRight.charaSeq = 1;
		charaRight.angle(Angle.right);
		charaRight.moveTo(32, 100);
		var charaUp = new Character(32, 32, game.r("eye"));
		charaUp.charaCol = 2;
		charaUp.charaSeq = 2;
		charaUp.angle(Angle.up);
		charaUp.moveTo(64, 100);
		var charaDown = new Character(32, 32, game.r("eye"));
		charaDown.charaCol = 2;
		charaDown.charaSeq = 3;
		charaDown.angle(Angle.down);
		charaDown.moveTo(96, 100);
		game.currentScene.append(charaLeft);
		game.currentScene.append(charaRight);
		game.currentScene.append(charaUp);
		game.currentScene.append(charaDown);
	});
}
今度は4色別々のキャラクターが表示されるようになりました。 http://jgame-js.sourceforge.jp/eye-multi.html なお、これらのスクリプトは、ただキャラクターを登録するだけのものとしては冗長であまり良いものとは言えません。 たくさんキャラクターを生成するケースなどでは、CharaterFactoryクラスを用いて生成をより単純化することを推奨します。
var c = new Character(32, 32, game.r("chara"), 200); 大きさ、画像、アニメーション間隔を指定してインスタンスを生成します。 引数は左から、横幅、縦幅、画像、アニメーション間隔です。画像とアニメーション間隔は省略可能です。
moving:bool;//移動中フラグ moveInfo:CharacterMoveInfo;//移動中の情報 dx:number;//移動先x座標 dy:number;//移動先y座標 nextMove:string;//次の移動方向 charaSeq: number;//キャラクターの連番 charaCol: number;//キャラクターチップに利用される画像が、横一列でいくつのキャラを保持しているかを示す animeCnt: number;//キャラクターチップに利用される画像が、何フレームのアニメーションを持っているかを示す movePixel: number;//一度の移動で移動するピクセル数 moveFrame: number;//一度の移動に要するフレーム数 moved:Trigger; e:CharacterMovedEventArgs; 移動が完了した事を通知するイベントです。イベントハンドラ側でnextMoveを操作すると、連続移動が行えるようになります。 --- animation: bool;//キャラクターを足踏みさせるかどうか。デフォルト値true angleSeq:any;//キャラチップの方向順。フィールド未定義の場合は下左右上。このフィールドの正確な型は{[key:Angle]: number; }です(TypeScriptで定義不可)。
moveLeft(stackNext?:bool) { stackNext?:bool;//前回の移動が終わっていない場合に、次の移動先としてこの方向を登録するかを指定します。省略した場合、登録されません。 Characterを左に移動させます。また、Characterの向きを変更します。 --- moveRight(stackNext?:bool) { stackNext?:bool;//前回の移動が終わっていない場合に、次の移動先としてこの方向を登録するかを指定します。省略した場合、登録されません。 Characterを右に移動させます。また、Characterの向きを変更します。 --- moveUp(stackNext?:bool) { stackNext?:bool;//前回の移動が終わっていない場合に、次の移動先としてこの方向を登録するかを指定します。省略した場合、登録されません。 Characterを上に移動させます。また、Characterの向きを変更します。 --- moveDown(stackNext?:bool) { stackNext?:bool;//前回の移動が終わっていない場合に、次の移動先としてこの方向を登録するかを指定します。省略した場合、登録されません。 Characterを下に移動させます。また、Characterの向きを変更します。 --- move(x:number, y:number, f:number) { x:number;//移動先x座標 y:number;//移動先y座標 f:number;//移動に要するフレーム数 Characterを移動させます。通常はmoveLeftなどのラッパーメソッドを用いるべきです。 --- update() { Gameクラスのupdateイベントに対するイベントハンドラです。 Characterクラスでは、Characterの移動のみを処理しています。 --- endMove() { 移動を終了させます。 --- angle(angle:Angle) { angle:Angle;//向ける方向 キャラクターの向きを変更します。 --- interval() { GmaeTimerで管理されるタイマーです。 キャラクターを足踏みさせます。 ---