More than 3 years have passed since last update.

オンラインゲーム(GunZ)のマップをWEBに移植してみた【Three.js】

Posted at 2021-09-05

ってことでタイトルにもある通り

GunZ The Duel (or GUNZWEI) っていう
昔流行ったオンラインTPSゲームのマップをwebに移植してみたので
デモ貼っておきます。
自分は今大学生ですが、昔GunZよくプレイしていました

GunZ, GUNZWEIを愛した人たちに届けばと思ってデモ置いていきます

エピソードとか書こうと思いましたが
みんなが見たいのは結果の部分だと思うので先にそれをお見せします

移植したデモ、コード

WEBでThree.jsを使ってGunZのマップを描画したものです

デモURLが以下になります。（なぜかスマホでは見れなかった）
Demo URL: https://gunz.sigr.io/test/web-world/

あまりキレイとはいえないソースコードもあります
Codes: https://github.com/LostMyCode/three-gunz/tree/master/test/web-world

このプロジェクトのGithubリポジトリ
https://github.com/LostMyCode/three-gunz

少しでも興味を持っていただければ幸いです

前提として投稿主は3Dゲームに関する知識皆無でした。（つい一週間前まで）
Polygon？Vertex？Geometry？Mesh？聞いたことだけあるけど何？状態

でも昔遊んだ GunZが今でも大好きで、web移植するという謎の挑戦をしてみることにしたのです。

GunZはダウンロードしてプレイする形のガチなオンラインゲームです
独自のゲームエンジンで開発され、コードも大部分はC++なのでWEBと互換性が全くなし。

ゲームのマップファイルも独自のもので、そのまま3Dデザイナで開いたりすることは不可能でした。

.RSや.bspはバイナリで、独自の形式のため読むのは困難だった。

GunZはエミュ鯖というものが存在します。
ゲームよくやる方はご存知の、個人が運営してるサーバーです。

GunZもソースコードがどこからかリークしたせいで
エミュ鯖が乱立したゲームでした。

「あれ？ソースコードあるってことはどうやってマップファイルがロードされてるのかわかるんじゃ・・・？」

こうしてこの移植プロジェクトは始まりました。

GunZのソースコードとにらめっこしながら
自分が使い慣れた言語であるNode.jsを使ってバイナリをひたすら読みます

マップファイルを読めたからといって
それをThree.jsで表示できる保証なんてひとつもありませんでした。

ただ結果的に

Node.jsでマップファイルのバイナリ解析 -> JSONにデータを書き出し（モデルの座標、頂点、頂点インデックスなどのデータ） -> Three.jsについて検索しまくって読み込ませる -> 完成

という手順で成し遂げることができました。

ここまで約一週間です（3Dゲームや3Dモデルの知識皆無の状態で）

結論、本読んで学習するより実際作りたいもの作ってみるほうが爆速で学習できる！

一週間前

こんなの知りませんでした。聞いたことあるだけ。

でも一週間経った今では完全にじゃないけど前に比べたらかなり理解が深まった気がします
前より抵抗もなくて、3dモデルとかwebglにより関心を持ちました。

本読んでるときは学習って感じがしますが、
好きなもの作りながら思考しつつリサーチしてるときは楽しいので無敵です。

思いがけない方法でこれらを学ぶことになりましたが
プログラミングってやっぱり楽しんだもの勝ちですね！

拙い文章ですが、読んでいただいてありがとうございました。