スクラッチでバトルフィールド風FPSゲームの作り方

上級

今回つくるゲーム

難易度4 out of 5 stars

今回はスクラッチでバトフィールド風FPSゲームを作っていきます。3D空間に敵が出現し銃で攻撃して討伐していきます。スクラッチの画面上に3D空間を作り、その中を動き回る敵をどのように討伐するのかを解説していきます。これができるとスクラッチ超上級者です。

まずは実際にゲームをプレイしてみてください。上下矢印キーで前進後退、左右矢印キーで回転、スペースキーで銃撃です。

youtube解説

こちらの動画ではわかりやすくバトルフィールド風ゲームの作り方を解説していますのであわせてチェックしてください。チャンネル登録もよろしくお願いします!

[3D FPS]スクラッチでBATTLEFIELD(バトルフィールド)風FPSゲームの作り方(#1)

はじめに

まず初めに以下のプロジェクトをリミックスしてください。こちらには今回のゲームを作るスプライトが全て用意されています

素材】BATTLEFIELD(バトルフィールド)3DFPSゲーム

スクラッチでバトルフィールド風FPSゲームの作り方

ゲーム作りの考え方

まずはゲーム作りの考え方を解説します。今回の3Dゲームはいきなり3D空間でゲームを作っていくわけではありません。まずは2Dのゲームを作ってそれを3Dに表現をしていくというのがポイントです。

スクラッチでバトルフィールド風FPSゲームの作り方

2Dのゲームを作る

2Dゲームの作り方解説動画

まずは3Dゲームの元となる2Dゲームを作っていきます。作り方の詳しい解説はYouTubeでも解説していますのでご覧ください。

[3D FPS]スクラッチでBATTLEFIELD(バトルフィールド)風FPSゲームの作り方(#2)

プレイヤーのコード

プレイヤーはダンジョンの中を自由に移動できるようにします。上下矢印キーで前進・後退、左右矢印キーで回転となります。「プレイヤー」のスプライトに移動して以下のコードを書いて下さい。

スクラッチでバトルフィールド風FPSゲームの作り方

銃弾のコード

次にプレイヤーから発射される銃弾のコードです。”銃弾”のスプライトに以下のコードを書いて下さい

スクラッチでバトルフィールド風FPSゲームの作り方

敵のコード

最後に敵のコードを書いていきます。今回ダンジョンマップ上に敵を15体配置します。クローンを使って、それぞれの敵が独自の動きをするようにします。

スクラッチでバトルフィールド風FPSゲームの作り方
スクラッチでバトルフィールド風FPSゲームの作り方


この中で以下の変数を作るときは”このスプライトのみ”にチェックをする必要があります。(クローンごとに違う数値を持つ必要があるため)

  • 敵ID
  • 敵HP
  • 敵の動く向き
ポイント

敵xリスト、敵yリストに入っている数字を変えることで敵を配置する位置を変更できます。また、今回は敵を15体作っていますが、300体までは増やすことができます。自分なりの敵の配置を作ってみましょう。

これで2Dゲームは完成です。これでもゲームとして成立します。2Dゲームとして遊ぶ場合は、プレイヤー、銃弾、敵のコスチュームを少し大きくしておくと良いでしょう。

2Dのゲームを3Dで表現する

ではここから今作った2Dゲームを3Dで表現していきます。

3Dの壁を作る(視線のコード)

まず3Dのコードを作っていきます。2Dで描いたダンジョンを3Dで表現していくのですが、考え方は、以下のようにプレイヤーの現在地から向いている方向を中心に−48°〜48°が視界だとして、視線の球を使って距離を調べていきます。その距離に応じてペンで壁の大きさと明るさを設定し3Dに見せていくのです。

スクラッチでバトルフィールド風FPSゲームの作り方

この部分については詳しくはこちらの記事で解説しています。

では、ここからコードを書いていきますが、まずはプレイヤーのコードに移動し、以下のように、ずっとの中に”視界を作って待つ”というメッセージを入れます。

スクラッチでバトルフィールド風FPSゲームの作り方

そこまでできたら、視線のスプライトに移動して以下のコードを書きましょう

スクラッチでバトルフィールド風FPSゲームの作り方

この時、注意があります。以下のように、「距離を調べる」「ペンで壁を描く」の定義を作るときには必ず”画面を再描画せずに実行する”にチェックを入れるようにしましょう。そうしないとリアルタイムに反映されません。

スクラッチでバトルフィールド風FPSゲームの作り方
スクラッチでバトルフィールド風FPSゲームの作り方

その上で、2次元で作成したゲームは全て見えなくしてしまします。ただし、隠してしまうと2Dのゲーム自体がなくなってしまうので、幽霊の効果で消すようにします。幽霊の効果を使うと、実際は見えてないですが、ゲームとしては動いている状態を作れます。以下のように2Dゲームに関わる全てのスプライトの幽霊の効果を100にしましょう。

スクラッチでバトルフィールド風FPSゲームの作り方
スクラッチでバトルフィールド風FPSゲームの作り方
スクラッチでバトルフィールド風FPSゲームの作り方
スクラッチでバトルフィールド風FPSゲームの作り方
スクラッチでバトルフィールド風FPSゲームの作り方

最後に銃を表示します。銃のスプライトに以下のコードを書きます。

スクラッチでバトルフィールド風FPSゲームの作り方

ここまでできたら🏴を押してプレイしてみましょう。3D空間を動くことができれば成功です。
スペースキーを押して銃の動きも確認しましょう。

3D空間に敵を出現させる

次に3D空間に敵を出現させていきます。ここが今回のゲーム作成の最難関となります。

プレイヤーから見た敵との距離・敵のいる方向を算出する

空間に敵を出現させるためにプレイヤーから見てそれぞれの敵との距離敵のいる方向を算出していく必要があります。以下がその考え方です。敵との距離は簡単です。スプライト同士の距離を測定するプログラムを使うだけです。難しいのはプレイヤーから見た敵のいる方向の算出です。以下のように算出されますが、詳しくはYouTube動画で解説します。

スクラッチでバトルフィールド風FPSゲームの作り方

これらを踏まえ、「敵距離リスト」と「敵のいる方向リスト」の二つのリストを作り、15体それぞれの敵がどれだけ離れてどの向きにいるのかを常に記録していきます。また、敵は常に動くので敵xリスト敵yリストの値も常に更新されるようにしましょう。
以下のコードを敵のスプライトに追加していきます。

スクラッチでバトルフィールド風FPSゲームの作り方

敵が見えるか、見えないか判定する

次に、敵が見えるか、見えないかを判定していきます。以下のように左の敵は見えますが、右の敵は壁に阻まれてプレイヤーからは見えないはずです。この違いをどのようにコードで書いていけば良いでしょうか。

スクラッチでバトルフィールド風FPSゲームの作り方

そのために用意したのが敵の視界というスプライトです。敵の視界の粒が常に敵からプレイヤーに向けて発射され、プレイヤーに到達すると見えているということになり、プレイヤーに到達する前に壁にぶつかると見えていないということになります。

スクラッチでバトルフィールド風FPSゲームの作り方

それを踏まえ、敵の視界のスプライトに以下のコードを書きます。

スクラッチでバトルフィールド風FPSゲームの作り方

敵の視界リストにそれぞれの敵が見えている場合は1、見えていない場合は0を入れていきます。
これで敵を出現させる準備ができました。

敵を出現させる

ようやく敵を出現させる準備ができたので、これらを踏まえて、敵キャラのコードを書いていきます。敵キャラのコードは以下の通りです。3Dの敵のy座標は0になりますが、敵のいる方向によって左右に移動します。視野は-48°〜48°でしたので、視野の左端にいるということは画面の端にいるつまりx=-240ということになるのです。また大きさは敵との距離が遠くなればなるほど小さくなるようにします。これは遠近法ですね。そして敵の視界が1の場合は表示しますが、0の場合は表示しないようにします。

スクラッチでバトルフィールド風FPSゲームの作り方

現在地の表示

これで基本的にゲームは完成ですが、実際に複雑なダンジョンの中を歩くときに、自分がどこにいるかが分からなくなってしまうので、zキーを押すとマップが出現するようにしたいと思います。
そのために以下のようにマップONOFFという変数を作り、それを幽霊の効果に代入してマップの表示・非表示をコントロールしていきます。
ゲーム管理に以下のコードを書きます。(このタイミングでタイムも入れています。)

スクラッチでバトルフィールド風FPSゲームの作り方

そしてそれぞれ以下のようにマップONOFFを代入します。

スクラッチでバトルフィールド風FPSゲームの作り方
スクラッチでバトルフィールド風FPSゲームの作り方
スクラッチでバトルフィールド風FPSゲームの作り方

ただ、プレイヤーがかなり小さくこのままでは現在位置が分かりづらいので現在地のスプライトに以下のコードを書きます。

スクラッチでバトルフィールド風FPSゲームの作り方

これで全てのコードが完成です。お疲れ様でした!

全てのコード

全てのコードはこちらから確認できます。

BATTLEFIELD(バトルフィールド)3DFPSゲーム

是非オリジナルのFPSゲームを作ってみて下さい。