「7日間で学ぶスクラッチ応用編」の4日目にあたる今回は、「複数のキャラクターを同時に動かす方法」について解説していきます。この記事を読むことで、複数のキャラクターを同時に動かすアニメーションが作れるようになります。
4日目の目標
- ステージに複数のキャラクターを表示する方法を学ぼう
- 複数のキャラクターを同時に動かす方法を学ぼう
- 複数のキャラクターを使って簡単なプログラムを作ろう
【関連記事⇒】7日間で学ぶスクラッチ応用編【1日目】
【関連記事⇒】7日間で学ぶスクラッチ応用編【2日目】
【関連記事⇒】7日間で学ぶスクラッチ応用編【3日目】
【関連記事⇒】7日間で学ぶスクラッチ応用編【4日目】(←今ココ)
【関連記事⇒】7日間で学ぶスクラッチ応用編【5日目】
【関連記事⇒】7日間で学ぶスクラッチ応用編【6日目】
【関連記事⇒】7日間で学ぶスクラッチ応用編【7日目】
今回作るプログラムの紹介
【プログラムの説明】
・緑色の旗🚩をクリックするとプログラムが動きます。
・ニワトリとヒヨコが同時に動いているのが確認できます。
・赤い丸ボタンを押すとプログラムが停止します。
学習を始める前に「複数のキャラクターを同時に動かすってどういうこと?」と思っている方のために、今回作成するプログラムを先に紹介します。
まずは⇧にあるプログラムを触って感覚をつかみましょう。
プログラムを実際に触ってみた感想はいかがでしたか?
ニワトリとヒヨコのキャラクターが同時に動いているアニメーションになっています。
複数のキャラクターを同時に動かすイメージができたところで学習をスタートしていきましょう。
![ソラタ](https://programming.soraclock.net/wp-content/uploads/2024/01/3f957081e9ae50e07bce655e77b92a02-300x300.jpg)
画像付きで分かりやすく説明していきます。
複数のキャラクターを表示させる方法
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/ee3be1d100caf1aa771552d59c2bd436-6-1024x576.jpg)
スクラッチでは画面の右下にある「スプライトを選ぶ」からキャラクターを増やすことができます。
試しに、コウモリのキャラクターを増やしてみましょう。
最初に「スプライトを選ぶ」をクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/5f63f49b6b7d98988e1002a4a4f2d6d5-8-1024x576.jpg)
キャラクター一覧の画面が表示されるので、「Bat(コウモリ)」をクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/04f86ea9c104d100d663feb8a9a65769-8-1024x576.jpg)
そうすると、ステージに「コウモリ」表示されているのを確認できます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/63ead695680eb0c485fa3f134844052f-8-1024x576.jpg)
同じ方法でコウモリ以外のキャラクターも増やすことができます。
またキャラクターを消したいときは、スプライトリストのゴミ箱アイコンをクリックすることで、キャラクターを消去することができます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/0ae7c62e50dc705df75843b104ce66cd-8-1024x576.jpg)
ちなみに、スクラッチには300種類以上のキャラクターが用意されています。
また、キャラクターの見た目を変える方法については、「5日間で学ぶスクラッチ入門【4日目】」で解説しています。
![ソラタ](https://programming.soraclock.net/wp-content/uploads/2024/01/3f957081e9ae50e07bce655e77b92a02-300x300.jpg)
スクラッチではキャラクターのことをスプライトと呼びます。
複数のキャラクターを同時に動かす方法
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/2839ab849d9b2c81bd86f4778e9767e3-7-1024x576.jpg)
このパートでは、複数のキャラクターを同時に動かす方法を解説していきます。
複数のキャラクターを同時に動かすために覚えておきたいポイントが次の2つです。
覚えておきたいポイント
- 【ポイント①】キャラクター毎にコードエリアを切り替える
- 【ポイント②】🚩が押されたときブロックの利用
【ポイント①】キャラクター毎にコードエリアを切り替える
複数のキャラクターを同時に動かすためのポイントの1つ目が「キャラクター毎にコードエリアを切り替える」になります。
実はスクラッチでは、キャラクター毎にコードエリアが分かれています。
自分が今どのキャラクターのコードエリアを編集しているのか確認するには、コードエリアの右上を見ます。
コードエリアの右上に今自分が選択しているキャラクターが薄く表示されます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/7d2a8a5d380f463388d1c8d4512bef57-8-1024x576.jpg)
コードエリアの切り替えはスプライトリストで行います。
コードエリアに表示されているキャラクターをクリックすることで、編集するキャラクターのコードエリアを切り替えることができます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/40dcbe9d88c96297b642179a653642d8-8-1024x576.jpg)
このようにコードエリアを切り替えて、キャラクターごとに個別のプログラミングを行うことで、キャラクターごとに違った動きをさせることができます。
【ポイント②】🚩が押されたときブロックの利用
複数のキャラクターを同時に動かすためのポイントの2つ目が「🚩が押されたときブロックの利用」になります。
スクラッチでは、ブロックをクリックしてプログラムを実行しますが、キャラクターが複数いる場合は、複数のキャラクターのブロックを同時にクリックすることはできません。
そんな時に利用するのが「🚩が押されたときブロック」になります。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/60275ab58ebd7cd921d15fb49998721b-8-1024x576.jpg)
「🚩が押されたときブロック」を利用することで、ステージの上にある「🚩アイコン」をクリックするだけで、「🚩が押されたときブロック」に結合しているブロックを同時に実行することができます。
そのため、複数のキャラクターを同時に動かすときは「🚩が押されたときブロック」を利用しましょう。
また、「🚩アイコン」の隣にある赤い丸をクリックすると、実行中のプログラムを停止させることができるので合わせて覚えておきましょう。
簡単なプログラムを作ってみよう
【プログラムの説明】
・緑色の旗🚩をクリックするとプログラムが動きます。
・ニワトリとヒヨコが同時に動いているのが確認できます。
複数のキャラクターを同時に動かす方法を学んだところで、この記事の最初に紹介した上記のプログラムの作り方を解説していきます。
プログラムを作る手順がこちらになります。
プログラムを作る手順
- 【手順①】ステージの背景を変える
- 【手順②】キャラクターを表示する
- 【手順③】ヒヨコのコードエリアを編集
- 【手順④】ニワトリのコードエリアを編集
【手順①】ステージの背景を変える
プログラムを作る手順の1つ目が「ステージの背景を変える」になります。
最初に以下のURLをクリックしてスクラッチの公式サイトにアクセスします。
スクラッチは誰でも無料で利用することができます。
アクセスしたら、チュートリアルの「✕閉じる」をクリックして、チュートリアルを閉じましょう。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/c64c5ece666a6407486987541305a212-7-1024x576.jpg)
次に画面右下にある「背景を選ぶ」をクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/a402c696bf493a873c765923653c07e6-7-1024x576.jpg)
次に「Desert」をクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/7ecbec8b200a97f5b85a8a31ece4115c-7-1024x576.jpg)
ステージの背景が「Desert」に変わったのが確認できます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/d3f3f00cf1a7f0b7549c20d4afc63a1b-8-1024x576.jpg)
以上で背景の変更は完了です。
【手順②】キャラクターを表示する
プログラムを作る手順のつ2目が「キャラクターを表示する」になります。
最初に、ねこのキャラクターは今回のプログラムには不要なので削除しましょう。
スプライトリストの「ゴミ箱アイコン」をクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/9b4ccaedd1bef1dacccd44245c6b928f-8-1024x576.jpg)
すると、ステージからねこのキャラクターがいなくなります。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/1d3b263ce6c9c26d37652d4436a0f96a-9-1024x576.jpg)
次に今回のプログラムで利用するキャラクターを表示させましょう。
「スプライトを選ぶ」をクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/1d88ceb91c7659c8f850f9acae163da9-7-1024x576.jpg)
スプライト一覧の中から「Hen(ニワトリ)」をクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/cb0bebe26f4ed333f0858ac401d32275-6-1024x576.jpg)
すると、ニワトリがステージに追加されます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/fd40f9f7f385df78f8ba2cf60ad8cbff-6-1024x576.jpg)
次にスプライトリストの①「↔ x」の数値を「0」に変更し、②「↕ y」の数値を「-90」に変更します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/c9552d0133d0f4a2a4f77168fb145539-6-1024x576.jpg)
次にニワトリのときと同様に「スプライトを選ぶ」から「Hatchling(ヒヨコ)」をステージに追加します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/e3d26dbc97f4538e6bb4872c4801cebd-6-1024x576.jpg)
次にスプライトリストの①「↔ x」の数値を「-30」に変更し、②「↕ y」の数値を「18」に変更します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/a696c9859391dafa55613beeb4d0df7c-5-1024x576.jpg)
以上でキャラクターの表示は完了です。
【手順③】ヒヨコのコードエリアを編集
プログラムを作る手順のつ3目が「ヒヨコのコードエリアを編集」になります。
最初にスプライトリストの①「Hatchling(ヒヨコ)」をクリックし、②コードエリアの右上がヒヨコのキャラクターになっていることを確認します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/55c8bf14835ebb73a274740f021f5807-5-1024x576.jpg)
次に「🚩が押されたときブロック」を、コードエリアにドラッグして置きます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/285ad5b6b50d16ac0d0bca67c9e8953a-5-1024x576.jpg)
次に「ずっとブロック」を、コードエリアにドラックして下画像のように先ほど置いたブロックに結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/7a0dcd13f8d3251d5a149a1255ac7996-4-1024x576.jpg)
また、「ずっとブロック」について使い方を詳しく学びたい方は「7日間で学ぶスクラッチ応用編【1日目】」をご覧ください。
次に「次のコスチュームにするブロック」を、コードエリアにドラックして下画像のように先ほど置いたブロックに結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/45e645353c52af061f80af60f346190d-4-1024x576.jpg)
次に「1秒待つブロック」を、コードエリアにドラックして下画像のように先ほど置いたブロックに結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/180801fa1135fb2f9b1d3ae25cb678f0-4-1024x576.jpg)
以上でヒヨコのコードエリアの編集は完了です。
【手順④】ニワトリのコードエリアを編集
プログラムを作る手順のつ4目が「ニワトリのコードエリアを編集」になります。
最初にスプライトリストの①「Hen(ニワトリ)」をクリックし、②コードエリアの右上がニワトリのキャラクターになっていることを確認します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/91e7a8680d4008faa58b774259817fe6-3-1024x576.jpg)
次に「🚩が押されたときブロック」を、コードエリアにドラッグして置きます。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/3265133c13d3b0b9fb53d46133fc3b7b-3-1024x576.jpg)
次に「回転方法を左右のみにするブロック」を、コードエリアにドラックして下画像のように先ほど置いたブロックに結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/508c1cbe28de2cfa3f15dd6ed1747c2b-3-1024x576.jpg)
次に「ずっとブロック」を、コードエリアにドラックして下画像のように先ほど置いたブロックに結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/84cf2338df598a65f7626d84e74cce87-3-1024x576.jpg)
次に「10歩動かすブロック」を、コードエリアにドラックして下画像のように先ほど置いたブロックに結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/90f53dd5e7b2786c275e48a057dcc2d0-2-1024x576.jpg)
次に「10歩動かすブロック」の「10」をクリックします。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/e031a4913536a99dc54f681a10f9fcae-2-1024x576.jpg)
次にキーボードを使って、半角で①「30」と入力し、②Enterキーを押します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/1e747160b568df1ae5b7e89208dffdcd-2-1024x576.jpg)
次に「次のコスチュームするブロック」を、コードエリアにドラックして下画像のように先ほど置いたブロックに結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/c3e864edb0d71f4412ee8610bda3783d-2-1024x576.jpg)
次に「1秒待つブロック」を、コードエリアにドラックして下画像のように先ほど置いたブロックに結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/d480ff56e1ade0d4411ae46069715ad9-2-1024x576.jpg)
次に「もし端に着いたら、跳ね返るブロック」を、コードエリアにドラックして下画像のように先ほど置いたブロックに結合します。
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/bece3f6e77df7232f66116217798a4e5-1-1024x576.jpg)
以上でヒヨコのコードエリアの編集は完了です。そして、プログラムも完成です。
🚩をクリックしてプログラムが正常に動作することを確認しましょう。
7日間で学ぶスクラッチ応用編【4日目】のまとめ
![scratch](https://programming.soraclock.net/wp-content/uploads/2024/01/a6c49eeccf0afc59106f0d076aa0dc66-1-1024x576.jpg)
「7日間で学ぶスクラッチ応用編」の4日目では、「複数のキャラクターを同時に動かす方法」ついて解説してきました。今回の内容をまとめると以下になります。
まとめ
- スクラッチでは「キャラクターを選ぶ」からキャラクターを増やすことができる
- キャラクターを同時に動かすにはキャラクター毎にコードエリアを編集する
- キャラクターを同時に動かすには🚩が押されたときブロックを利用する
「7日間で学ぶスクラッチ応用編」の5日目では、「乱数」について解説します。今日の内容をよく復習して5日目に臨みましょう。
以下のサイトの画像を引用しています
・スクラッチ 公式サイト