ここでは、コスチュームの切り替え方を学びます。

﹁横スクロールゲーム﹂

時間目を作ろう！

10

Question...
「横スクロールゲーム」って何ですか？

大翔くん、横スクロールゲームって何？
アクションゲームの１ジャンルだよ。キャラクターをボタン操作などで動かして、障害や敵キャラ、罠などをクリアする。
「スーパーマリオ」も横スクロールゲームだ。
なぜ、横スクロールなの？

2キャラクターが横に進みながら、ステージをクリアするからだよ。
マリオ以外にも、世界的に有名なゲームがいくつもある。
へーそうなんだ。スーパーマリオは知ってるけど……。
そうなの。あんなに面白いのに。
こんにちは。今日はクリプトまでそろって、みなさんで何を話していたんですか。
横スクロールゲームについて、説明していました。
「横スクロールゲーム」を作ろう！

ああ、あれはよくできていますよね。じゃあ、今回は、横スクロールゲームを作りましょうか。

本当ですか！

あれもスクラッチ

10

時間目で作れるんですか？
ワン！
はい、大丈夫です。

3

Let'sstart!
「横スクロールゲーム」
を作ろう！

マリオになりきったつもりで大きくジャンプする蓮くん。みんなも、横スクロールゲームの主人公を応援している。のサムネイルにある×マークをタップして、ネコを削除してください。次に、画面右下にあるプの上で、しょう。

4

マークをタッの虫メガネマークをタップしま

を選択してください。という4つのコスチュームがあるけど、以外は走っているようなコスチュームに﹁横スクロールゲーム﹂を作ろう！には、なってるね。

時間目

10

5

そうですね。のコスチュームはそのままに、のコスチュームを少し修正しましょう。

私がやってみてもいいですか。
はい。じゃあ、の肩の左上部分をタップして、そのまま右下の部分まで画面から指を離さずにドラッグしてください。点線の四角い枠が表示されるので、の腕の部分だけが囲まれたら画面から指を離します。の腕の部分だけを点線で囲んだ後に指を離したら、腕の部分だけが選択されました。

6

の部分をドラッグして、腕を横に広げるように動かしてください。
﹁横スクロールゲーム﹂を作ろう！

こんな感じでいいですか。

時間目

10

7

いいですね。もう一方の手と、両足も横に広げるようにしましょう。
できました！

完璧です。次は、地面のスプライトを作るため、画面右下にあるマークをタップして、タップしてください。

8の筆マークを四角形ツールで細長い長方形スプライトを作ります。
﹁横スクロールゲーム﹂を作ろう！

できました。
次は背景を選びましょう。画面右下の上で、マークをタップのの虫メガネマークをタップし、10時間目の背景を選択します。

9まずは、のスクリプトを作りましょう。
「X 座標＝0、Y 座標＝０にして、最前面に移動して、幽霊の効果を25にする」スクリプトを作ってください。
幽霊の効果は、 見た目カテゴリーのブロックのをタップして、のを選択し、「0」を「25」にして……と、できました！
では、10をタップしましょう。

が少しだけ透明になって、後ろの背景が透けて見えるは、スプライトを透明にする効果があるんだね。
そのとおりです。
「色」「魚眼レンズ」「渦巻き」「ピクセル化」「モザイク」「明るさ」「幽霊」など、7種類の画像効果があるので、ほかの効果もぜひ試してみてください。

マ ー ク を タ ッ プ の 上 で、

10

時間目

次 は、 画 面 右 下 に あ る﹁横スクロールゲーム﹂を作ろう！

よ。の筆メガネマークをタップしてください。

11スプライトを追加して、そのスクリプトを作りましょう。スクリプトエリアに、「X 座標＝100、Y 座標＝45にして、最背面に移動して、幽霊の効果を25にする」というスクリプトを作ってください。
次は僕がやりたい！
じゃあ、のスクリプトは、大翔くんにお願いしましょう。

「最背面に移動して」は、見た目カテゴリーのブロックのの12をタップして、を選択すればいいよね。

できた！

