完成版を動画で見る

アンダーテールは、アメリカ人の作曲家兼ゲーム開発者であるトビー・フォックス氏によってほぼ一人で開発されました。100万本以上の売り上げを記録した人気の作品です。こんなゲームが作れるようになりたいですね。

作品の全体像を確認する

主なスプライトと役割

このゲームで重要なスプライトについて説明します。

① スプライト「フレーム」の役割

スプライト（ハートと敵の攻撃）が、フレームの外に出ないようにするために用意します。

② スプライト「ハート」の役割

ハートは、プレイヤーのことです。上下左右に移動して、敵の攻撃から逃げます。敵の攻撃に当たるとHP が減っていき、ゼロになると「ゲームオーバー」になります。

③ スプライト「敵の攻撃」の役割

敵の攻撃を3種類作成します。

プログラミングをしよう

まずは、元になる作品をリミックスします。コスチュームや音などの素材が入っているよ。

https://scratch.mit.edu/projects/947360061/

scratch.mit.edu

①「フレーム」をプログラミング

コスチューム

プログラムの流れ

フレームの範囲を設定するだけです。

プログラムの中身

(1). フレームの範囲を設定

「x座標の上限」、・・・、「y座標の下限」といった変数は、「すべてのスプライト用」で作成します。ハートや敵の攻撃といったスプライトでも、この変数を利用したいからです。

サトシ先生

設定する値は、フレームの位置やサイズによって異なります。みんなの作品に合わせてくださいね。

ポイントを解説

フレームは、箱のようなものです。ハートが箱の外に出ないように、範囲を指定します。そのために、x座標の上限と下限、y座標の上限と下限を利用します。上限や下限を超えて移動しようとしたときに、超えないようにプログラム（移動前の位置に戻す、など）します。

②「ハート」をプログラミング

コスチューム

プログラムの流れ

左に移動する、上に移動する、下に移動する、の処理は記載していません。右に移動する、とほとんど同じなので省略しています。

プログラムの中身

(1). 最初の状態を設定

(2). 上下左右の移動

(3). 敵の攻撃に当たったとき

ポイントを解説

サトシ先生

上下左右の移動について詳しく解説します。

右に移動するときのプログラムを考えます。まず、x座標とはスプライトが横方向のどの位置にいるかを表すものです（y座標は縦方向の位置を決めるものです）。

右に移動するときに大事なのは、フレームの右端から出ないようにすることです。フレームの右端は「x座標の上限」の値です。

ハートが 「x座標 = 185」の位置にいたとします（上図）。 この状態で右に移動すると、x座標が 10 変わるので「x座標 = 195」になります。これは「x座標の上限」を超えた値、つまりフレームからはみ出した状態です。フレームからはみ出さないように、「x座標 = x座標の上限（190）」に戻します。

上に移動するときは「y座標の上限」、下に移動するときは「y座標の下限」、左に移動するときは「x座標の下限」を使います。

③「敵の攻撃」をプログラミング

サトシ先生

敵の攻撃は3種類あります。ここでは「トリエルの攻撃2」について詳しく見ていきましょう。

コスチューム

コスチューム名：1

コスチューム名：2

コスチューム名：3

プログラムの流れ

プログラムの中身

最初の状態

攻撃する

ポイントを解説

「トリエルの攻撃2」のポイントは、クローンを作ったときに次の 3つのスクリプトが実行されることです。

• 見た目を変えるためのスクリプト
• 左右に揺れるためのスクリプト
• 画面の下に落ちていくスクリプト

これを一つのスクリプトにまとめようとすると大変です。処理の内容ごとにスクリプトを分けると、難しい動きも簡単にプログラミングすることができます。

④ その他のスプライト

トリエル

コスチューム

プログラムの中身

上矢印

コスチューム

プログラムの中身

下矢印

コスチューム

プログラムの中身

右矢印

コスチューム

プログラムの中身

左矢印

コスチューム

プログラムの中身

トリエルの攻撃1

コスチューム

コスチューム名：1

コスチューム名：2

コスチューム名：3

プログラムの中身

トリエルの攻撃3

コスチューム

コスチューム名：短い骨

コスチューム名：長い骨

プログラムの中身

結果

コスチューム

コスチューム名：ゲームクリア

コスチューム名：ゲームオーバー

プログラムの中身

よくある質問

Q1. フレームの枠からズレて移動しています

コスチュームが中心に配置されていないためだと思います。下図のように、①「コスチュームの x座標と y座標の値を 0」にして、②「画像を中心に移動」させてみてください。

まとめ

サトシ先生

完成した作品は後日公開します。

【はじめに】完成した作品を見る

