ゲーム

Webブラウザ版フォートナイト?を自作してみた(その2)|Node.js + Three.js

投稿日:2021年10月24日 更新日:

1年半前くらいに簡易版フォートナイトをNode.jsとJavascriptで自作して放置していましたが、もう少し本家に近づけようと思いコードを改善し始めました。
以前よりフォートナイトプレイの腕が上がった事もあり、自作版でも本家同様のプレイができたらいいなと思いました。よって高速で建築、編集するプレイを再現することを主目的としました。
また、本プログラムはある程度完成したらソースコードを公開して、プログラミング初心者の方々にサンプルとして活用してもらおうと考えています。

ゲーム名は「School Fight」

以前は自虐的に「ショーモナイノ」としていましたが、しっかりとした物に仕上げたいので名称を変更することにしました。世の中ではスクールシミュレーターというジャンルのゲームが大当たりしているようです。そこで、制服を着た可愛い女の子たちがフォートナイトのようにバトロワを繰り広げる世界観にして「School Fight」としました。

School Fight(ブラウザゲーム)  (Herokuデプロイ、USサーバー)

School Fight(ブラウザゲーム)  (Google App Engineデプロイ、日本サーバー)

※ロードに30秒ほどかかります。その他バグ満載ですが、一応遊べます。
 興味のある方はリンク先へ飛んでみてください。

開発進捗

実況動画はこちら。ブツブツとぼやきながら動作確認しています。
チャンネル登録してもらえると嬉しいです。(現在登録者数3人です。。。)

やった事
・Json通信量の削減
・接触を簡易物理エンジンで表現(接触バネ+ダンパー)
・高FPSでプレイ(最大200FPS)
・3Dモデルの使用(GLTFLoader)
・弾丸をRay方式に(弾速なしで即時当たる)
・建築編集機能の追加
・ターボ建築機能の追加
・人と建築の接触判定の見直し(行列方式を使用)
・Three.js座標系への変換箇所の見直し

サンプルプログラムとして学べる要素

例題プログラムとして学べる主な要素を以下に挙げます。

・Node.jsによる通信
・3次元ゲームの基礎
・Ray交差判定の方法
・3Dモデルの使用方法基礎
・簡易的な物理エンジン

私自身、プログラミングに関しては本を読んで学んだ事はほとんどないため、サンプルコードとしてはあまり出来の良いものではないかもしれません。しかし私は「実際に動作する」事を重要視しています。実際に動くコードを用いて学んでもらい、間違っている個所については各自で修正をお願いしたいと思います。

サンプルを土台にオリジナルゲームを作成

3Dモデルを好きなものに差し替えるだけでオリジナルゲームへと発展させる事ができます。
また、キャラをガンダム的なロボットへ、建築をバリアへ変更すれば新しいロボットバトロワゲームが作成できるかもしれません。

プログラム解説

3Dモデルの使用 – Blenderと連携

以前よりやりたかった3Dモデルの使用を実現できました。3Dモデルの作成、修正はBlenderで行います。BlenderにてglTF形式(glb)でモデルをエクスポートし、Three.jsにてTHREE.GLTFLoaderによりインポートできます。さらにTHREE.AnimationMixerでアニメーションの再生も容易に行うことができます。Blenderにてキャラクターの待機状態、走る、構える、撃つなどの基本動作を数個作成するだけで、グッとゲームらしさが増します。

建築の編集機能

フォートナイトの醍醐味である編集機能の実装を行いました。基本的にはRayを飛ばす機能さえあれば特に難しいことはないと思われます。編集後の形状をどう表現するかでプログラムの量が変わってきそうです。かなり頭を使いましたが結果的にかなりのコード量となってしまいました。
1v1.lolやBuildnow ggでは本家フォートナイトとほぼ同等の建築編集操作を行えます。私もプログラム作成にあたり、フォートナイトと比較して違和感なくプレーできることを目標にしました。具体的にはプレイ技術の見せどころである連続編集技が行えるかどうかを重要視しました。

Json通信量の削減

執筆中

-ゲーム

執筆者:

関連記事

ライフゲームをWebブラウザで遊ぶ Conway’s Game of Life – Javascript (ソースコード公開あり)

ブラウザで遊べるライフゲーム(Conway’s Game of Life)を作成してみました。緑の自セルを配置して赤い敵セルを消してみましょう。基本的なパター …

no image

ショーモナイノ/ ソースコード(サーバーサイド)

ショーモナイノのコードを公開していないかとのお問い合わせを頂きました。GitHubでの公開を検討しましたが、書き散らかした粗末なコードをGitHubに置くべきではないと判断しました。代わりに自分のブロ …

エピックのアップル提訴問題 じゃあフォートナイトフォン作っちゃいなよ

8月13日、フォートナイトの開発元の米エピックゲームズがスマホアプリ課金システムなどが独占に当たるとして米アップルと米グーグルを提訴したそうです。現在、多数のフォートナイトプレイヤーYouTuberの …

no image

ショーモナイノ/ ソースコード(クライアントサイド)

サーバサイドのソースコードを公開したところ、結構ビュー数が伸びているようです。なのでクライアントサイドも公開しておきます。何かの役に立てればと思います。 内容はとんでもないジャンクコードとなっています …

240Hzゲーミングモニターの勧め – 目に優しい?閃輝暗点の予防策

オンラインPCゲームにはまってしまい、ついには高価な240Hzゲーミングモニターを購入してしまいました。機種名は「Acer ゲーミングディスプレイ Nitro VG252QXbmiipx 24.5型ワ …

スポンサーリンク