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