GREE社内勉強会「Mini Tech Talk」で講演した資料です

1. PlayCanvasを用いた新しい
ゲーム・Web開発スタイル
Ryotaro Tsuda (@utautattaro)
GMO CLOUD K.K.
PlayCanvas Team Japan
Technical Advisor

2. 自己紹介
2016.5 ~
GMOクラウド株式会社
PlayCanvas運営事務局
Photon運営事務局 テクニカルアドバイザー
津田良太郎 / Ryotaro Tsuda
ryotaro @utautattaro

4. PlayCanvasの特徴
• Webブラウザ上で完結(インストール必要なし！)
• 豊富な機能を持つゲームエディター, コードエディター
• 軽量なOSSのエンジン（デスクトップ・モバイル問わず動作！）
• 外部JavaScriptライブラリも簡単に使用可能
• WebVR 対応
• 3Dモデルインポーター
• WebGL 2.0対応
• 数クリックでデプロイ
• オンラインマルチ開発
• etc…

5. 本日のアジェンダ
1. PlayCanvasライブデモ
2. PlayCanvasのここが便利！
3. これからのWeb/ゲーム

6. PlayCanvasライブデモ

7. ライブデモ内容
• ソーシャルVRアプリを作ります
– Webブラウザ上で動作
– クロスプラットフォーム(pc/mobile)
– 移動、視点変更可能
– 同一ルームにいるプレイヤーとやりとり
– 簡易cluster.

8. PlayCanvasのここが便利！

9. 開発に便利なキットがそろっている
• Model Viewer Starter Kit
– 3Dモデルを手軽に公開，配布可能
– orbit-cameraが実装済み
• VR Starter Kit
– WebVRアプリを手軽に開発
– モバイル向けステレオレンダリング
– ハイエンド向けWebVRAPIが実装済み

10. 即時同期でクロスプラットフォームにデバッグ！
• launchタブを開けば即デバッグ端末に！
– ブラウザさえあれば検証可能
– editorでの編集は即時的に反映！
• さらに便利なswapメソッド
– ホットリロード可能
– コードの編集も即時同期！

11. モデルインポーター
• 直接扱えないFBX,OBJをJSONに自動インポート
– 中身はplaneなJSON
– マテリアルグループ毎にマテリアルも生成
• ボーンアニメーションもできちゃう
– アニメーションもJSONに

12. 外部ライブラリの使用も簡単！
• プロジェクトにアップロードするだけ！
– jQuery,Photon,ncmbなどなど
– JavaScriptライブラリならOK
– .min.jsでも.jsでもOK
– PlayCanvas上でちょっとした改変も可能
– <script>タグでの外部参照はできません
– 使うときは呼び出し順に注意しましょう

13. まあまあ使えるCode Editor
• 補完や検索，置換等
– JavaScript, HTML, CSS, Json, GLSLなどが書ける
– 当然日本語も入力できます

14. attribute
• エディターからスクリプトに値を渡す
– Unityでいう[SerializeField]
– 割と種類も多い
Script.attributes.add(“attr”,{type:“entity”});
Script.prototype.initialize = function(){
console.log(this.attr);
};
{type:“curve”,color: “rgba”}
{type:“vec2”}
{type:“number”,min:100,max:250}
{type:“number”,enum: [{valueOne:1},{valueTwo:2]}
{type:“rgba”}
{type:“curve”}

15. 数クリックでデプロイ！
• PlayCanvas上で公開可能！
– 検証サイクルが飛躍的にアップ

16. これからのWeb/ゲーム

17. FLASHの終焉
• ブラウザベンダーはHTML5への移行を喚起
• Adobeは2020年までにFlashを提供終了と発表
• 代替としてのPlayCanvas
– 3Dのゲームエンジンだが2D/2,5Dも可能
– GUIが手軽に作れる
elementコンポーネントも登場

18. HTML5とPlayCanvas
• PlayCanvasで変わる開発スタイル
– インストールいらず
– 数クリックでデプロイ
– 多人数即時同期
• ゲームとWebの境界線
– HTML5/JavaScriptで動くモバイル向けゲーム
– 3Dエディターで開発するWebコンテンツ
– PlayCanvasはどちらも対応可能

19. 拡充されるWebAPI
• Web Payments
– Payment Request API
– 数行で決済フォーム実装
– ゲーム内ストアも簡単に
• GetUserMedia / Stream API
– モバイルも対応済って知ってました？
– PlayCanvas – WebAR
• ARToolKit互換 マーカー式

21. 参考
【PlayCanvas ハンズオン】ソーシャルVRアプリをつくろう！ ～1時間で複数人参加型のWebVRアプリを開発～
– https://support.playcanvas.jp/hc/ja/articles/115012166007
Flash提供終了発表を受け、PlayCanvasはFlashディベロッパーを歓迎します
– https://support.playcanvas.jp/hc/ja/articles/115011362108
エレメントコンポーネントとスクリーンコンポーネントが追加されました
– https://support.playcanvas.jp/hc/ja/articles/115012571708
TRANSFORMERS THE LAST KNIGHT
– http://www.transformersmovie.com/
TANX
– https://tanx.io/
PlayCanvas – WebAR
– https://playcanv.as/p/eJ1ygzym/
– https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf
PlayCanvasチートシート Unityと比べてみよう エディタ拡張編
– http://seiroise.hatenablog.com/entry/2017/05/08/182953
– http://seiroise.hatenablog.com/entry/2017/05/09/202431
VOXELCANVAS
– https://voxelcanvas.me/
Photon-for-PlayCanvas
– https://utautattaro.github.io/Photon-for-PlayCanvas/