フルーツの進化の順序は次の順番にしました。

　「イチゴ」⇒「リンゴ」⇒「バナナ」⇒「スイカ」

動画で確認する

コードの中身を確認する

主なスプライトと役割

① プレイヤー

「次に落とすフルーツを選ぶ」と「フルーツを落とす」の２つのブロック定義を作成します。

「緑の旗が押されたとき」、ブロック定義「次に落とすフルーツを選ぶ」を実行して見た目を変えます。プレイヤーが「地面に落ちるフルーツ」のいずれかと当たったらゲームオーバーとします。「プレイヤーが押されたとき」、表示されているフルーツを落とします。

② 地面に落ちるフルーツ

下図の赤枠の部分は、フルーツをどこに表示させるかというコードです。同じ種類のフルーツ同士が当たって進化する場合は、フルーツ同士が当たった場所に進化後のフルーツを出現させます。プレイヤーが上から落とすフルーツの場合は、「プレイヤー」のいる位置にフルーツを出現させます。

青枠の部分は、地面に触れるまで下に落ちていくコードです。落ちながら、他のフルーツに触れるかどうかチェックしています。もし触れた場合は、「このスクリプトを止める」を実行して、下に落ちるのを止めています。

下図は、フルーツの進化に関するコードです。進化する場合は、「進化前のx座標」と「進化前のy座標」に今のフルーツの座標を保存します。進化後のフルーツの最初の位置は、保存した座標にします。

下図のコードは「リンゴ」のスプライトのコードです。「リンゴ」同士に触れたかどうか確認し、進化する場合は、「バナナのクローンを作る（赤枠内の一番したのブロック）」ようにしています。「イチゴ」や「バナナ」、「スイカ」のスプライトもほとんど同じコードですが、何に触れたか、といった条件や進化するフルーツが変わります。

【詳しく】プログラムの解説

① プレイヤー

プレイヤーのコスチュームは、下図の赤枠内の３つ（イチゴ、リンゴ、バナナ）用意します。

② 地面に落ちるフルーツ

サトシ先生

ポイント①：同じ種類のフルーツに触れたかどうかのチェックは下記の記事が参考になります。

自分のスプライト（クローン）との当たり判定をチェック

今日のポイントスクラッチのバグ？を利用するサトシ先生自分のスプライトとの当たり判定をチェックしたいときってありますよね。実はスクラッチのバグを利用すると簡単にできるんですよ。問題点スクラッチには、自分自身に当たったかどうかを判定するブロック...

scratch.earth-shop.net

2023.12.06

サトシ先生

ポイント②：進化を重複して実行しないように、「進化する？」という変数を使います。「進化する？＝No」のときだけ進化の処理をします。進化の処理をする際、初めに「進化する？＝Yes」に変更することで、次の処理は進化の処理を実行しないようにしています。

【やってみよう】プログラミング

リミックスしよう

下記のプロジェクトをリミックスして、スイカゲームを完成させよう！コスチュームは全て用意しているよ。穴埋めになっているプログラムを、解説などを参考にして埋めていこう。難しい場合は、「コードの中身を確認する」に答えがのっているよ。

https://scratch.mit.edu/projects/938067660/

scratch.mit.edu

まとめ

サトシ先生

完成した作品はこちらです。

https://scratch.mit.edu/projects/935309542/fullscreen/

scratch.mit.edu

サトシ先生

自分のスプライトとの当たり判定をチェックしたいときってありますよね。実はスクラッチのバグを利用すると簡単にできるんですよ。

問題点

スクラッチには、自分自身に当たったかどうかを判定するブロックがありません。下図を使って説明します。

ネコ（Cat）のスプライトで、自分自身と当たったかどうかを判定したいとします。自分のスプライトと当たったかどうか判定するために、「●に触れた」ブロックを使います。

青枠内の中からスプライトを選ぶのですが、「ネコ」のスプライトが存在しません。このように、自分自身との当たり判定をチェックするブロックはないのです。

解決策

しかし、解決策があります。「ネコ」のコードの中に、「ネコに触れた」というブロックはないのですが、他のスプライトのコードの中には「ネコに触れた」というブロックがあります。なんと、そのブロックをネコのスプライトにコピーして使うのです。

まず、ネコ以外のスプライトを選択します。ここではスイカを選択しました。スイカの中には、「ネコ（Cat）に触れた」というブロックがあります。

このブロックを、ドラッグ＆ドロップやコピー＆ペーストするなどして、ネコのスプライトにコピーします。

こうすることで、ネコのスプライトの中になかった「ネコに触れた」ブロックが使えるようになります。

まとめ

