オンラインゲームの舞台を雰囲気満点のマップで表現した New World の WebGL 実装サイトが面白い
中世ヨーロッパ風のマップ表現
今回ご紹介するのは、いろいろな意味で（？）最近話題になっている、Amazon Games によって開発されているオンラインゲーム、New World のスペシャルサイトです。
私は該当するゲームをプレイしたことはないのですが、恐らくゲームの内容に沿ったマップデータが、WebGL によって再現されている形なのだと思います。
マウスカーソルの動きに応じたインタラクティブな効果が面白い、見た目にもカッコいいウェブサイトになっています。
リンク：
まるで塗り拡げていくようにマップを眺める
今回のサイトでは、中世ヨーロッパ風とでもいいましょうか、少し古い時代の地図を連想させるような、雰囲気満点の地図が WebGL によって描かれます。
地図は基本的に平面的なマップではあるのですが、山や谷のような起伏がある程度はしっかり表現されていて、高低差の感じられるビジュアルになっています。
ポストエフェクトもかなりしっかり仕込まれていて、ノイズを使うことで、よりノスタルジックな世界観をうまく表現しています。
たとえばフェードインエフェクト１つとっても、以下のようにノイズを使って独特な演出がなされています。
単にグラデーションでフェードインエフェクトを実装されているよりも、今回の世界観によりマッチした表現になっているなと思います。
また、地図の上にも、同様にノイズを使って上手に実装されたエフェクトがあります。
こちらはカーソルを使って地図の細部を塗り拡げていくような仕込みがされており、カーソルをゆっくり動かすと、カーソル付近の地図が美しく磨き上げられたように変化します。
どちらかというと、経年劣化してくすんだ色になっていた地図が、元の鮮やかさを取り戻していく…… みたいな表現ですね。
スクリーンショットではちょっと見えにくいとは思うのですが……
地図上には、ランドマーク的にアイコンが描かれていたり、旗が立てられていたりする場所があります。
これらの旗はそれぞれクリックすることで詳細を見ることができるようになっており、場合によっては、さらに下層ページが用意されていてより詳細な情報が網羅されている場合もあります。
画面の右側に詳細ビューが出てくるトランジションもすごく凝っています。
まさについ先日、とあるブログ記事がいろんな意味で物議を醸していたので、そちらの路線から New World を認識していたみたいな人もいるかもしれません。
私はあまりオンラインゲームとかには詳しくなく、もちろんその技術的な背景や品質の善し悪しについては判断できるほどの知識を持ち合わせていないのですが、今回の WebGL 製サイトを見てもプロモーションにはかなり力が入っているなとは感じます。
地図を塗り拡げていくと、境界部分が徐々に広がったり、あるいはその付近だけが青白く輝いたり……
表現としては結構面白い、他では見られないような演出がされていると思います。
ぜひチェックしてみてください。
