このセミナーの登壇者は、品部仁志氏（株式会社アクセル）、宗形修司氏、城戸雄大氏（PlayCanvas運営事務局）の3名。2020年6月にPlayCanvasに対応した動画ミドルウェア「H2MD」について、「PlayCanvas」での利用例や使い方をレクチャーしていきました。
ゲームを更に豊かにするH2MDを用いた高度な映像表現
まずはトップバッターとして品部氏が、H2MDの解説を行いました。H2MDは2015年末から提供されている“アルファムービーミドルウェア”で、ネイティブアプリやWEB上（JavaScript）で透過色を含む動画を扱えるソフトとなります。2020年6月よりPlayCanvasでのプラグインの提供も始まったとのことです。
ここで一度デモムービーを視聴することに。こちらはH2MDのサイトでも確認できますが、背景と解説役の女性が同時に動く映像です。どうやって両者を同時に動かしているのか気になるところですが、H2MDとJavaScriptを使用する事によりスイッチを切り替えることで2枚に重ねたムービーのレイヤーを出したり消したりできるようになっているといった説明がなされました。
続いて、H2MDがスマートフォンの画面上でどういった表現ができるのか実際に見せるための映像が流れました。ブラウザ内のインライン再生のデモとなっており、キャラクターたちや戦闘機が画面を横切ったり、画面から飛び出してくるような演出が見られました。
このように非常に目立った演出を再現できますが、素材自体はデザイナーさんに制作してもらうことを想定。ここをスタート地点として、エンコードを行い実装と言う流れになっているとのことです。こういった演出を制作するための動画素材は、MP4やAVIなどのファイルなら読み込みが可能です。実際に素材をエンコードしていく作業も行われ、元素材のPNG連番でそのまま再生できたり、コマ送りにして動作を確認したりとかなり便利に扱えることがわかりました。
PlayCanvasはデスクトップ＆モバイルブラウザ向けWebGL／HTML5ゲームエンジンで、その動作例を見ていくと先ほどエンコードしたキャラクターと背景の画像が同時に動く状態が見られました。このほかにもWEBサイトに埋め込まれた動画を見ることができ、とても手軽に動画を使ったゲーム制作を行えることが行えます。
PlayCanvasとH2MDの驚異的な利便性
H2MDでどのようなことができるのか判明したところで、スピーカーをPlayCanvas運営事務局の宗形氏にバトンタッチ。PlayCanvasがWebGLゲーム開発エンジンであることは先述した通りですが、3D表現に強くカジュアル～リッチまで幅広いジャンルのゲームを開発できます。また開発エンジンのインストールやプラグインのダウンロードは不必要であり、全てWEBブラウザで完結するクラウド型のエンジンであること。そしてコンパイルを挟む必要なく軽量に動作する事といった、利便性や機能面について伝えられました。
また開発環境を整える必要もなくメールアドレスの登録だけで利用を始められるということで、PlayCanvasはまさしく初めての人でもHTML5ゲームが簡単に制作できる環境だと言えるでしょう。
そしてここから、セミナータイトルにもなっている「H2MD×PlayCanvas×VR/AR で新しい表現を」をテーマに実用例の紹介へ。今回紹介されたのは『VR-planet』というタイトル。3D空間上にH2MDを貼り付けたものだそうですが、開発期間はなんとたったの2週間。開発人数もフロント2名、3Dモデラ―1名の3名という少数精鋭となっていました。
シンプルなものとはいえデモ映像を見てみると、3Dで再現された惑星の上でカメラを自由に動かして進行するゲームとなっていました。このカメラ操作で画面上のスクリーンに表示された映像を見たり、進行ルートを360度見まわして何があるのか確かめてみたりと、非常に作り込まれており、これをたった3人の開発者の手により2週間ほどで仕上げられるとは驚きです。
この惑星のモデルはBlender2.8で制作されたものだそうですが、テクスチャに関してはPhotoshopを使用し、PlayCanvasは主にライティングに使用されています。惑星の構造は素材をひとつにまとめて扱いたかったそうで、3次元情報を2次元座標に対応させる“UV展開”を緑地、海、砂地といった具合にパーツごとに分類していたのだとか。
これ以外にもPlayCanvasの様々な扱い方が紹介されてましたが、こういった機能からわかるのは非常に便利かつ手軽に映像を用いた素材でゲーム制作ができる点。さらにゲーム上のキャラクターの衣装にある、ラインやマークを光らせることもPlayCanvasでH2MDを扱えば可能とのことです。
PlayCanvasとH2MDの可能性とは！？
続いてスピーカーが城戸氏に代わり、PlayCanvasの活用について話がなされました。PlayCanvasでムービーテクスチャを扱うにはMP4やAVIのファイルを読み込み、その動画をテクスチャに貼り付ける必要があります。城戸氏はそのムービーテクスチャを3Dモデルのマテリアルに適用するのが通常の使い方だと説明しましたが、このやり方ではアルファチャンネルに対応できないそうです。
しかしH2MDを用いることで対応できるようになり、データ容量も軽量で済むにも関わらず背景が透過して見えたりする高度な表現が可能となりました。実際にサンプルで見られた映像では、H2MDを用いた映像は正方体の各面に表示されているキャラクターだけでなく、その後方に映っている映像が透過して見えていました。
逆にH2MDを用いられていない正方体のほうは面から後方が透過しておらず、どちらが優れているかもはや一目瞭然。また細かいテクスチャはエフェクトを使って対応するそうで、アルファチャンネルを維持したまま動画を書き出す方法なども紹介されました。
今回のセミナーによって、PlayCanvasとH2MDによってゲームに新たな表現を用いることができると明らかになりました。アルファチャンネル動画も扱いやすくなり、キャラクターのテクスチャにも新しい表現を持ち込めるとあっては、これからPlayCanvasとH2MDは活用されていくことでしょう。今後もゲームを更に楽しくする新たな技術の発展に期待です。
■製品サイト
H2MD WEBサイト：https://h2md.jp/
PlayCanvas：https://playcanvas.jp/
■本製品に関する問合せ先
株式会社アクセル：https://www.axell.co.jp/
ax株式会社：https://axinc.jp/
contact@axinc.jp