ビルも透明になったよ。
は、やのスプライトよりも背面のレイヤに表示されるようになります。
もしも、がから離れた位置になってしまったときは、Y 座

標の値を変更してください。

﹁横スクロールゲーム﹂を作ろう！

により時間目1013

問題 1をタップしたら X 座標＝100、Y 座標＝45にして、最背面に移動して、幽霊の効果を25にするスクリプトの下に、以下のスクリプトを作ってください。

「画面をタップしたら「ゲーム開始」というメッセージを送り、「ゲーム開始」というメッセージを受け取ったら左方向に移動し続ける」

画面をタップしたらは、とを連結してにするんだよね。

うん。これ、UFO キャッチャーゲームを作ったときにも使ったブロックだ。
14

であれば、画面に触れただけで条件が成立します。それに対して、であれば、画面をタップして、タップした指を画面から離すことで条件が成立するスクリプトになります。
「ゲーム開始」というメッセージは、部分をタップして、のからをタップすれば、自分の好きな名前のメッセージ名を付けられるんだよね。
が送った「ゲーム開始」というメッセージを、で受け取れるわけだね。

でも、何のためにメッセージを自分で受け取る必要があるんだろう？
「ゲーム開始」というメッセージは、他のスプライトでも使うんじゃない？

﹁横スクロールゲーム﹂を作ろう！

そのとおりです。

その通りですよ。

をタップしてすぐにゲームがスタートするのではなく、をタップした後、画面をタップすると時間目

10ゲームをスタートするようにしたかったのです。
スクリプトが完成したら、をタップして、さらに画面をタップしてみよう。

15

画面をタップすると、でも、が左方向に移動し始めたよ！

が X 座標＝ -265で止まってしまったね。の X 座標が、になったら、に瞬間移動して、また右から左に移動するようにしたらどうかな。

いいね。

が右から左に移動する動きを繰り返せば、が動いているように見えるよ。

16

じゃあ、に瞬間移動するたびに、でのコスチュームを変えない。

それ、いいね。スクリプトは、にすればいいのかな。
みなさん、次々とアイディアが浮かびますね。問題を出す前に、自分たちで考えるのはすばらしいです。スクリプトが完成したら、をタップの上で、画面をタップしてください。

﹁横スクロールゲーム﹂を作ろう！

時間目

1017

が 右 か ら 左 に 移 動 し て 左 側 に 消 え た 後、 違 う コ ス
チュームのが右から現れるようになった！

皆さんの考えたとおりになりましたか。
うん！

ワン！
自分たちのアイディアや考えを形にできましたね。自分の考えを形にする力、想像力や創造性は、これからの時代、とても大切になります。
もしかして、想像力や創造性は、AI よりも人間の方が優れているということですか？
そのとおりです。AI がもっと使われるようになると、便利なものや楽しめるものなどを人間が考え、それをロボットやコンピュータが形にするようになるでしょう。
ロボットやコンピュータに人間の仕事が奪われることはないんだね。少し安心した。
これからの時代、ロボットやコンピュータはより身近な存在になるでしょう。
ワン、ワン！

クリプト、ヤキモチを焼いてるの？
18

ははははは。
さて、では次に何をしましょうか。
を使って、が動いて見えるようにしようよ。

だと、が順番に表示されるから、のコスチュームのコスチュームも表示されてしまい、動きがおかしくなってしまうよね。

連結しているブロックの動きをチェックしたいときは、連結されているブロックの一番上のブロックをタップしましょう。
これは、プログラミングの途中で動作チェックするときに有効です。スクラッチの完成したプログラムにはブロックの先頭に必ずハットブロックが必要になるので注意してください。

﹁横スクロールゲーム﹂を作ろう！にすればいいのかな。

わかりました。このブロックの動きをチェックしたいので、連結されているブロックの一番上にある時間目10をタップしてみると……と。
あれ？のままでコスチュームが変わらないね。

19

何 で だ ろ う？

を 追 加 す れ ば、のコスチュームが切りかわるように見えるかな……。追加して、ブロックの一番上をタップしてみよう。

