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を操作すると、連続移動が行えるようになります。
---