「5日間で学ぶスクラッチ入門」の3日目にあたる今回は、スクラッチの「キャラクター(スプライト)の動かし方」について解説していきます。この記事を読むことで、ステージ上のキャラクターを自由に動かせるようになります。
3日目の目標
- キャラクターをたくさん動かす方法を知ろう
- キャラクターの向きを変える方法を知ろう
- 複数の処理を同時に行う方法を知ろう
【関連記事⇒】5日間で学ぶスクラッチ入門【1日目】
【関連記事⇒】5日間で学ぶスクラッチ入門【2日目】
【関連記事⇒】5日間で学ぶスクラッチ入門【3日目】(←今ココ)
【関連記事⇒】5日間で学ぶスクラッチ入門【4日目】
【関連記事⇒】5日間で学ぶスクラッチ入門【5日目】
【復習】キャラクターを10歩動かす方法
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/2a831ec055ed4fee4e1d0936ea40500d-1-1024x576.jpg)
最初に、5日間で学ぶスクラッチ入門【2日目】で学習した、「ねこのキャラクターを10歩動かす方法」を復習していきましょう。
まず最初に以下のURLをクリックしてスクラッチの公式サイトにアクセスします。
>>スクラッチ 公式サイト
アクセスしたら、チュートリアルの「✕閉じる」をクリックして、チュートリアルを閉じましょう。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/ee3be1d100caf1aa771552d59c2bd436-1-1024x576.jpg)
次に、ブロックパレットの1番上にあるにある「10歩動かす」ブロックを、コードエリアにドラッグして置きます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/5f63f49b6b7d98988e1002a4a4f2d6d5-2-1024x576.jpg)
最後に、①コードエリアに置いた「10歩動かす」ブロックを1度クリックしてみて、②ステージ上のねこのキャラクターが10歩右に動くのを確認出来たらプログラムの完成です。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/04f86ea9c104d100d663feb8a9a65769-2-1024x576.jpg)
![ソラタ](https://programming.soraclock.net/wp-content/uploads/2024/01/3f957081e9ae50e07bce655e77b92a02-300x300.jpg)
よく分からない方は2日目の内容を確認してみよう。
キャラクターを50歩動かす方法
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/63ead695680eb0c485fa3f134844052f-2-1024x576.jpg)
ねこのキャラクターを10歩動かすプログラムの作り方が分かったところで、次はねこのキャラクターを50歩動かすプログラムを作りましょう。
ブロックパレットの「10歩動かす」ブロックを、コードエリアにドラッグして置きます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/0ae7c62e50dc705df75843b104ce66cd-2-1024x576.jpg)
コードエリアに置いた「10歩動かす」ブロックの「10」をマウスでクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/2839ab849d9b2c81bd86f4778e9767e3-1-1024x576.jpg)
次にキーボードを使って半角で「50」と入力して【エンター】キーを押します。この時、全角の「50」ではなく半角で「50」と入力するよう注意しましょう。半角と全角は【半角/全角】キーで変更することができます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/7d2a8a5d380f463388d1c8d4512bef57-2-1024x576.jpg)
最後に①「50歩動かす」ブロックをクリックしましょう。②ねこのキャラクターが50歩動くのを確認できます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/40dcbe9d88c96297b642179a653642d8-2-1024x576.jpg)
先ほど作ったねこのキャラクターを10歩動かすプログラムの時よりも、猫のキャラクターがたくさん動いたの確認できるはずです。
![ソラタ](https://programming.soraclock.net/wp-content/uploads/2024/01/3f957081e9ae50e07bce655e77b92a02-300x300.jpg)
「50」の次は「100」を入力してみて、結果を確認してみましょう。
右に寄ったキャラクターをステージの中心に戻す方法
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/60275ab58ebd7cd921d15fb49998721b-2-1024x576.jpg)
ここまでの作業で、ステージ上のねこのキャラクターがかなり右に寄っているのではないかと思います。このパートでは、右に寄ったねこのキャラクターをステージの中心(最初の位置)に戻す方法を解説していきます。
ねこのキャラクターをステージの中心に戻す方法は次の2つがあります。
キャラクターをステージの中心に戻す方法
- 【方法①】スプライトリストを利用する方法
- 【方法②】ブロックを利用する方法←オススメ
【方法①】スプライトリストを利用する方法
スプライトリストを利用して、キャラクターをステージの中心に戻す方法を解説していきます。
この方法はスプライトリストの「↔ x」の値と「↕ y」の値を変更します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/c64c5ece666a6407486987541305a212-2-1024x576.jpg)
最初にスプライトリストの①「↔ x」の値を半角の「0」に変更し、次に②「↕ y」の値を半角の「0」に変更します。すると、③ねこのキャラクターが最初の位置に戻るのが確認できます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/a402c696bf493a873c765923653c07e6-2-1024x576.jpg)
【方法②】ブロックを利用する方法
ブロックを利用して、キャラクターをステージの中心に戻す方法を解説していきます。
最初にブロックパレットの中にある「x座標を(数字)、y座標を(数字)にする」ブロックを、コードエリアにドラッグして置きます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/d3f3f00cf1a7f0b7549c20d4afc63a1b-2-1024x576.jpg)
次にキーボードを使って①x座標の数字に半角で「0」を入力し、②y座標の数字に半角で「0」を入力します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/9b4ccaedd1bef1dacccd44245c6b928f-2-1024x576.jpg)
最後に①「x座標を0、y座標を0にする」ブロックを1度クリックしましょう。すると、②ねこのキャラクターが最初の位置に戻るのが確認できます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/1d3b263ce6c9c26d37652d4436a0f96a-2-1024x576.jpg)
こちらの方法は一度ブロックを作っておけば、ブロックをクリックするだけでねこのキャラクターを最初の位置に戻すことができるので、スプライトリストを利用する方法よりもおすすめです。
キャラクターの向きを変える方法
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/1d88ceb91c7659c8f850f9acae163da9-2-1024x576.jpg)
このパートでは、ねこのキャラクターの向きを変える方法を解説していきます。
まず最初に、ブロックパレットの「↻ 15度回す」ブロックを、コードエリアにドラッグして置きます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/cb0bebe26f4ed333f0858ac401d32275-1-1024x576.jpg)
その後、①コードエリアに置いた「↻ 15度回す」ブロックを1度クリックしてみましょう。②猫のキャラクターが時計回りに15度回転するのを確認しましょう。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/fd40f9f7f385df78f8ba2cf60ad8cbff-1-1024x576.jpg)
次に①「↻ 15度回す」ブロックの数字をマウスでクリックし、②キーボードを使って半角で「90」と入力し、【エンター】キーを押します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/c9552d0133d0f4a2a4f77168fb145539-1-1024x576.jpg)
その後、①コードエリアに置いた「↻ 90度回す」ブロックを1度クリックしてみましょう。②猫のキャラクターが90度回転するのを確認しましょう。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/e3d26dbc97f4538e6bb4872c4801cebd-1-1024x576.jpg)
以上でキャラクターの向きを変えるプログラムの完成です。
![ソラタ](https://programming.soraclock.net/wp-content/uploads/2024/01/3f957081e9ae50e07bce655e77b92a02-300x300.jpg)
余裕のある方はブロックの中の数字を変えてみて、結果がどうなるか確認してみましょう。
傾いたキャラクターを最初の向きに戻す方法
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/55c8bf14835ebb73a274740f021f5807-1-1024x576.jpg)
ここまでの作業で、ステージ上の猫のキャラクターが傾いていると思います。このパートでは猫のキャラクターの向きを最初の向きに戻す方法を解説していきます。
ねこのキャラクターの向きを最初の向きに戻す方法は次の2つになります。
キャラクターを最初の向きに戻す方法
- 【方法①】スプライトリストを利用する方法
- 【方法②】ブロックを利用する方法←オススメ
【方法①】スプライトリストを利用する方法
1つ目のねこのキャラクターの向きを最初の向きに戻す方法が「スプライトリストを利用する方法」になります。
最初にスプライトリストの「向き」の数字をクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/285ad5b6b50d16ac0d0bca67c9e8953a-1-1024x576.jpg)
次に①キーボードを使って半角で「90」と入力して、②【エンター】キーを押します。すると、③ねこのキャラクターが最初の向きに戻ります。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/7a0dcd13f8d3251d5a149a1255ac7996-1-1024x576.jpg)
【方法②】ブロックを利用する方法
2つ目のねこのキャラクターの向きを最初の向きに戻す方法が「ブロックを利用する方法」になります。
最初に、ブロックパレットの「90度に向ける」ブロックを、コードエリアにドラッグして置きます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/45e645353c52af061f80af60f346190d-1024x576.jpg)
次に、①「90度に向ける」ブロックを1度クリックしましょう。すると、②ねこのキャラクターが最初の向きに戻ります。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/180801fa1135fb2f9b1d3ae25cb678f0-1024x576.jpg)
また、このブロックは、中の数字を変更することで、ねこのキャラクターの向きを指定した向きに変更することができます。
これまでの動きを合わせてみよう
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/1-2-1024x576.jpg)
実はスクラッチでは複数の動きを組合わせることで、より複雑な動きをすることができます。
そこでこのパートでは、これまで別々に行っていた「ねこのキャラクターの移動」と「ねこのキャラクターの回転」の動きを組合わせたプログラムの作り方を解説していきます。
今回作るプログラムは上画像で表される、1度の実行で「ねこのキャラクターを50歩移動し、時計回りに90度回転し、再び50歩移動する」プログラムになります。
最初に、①ブロックパレットの「10歩動かす」ブロックを、コードエリアにドラッグして置き、②ブロック内の数字を半角の「50」に変更します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/508c1cbe28de2cfa3f15dd6ed1747c2b-1024x576.jpg)
次に、①ブロックパレットの「↻ 15度回す」ブロックを、コードエリアにドラックして先ほど置いたブロックに結合し、②ブロック内の数字を半角の「90」に変更します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/84cf2338df598a65f7626d84e74cce87-1024x576.jpg)
次に、①ブロックパレットの「10歩動かす」ブロックを、コードエリアにドラッグして先ほど置いたブロックに結合し、②ブロック内の数字を半角の「50」に変更します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/90f53dd5e7b2786c275e48a057dcc2d0-1024x576.jpg)
最後に①ブロックをクリックしてプログラムを実行します。そうすることで②「50歩移動→時計回りに90度回転→50歩移動」の処理を行った結果が反映するのを確認してみましょう。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/e031a4913536a99dc54f681a10f9fcae-1024x576.jpg)
以上でプログラムの作成は終了です。
「1秒待つ」ブロックを入れると途中の処理を見ることができる
ねこのキャラクターを50歩移動し、方向を時計回りに90度変えて、再び50歩移動するプログラムが正しく動作することは確認できたけど、「途中の処理がどうなっているのか分からない」と思った方もいるのではないでしょうか?
基本的にスクラッチでは、プログラムを実行した際、プログラムを実行した「結果」のみがステージに反映されるので途中の処理を確認することができません。
このパートでは、プログラムの途中の処理を確認する方法を解説していきます。プログラムの途中の処理を確認するには、処理と処理の間に「1秒待つ」という処理を加えます。(↓画像参照)
![](https://programming.soraclock.net/wp-content/uploads/2024/01/2-2-1024x576.jpg)
最初にブロックパレットの「1秒待つ」ブロックをコードエリアにドラックして、「50歩動かす」ブロックと「90度に向ける」ブロックの間に結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/c3e864edb0d71f4412ee8610bda3783d-1024x576.jpg)
次にもう一度、ブロックパレットの「1秒待つ」ブロックをコードエリアにドラックして、「90度に向ける」ブロックと「50歩動かす」ブロックの間に結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/d480ff56e1ade0d4411ae46069715ad9-1024x576.jpg)
最後に①ブロックをクリックして、プログラムを実行してみましょう。このプログラムなら、②処理と処理の間で1秒の停止が入るので、途中の処理も確認することができます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/bece3f6e77df7232f66116217798a4e5-1024x576.jpg)
5日間で学ぶスクラッチ入門【3日目】のまとめ
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/a6c49eeccf0afc59106f0d076aa0dc66-1024x576.jpg)
「5日間で学ぶスクラッチ入門」の3日目では、ステージ上のキャラクター(スプライト)を動かすプログラムの作り方について解説してきました。今回の内容をまとめると以下になります。
まとめ
- キャラクターを動かすには「10歩動かす」ブロックを利用する
- キャラクターの向きを変えるには「15度回す」ブロックを利用する
- スクラッチでは複数のブロックを組み合わせることができる
「5日間で学ぶスクラッチ入門」の4日目では、キャラクター(スプライト)の見た目を変える方法について解説します。今日の内容をよく復習して4日目に臨みましょう。
以下のサイトの画像を引用しています
・スクラッチ 公式サイト