プログラマーズガイド

スプライト

プログラミングとは、コンピューターとの対話です。計算や文字の表示、音楽を鳴らしたり図形を描いたりすることなど、コンピューターにお願いしたいことがプログラムには書かれています。そして、コンピューターはプログラムに書かれた命令を 1 つずつ実行していきます。

命令は数多く提供されていて、どんな命令をどう組み合わせていくかが、プログラミングで重要な要素となります。しかし、ほとんどの命令の動作は、目に見えません。暗闇の中に目印を置いていく、というような感覚を最初は持つかもしれません。これがプログラミングが難しいとされる理由の 1 つです。

プログラミングの習得とは、順次、繰り返し、条件分岐、この 3 つの基本的な仕組みを理解することです。これらの要素を目に見える状態で楽しく理解できるようにするために、Jasmine Tea ではスプライトと呼ばれる仕組みを提供しています。スプライトとは、キャラクターをアニメーションさせながら自由に実行画面上を動かすための仕組みです。

スプライトは、ゲーム機などで使われてきた仕組みであり、多くのキャラクターを画面上で手軽に効率よく扱うことができます。Jasmine Tea では、実行画面上に 32 個のキャラクターを同時に表示させて動かすことができます。

スプライトとは何か

スプライトの実体は、透明な板が 32 枚重なっています。

各スプライトの透明な板には、キャラクターが1つのみ描かれます。これにより、32 個のキャラクターの位置が重なっても、特別な処理をすることなく、自動的に重ね合わせて表示されます。

スプライトにキャラクターを表示するためには、以下の手順を行います。

PIC パターンを組み合わせて、アニメーションを作成します。
アニメーションをスプライトの各移動方向に割り当てます。

Jasmine Tea では、すぐにプログラミングを始めることができるように、事前にアニメーションが登録されています。

32 個あるスプライトには、それぞれ1つずつアニメーションが表示されます。move 命令を使うと、実行画面上で自動的にアニメーションが動き出します。スプライトは、以下のように 8 方向に動かすことができ、方向ごとに番号が決まっています。また、動かずにアニメーションのみさせることもでき、その時の方向の番号は 0 です。

direction 命令を使うことで、スプライトが移動する方向を指定することができます。その際に、正面を向いて歩いているアニメーションのみでは、移動させた際に自然とは言えません。Jasmine Tea では、移動方向ごとに異なるアニメーションを割り当てることができます。これにより、例えば direction 命令で移動方向を右（3 番）にした際には右向きに歩いているアニメーションに、移動方向を左（7 番）に指定したときは左向きに歩いているアニメーションに自動的に切り替わり、キャラクターの移動がより自然に見えるようになります。

アニメーションの割り当て方法

スプライトの各移動方向に対してアニメーションを割り当てる方法は、2 つあります。

スプライトダイアログを使う。
sprite 命令を使う。

スプライトダイアログは、Jasmine Tea の画面上にある「スプライト」ボタンを押すことで表示することができます。

表示されたスプライトダイアログには、左側にスプライトが縦に並び、右側にアニメーションが並んでいます。

ここでは、スプライト番号 0 にアニメーションを割り当てる手順を解説します。まず、「スプライト 0」という場所をクリックすると、下にパネルが展開されます。

展開されたパネルには、スプライトの移動方向ごとに番号と区画があります。これらの各方向の区画に対して、アニメーションを割り当てていきます。アニメーションの割り当て方法は、割り当てたいアニメーションを右から探してドラッグし、割り当てたい方向の区画の上でドロップします。

割り当てたいアニメーションと区画に対して、この操作を繰り返します。

スプライトダイアログでアニメーションの割り当てを行う代わりに、プログラムで sprite 命令を使うことで同じことができます。下のプログラムは、上記のスプライトダイアログで行ったアニメーションの割り当てを sprite 命令で書いた例です。

sprite 0,0,0
sprite 0,1,1
sprite 0,2,3
sprite 0,3,3
sprite 0,4,3
sprite 0,5,0
sprite 0,6,2
sprite 0,7,2
sprite 0,8,2

スプライトへのアニメーションの割り当ては、スプライトダイアログで行っても、sprite 命令で行っても、動作上は全く同じです。

スプライトへのアニメーションの割り当ては、方向 0 は必ず割り当てを行う必要があります。アニメーションが割り当てられていない方向に direction 命令で移動が指定されたときに、方向 0 に指定されているアニメーションが使用されます。

スプライトの操作方法

スプライトは、show 命令によって実行画面に表示されます。そして、move 命令により移動が開始されます。distance 命令で指定された距離だけ移動した後に、スプライトは停止します。また、stay 命令を使うことで、直ちに停止します。hide 命令を使うことで、スプライトを画面から消すことができます。

show 命令 - スプライトを画面に表示する。
move 命令 - スプライトの移動を開始する。
stay 命令 - スプライトの移動を停止する。
hide 命令 - スプライトを画面から消す。

スプライトを move 命令で移動させる際には、移動方向だけでなく、移動速度と移動距離を指定することができます。

移動方向 - direction 命令で指定する。方向は時計回りに 1 〜 8 で指定し、0 は移動しない。
移動速度 - speed 命令で指定する。速度は 1 〜 20 で指定し、1 が最も遅く、20 が最も速い。
移動距離 - distance 命令で指定する。距離は 0 〜 2147483647 で指定する。

