2-1 動かしてみよう！ – 白馬プログラミング塾

今回は、ステージに置いた動物のスプライトが動くプログラムを作成します。

スプライトを変える

ネコには少々悪いのですが、別のスプライトを使うことにします。

1. 画面右下のスプライトリストは言わば出演俳優の楽屋のようなものです。今ここにはネコが一匹だけいます。[Sprite1]と書かれたこのネコのスプライトの右上にあるゴミ箱をクリックすると、スプライトリストからこのスプライトを削除することができます。

1. すると本当に削除するかの確認を求めてくるので、[はい]を選択します。

1. [はい]をクリックするとスプライトリストからネコのスプライトが消え、同時にステージのネコも消えます。楽屋にネコがいなくなったので、ステージにもいなくなったのです。
2. 空になったスプライトリストの右下にネコの顔の形をしたボタンがあるのでこれにマウスのカーソルを重ねます。
3. すると[スプライトを選ぶ]が表示されるので、１つ上の虫眼鏡をクリックします。

1. 大きな[スプライトを選ぶ]画面が表示されます。ここでは前もって用意されている、使いたい既成のスプライトを選ぶことができます。

1. スプライトは、画面上に横に並ぶ[動物]や[人]、[ファンタジー]ボタンなどのクリックで、種類ごとに分けて表示することもできます。ここでは[動物]をクリックして[Dinosaur4]を選ぶことにします。スプライトをクリックすると、[スプライトを選ぶ]画面が消え、選んだスプライトがスプライトリストとステージに表示されます。

座標

スプライトを置いているステージには、座標と呼ばれる位置を表す点があり、(x, y)で示されます。

上図のスプライトリストを見てください。[スプライト]の下の文字Dinosaur4はこのスプライトの名前です。その右のXが水平方向のX位置を、Yが垂直方向のy位置を示しています。このDinosaur4は(29, -50)という位置に配置されていることが分かります。

大きさの100は、このスプライトのステージ上の今のサイズが100%であることを示しています。これを50に変えると、ステージ上のスプライトの大きさが半分になります。

またその右の]向き]90は、このスプライトのステージ上の今の向きが90度、つまり真右を向いていることを示しています。

下図はステージの座標を示しています。スクラッチのステージのサイズは幅が480、高さが360と決められています。座標の原点(0, 0)はそのセンターにあります。xは右へ行くほど大きくなり、yは上に行くほど大きくなります。したがって、左上端は(-240,180)、右下端は(240, -180)となります。

下図は、原点(0, 0)にいるDinosaur4のスプライトです。Dinosaur4の位置を決めるは首の下辺りにあり、ここがステージの原点と重なっています。言い換えると、スプライトリストの大きさが100のDinosaur4のXとYを0と0にすると、下図のように配置されるということです。

Dinosaur4が(0, 0)から右に5つ移動すると、x座標が5大きくなるので、Dinosaur4の新しい位置は(5, 0)になります。同様に(0, 0)から左に10移動すると、今度はx座標が10小さくなるので、新しい位置は(-10, 0)になります。垂直方向のy軸についても同様です。

下図は(3, -2)に移動した後のDinosaur4を、簡略的に示しています。xがプラス、yがマイナスなので、Dinosaur4は右下に来ることになります。下図では１マスの幅を48、高さを36として描いているので、実際の座標は(3×48, -2×36) = (144, -72)になります。

スプライトをステージで動かすときには、スプライトは上図のようなマス目の上を移動している、ということを意識するようにします。

スプライトはマウスのドラッグ操作で、ステージ上のどこにでも移すことができます。ドロップすると、そのときに座標がスプライトリストの[X]と[Y]に表示されます。下図のDinosaur4は(42, 79)の位置にいます。

コードメニューの[動き]の上から5つめにある[x座標を()、y座標を()にする]ブロックは、スプライトを指定先(x, y)に移動するためのものですが、メニュー内にあるときでも、ステージ上のスプライトの位置を追跡して表示します。スプライトの正確な位置を知りたいときに便利です。

方向

スプライトは向きを変えることができます。

スプライトは基本的に、最初右を向いています。これは度数でいうと90度の方向です。スプライトリストの[向き]の下の丸をクリックすると、スプライトの向きを示す円が表示されます。[向き]の下の丸には数字を直接入力することもできます。

円上の矢印をドラッグすると、スプライトの向きが変わります。下図は向きが180度なので、真下を向いていることになります。

練習

ではスプライトの向きを変える簡単なスクリプトを作成してみましょう。

コードメニューの[イベント]をクリックし、イベントに関係するブロックを表示します。
一番上の[緑の旗が押されたとき]ブロックをスクリプトエディターにドラッグします
コードメニューの[動き]をクリックし、上から5つめの[x座標を()、y座標を()にする]ブロックをスクリプトエディターにドラッグします。このとき、[緑の旗が押されたとき]ブロックに近づけると下にグレーの領域が表示されるので、そのときに[x座標を()、y座標を()にする]ブロックをドロップします。上のブロックの下にグレーの領域が表示されているときにドロップすると、自動的に吸着されます。
同じ[動き]の中の、上から8番めの[(90)度に向ける]ブロックをドラッグして、[x座標を()、y座標を()にする]ブロックの下に吸着させます。

このスクリプトによって、(1)旗の実行ボタンが押されると、(2)スプライトの座標が(0,0)になり、(3)スプライトの向きが90度になります。

スプライトの位置と向きの変化を確認しやすくするには、スプライトの位置をドラッグして移動し、[向き]で角度を変えてから、実行ボタンをクリックします。プログラムを1度実行すると、スプライトの座標は(0, 0)で、向きは90度になるので、それ以降実行ボタンをクリックしても、スプライトは何も変化しません。再度変化を見たい場合には、スプライトの位置と向きを変えてから実行ボタンをクリックします。