クローンには、次の３つのポイントがあります。ひとつずつ丁寧に解説していきます。

同じスプライトを画面に複数表示させたいときに使う

クローンを実行すると、クローンしたスプライトと同じものが画面上に表示されます。

「クローン」というボタンを押すと、「ネコ」のスプライトがクローンされるように作りました。コードは次のようになります。

「クローン」ボタンのコード

上図のように別のスプライトのクローンを作ることもできますし、自分自身のクローンを作ることもできます。

「ネコ」のスプライトのコード

クローンは同じ場所に作られるので、下記のようにクローンされたら「どこかの場所へ行く」ようにしました。こうすることでクローンが作られたことが分かりやすくなります。

まとめ：同じスプライトを画面に複数表示させたいときに使う

クローンを利用すれば、敵キャラクターをたくさん増やしたり、アイテムをいくつも画面上に並べたりすることができます。

クローンは同じスクリプトを実行する

「ネコ」のスプライトのコード

「ネコ」のスプライトに、下記のようなコードを追加しました。「ネコ」のスプライトが押されたときに「x座標」を2秒言ったり、上や下の矢印キーを押すとその向きに移動するようなコードです。

実行結果

「ネコ」のクローンを複数作って、このコードを実行してみました。

動画の動きを確認しましたか？すべてのクローンが上に移動したり、下に移動したりしていますね。

まとめ：クローンは同じスクリプトを実行する

コードは、クローンごとに複数作成する必要はありません。みなさんが今までやってきたように、スプライトに対してコードを作成していけばいいのです。

クローンごとに変数を持つことができる

概要

「クローンごとに変数を持つことができる」とはどういうことでしょうか。

実は、先ほどの「② クローンは同じスクリプトを実行する」で使っています。答えは、ネコの「x座標」です。「x座標」は、ネコの位置を決める変数です。クローンごとに「x座標」を持つことができるので、色々な場所にクローンを置くことができるのです。

もし、「x座標」がクローン全体で共有する変数だったとします。そうすると、あるクローンの「x座標」を変えたときにその他の全てのクローンも同じ「x座標」に移動することになります。

このように、クローンごとに値を持つことができる変数のことを「インスタンス変数」と呼びます。一方で、スプライト全体で共有して値を持つ変数のことを「グローバル変数」と呼びます。

スクラッチでクローンを使ったゲームを作る際に、この二種類の変数を使い分ける場面がでてきます。一緒に確認してみましょう。

変数の作り方

作成したクローンの総数を数えたいとき、クローンごとにその変数を持つ必要はありません。スプライト全体で共有したほうがいいですね。下図の赤枠のように「すべてのスプライト用」にチェックを入れて変数を作成します。こうすることで、「クローンの数」という変数はグローバル変数として使えるようになります。

次に、クローンを作っていった順に、クローンに番号をつけたいこともあります。この場合は下図のように、「このスプライトのみ」にチェックを入れて変数を作成します。これで、「番号」はインスタンス変数として使えるようになり、クローンごとに異な番号をつけることができます。

「ネコ」のスプライトのコード

ネコがクローンされたとき、「クローンの数」を1ずつ増やします。そして、「番号」の中身を「クローンの数」にします。こうすることで、ネコがクローンされる度にクローンの数が増えていき、ネコのクローンに「番号」を1から順に割り当てることができます。

実行結果

「番号」は、クローンごとにもつことができるインスタンス変数として作成しています。クローンごとに「番号」が割り当てられており、クローン自身の「番号」を表示します。

一方で、「クローンの数」はグローバル変数です。グローバル変数は、スプライト全体で共有して使う変数です。そのため、「クローンの数」を表示させると、どのクローンにおいても同じ値を表示していることがわかります。

まとめ：クローンごとに変数を持つことができる

インスタンス変数とグローバル変数の違いはわかったでしょうか。どちらがいい、どちらが悪い、ということではなく、その変数の使われ方に応じて適切な変数の種類を使えるようになることが大事です。

どちらにするか迷った場合はなるべくインスタンス変数（「このスプライトのみ」にチェックを入れて変数を作成する）を使うようにしましょう。理由が知りたい方は、「オブジェクト指向　カプセル化」といったキーワードでネット検索してみてください。

完成した作品を見る

初めの３回のジャンプは簡単に作ることができるのですが、カクカクとぎこちなくジャンプします。４～６回目のジャンプは連続した動きをするなめらかなジャンプをしますが、作るのが少し難しいです。

どちらの方法でも作れるようにトライしてみよう！

簡単なジャンプの作り方

プログラミングの流れ

フローチャートを使ってプログラミングの流れを示します。

プログラミングする

