. 【スクラッチ】アクションゲームを作ろう キャラ選択&画面切替
【スクラッチ】アクションゲームを作ろう キャラ選択&画面切替
【スクラッチ】アクションゲームを作ろう キャラ選択&画面切替

【スクラッチ】アクションゲームを作ろう キャラ選択&画面切替

【スクラッチ】アクションゲームを作ろう キャラ選択&画面切替 2025 9/08 スクラッチ入門 アクションゲーム スクラッチ 入門 簡単 2023年5月30日 2025年9月8日

この記事のポイント

・キャラクターの選択画面のつくり方を説明します・ステージの切替方法を説明します。

目次

はじめに キャラクター選択画面&ステージ切替を作りたい!

このシリーズは、縦スクロールアクションゲームを作りながらスクラッチプログラミングを学ぶシリーズです。

アクションゲームを楽しむ上で大切な要素の一つが、キャラクター選択画面です。

第2回のこの記事では、キャラクターを選択する画面のつくり方を説明します。また、キャラクターを選択したら、ゲームプレイ画面へ移す方法を説明します。

ろぼてく

ステージを変えれるようになると、飽きがこないゲームを作れるようになりますよ!

参考記事

前回記事

前回は複数の色違いキャラを配置する方法を説明しました。今回の記事では前回のプログラムを引き続き使います。

ファミプログ 【スクラッチ】アクションゲームを作ろう 色違いキャラを作る | ファミプログ この記事のポイント ・色違いのキャラクターのつくり方を説明します はじめに キャラクター選択画面に色違いキャラをおきたい! このシリーズは、縦スクロールアクション… スクラッチの始め方

スクラッチの始め方は以下リンク先でまとめています。初めての方、やり方を忘れてしまった方はぜひここから読んでみてください。

ファミプログ 【すぐできる】【簡単】スクラッチ(Scratch)のはじめ方 現役エンジニアが解説するスクラッチ入門。【今回のテーマ】5分で、スクラッチ(Scratch)プログラミングのを解説します。【対象者】プログラミングをこれから始めたいと思…

完成作品

今回の完成作品はこのようになります。緑色の旗ボタンを押すとプログラムが始まります。

使いたいろぼてくをクリックすると、使いたいろぼてくでゲームプレイ画面に移ります。

操作方法

  • 使いたいろぼてくをクリックします。
完成スクリプト 修正スプライト

<ろぼてく>

色違いのろぼてくの中から選んで、次のステージに移るようにプログラミングします。前回のスクリプトに以下のスクリプトを追加します。

スクラッチプロジェクト

スクラッチプロジェクトは以下です。プログラムや画像の素材は自由に使用してもらってOKです。

縦型スクロールアクションゲームを作ろう 第2回

作るモノ・コト(仕様)を決める

今回の作るモノ・コトは以下のとおりです。これをプログラムできればゴールです。

  • ろぼてくにマウスのカーソルを合わせると、ろぼてくが動く
  • ろぼてくをマウスでクリックすると、次のフィールド画面に移る
  • フィールド画面にはクリックした色のろぼてくを出現させる
  • ゲームプレイ画面のろぼてくのコスチュームは縦用にする
ろぼてく

はじめに作りたいモノをおおざっぱでもいいので、書き出すことがプログラミングで重要です。いきなりプログラムを組み始めるよりスムーズに進みます。

プログラミング

スプライトにマウスを合わせたときに動くようにする

マウスが合っているろぼてくをわかりやすくするために、ろぼてくにマウスが合ったときにろぼてくを動かします。

次のように動くように、前回のスクリプトにさらにスクリプトを追加します。

  • マウスのポインターがスプライトに触れたら
    • 角度を変える
  • マウスのポインターがスプライトから離れたら
    • 角度を戻す

クローンで作られたすべてのスプライトで同様のスクリプトを使いたいので、「クローンされたとき」ブロックに作ります。

動作確認

