みなさんこんにちは！今回は11月30日開催されたPlayCanvasハンズオンセミナー”【大阪編｜PlayCanvasハンズオン】HTML5ゲームの波に乗り遅れるな！? 60分×2本！ ブラウザ上でサクサクゲーム開発しよう！“に参加したので復習を兼ねて内容をおさらいしてみたいと思います。
PlayCanvasとは、Webブラウザで実行できるWebGLのゲームエンジンでデスクトップとモバイルブラウザゲームを作成することができます。作業はWeブラウザ上で行われるので、複数人数の同時編集ができることも特徴。下記の公式サイトで様々なデモコンテンツを体験することができます。
PlayCanvas 3D HTML5 & WebGL Game Engine
今回のハンズオンセミナーはPlayCanvas Editorの紹介から実際に手を動かして簡単な3D戦車ゲームを作成する第1部、マルチプレイの実装が可能なPhotonを利用してソーシャルVRの簡単なモックを作る第2部の2部構成。それぞれ60分ほどの時間で行われました。
まずは導入編の第1部では簡単なPlayCanvasの基本を学びながら簡単な3D戦車のゲームを作りました。
ステージに戦車を配置済みのプロジェクトを準備。まずはゲームを実行して動作を確認。戦車を操作できるようにスクリプトを追加してから戦車から弾を発射できるように設定。さらに敵を作成して弾が当たったら敵を消去する設定を行い、最後にゲームを公開するという流れでした。
今回のメインといえる第2部では、組み立て式のVRゴーグルを使用してスマホで楽しめるマルチプレイアプリの制作でした。
序盤、PlayCanvas最新情報の紹介時間の間に各自VRゴーグルを組み立てて準備。PlayCanvasであらかじめ用意されているVR用テンプレートを使用してシーンの作成を行いました。
マルチプレイ機能を実装するためのPhotonプラグインファイルをインポートしてネットワーク同期処理の動作確認。次に各プレイヤーキャラクターとなるゴーグル型オブジェクトをインポート。用意されたスクリプトコードを使用してマルチプレイのためのプレイヤー実装。完成したらみんなでプレイ。という流れでした。
第1部は比較的サクサク作業を進めることができましたのですが、第2部の内容は、ネットワーク機能の組み込みやスマホでのVR動作確認など作業内容が多かったので、自分としてはかろうじて完成させて動作確認できた感じでした。
PlayCanvasを使ったWebGLコンテンツの制作は2Dや3Dファイルのインポートを除いて、シーン制作から動作確認まですべてWebブラウザで行えるというスムーズなワークフロー、スマートフォンでも即座に動作確認できる手軽さは魅力的に感じました。