ゲーム

フォートナイトで全然勝てないので自作してみた | Webブラウザゲーム Node.js + Three.js

投稿日:2020年4月21日 更新日:

フォートナイト面白いですね。私もやっています。しかし全く勝てません。高価なスキンを纏ったプレイヤー達に瞬殺されまくっています。もう少し初心者も楽しめる仕様もあったら面白いのでは?、という思いからフォートナイトみたいなゲームを作ってみました。
また作成するにあたり、すでに世に公開されているフォートナイトのようなWebブラウザゲームをプレイしてみて色々と開発のヒントを得ました。

参考にしたフォートナイトみたいなブラウザゲーム

Webブラウザで遊べるフォートナイトのようなゲームはいくつか公開されています。
そのうち2つほど実際にプレイをしてみました。完成度の高さに驚かされます。

「1v1 lol」

ゲームURL: https://1v1.lol/

2021年現在、一番ヒットしているフォートナイトライクなゲームが「1v1」ではないでしょうか。最近私がプレイしたときはAsiaサーバに500人がいました。iOS、Android版も公開されていてとんでもないダウンロード数を記録しています。
ゲーム内容は建築バトル、Box Fight、小規模なゾーンウォーズ、クリエイティブと充実しています。キーバインドは本家フォートナイトとほぼ同じ設定が可能で操作は快適です。

私のプレイ実況動画です。


「Buildnow gg」

https://www.crazygames.com/game/buildnow-gg

2021年現在、まだ開発中と思われます。操作性は本家を良く踏襲しており、快適にプレイできます。さらにビジュアル面でもかなり本家に近い感覚を得られます。プレイ人口はEUのみに集中しており、私がプレイしたときはAsiaサーバーは私1人でした。ゲーム総合サイトに埋め込まれたβ版でしかプレイできなかったのですが、画面遷移時などにバグがありました。最新版があったら改めてプレイしたいところです。

私のプレイ実況動画です。



フォートナイトは単なるFPSゲームではなく、建築FPSゲームという新たなジャンルを生み出した印象です。

さて、上記ブラウザゲームで実装されている事は基本的には私にもできるはずです。完成度はだいぶ落ちるでしょうが頑張って作ってみましょう。

「ショーモナイノ」と「School Fight」を公開

【 ショーモナイノ / Shomonino 】

ゲーム作成未経験者の私が優良サンプルプログラムからスタートして、とりあえずバトロワゲームの形にしたのが第1弾の

ショーモナイノ/Shomonino(ブラウザゲーム) (Herokuデプロイ、USサーバー)

上記URLから無料で遊べます。
初めて作ったゲームなので記念に残しておこうと思います。
内容は10人で戦うオンラインバトロワゲームです。フォートナイトのように建築しながら撃ち合います。
人間プレイヤーが10人いない場合はボットさんが補填されます。ボットさん達のエイムは正確無比なのでビクロイするのはかなり難しいです。

ソースコードも公開しています。ご参考にしてください。

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

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

コード一式(GitHub)


作成時の私の本家フォートナイトの腕前が下手すぎたため、編集機能は組み込みませんでした。自分があまりにも馴染みのない機能は実装する気にならなかったのです。
プレイの様子はこちらの動画を参照ください。


【School Fight】

その後、フォートナイトのプレイ歴も一年を超え、建築編集の腕前もそれなりになったところで作成した改良版が「School Fight」です。

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

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

頑張って編集機能を追加しました。
しかし、デプロイ先がアメリカサーバのため数100ミリ秒のラグが生じてしまうため素早い建築編集操作に処理が追いついてきません。。。正直言ってまともにプレイできないのが現状です。現在、無料で利用できる日本サーバーを探しております。

— 追記 —
限定的ですが日本サーバー(Microsoft Azure、Google App Engine)でデプロイできました。
一日の稼働時間などに制限がありますが遊んでみてください。
制限がかかりサーバーが落ちているときはerror403等が表示されます。


方針としてはフォートナイトにスクールシミュレーターの要素を追加して、かわいい女の子たちが建築バトルを繰り広げる世界にしたいと思っています。
「1v1」を目標に現在も開発中です。

自作ゲームの存在意義、サンプルプログラム

フォートナイトのようなブラウザゲームとしては「1v1 lol」があるので、わざわざ私のゲームをプレイする人はいないでしょう。となると自作ゲームの存在意義は?となります。
そこで思い切ってソースコードを公開することにしました。まだまだ未完成なゲームですが、プログラミング初心者の方には良いサンプルプログラムになるのではと思います。

