Jasmine Teaでキー入力を扱う!

この記事は、 Jasmine Tea アドベントカレンダー 2023 の第13日目です。

はじめに

Jasmine Tea (ジャスミンティー) は、プログラミングの楽しさを多くの人に知ってもらうために作られたプログラミング言語です。初心者が学びやすい仕組みで、実際に社会で使われている多くのプログラミング言語に応用できる基礎が身に付きます。

ここでは、Jasmine Teaを実際に開いて、キャラクターをキーボードのカーソルキーで自由に動かすことができるようにしてみましょう。

まず、Studio 画面を開いてください。もし Studio 画面をまだ開いたことがなければ、 Studio画面を表示する - Jasmine TeaでHello, world! を参考にして Jasmine Tea の試用を開始してください。

スプライトを準備しよう

まず、キーボードで動かす対象となるキャラクターを準備しましょう。 第9日目の記事 に、男の子のキャラクターをスプライト番号 0 に割り当てるための手順を紹介していますので、まずはそれを行ってください。「面倒です！」という方は、以下の手順を行ってくれれば大丈夫です。

1. Studio 画面の下にある「スプライト」ボタンを押す。
2. スプライトダイアログの左上にある「スプライト 0」の下向きの矢印を押す。
3. 右にある男の子のキャラクターの各アニメーションを、左のスプライト 0 の各移動方向の枠にドラッグアンドドロップで割り当てる。
4. スプライトダイアログの右下にある「閉じる」ボタンを押す。

3番目の手順のところで、以下のようになっていればOKです。

これで準備は完了です。

スプライトを表示しよう

では、プログラムを作っていきましょう。まずは、スプライト 0 番に割り当てた男の子のキャラクターを画面の中央付近に表示します。そして、キーボードやマウス、タップでキャラクターを移動させる際に、キャラクターの1つ分の大きさを移動距離とし、スピードはそこそこ速めとします。

Studio 画面の左にあるエディターに、以下のプログラムを入力してください。

show 0,(300,150)
distance 0,32
speed 0,18

エディターの下にある青色の「実行」ボタンを押して、プログラムを実行してみてください。

期待通り、男の子が画面中央付近に表示されました。それと同時に、プログラムは終了しています。

メインループを作ろう

まずは、キーボードのカーソルキーでキャラクターを動かせるようにしてみましょう。ゲームやアニメーションのプログラムを作るときは、基本的には「特に何もなければ、プログラムはずっと動き続ける」という作り方をします。今回のプログラムでは、以下のような処理を延々と繰り返します。

1. 男の子を画面の中央に表示する。
2. キーボードから何かキー入力があったかどうかチェックする。
3. キー入力があったときは、カーソルキーの上下左右のいずれかに応じて、スプライトを移動させる。
4. 2.に戻る。

このように、ゲームやアニメーションのプログラムにおける中心的な繰り返し処理のことを「メインループ」と呼びます。上記では、2〜4 が延々と繰り返されますので、ここがメインループです。メインループはずっと繰り返し続けることになるため、無限ループとして作ります。Jasmine Tea では、do 命令 と loop 命令 の組み合わせを使って無限ループを作ることができます。

では、エディターの4行目から、以下のプログラムを入力してください。

do
loop

この状態でプログラムを実行すると、男の子のキャラクターが表示された後、実行画面は何も変化しないまま、プログラムが動き続けます。do 命令と loop 命令の間に何も命令が書かれていませんので、何もしないただの繰り返しとなります。ESCAPE キーを押すか、実行画面の下にある黄色の「止める」ボタンを押して、プログラムを停止させてください。

カーソルキーが押されたかチェックしよう

では、メインループの中に、やりたいことを書いていきましょう。まずは、カーソルキーが押されたかどうかをチェックします。Jasmine Teaでは、どのキーが押されたかどうかを判断するために、inkey$ 関数 が提供されています。関数名の最後に $ 記号がついていますが、これは「この関数の戻り値として（数値ではなく）文字列が得られる」ことを示しています。

エディターの4行目に書かれた do 命令の次の行から、以下のプログラムを入力してください。

  key$=inkey$()
  if key$="ArrowUp" then
  else if key$="ArrowRight" then
  else if key$="ArrowDown" then
  else if key$="ArrowLeft" then
  end if

inkey$ 関数の戻り値の文字列を、key$ 変数に代入しています。Jasmine Teaでは、文字列を記憶させておく変数は、その変数名の最後に $ 記号をつける必要があります。inkey$ 関数は、押されたキーに応じて、どのキーが押されたかを判断するための文字列が戻り値として得られます。カーソルキーは、以下のような文字列となります。

• 「↑」（上） - ArrowUp
• 「→」（右） - ArrowRight
• 「↓」（下） - ArrowDown
• 「←」（左） - ArrowLeft

if 命令 と else if 命令 が4行に渡って書かれていますが、それぞれ「カーソルキーのどれが押されたか」を確認して条件分岐するようにしています。条件式は、 key$="ArrowLeft" であれば「変数 key$ に ArrowLeft という文字列が代入されているかどうか」を確認しています。

それぞれの方向に動かそう

先ほど追加したプログラムでは、if 命令による条件分岐が行われますが、肝心の「条件が成立したときに行いたいこと」を一切何も書いていませんので、何も行われません。カーソルキーのそれぞれの方向に対して、男の子のキャラクターが移動するように、プログラムを追加しましょう。

if 命令と else if 命令が書かれた行のそれぞれ次の行に、スプライトを移動する処理を追加します。エディターの中で、以下のようにプログラムを入力してみてください。

  if key$="ArrowUp" then
    direction 0,1
    move 0
  else if key$="ArrowRight" then
    direction 0,3
    move 0
  else if key$="ArrowDown" then
    direction 0,5
    move 0
  else if key$="ArrowLeft" then
    direction 0,7
    move 0
  end if

direction 命令 でスプライトの移動方向をそれぞれ指定して、 move 命令 でスプライトの移動を開始します。

エディターは以下のようになっているはずです。

では、プログラムを実行してみましょう。「実行」ボタンを押してみてください。そして、キーボードのカーソルキーの上下左右のいずれかのキーを押してみてください。

キーボードのカーソルキーで男の子のキャラクターを操作できるようになりました。

明日は何をつくるの？

今日は、何かキーが押されたかどうかをチェックして、それに応じた処理を行う方法について紹介しました。明日は、実行画面をマウスでクリックしたり指でタップしたりしたことをチェックするための方法について説明する予定です。