Spriteクラスは
Eクラスを継承して作られています。
必要に応じてEクラスの情報も参照してください。
Spriteは、jgame.jsにおいて利用頻度の大変高い部品です。
画面に画像を配置するだけの簡単な部品ですが、Eクラスの機能を継承しているため画像をtlを使ってアニメーションさせるなどの作業が、非常に簡単に行えます。
キャラクター、エフェクト、文字描画と、画像データさえあればゲームのあらゆるところで活躍出来るため、jgame.jsをはじめる場合、まずはSpriteを使って慣れていくのがいいでしょう。
var spirte = new Sprite(32, 32, game.r("chara"));
横幅、縦幅、画像を指定してインスタンスを生成します。画像は省略し、後でimageフィールドに値を設定する事も出来ます。
image: any;//HTMLImageElement, HTMLVideoElement, HTMLCanvasElement
sep:number;//画像位置計算簡略化用変数
frame:number[];//フレームを配列形式で指定
fno:number;//現在のフレーム番号
draw(area:Area, context:CanvasRenderingContext2D) {
---
refresh() {
このメソッドは、HTMLCanvasElementを基に作られたSpriteが破壊されている場合に復旧を試みる予定ですが、ver 0.2現在サポートされていません。
---
指定可能な画像データ
Spriteクラスに指定可能なイメージは、HTMLImageElement、HTMLVideoElemet、HTMLCanvasElementです。
HTMLVideoElementの場合、現在のフレームの画像が利用されます。
フレームについて
Spriteのフレームを理解するために、次の画像を見てみましょう。

この画像のフレーム番号は、以下のようになります。
例えば、Spriteのフレームを以下のように設定します。
sprite.frame = [0,2,4,6];
右向きの時は、Spriteのfnoを4にすると、右向きのSpriteとして描画されるようになります。
なお、fnoフィールドを直接変更すると更新状態がjgame.jsに正しく伝わらないため、fnoを変更した後はsprite.updated()を呼び出して更新フラグを立てる必要があります。