ゲーム

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

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

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


「ショーモナイノ」と「Cute Fight」を開発

【Cute Fight】

現在も稼働している方を先にご紹介します。
フォートナイトのプレイ歴も一年を超え、建築編集の腕前もそれなりになったところで作成したのが「Cute Fight」です。下記リンクから無料で遊べます。オンラインバトロワなのでお友達を誘って遊んでみて下さい。

Cute Fight (ブラウザゲーム)  PC、ChromeBookで遊べます。
Cute Fight (Androidアプリ版) Play Storeから無料DLできます。
Cute Fight (iPhoneアプリ版) App Storeから無料DLできます。


頑張って編集機能を追加しました。
費用の問題で日本のサーバーで公開する事ができていない状況です。第一弾は
アメリカサーバで公開しました。数100ミリ秒のラグが生じてしまうため素早い建築編集操作は厳しい状況です。第二弾としてシンガポールサーバーで公開しました。こちらは100ms弱のラグとなり、ある程度、編集も楽しめるようになってきました。
ゲームの方向性は様々な環境的な制限と共に現在も右往左往しております。当初の方針としてはフォートナイトにスクールシミュレーターの要素を追加して、かわいい女の子たちが建築バトルを繰り広げる世界にしようと思っていました。しかし描画負荷の問題から断念して、現在はプリミティブな図形で描けるかわいらしいキャラが戦う世界になっています。
プレイヤー登録機能を追加して撃破ポイントのランキングで競えるようにしました。是非とも遊んでみて下さい。


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

— 追記2 —
Microsoft Azure、Google App Engine ともに公開終了しました。
無料期間が終了しました。

— 追記3 —
サーバーサイドの処理速度に限界を感じ、Node.jsからGo言語に移行しました。

— 追記4 —
2022/11:前身のSchool Fightの公開を終了しました。
使用していたサーバーサービスが終了しました。

— 追記5 —
2023/03 Androidアプリ版をリリースしました。 Cute Fight (Android版)
以前からスマホでもプレイする事はできましたが、ブラウザでのプレイは色々と不便なことがありました。Android用に作成したことで全画面表示が可能になり快適に遊べます。

— 追記6 —
2023/04 iPhoneアプリ版をリリースしました。 Cute Fight (iPhoneアプリ版)


【 ショーモナイノ / Shomonino 】

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

残念なことに使用していたサーバーがサービス終了となったので公開は終了しました。
プレイの様子は上の動画を参照ください。

内容は10人で戦うオンラインバトロワゲームです。フォートナイトのように建築しながら撃ち合いま
人間プレイヤーが10人いない場合はボットさんが補填されます。ボットさん達のエイムは正確無比なのでビクロイするのはかなり難しいです。

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

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

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

コード一式(GitHub)


作成時の私の本家フォートナイトの腕前が下手すぎたため、編集機能は組み込みませんでした。自分があまりにも馴染みのない機能は実装する気にならなかったのです。

ゲームの作り方

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

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

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

自分で追加実装した要素

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

ソースコード

ご要望があったのでソースコードを公開しました。

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


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

ショーモナイノ更新履歴

現在は開発、公開共に終了。

v1.2.1
感度調整の追加

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
射撃音を追加、操作キーをフォートナイトっぽく変更、視点操作にポインタロックを導入。

現在も「Cute Fight」を作成中。編集機能の実装!

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

続きはこちらで


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

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ゲームという新たなジャンルを生み出した印象です。

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

-ゲーム

執筆者:

関連記事

Microsoft AzureでNode.jsゲームをデプロイ – web.configを忘れるな

Node.js+Three.jsでフォートナイトのような建築FPSゲームを自作しております。Paasサービスは手軽で太っ腹なHerokuを利用していますがサーバーがアメリカにあるため通信ラグに悩まされ …

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

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

no image

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

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

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

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

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

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

スポンサーリンク