STEP①：ブロック定義を作る

「ジャンプする」というブロック定義を作ります。

STEP②：「ジャンプする」のプログラミング

フローチャートを見ながらプログラムを作成してみましょう。下図のようになると思います。

STEP③：「スペース」キーが押されたときにジャンプする

ここまでできれば、「ジャンプ」のプログラミングの完成です。「スペース」キーを押して、ジャンプするか確かめてみよう。

なめらかジャンプの作り方

プログラミングの流れ

フローチャートを使ってプログラミングの流れを示します。

プログラミングする

STEP①：ブロック定義を作る

「なめらかジャンプ」というブロック定義を作ります。

STEP②：「なめらかジャンプ」のプログラミング

フローチャートを見ながらプログラムを作成してみましょう。下図のようになると思います。

STEP③：「上向き矢印」キーが押されたときにジャンプする

「緑の旗が押されたとき」、このプログラムの初期値（地面のy座標の値）をセットします。「上向き矢印」キーを押すとどうなりましたか？最初に作った「ジャンプする」と動きを比べてみましょう。

まとめ

なめらかにジャンプする仕組みは、カクカクとジャンプするものとどう違うのでしょうか。

下図のように、ジャンプしたときにいつも同じ距離だけ移動するように作ると、カクカクとジャンプするようになります。直線的な動きになります。

次に、なめらかにジャンプする様子を下図に示します。ジャンプのてっぺん付近では、移動する距離が少なくなっています。また、落ちていくにつれて移動する距離が伸びていっています。前の図と異なり、曲線的になっているのがわかると思います。

このように、移動する距離を変化させることでなめらかで自然なジャンプをプログラミングすることができます。

サトシ先生

今回作成した作品はこちらです。

https://scratch.mit.edu/projects/927718629/fullscreen/

scratch.mit.edu

完成した作品を確認

プログラミングの手順

作成する順番（全体像）

ネコのコスチュームは2つあるよ。どちらも「歩いている」コスチュームだよ。コスチュームの調べ方は、下の左の画像を参考にしてみてね。

イヌのコスチュームは3つあるよ。1番目（dog2-a）と2番目（dog2-b）のコスチュームは「歩いている」コスチュームだね。3番目（dog2-c）のコスチュームは「びっくりしている」コスチュームかな。「歩いている」コスチューム以外のものが含まれていることに注意しよう。

STEP①：ネコのコードを完成させる

「つぎのコスチュームにする」を使って、アニメーションをつけるよ。

STEP②：イヌのコードを完成させる

歩いているコスチューム「1番目（dog2-a）と2番目（dog2-b）」を交互に表示するようにするよ。「もし～なら●●、でなければ■■」というブロックを使うよ。

応用：コスチュームには番号と名前がついています

ステップ②では、コスチュームの「名前」を使ってコードを書いています。コスチュームの「番号」を使ってアニメーションを作ることもできるんですよ。

コスチュームの番号と名前の確認方法は下図の通りです。

番号を使うコードは次のようになります。

サトシ先生

コスチュームの「名前」を使うコードと「番号」を使うコード、どちらがいいと思いますか？君の考えを教えてください。

まとめ

サトシ先生

今回作成した作品はこちらです。

https://scratch.mit.edu/projects/923333395/

scratch.mit.edu

改良前の問題点

サトシ先生

タブレットに表示されているボタンを「押したときだけ」しか、スプライトが移動していませんでした。ボタンを「押し続けている間」は、スプライトが移動し続けてほしいことがありますよね。

改良した作品を確認

シロクマ生徒

ボタンを押している間、ずっとスプライトが動くようになりましたね！

プログラミングの手順

作成する順番（全体像）

STEP①：スプライト「ネコ」のコードを書く

滑らかに移動するようにコードを書きます。「ずっと」ブロックを使うところがポイントです。

STEP②：スプライト「右矢印」のコードを書く

STEP①と同じように、「ずっと」ブロックを使って滑らかに移動するようにします。

また、このスプライト（矢印のボタン）が押されたときに、メッセージ「右に移動」を送ることでネコが移動するようにします。こうすることで、キーボードでもタブレットでも遊べるゲームが作れます。

サトシ先生

「マウスがおされた」という条件はどうして必要でしょうか。これがなかったときはどのような動きになるか確認してみましょう。

まとめ

サトシ先生

今回作成した作品はこちらです。

https://scratch.mit.edu/projects/923051278/

scratch.mit.edu

完成した作品を確認

プログラミングの手順

作成する順番（全体像）

準備：リミックスする

まずは、次の作品「#1左右に移動する」をリミックスします。マリオが、右や左に移動できます。