ゲームの作り方

参考までに概要を紹介。
Webにある優良サンプルからスタート。

使うのはJavaScriptとNode.jsだけ!30分で3Dオンライン対戦ゲームを作って公開してみた

これ、この時点でちょっとしたフォートナイトですね。私はそう思いました。すごいサンプルです。
これを頑張って自分の環境で動くようにしてHerokuで公開すれば完了です。あとはどれだけ本物に近づけるか。。。

自分で追加実装した要素

「弾丸と壁/人の接触判定」
式を自力で導出する必要はありませんが、話の流れは理解しておくと良いかもしれません。行列が出てきますがコード実装の際はただの四則演算になりますのでご安心を。これを実装できると弾丸ヒット判定(弾丸速度有無、ヘッドショット判定も)、建築に乗るなどを自由自在にできます。

ソースコード

サーバーサイド(server.js)


クライアントサイド(game-3d.js)

更新履歴

v1.2.0
弾丸と壁(プレイヤー)の衝突判定修正

v1.1.9
建築に階段を追加

v1.1.8
岩山、安全地帯を追加

v1.1.7
建築を「キー入力で半透明の仮表示後にクリックで置く」ように変更

v1.1.6
ボットにオートエイムを追加

v1.1.5
降下スタートを追加

1.1.4
ポーション(シールドアイテム)を追加

v1.1.3
包帯(回復アイテム)を追加

v1.1.2
床建築、建築のテクスチャーを追加

v1.1.1
上下方向の視点変更、射撃を追加

v1.1.0
しゃがみ打ち、ジャンプ、建築乗りを追加

v1.0.9
キャラクター、銃の描画を追加

v1.0.8
優勝(ビクロイ)画面を追加

v1.0.7
武器切替、リロード、スコープ、周囲景色などを追加

v1.0.6
しゃがむ動作を追加

v1.0.5
プレイヤー一覧&ライフゲージの表示を追加

v1.0.4
プレイヤー方向の表示、ライフゲージの表示を追加

v1.0.3
壁を射撃で破壊可能に。「q」で壁を建築。

v1.0.2
自分以外の射撃音も聞こえるようにしました。

v1.0.1
射撃音を追加、操作キーをフォートナイトっぽく変更、視点操作にポインタロックを導入。

現在もバージョン2を作成中。編集機能の実装に挑戦!

バージョン1はサンプルプログラムから改良していったためゲームとしてある程度の形にすることはできました。しかし接触判定なので元の方針との違いが出てきてしまいコード的に統一感のないものとなってしまいました。
これらの問題を解決し、もう少しフォートナイト感のあるものができないかと現在奮闘中です。
メインは「編集」機能実装への挑戦です。本家さながらにバリバリ建築編集しながら移動できたら最高ですね。
また、下記動画のようにボヤきながら進捗状況をYouTube動画で実況しています。機能をどういう方針で実装したかなども語っています。検証しながらいつの間にか遊んでしまっていることがほとんどで無駄に長い動画となっています。よかったらご覧ください。(チャンネル登録してくれたら嬉しいです。現在、登録者1名です。。。)
なるべく早い段階でソースコードを公開しようと思っています。

続きはこちらで


-ゲーム

執筆者:

関連記事

no image

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

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

弾丸と壁/人の接触判定を少し真面目に実装してみる|ゲーム作成

フォートナイトみたいなオンラインバトロワゲームを作っています。優秀なサンプルコードから作成を開始したので早い段階で一応形にはなりました。しかし、サンプルをいじりすぎて接触判定に矛盾が生じてきてしまいま …

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

1年半前くらいに簡易版フォートナイトをNode.jsとJavascriptで自作して放置していましたが、もう少し本家に近づけようと思いコードを改善し始めました。以前よりフォートナイトプレイの腕が上がっ …

今さらNode.js+Three.jsでゲームを作る理由 – なぜUnity, Unreal Engineでないのか

目次 目的を「コードを書いてゲームを作る」に絞る捨てる物余談、私自身の目的皆さんに言えるJavascriptでゲームを作るメリット 目的を「コードを書いてゲームを作る」に絞る ゲーム作成経験のない場合 …

Fortnite won’t launch. How to fix it? [Mac OSX/MacBook pro]

[Last verification: 2020/07/19 v13.20 ][Solution]Just update the Mac OSX to 10.15 (Catalina).With 10 …

スポンサーリンク