概要
原神というゲームをご存じでしょうか？
おそらくどこかで 1 度は聞いたことがあるかもしれませんが、中国のソーシャルゲーム会社 miHoYo が開発し 2020 年 9 月にリリースした基本プレイ無料のオープンワールド RPG になります。
オープンワールド RPG が人気を博し、リリースされて 1 カ月で売り上げが約 270 億円となり、世界中で注目を集めたゲームです。
そんなゲーム画面を、TypeScript で表現した OSS があり、その出来栄えの良さが素晴らしいので、今回はその OSS をご紹介したいと思います。
今回ご紹介する OSS は、ゲーム「原神」の世界を xviewer.js（three.js パッケージ）で再現した完成度の高い Web アプリ「www-genshin」になります。
それでは早速詳細についてみていきましょう！
目次
特徴
大きな特徴としては、three.js をパッケージ化した xviewer.js というモジュールを使用して、ゲーム「原神」の世界観を表現しているというところではないでしょうか。
しかもこちらのモジュールを使用すると実装する際のソースコードもとても少なく済む、と紹介されていました！
さらにローカル環境で動かしてみると音楽まで流れるこだわりがあり、とても完成度が高いと思いました。
利用手順
利用方法としては、Node.js で作成されているので、Node.js がインストールされていることが前提になります。
実際に利用する際は、以下のコマンドを入力することで可能です。
npm i npm start
上記のコマンドより、Web サービスが起動し、「http://localhost:5173/」にアクセスすると Web サービスにアクセスすることができます。
使用感
実際に自分のほうでもローカル環境に本 OSS をクローンして動かしてみました。
JavaScript・Node.js で作成した Web サービスとは思えないほどとてもきれいな映像が表示されました！
基本的にマウス操作や気ボード操作はなく、画面が再生されるだけのようですが、本物のゲーム画面のように見え、ずっと見てられます。
右下の扉ボタンを選択すると以下のように、画面上にも扉が表示されます。
こちらをクリックすると扉の中に入ってゲームが始まる、と思いきや別の紹介ページに飛びます、ゲームが始まればよいなと思ったのですが。。。
こちらのゲーム画面の再現度は素晴らしいですが、個人的に驚いたのが、xviewer.js モジュールになります。
こちらのモジュールはまだ公開されていないということで不明なままですが、近々公開されるという話もあるため、その際はまたご紹介できたらと思います。
まとめ
ゲーム「原神」の世界を xviewer.js（three.js パッケージ）で再現した完成度の高い Web アプリ「www-genshin」をご紹介しました。
私自身「原神」をプレイしたことはないのですが、イメージしていた世界観が Web アプリ上に表現されていて、かつとてもきれいな画面だったので感動しました。
原神をプレイされている方で、Node.js で同じような画面を作りたいと考えている方は、こちらの OSS「www-genshin」を参照してみて勉強してみてはいかがでしょうか。
