LoginSignup
7
1

More than 1 year has passed since last update.

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

Posted at

一週間前の自分: 3dゲームの知識皆無。Three.js使ったことない

一週間後(今):😎😎😎

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

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

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

image.png

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

移植したデモ、コード

WEBでThree.jsを使ってGunZのマップを描画したものです
image.png
デモ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はダウンロードして遊ぶオンラインゲーム

image.png

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

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

image.png

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

どうやって移植したのか?

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

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

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

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

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

image.png

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

ただ結果的に

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

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

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

やってみて感じたこと

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

一週間前

  • ポリゴン
  • メッシュ
  • ジオメトリ
  • 頂点
  • 頂点インデックス

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

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

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

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

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

7
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1