ここで動作確認をしてみます。それぞれのろぼてくにマウスのカーソルが当たったら、ろぼてくが傾けば成功です。

クリックしてキャラクターを選択する

クリックでキャラクターを選択できるようにします。

次のように動くように、スクリプトに追加していきます。

  • マウスでカーソルを当てているキャラクターをクリックすると、
    • 「出発!」というようにする。
  • どのキャラクターが選ばれたか判断するために、変数にクリックしたときのマウスの位置を入れる

後でどのキャラクターが選ばれたかを使いますので、ここでクリックされたx座標の位置として、変数「クリックx位置」に入れて保存しておきます。クリックx位置が確実に変わったかどうかを判断できるようにするために、クリックされない位置の値で初期化をします。今回はx ⁼ -300としました。

キャラ選択画面のスプライト(クローン)を削除する

次のフィールド画面に移る前に、キャラ選択画面のスプライト(クローン)をすべて削除する必要があります。

使いたいキャラクターがクリックされたかどうかは、変数:クリックx位置が-300より大きくなったかどうかで判断することができます。

次のように動くように、スクリプトを修正します。

  • 変数:クリックx位置が-300より大きくなったら、
  • ステージ2のメッセージを送る
  • クローンを削除する
動作確認

ここで一旦動作確認をします。

ろぼてくをクリックして、ろぼてくが「出発!」と言って、すべてのろぼてくが消えれば成功です。

また、クリックx位置もクリックした位置に変更されていれば成功です。

画面を移る

キャラクターを選んだら、いよいよゲームプレイ画面であるフィールド画面に移るようにします。

次のように動くようにスクリプトを追加してください。

  • メッセージ:ステージ2を受け取ったら、
  • 背景をフィールド画面に変更する
  • スプライトの再設定を行う
    • コスチューム、位置、大きさを再設定する
    • 色はキャラ選択画面で選んだ色で設定されるようにする。

x = -150付近でクリックされたら、青色x = 0付近でクリックされたら、緑色x = 150付近でクリックされたら、赤色と判断できます。

従って、

クリックx位置 < -100 であれば、青色にするクリックx位置 > 100 であれば、赤色にするそれ以外のときは、緑色にするというようにスクリプトを組みます。

ろぼてく

今回のプログラミングはこれで完了です!お疲れ様です!

動作確認

さいごに動作確認をします。

選んだ色のろぼてくで次のフィールド画面に移れたら成功です。

ろぼてく

赤ろぼてくがフィールドに現れていますね!

さいごに

今回の記事では、キャラクターを選んで、次の画面へ移るプログラミング方法を説明しました。

キャラクター選択と画面の切替はどんなゲームであるので、ぜひマスターしてくださいね!

次回

次回はスプライト(キャラクター)をキー操作で動かせるようにします。さらにずっと前に進んでいるように見せる方法も説明します。ぜひチャレンジしてみてください!

ファミプログ スクラッチ|アクションゲームを作ろう|キャラを動かす | ファミプログ この記事のポイント ・スプライト(キャラクター)をキーボードで動かす方法を説明します。 はじめに スプライトを動かせるようにしたい! このシリーズは、縦スクロール… 関連投稿:
  1. 【スクラッチ入門】【簡単】スクラッチ(Scratch)のはじめ方
  2. スクラッチ|オリジナルの絵でスプライトをつくる
  3. 【スクラッチ】重力・加速度を表現する ~リンゴを上手に落とす~
  4. スクラッチ|スイカゲームをつくろう|第1回|くだものを落とす
スクラッチ入門 アクションゲーム スクラッチ 入門 簡単 よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ろぼてく

現役エンジニア 歴12年。 仕事でプログラミングをやっています。 長女がスクラッチ(学習用プログラミング)にハマったのをきっかけに、スクラッチを一緒に学習開始。 このサイトではスクラッチ/プログラミング学習、エンジニアの生態、エンジニアによる生活改善について全力で解説していきます!

関連記事

📎📎📎📎📎📎📎📎📎📎