Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】Movement-events on Mini Micro (part 1)

2025年10月02日に「Dev.to」が公開したITニュース「Movement-events on Mini Micro (part 1)」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

Mini Microでスプライトを連続的に動かす方法を解説する。矢印キーの入力を直接検知する`key.pressed`の他、ゲームパッドにも対応し移動量に応じた値が取れる`key.axis`を紹介。`key.axis`を速度の倍率として使うと、動き出しの緩急も表現でき、より自然な操作が可能になる。

出典: Movement-events on Mini Micro (part 1) | Dev.to公開日:

ITニュース解説

ゲームやアプリケーションでキャラクターを動かすことは、プログラミングの基礎であり、非常に重要な要素の一つだ。ユーザーがキーボードやゲームコントローラーを操作する入力(イベント)に応じてキャラクターを動かす仕組みを理解することは、システム開発の第一歩となる。今回の解説では、キーが押し続けられている間、キャラクターが連続的に動き続ける「連続的な動き」の検出方法とその実装を掘り下げていく。

キャラクターの動き方には大きく分けて二つの種類がある。一つは「連続的な動き」で、これはキーボードの矢印キーやゲームパッドのジョイスティックを押し続けている間、キャラクターが止まることなく動き続けるタイプだ。例えば、RPGゲームでキャラクターがマップ上を移動する時や、シューティングゲームで自機が移動する時に使われることが多い。もう一つは「離散的な動き」で、これはキーを一度押すたびに、キャラクターが特定の距離だけ移動し、すぐに止まるタイプだ。例えば、パズルゲームでブロックを一段ずつ動かすような場面で利用される。今回の解説では、前者の「連続的な動き」に焦点を当てる。

Mini Microで連続的な動きを実現するための最初のステップは、どのキーが押されているかをプログラムが常にチェックすることだ。これを実現するために、key.pressed() という便利な関数が用意されている。例えば、key.pressed("up") と書くと、「上矢印キーが押されているか?」をプログラムが判断できる。このチェックを何度も繰り返すことで、キーが押し続けられている状態を検出するのだ。

具体的なコードで見てみよう。画面に押されている方向の文字を表示するシンプルな例から始める。

1clear
2while true
3    if key.pressed("up") then print "^", ""
4    if key.pressed("down") then print "V", ""
5    if key.pressed("left") then print "<", ""
6    if key.pressed("right") then print ">", ""
7    wait 0.01
8end while

このコードでは、まず clear で画面をクリアしている。次に、while trueend while で囲まれた部分は、プログラムが「永遠に」繰り返す処理を示す。このループの中で、if key.pressed("up") then print "^", "" のように、それぞれの矢印キーが押されているかをチェックし、もし押されていれば、対応する方向の記号を画面に表示している。wait 0.01 は、処理を0.01秒だけ一時停止させる命令だ。これがないと、プログラムが非常に速く実行され、画面がすぐに文字で埋め尽くされてしまうため、人間が認識しやすいように少し待機させている。このように、特定のキーが押されているかを繰り返し確認し、それに応じて処理を行うのが、連続的な動きの基本的な考え方だ。

次に、実際に画面上でキャラクターを動かす例を見てみよう。Mini Microでは、画面上に画像を表示するものを「スプライト」と呼ぶ。今回は、宇宙船のスプライトを画面に表示し、矢印キーで動かすことを目標にする。

まず、スプライトを表示するための準備が必要だ。sprDisp = display(4) は、Mini Microの画面表示領域の一つである「ディスプレイ4」をスプライト表示用として設定している。s = new Sprite で新しいスプライトの箱を作り、s.image = file.loadImage("/sys/pics/Fighter.png") で、そのスプライトに /sys/pics/Fighter.png という宇宙船の画像を読み込ませている。s.xs.y はスプライトの画面上の位置(X座標とY座標)を設定するもので、初期位置を画面中央にしている。s.rotation で向きを、s.scale で大きさを調整し、最後に sprDisp.sprites.push s で、作成したスプライトを画面に表示するリストに追加している。

準備ができた上で、キー入力による移動処理を加える。

1// (スプライト表示の初期設定は省略)
2
3v = 5 // 移動速度。1回のキー入力で動くピクセル量
4
5while true
6    if key.pressed("up") then s.y += v
7    if key.pressed("down") then s.y -= v
8    if key.pressed("left") then s.x -= v
9    if key.pressed("right") then s.x += v
10    wait 0.01
11end while