大翔の予想どおりだね。のコスチュームが切り替わって、走っているように見えるよ。
素晴らしい、正解にたどりつきましたね。実は、のコスチュームを切りかえる方法は、ほかにもあるんですよ。少し算数の知識が必要になりますけど、興味ありますか？
えっ、算数！？
算数といっても、足し算と割り算のあまりを使うだけです。
へー、足し算や割り算の知識を使って、プログラミングできるんだ。

20

蓮くんも、興味がありか？
先生、足し算と割り算の余りを使って、のコスチュームを切り替える方法を教えてください。
湊は算数得意だもんなあ。
では、問題を出しましょう。

問題 2﹁横スクロールゲーム﹂を作ろう！

「「ゲーム開始」というメッセージを受け取った後、

10

時間目

上図の6つのブロックを使用して、以下のスクリプトを作ってください。

を除く、のコスチュームが繰り返し切り替わる」

21

ヒント
変数はあらかじめ用意されているをそのまま使用します。変数名を変えたい人は、自分の好きな名前に変えても問題ありません。

結構、難しそうだね。

うーん、のブロックは、変数を「３」で割るから、がどんな値でも、余りが「0」か「1」か「2」になる。
そうか！

コスチュームは、番号でも指定できるから、この「0」か「1」か「2」を使ってコスチュームを指定するんだよ。
でも、「０」って番号のコスチュームはないよね。

先生、ヒントをください。
割り算の余りだけでなく、足し算も使いますよ。
わか っ た！とを組み合わせるんだ。
「2+0」
「2+1」
「2+2」で「2」「3」「4」になるから、ちょうどのコスチューム番号と一致する！
その通りです。

22

の値をば、で1ず つ 変 え れ
は「2」
「3」
「4」
、「2」
「3」「4」、「2」「3」「4」を繰り返すようになるわけだ！
スクリプトが完成したら、をタップした上で、画面をタップし、「ゲーム開始」のメッセージを送ってください。

﹁横スクロールゲーム﹂を作ろう！

やった！

やったね。のコスチュームが思ったとおりに変わった

時間目

10よ！
すばらしい、正解です。

23

と同じように、も幽霊の効果や座標の位置を決めようよ。
いいね。

大きさも少しだけ小さくしたらどうかな。

をタップした後、コスチュームがだと変だから、コスチュームも設定しよう。
先生、できたよ！

みなさん、すばらしいですね。自分たちで考えて、アイディ

24

アを形にできるようになってきました。では、をタップの上で、画面をタップしてみましょう。なお、がから離れた位置になってしまったときは、Y 座標の値を変更してください。

あとは、をジャンプさせたいな。それで、左から右に移動してくる障害物を避けたら横スクロールゲームっぽくなるよね。

﹁横スクロールゲーム﹂を作ろう！の大きさも位置もちょうどいい感じになったね。

いいね！

時間目

10

避けるだけだと面白くないから、ゲットすると得点がもらえるコイン系のスプライトも追加したい。
大翔くんは、ゲームのアイディアがどんどん出てくるね。
25

さすがゲーマー。

ワン、ワン！
では、ジャンプのスクリプトを作りましょう。まずは、カテゴリのをタップして、「ジャンプ」という名前のカスタムブロックを作りましょう。カスタムブ
ロックの名前は、「ジャンプ」以外でも問題ありません。

ジャンプのスクリプトを作るときは、カスタムブロックが必要なのかな。
そういうわけではありません。スクリプトが見やすくするために、カスタムブロックを使うのです。
わかりました。
26

では、ジャンプのスクリプトも問題形式で作りましょう。

問題 3を追加したスクリプトのほか、上10にして、幽霊の効果を25、大きさを75%、X 座標＝ -150、Y 座標＝ -80にするスクリプトと、「ゲーム開始」というメッセージを受け取ったら替えるスクリプトにカスタムブロック図の4つのブロックを使って、以下のスクリプトを作ってください。

「カスタムブロックブロックを実行すると時間目と順番にコスチュームを切り﹁横スクロールゲーム﹂を作ろう！

をタップしたら、コスチュームをがジャンプするように、定義を完成させる」27