スプライトの移動速度は、最も速い 20 であれば約 11 ms ごとに 1 ドット移動する、次に速い 19 であれば約 22 ms ごとに 1 ドット移動する、というように、(21 - 速度の数値) x 11 ms 間隔で 1 ドットずつ移動するという計算になります。

ゲームやアニメーションなど、スプライトを使って何らかのプログラムを作る際に、各スプライトの状況に応じて処理分岐する必要が出てきます。Jasmine Tea では、スプライトの状況を知るために、以下の関数を使うことができます。

スプライトの現在位置を得る - xpos 関数、ypos 関数
スプライトが表示されているかを得る - visible 関数
スプライトが移動中か停止しているかを得る - moving 関数
2 つのスプライトが衝突しているか知る - crash 関数
スプライトがグラフィック画面上の指定の色に重なっているか知る - touch 関数

以下は、ロケットが弾を避け続けるアニメーションのプログラム例です。sprite 命令, speed 命令, direction 命令, distance 命令, show 命令, move 命令, crash 関数、moving 関数を使っています。

// ロケットの準備
md@=[1,5]
sprite 0,0,66
speed 0,18
distance 0,64
show 0,(580,180)
// 弾の準備
for i=1 to 8
  sprite i,0,72
  direction i,3
  speed i,random(15,20)
  distance i,620
next
// メインループ
do
  if not moving(0) then
    // ロケットを上下のどちらかに動かす
    direction 0,md@[random(0,1)]
    move 0
  end if
  for i=1 to 8
    if not moving(i) then
      // 弾をランダムな速度で動かす
      show i,(0,random(0,383))
      move i
    end if
    // ロケットと弾が衝突したかチェック
    if crash(0,i) then
      // 爆発のアニメーションに変更
      sprite 0,0,68
      print "GAME OVER"
      end
    end if
  next
loop

例えば、スプライトを使ったゲームプログラムでは、基本的に以下のような処理を行うことが多いです。

スプライトダイアログや sprite 命令を使って、使いたいアニメーションを各スプライトに割り当てる。
スプライトが動いている途中かどうかを moving 関数にてチェックする。もし動いていないときは、speed 命令、direction 命令、distance 命令を使って移動速度、方向、距離を決めて、move 命令で動かす。
何かと衝突したかどうかを crash 関数や touch 関数を使って条件分岐する。
2 に戻る。

関数を使ってスプライトの状況を判定しながら、命令を使ってスプライトを動かしていく、というプログラムとなります。

アニメーションの作成方法

Jasmine Tea では、すぐにプログラムから利用可能なアニメーションを 70 種類以上登録してあります。それに加えて、PIC パターンを独自に組み合わせて新規にアニメーションを作って登録することができます。

アニメーションの作成は、以下の 2 つの方法があります。

アニメーションダイアログを使う。
def animation 命令を使う。

アニメーションダイアログは、スプライトダイアログにある「アニメーションの作成」ボタンを押すことで表示させることができます。

アニメーションダイアログは、左側に作成済みのアニメーションが縦に並んでいます。右側で、アニメーションの組み立てを行います。

新規にアニメーションを追加するには、左側にある作成済みのアニメーションの最も下にある「＋」ボタンを押します。

上記の画面の例では、新規にアニメーション番号 76 のアニメーションが追加されますので、それを選択します。

アニメーションダイアログの右下には、「キャラクター」というタブと「パターン」というタブがあります。「キャラクター」タブの中には、あらかじめ使いやすいように 4 つの PIC パターンを組み合わせたキャラクターが並んでいます。「パターン」タブの中には、全ての PIC パターンが並んでいます。

1つのアニメーションは、1つ以上のコマから成り立っています。コマは、アニメーションダイアログの右上に並んでいます。コマは、PIC パターン 1 つ、もしくは、PIC パターン 4 つから構成されます。各コマの下には、「上下に反転する」ボタン、「左右に反転する」ボタン、そして「大きさを変える」ボタンが並んでいます。

コマに PIC パターンをセットするには、右下にある PIC パターンの 1 つをドラッグして、コマの入れ替えたい区画にドロップします。「キャラクター」タブの中のキャラクターであれば、コマのどの区画にドロップしても入れ替えが可能です。

コマを増やすときは、コマの右側にある「＋」ボタンを押します。追加されたコマに対して、右下の PIC パターンをドラッグアンドドロップして割り当てます。

コマが増えることによって、プレビューの区画にて実際にどのようなアニメーションになるかを確認することができます。

追加したアニメーションは、スプライトに割り当てを行うことで、プログラムから利用することができるようになります。

プログラムが実行されているときにアニメーションを新規に登録したり既存のアニメーションを変更したいときは、def animation 命令を使うことができます。上図のアニメーションダイアログで作成した女の子のキャラクターのアニメーションを def animation 命令を使って登録するプログラム例が、以下となります。

def animation 80,(1,0,0,24,25,26,27),(1,0,0,28,29,30,31)

アニメーションダイアログを使っても、def animation 命令を使っても、どちらでもアニメーションを登録したり変更したりすることができます。