https://scratch.mit.edu/projects/817814830/

scratch.mit.edu

STEP①：コースのコスチュームを作成する

下図の地面ブロック（ファイル名：ground.png）をダウンロードして、スクラッチにアップロードします。

下図のように、スプライトの「コスチューム」タブをクリックすると、コスチュームを編集する画面が表示されます。画面内にある描画ツール（ペンや消しゴム、塗りつぶし、など）を使って、コースを作成します。

STEP②：次のステージに進めるようにする

マリオが右端まで移動したときの、x座標を確認します。下図の場合、「245」です。

マリオが右端まで移動したときに、次のステージに進めるようにプログラミングします。下図の赤枠内の値には、先ほど確認したマリオが右端に移動したときのx座標を入力します。また、次のステージを表示するために、スプライト「コース」にメッセージを送る必要があります。

スプライト「コース」に、メッセージ「次のステージ」を受け取ったときのプログラムを書きます。ブロック「つぎのコスチュームにする」を使うことで、次のステージを表示します。コースは3つまでしか作っていないので、最後のコースまで進んだ時は「ゲームクリア」とします。

ゲームクリア時の音を用意しています。左のリンクからダウンロードして使ってください（ファイル名：stage_clear.wav）。

STEP③：マリオが空中にいるときは、地面に落ちるようにする

コースに触れるまで（地面に着地するまで）、マリオが下に落ちていくようにします。

まとめ

サトシ先生

今回作成した作品はこちらです。

https://scratch.mit.edu/projects/846655544/

scratch.mit.edu

シロクマ生徒

サトシ先生

はい！「マリオ」と言えばテレビゲームの代名詞といえるぐらい有名ですからね！ぜひチャレンジしてみましょう♪

完成した作品を確認

動きを動画で確認する

コードを確認する

①：チビマリオ

コスチューム

「立っているマリオ」と「歩いているマリオ」の2つのコスチュームを使って、左右の移動を表現します。

スクリプト

「緑の旗」が押されたとき、マリオの位置やコスチュームなどの初期設定をします。

「ずっと」ブロックを使用して、キー入力を監視します。また、ブロック定義などを使って、スクリプトを見やすくしています。

プログラミングの手順

動画の解説をみる

テキストの解説をみる

STEP①：リミックスする

次の作品をリミックスします。

https://scratch.mit.edu/projects/815442580/

scratch.mit.edu

STEP②：ゲームの初期設定をする（緑の旗がおされたとき）

マリオの位置を設定します。

BGMが流れるようにします。

STEP③：右矢印キーが押されたときに、右に進むようにします

マリオを滑らかに移動させるために、「ずっと」ブロックを使用してキーボードの入力を監視します。滑らかに動かすための方法は、次の記事が参考になります。

【検証】滑らかに動かす方法（キーリピート機能）

キャラクターが移動が、カクカクしていて滑らかに移動しないことがありませんか？それは、キーボード入力時に働く「キーリピート機能」が原因かもしれません。この機能をオフにすることはできませんが、スクリプトを工夫すれば解決することができます。

scratch.earth-shop.net

2023.03.02

コスチュームを変えることで、歩くアニメーションを表現します。

STEP④：左矢印キーが押されたときに、左に進むようにします

マリオが滑らかに移動するように、「ずっと」ブロックを使ってキー入力を監視します。

コスチュームを変えることで、歩くアニメーションを表現します。

「●度に向ける」ブロックを使って、画像の向きを変えます。

STEP⑤：スクリプトを見やすくします

左右に移動する、という処理をブロック定義を使って1つにまとめます。

共通する処理があるので、1つにまとめられるか検討します。

まとめ

シロクマ生徒

今日の説明は前回までの説明より分かりやすかったです（「フォートナイトの作り方」のこと）！

サトシ先生

はい、説明の仕方を少し工夫してみました。まだ分かりにくいところはありますか？どういった説明がわかりやすいか思いついた方は、「しつもん」ページから教えてくださいね！

まずは、基本のプログラムを作成しよう！まずは、マリオが左右に移動できるようにしよう。

【スーパーマリオ】左右に移動する

スーパーマリオをスクラッチで作っていきましょう！第一回目は、マリオが右に左に移動できるようにします！

scratch.earth-shop.net

2023.02.25

次に、マリオが走り回るコースを作成しましょう。簡単な方法で、重力をプログラミングします。

【スーパーマリオ】コース（地面）を作成する

第二回目は、マリオのコースを作成します！空中にいるときに地面に向かって落ちていくプログラミングをします。

scratch.earth-shop.net

2023.05.07

応用編

基本のプログラムができたら、
気になる機能を追加してみよう！