は、でを25ピクセル上方向に大きく移動し、その後はを25回繰り返して小さく移動するブロックだから、ジャンプの上方向への動きだね。
そうだね。それに対して、は、下方向の動きだ。
ははに触れたということだから、に触れるまでで下方向に移動するんじゃない。に上方向への移動と下方向への移動のスクリプトを入れれば、画面をタップするとがジャンプするようになるよね。
そのスクリプトを定義ブロックの下に連結すればいいのかな。
完成したら、をタップした上で画面をタップし、「ゲーム開始」のメッセージを送ってください。

28

やったー！

が走り出し、画面をタップしたらジャンスクリプト、正解でしたね。
を実行すると、というカスタムブロックの下に連結したジャンプのスクリプトが実行されるようになります。
でも、私が形を変えたが使われてないよね。

﹁横スクロールゲーム﹂を作ろう！

プした！

時間目

10

そういえば、そうだね。

がジャンプしたときのコスチュームをにしようよ。

29

がジャンプで上方向に移動しているときはのコスチュームにして、下方向に落下しているときは他のコスチュームにするといいかもね。
下方向に落下しているときのコスチュームはを使えば、のどれかになるね。
さすが、湊。

音も追加しようよ。の音なんかどうかな。
ワン、ワン！

クリプト、ありがとう。
蓮くんとクリプトもなかよくなりましたね。

30

できた！

をタップした上で画面をタップして、「ゲー﹁横スクロールゲーム﹂を作ろう！

ム開始」のメッセージを送ろう！

時間目

10画面をタップしたら、がのコスチュームになってジャンプしたよ！
落下するときは、のコスチュームになって着地したね。

31

やのコスチュームになって着地することもあるんだよね。
そのとおりです。また、自分たちで考えたアイディアを形にできましたね。
次は、大翔が言っていた右から左に移動する障害物を作ろう。まずはスプライトを選ぼうか。

可愛いから、ハリネズミいいね。
は32にしよう。

は右から左に移動させたいから、スクリプトとほぼ同じでいいんじゃないかな。

一から作るより、のスクリプトを修正したほうがカンタンだしね。
いいアイディアですね。
をタップした後の座標の値を変えて、移動のスピードをでより早く移動するようにしたほうがいいね。に瞬間移動した後のもナシでいいと思う。
完成したら、をタップした上で画面をタップし、「ゲーム開始」のメッセージを送りましょう。
﹁横スクロールゲーム﹂を作ろう！

時間目

10

あれ？

が後ろ向きに移動してる。

33

のコスチュームは、で向きを変えなきゃいけなかったんだ。
も必要だよ。

そうだね。

やったー！

できた。

ワン、ワン！
みなさん、スクリプトの問題点を自分たちで修正しましたね。

でスプライトの向きを指定したときは、のかわりに34も使えますよ。

を選んでをタップして、コスチュームをチェックしてみよう。
コスチュームは5つだね。

可愛いー！

でも、今回の横スクロールゲームでは、足の形が違うとだけあればいいかも。本当は、全部のコスチュームを使いたいけど……。

﹁横スクロールゲーム﹂を作ろう！

時間目

10のときと同じように、足し算と割り算の余りのスクリ
プトでとのコスチュームだけ、交互に表示されるようにしようか。

35

今回はとのコスチュームだけを使用するんだか

ら、他のコスチュームを削除しよう。

えーと……、コスチュームをを使えば、とだけにしてのように、の足が動いて見えるんじゃない。
クーン。の足がチョコチョコ動いて可愛い！
スクリプト、正しく動きましたね。なお、とを入れる場所が違います。

はでは、に瞬間移動した後にコスチュームを変えるのに対して、はのなかにを入れるので、アニメーションのようにコスチュームが切り替わります。
36

次は、ゲットすると得点が増えるコイン系のスプライトを追加しよう。
スプライトはがいいと思うよ。とほぼ同じでいいんじゃない。

をタップした後の座標の位置を変えるだけで、他は同じ

10

時間目

