ゲームの世界観を 3D シーンでしっかりと再現した WebGL コンテンツ！ Cloud Castles のウェブサイト
まるでゲームのワンシーンのよう
今回ご紹介するのは、Cloud Castles というゲーム系プロジェクトのウェブサイトです。
いわゆるメタバースや Web3 を意識したプロモーションがなされているようなのですが、その中身についてはここでは触れません。なんとなく、中世ヨーロッパ風＋SF 的な雰囲気が強そうな感じでしょうか。
ゲーム自体の雰囲気をウェブ上でも見事に再現しているように見え、かなりビジュアル重視の作りになっています。
リンク：
インタラクションにも重厚さがある
今回のサイトはゲームの世界観をウェブ上でも体験できるように、かなり作り込まれています。
コンテンツの量そのものはあまり多くなく、3D シーンにもそんなにバリエーションがあるわけではないのですが、雰囲気重視でしっかりとコンテンツが組み立てられており、すごくリッチな仕上がりです。
最初のイントロ演出もすごく凝っていて、壁が崩れるような演出は迫力満点です。
イントロの壁が崩れるような演出が終わると、描き出される世界は空の上が舞台になります。
空中に地面が浮いているラグーン的な雰囲気で、このゲームの内容や登場キャラクター、世界観などを巡ることができます。
スクロール操作を行うことで自動的にカメラが動いていくようになっているのですが、カーソルの位置に応じた微妙な変化や、ラグーン部分にカーソルをホバーさせたときの変化など、インタラクティブな要素もいくつかあります。
個人的に面白いなと思ったのが、各種インタラクションの「質感」です。
なんというか、あんまりシュッとしてないというか、反応が端的に言えば遅く鈍い感じに味付けされています。
しかしこの遅くて鈍い感じがなんとも言えない重厚感の演出につながっていて、世界観に見事にマッチしているように感じます。
効果音の使い方なども上手で、すごく雰囲気づくりに長けているなと感じました。
ウェブ上の表現において、イージングの掛け方やインタラクティブな要素の反応速度などは制作に携わる多くの人が気にかけている部分だと思います。
今回のサイトの場合は、重厚で緊張感のある雰囲気を演出する上で各種のインタラクティブな要素がかなりうまく機能しているように思いました。逆に言えば、やっぱりこういう部分にこそこだわって制作をしないといけないんだろうなとも感じました。
WebGL の実装としてはビジュアルにこだわったハイエンドな事例だと思います。
ぜひチェックしてみてください。
