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

2020/06/01

2022/07/27

【Scratch入門】Scratchで最初に知っておきたい変数と四則演算の使い方

【Scratch入門】タイマーの基本と使い方のポイント

「スプライト」とは、画面内を動き回る画像のこと

です。

今回はScratch猫のスプライトを使って、画面内を自由に動き回るプログラムを作成してみましょう。

なお学習する内容のレベルで出来上がるプログラムの完成品は以下のようなものです。

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

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

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

まずは猫のスプライトを左右に移動させて、端っこで跳ね返るだけのプログラムを作成します。

以下の図のようにブロックを組み上げます。

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

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

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

x

方向は画面の左右の向き、

y

方向は画面の上下の向きでのスプライトの位置をあらわしています。

また、スプライトの

向き

はスプライトの画像が移動する時の進行方向の角度を示しています。例えば、今回の猫のスプライトでは、

0

度で上に、

90

度で右に、

180

度で下に、

-90

度で左に進みます。

この

向き

に好きな角度の値を入れてみて、このプログラムを動かすと、進行する向きが変わるのでやってみてください。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

ランダムを使った歩行

次にプログラミングの重要な考え方の１つである、

ランダム数(乱数)

を扱ってみます。

先ほどのブロックを以下のように、

動き

エリアから

~度に向ける

ブロックと、

演算

エリアから

○から○までの乱数

ブロックを追加します。

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

これだと猫が1回進むたびに、どこかの方向へランダムに向こうとするので、動きがギクシャクしてみえます。そこでもう少し動きが自然になるように、

○歩進んで、□秒止まって、△度の方向に進み出す

ような動きをランダムでやらせてみます。

先程のブロックを変更しますが、以下のように３つのランダム数が出現するので少し複雑です。

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

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

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

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

スプライトは端にあたって折り返すだけでしたが、画面内の障害物でも同じように進行方向を変えたりすることができます。

障害物に当たると跳ね返るようにしたいので、

〇〇に触れた

ブロックと条件ブロックを組み合わせる必要があります。

まずは障害物となるスプライトを追加します。スプライトの追加には主に2通りの方法があります。

まず、現在のScratchの画面の右下のパネルから、

スプライトを選ぶ

ボタンがあるところを見つけます。

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

また、自分でスプライトを描くこともできます。先程の

スプライトを選ぶ

ボタンの上に現れるアコーディオンパネルの中にある

描く

ボタンから画像の編集画面で自作の絵を作ることが可能です。

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

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

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

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

障害物に当たると跳ね返っていると思います。

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

これは障害物のどちらかに当たると、現在の進行方向とは逆向きに戻るような動きをさせています。少し難しいかも知れませんが、

逆向き

をプログラミングで計算させるために、進行方向が

-179から0

度だったときには

180

度を足し、

0から180

度だったときは

180

度を引いています。

なお、

前回のブログ記事・scratch3の基本操作を学ぶ〜四則演算

でScratchでの計算方法を説明しています。

【Scratch入門】Scratchで最初に知っておきたい変数と四則演算の使い方

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

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

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

まとめ

今回はスプライトの動き方の基本を学習しました。

スプライトを動かすことで、より楽しいゲーム的な要素でプログラミングができるようになると思います。

さらなるステップアップとして、移動のときにコスチューム番号をずらしてアニメーションを行うことで、歩いているように見せるようなテクニックも以下の記事で紹介しています。

【Scratch入門】コスチュームを変えてスプライトのアニメーション効果を付ける

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

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

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選