スクリプトでだいじょうぶだと思う。
座標の位置を﹁横スクロールゲーム﹂を作ろう！のスクリプトも、に 変 更 し て、をタップの上で画面をタップし、「ゲーム開始」のメッセージを送信しよう。

37

あれ？

が X 座標＝ -240の位置から動かなくなってしまった。何でだろう？
スクラッチでは、スプライトの大きさにより、移動できる座標の範囲がちがうからです。

は X 座標＝ -250以下の位置まで移動できましたが、は X 座標＝ -240までしか移動できません。
は X 座標＝ -240までしか移動しないから、の条件が成立せずに、へ瞬間移動しなかったんだ。
じゃあ、38とに変更しよう。

をタップした上で画面をタップし、「ゲーム開始」のメッセージを送ってください。

﹁横スクロールゲーム﹂を作ろう！

時間目

10がに瞬間移動して、コスチュームも変わったよ。
スクリプトの修正ができましたね。

39

最後に、ががにふれるとゲームオーバーになって、にふれると得点がアップするスクリプトを作ろう。

問題 4のスクリプトに、上図の5つのブロックを使用して、以下のスクリプトを作ってください。

「「ゲーム開始」メッセージを受け取った後、もしもスチュームをに触れたらコに変更して、25ピクセルだけ上方向に移動した後に、「Lose」という音を鳴らしてからすべてのスクリプトを止める」

40

「もしもに触れたら」は、を使えばいいよね。に触れると、の下に連結されたブロックが実行されるんだよね。の下に連結すれば、をのコスチュームになって上方向に少しだけ移動するようになるし。
その後は、を連結すればいいと思うけど、はどこに使うんだろう？

プトを実行してみよう。

を使わずにスクリ﹁横スクロールゲーム﹂を作ろう！

とりあえず、時間目

1041

あれ？に触れても、のコスチュームが切り替わり続けるよ。
このコスチュームの切り替わりをストップするために、が必要なんだね。に触れたらすぐにコスチュームの切り替わりをストップさせたいから、の直下にを連結してみよう。

をタップした上で画面をタップし、「ゲーム開始」のメッセージを送ってください。

42

やったね！に触れたら、のコスチュームになって、「Lose」の音が鳴った後、すべてのスクリプトがストップしたよ。
ワオーン！
おめでとうございます。正しいスクリプトを完成させましたね。
がに触れると得点アップになるスクリプトは、自分たちで考えてみてもいいですか。
もちろんです。自分たちで考えるのは、とても素晴らしいことですよ。
がに触れると得点がアップするスクリプトは、そうだね。得点を付けるには変数が必要だから、「得点」という名前の変数を作ろう。

﹁横スクロールゲーム﹂を作ろう！のスクリプトで作ろうよ。

時間目

1043

がに触れたらは、と、のスクリプトから考えるに触れたということだよね。

そうだね。

ブロックのなかにを追加すれば、がに触れると得点が「1」ずつアップする。
その後、に瞬間移動してを実行したほうがいいじゃない。

がに触れ続けていると得点が「１」ずつ増え続けてしまうからね。
も入れよう。

いいね。の後にを追加して、「得点」の値をリセットするようにしたら完成だ。
完成したら、をタップした上で画面をタップし、「ゲーム開始」のメッセージを送りましょう。

44ちゃんと得点がアップした！

ワン！
おめでとうございます。横スクロールゲームの完成です。

﹁横スクロールゲーム﹂を作ろう！

やった ? ！

早く、ゲームやってみようよ！

時間目

10

湊にとって、はじめての横スクロールゲームだ。

45

何回かゲームをやったら、のジャンプのスクリプトを変更して、クリプトも遊べるようにしよう。
をでに変更するんだ。

がジャンプするようになるから、クリプトもゲームを楽しめるね。ありがとう、蓮。
ワオーン！

ハリネズミが向かってきた。

46

ジャンプでハリネズミを避けた。
﹁横スクロールゲーム﹂を作ろう！

時間目

10

宝石をゲットして得点もアップ！

47

完璧なジャンプ！

ハリネズミに触れてしまった。

48