春日井 良隆

WebGLを活用した3D Web ゲーム『翠星のガルガンティア~キミと届けるメッセージ~』

Production I.Gと日本マイクロソフトのコラボレーションによる3D Webゲーム『翠星のガルガンティア ~キミと届けるメッセージ~』が、Internet Explorerのデモサイト「Rethink」シリーズの日本発コンテンツとして、6月18日に公開されました。

Gargantia Game A

このゲームはアニメ『翠星のガルガンティア』から生まれたスカイアクションゲームで、この作品のためにシナリオを書き下ろし、アニメ本編の声優はフルボイスで出演、そして世界中のファンが楽しめるように、日本語と英語のキャプションを用意するなど、ゲームそのものに気合いが入っているだけでなく、開発者向けにはソースコードの一部と3Dモデルを公開し、WebGLの裾野を広げることも目的にしています。


Web 表現の限界に挑戦

大いに自慢したいのが、そのWebGLの表現力と応答性です。大きな入道雲や飛行ルートを邪魔する気流、すれ違うカモメの群れ。いずれもリアルタイムに美しく描画しているだけでなく、ゲームの爽快感を損なわないように滑らかに軽快にレンダリングされています。

このゲームはInternet Explorer 11のタッチ操作に最適化されていますが、マウスとキーボードでも遊ぶことができます。さらにGamepad APIにも対応。ゲームパッドコントローラでも遊べます。また、レスポンシブWebデザインを反映して、プレイできるエリアはディスプレイの解像度に合わせて自動的に調整されるようになっています。

オープンソースのTurbulenzエンジンで構築

ガルガンティアでは、開発者がより効率的に3DのWebコンテンツが作れるようなリファレンスになることも目標の一つです。今回はイギリスに本拠地を置くゲームデベロッパー、Turbulenzと連携し、オープンソースのTurbulenz Engineを使って開発しています。

turbulenz

Turbulenz EngineはJavaScriptとTypeScriptで実装された2D/3Dゲーム開発エンジンです。ハイパフォーマンスな物理エンジン、高品質なビジュアルエフェクト、パーティクルシミューレション、アニメーションエンジンといった豊富な機能を提供し、ゲーム技術の広い範囲をカバーしています。

Turbulenz Engineは無料でGitHubからダウンロードできます。

さらに、ゲームの一部のソースコードと3Dモデルも公開しています(アドベンチャーパート、ボイスデータ、BGMデータは含まれません)。こちらもGitHubからダウンロードできますので、読者の皆さんもぜひお試し下さい。ソースの入手とWebサーバーへの配置については、弊社のエバンジェリスト物江がブログ「ゲーム『翠星のガルガンティア』のソースの入手とIISへの配置方法」で紹介しています。

0574_image_23F9B0F4

IE9で掲げた「Same Markup」と同様に、いまもIEの開発ではWeb標準への準拠をなによりも大切にしています。この『翠星のガルガンティア ~キミと届けるメッセージ~』もWebGLに対応したほかのブラウザでもお楽しみいただけます。今後、新しい面が追加されていきます。お楽しみに!

'; js_seriesContent.className = "js_seriesContent"; js_seriesContent.innerHTML = js_seriestitle.innerHTML; js_seriesContent.appendChild(js_serieslist_ul); if ( js_parent.lastChild == js_superior ) { js_parent.appendChild(js_seriesContent); } else { js_parent.insertBefore(js_seriesContent, js_superior.nextSibling); } if (js_serieslist_li_length > 5) { document.getElementsByClassName('moveToSeriesTop')[0].style.display = 'block'; document.getElementsByClassName('moveToSeriesTop')[0].href = document.getElementsByClassName('seriesmeta')[0].getElementsByTagName('a')[0].href; } })(this, this.document); // ソーシャルボタンをクリックされたらgaに送信 var elements, i; elements = document.querySelectorAll('.sns-buttons > li > a.facebook-btn-icon-link'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Facebook', 'like', '/ykasugai/7743/'); }, false); } elements = document.querySelectorAll('.sns-buttons > li > a.twitter-btn-icon-link'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Twitter', 'tweet', '/ykasugai/7743/'); }, false); } elements = document.querySelectorAll('.sns-buttons > li > a.google-plus-btn-icon'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Google+', '+1', '/ykasugai/7743/'); }, false); } elements = document.querySelectorAll('.sns-buttons > li > a.hatena-btn-icon'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Hatebu', 'bookmark', '/ykasugai/7743/'); }, false); } elements = document.querySelectorAll('.sns-buttons > li > a.pocket-btn-icon'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Pocket', 'bookmark', '/ykasugai/7743/'); }, false); }

週間PVランキング

新着記事

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js Polymer Progressive Web Apps React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket WebVR