このコードでは、v = 5 で移動速度を定義している。while true ループの中で、先ほどと同じように key.pressed() を使って矢印キーの入力をチェックしている。s.y += v は、「現在のY座標に速度 v を足す」という意味で、これにより宇宙船は上方向に移動する。Y座標は画面の上方向に行くほど数値が減り、下方向に行くほど増えるのが一般的だが、Mini Microでは上方向がY座標の減少、下方向がY座標の増加に対応している。左右の移動も同様に、X座標を増減させることで行われる。これで、矢印キーを押し続けると、宇宙船が連続的に画面上を移動するようになる。

しかし、この方法だと矢印キーでしか操作できない。ゲームパッドやジョイスティックなど、より多様な入力デバイスに対応するためには、別の方法が便利だ。それが key.axis() 関数である。

key.axis() は、キーボードの矢印キーだけでなく、ゲームパッドのジョイスティックの傾きなども「軸」として捉え、その状態を数値で返してくれる。例えば、key.axis("Vertical") と書くと、上下方向の入力状態を、key.axis("Horizontal") と書くと、左右方向の入力状態を教えてくれるのだ。この関数は、入力がないときは 0 を返し、上や右方向へ最大に傾いているときは 1 を、下や左方向へ最大に傾いているときは -1 を返す。

この key.axis() を使って、宇宙船の移動コードを書き換えてみよう。

1while true
2    if key.axis("Vertical") > 0 then s.y += v // 上方向
3    if key.axis("Vertical") < 0 then s.y -= v // 下方向
4    if key.axis("Horizontal") < 0 then s.x -= v // 左方向
5    if key.axis("Horizontal") > 0 then s.x += v // 右方向
6    wait 0.01
7end while

このコードでは、key.axis("Vertical")0 より大きい(つまり上方向へ入力されている)場合に s.y を増加させ、0 より小さい(下方向へ入力されている)場合に s.y を減少させている。左右も同様だ。これにより、矢印キーでもジョイスティックでも同じコードで宇宙船を動かせるようになる。

さらに key.axis() の面白い特性を利用すると、もっと滑らかな動きを実現できる。key.axis() は、最大値である 1-1 だけでなく、ジョイスティックがゆっくり傾けられている時や、キーが押され始めた瞬間などに、0 から 10 から -1 の間の様々な中間値(例えば 0.3-0.7 など)を返すことがあるのだ。これは、ゆっくりと速度が上がっていくような動きを表現するのに役立つ。

この中間値を速度の「倍率」として利用することで、動き出しがより自然になる。

1while true
2    vAxis = key.axis("Vertical")   // 垂直方向の入力値を取得
3    hAxis = key.axis("Horizontal") // 水平方向の入力値を取得
4    s.x += hAxis * v // 水平方向の入力値と速度を乗算してX座標に加算
5    s.y += vAxis * v // 垂直方向の入力値と速度を乗算してY座標に加算
6    yield
7end while

この最新のコードでは、vAxishAxiskey.axis() の戻り値を直接格納している。そして、s.x += hAxis * vs.y += vAxis * v のように、入力値 hAxisvAxis を速度 v に直接掛け算して、スプライトの座標に加算している。入力値が 0 であれば 0 * v なので移動せず、0.5 であれば半分の速度で動き、1 であれば最大速度で動くことになる。これにより、if 文をたくさん書くことなく、入力の強さに応じた滑らかな速度変化を自動的に実現できる。

また、wait 0.01 の代わりに yield を使っている点も重要だ。yieldwait と同様に処理を一時停止するが、プログラム全体がより効率的に動作するように、他の処理にもCPUの時間を譲るという、より協調的な一時停止命令だ。ゲームなどで複雑な処理が同時に動いている場合、yield を使うことで全体のパフォーマンスが向上することがある。

このように、Mini Microではキーやジョイスティックの入力を検出し、その情報を利用してスプライトを連続的かつ滑らかに動かせる。特定のキーを検出する基本的な方法から始め、key.axis() を使うことで、より汎用的に、入力の強さに応じた繊細な動きを表現する方法へと発展できる。この理解が、様々なインタラクティブなアプリケーションやゲーム開発の土台となるだろう。

関連コンテンツ