【Scratch入門】はじめてのScratchアプリ作成〜スプライトを自由に歩かせてみよう


※ 当ページには【広告/PR】を含む場合があります。
2020/06/01
2022/07/27
【Scratch入門】Scratchで最初に知っておきたい変数と四則演算の使い方
【Scratch入門】タイマーの基本と使い方のポイント
「スプライト」とは、画面内を動き回る画像のこと です。
今回はScratch猫のスプライトを使って、画面内を自由に動き回るプログラムを作成してみましょう。
なお学習する内容のレベルで出来上がるプログラムの完成品は以下のようなものです。



では早速以下で、スプライトを動かすポイントを解説していきます。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

端に当たって歩く方法を変える



まずは猫のスプライトを左右に移動させて、端っこで跳ね返るだけのプログラムを作成します。
以下の図のようにブロックを組み上げます。

合同会社タコスキングダム|蛸壺の技術ブログ


10歩分を100回繰り返すプログラムです。 ただし、画面の端に当たると、スプライトの向きが左右でひっくり返ります。
実際のプログラムはこのように動きます。



このプログラムの動作中に注目したいのは、画面の下にあるスプライトの位置の情報です。

合同会社タコスキングダム|蛸壺の技術ブログ
x 方向は画面の左右の向き、 y 方向は画面の上下の向きでのスプライトの位置をあらわしています。
また、スプライトの
向き はスプライトの画像が移動する時の進行方向の角度を示しています。 例えば、今回の猫のスプライトでは、 0 度で上に、 90 度で右に、 180 度で下に、 -90 度で左に進みます。
この
向き に好きな角度の値を入れてみて、このプログラムを動かすと、進行する向きが変わるのでやってみてください。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

ランダムを使った歩行



次にプログラミングの重要な考え方の1つである、
ランダム数(乱数) を扱ってみます。
先ほどのブロックを以下のように、
動き エリアから ~度に向ける ブロックと、 演算 エリアから ○から○までの乱数 ブロックを追加します。

合同会社タコスキングダム|蛸壺の技術ブログ


このプログラムは以下のように動きます。



これだと猫が1回進むたびに、どこかの方向へランダムに向こうとするので、動きがギクシャクしてみえます。 そこでもう少し動きが自然になるように、
○歩進んで、□秒止まって、△度の方向に進み出す ような動きをランダムでやらせてみます。
先程のブロックを変更しますが、以下のように3つのランダム数が出現するので少し複雑です。

合同会社タコスキングダム|蛸壺の技術ブログ


修正したプログラムは以下のように動きます。



これでスプライトが画面の枠の中を自由に歩き回るプログラムが出来ました。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

障害物に当たった時の方向転換



スプライトは端にあたって折り返すだけでしたが、画面内の障害物でも同じように進行方向を変えたりすることができます。
障害物に当たると跳ね返るようにしたいので、
〇〇に触れた ブロックと条件ブロックを組み合わせる必要があります。
まずは障害物となるスプライトを追加します。 スプライトの追加には主に2通りの方法があります。
まず、現在のScratchの画面の右下のパネルから、
スプライトを選ぶ ボタンがあるところを見つけます。

合同会社タコスキングダム|蛸壺の技術ブログ


その猫のアイコンをそのままクリックすると、オンラインで利用できるスプライトが表示されますので、どれかを選べば現在の画面に追加されます。

合同会社タコスキングダム|蛸壺の技術ブログ


また、自分でスプライトを描くこともできます。 先程の
スプライトを選ぶ ボタンの上に現れるアコーディオンパネルの中にある 描く ボタンから画像の編集画面で自作の絵を作ることが可能です。

合同会社タコスキングダム|蛸壺の技術ブログ


画像編集画面の詳細はここでは説明しませんが、とりあえず今回は簡単に丸を描いて障害物としました。

合同会社タコスキングダム|蛸壺の技術ブログ


ということで、画面に2つ障害物を増やしたところで、以下のようにプログラミングブロックを修正しましょう。

合同会社タコスキングダム|蛸壺の技術ブログ


ちなみにスプライトが合計3つになったので、スプライトの編集画面には3つのスプライトが見えていると思います。 プログラミングで猫のスプライトを動かすので、猫のスプライトを選択しているか確認する必要があります。 これはプログラミング画面の右上に出ている画像でも確認できます。

合同会社タコスキングダム|蛸壺の技術ブログ


早速動かしてみると、以下のようなプログラムになりました。



障害物に当たると跳ね返っていると思います。
障害物に当たると跳ね返る処理は、Scratchで用意されているブロックにはないので、自分でプログラムを作る必要があります。 その跳ね返る処理をしているのが、下の図のブロックの部分です。

合同会社タコスキングダム|蛸壺の技術ブログ


これは障害物のどちらかに当たると、現在の進行方向とは逆向きに戻るような動きをさせています。 少し難しいかも知れませんが、
逆向き をプログラミングで計算させるために、進行方向が -179から0 度だったときには 180 度を足し、 0から180 度だったときは 180 度を引いています。
なお、
前回のブログ記事・scratch3の基本操作を学ぶ 〜 四則演算 でScratchでの計算方法を説明しています。

合同会社タコスキングダム|蛸壺の技術ブログ
【Scratch入門】Scratchで最初に知っておきたい変数と四則演算の使い方

Scratchアプリを作る際の基本である「変数」と「四則演算(足し算など)」を扱う方法を考えてみます。



「演算のやり方、まだよくわからない」、という方はそちらの記事で理解を深めてみてください。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

まとめ



今回はスプライトの動き方の基本を学習しました。
スプライトを動かすことで、より楽しいゲーム的な要素でプログラミングができるようになると思います。
さらなるステップアップとして、移動のときにコスチューム番号をずらしてアニメーションを行うことで、歩いているように見せるようなテクニックも以下の記事で紹介しています。

合同会社タコスキングダム|蛸壺の技術ブログ
【Scratch入門】コスチュームを変えてスプライトのアニメーション効果を付ける

Scratchでスプライトを移動させる時にコスチューム番号をずらしてアニメーションで動かす方法を解説します。



スプライトの動かし方についてもっと勉強したい方は、そちらもご覧下さい。