クラウド型ゲームエンジン"PlayCanvas"を紹介しております。 主に3D,2D,アニメーション等デザイナーに寄った資料となっております。 2016年9月5日　 #SpriteStudio 勉強会 『発注 x 受注 x Friendship』@GMO Yours

1. GMOクラウド株式会社
PlayCanvas運営事務局 津田良太郎

2. 津田良太郎
【略歴】
2012.4 - 神奈川工科大学 入学
2014.8 - チームラボ ハードウェアエンジニア
2015.4 – 神奈川工科大学 白井研究室(VR/エンタテイメント)
2016.4 - GMOクラウド
2016.8 – ソリューション事業部 PlayCanvas運営事務局
【趣味】
旅行，ビール，カメラ，ツーリング，ゲームジャム
GMOクラウド株式会社
ソリューション事業部
PlayCanvas運営事務局
テクニカルアドバイザー
登壇者の自己紹介

3. agenda
• PlayCanvasについて
– intro
– WebGLとPlayCanvas
– どのあたりが“デザイナーにも優しい”のか
– PlayCanvasで2Dに挑戦してみた
• 今後の展開について

4. はじめに - PlayCanvasとは -
• 開発環境 ＋ 学習環境 ＋ 公開環境 一体型の
クラウド型ゲーム開発プラットフォーム
• キーワード
– オープンソース
– 3Dゲームエンジン
– HTML5 + WebGL(GLSL)
– クロスプラットフォーム
– リッチメディア広告
– JavaScript
– エクストリームプログラミング
– リアルタイムマルチプレイ
– ブラウザゲーム
– WebVR

5. クラウド型ゲーム開発プラットフォーム
学習環境 公開環境開発環境
GAME Editor With API
Reference
Read Other Project
Hosting on
playcanv.as
Explore
CODE Editor
Collaborator
Community

6. そもそも”WebGL”とは？
• ウェブブラウザで3次元コンピュータグラフィックスを表示させる
ための標準仕様。特別なブラウザのプラグインなしで、ハードウェ
アでアクセラレートされた三次元グラフィックスを表示可能にする。
HTMLのcanvas要素を使い、javascriptで記述可。
• 現在の対応状況
Wikipedia, wgld.orgより引用
「Can I use ?」 http://caniuse.com/#feat=webgl

7. WebGL向けライブラリ
• Unity WebGL，Unreal Engine WebGL
– C++, C#をjavascriptへクロスコンパイル※
• 即時性が失われてしまう
• サポートブラウザが少なくパフォーマンスが低い
• Three.js
– javascript 3DLibrary
• ビジュアルエディタを持たない
• ゲームエンジンとしての機能はない
※Unity - マニュアル: WebGL での開発を始めるにあたって http://docs.unity3d.com/ja/current/Manual/webgl-gettingstarted.html

8. WebGLとPlayCanvas
• PlayCanvas
– ランタイムコード：javascript
– スクリプト：javascript
– ビジュアルエディタ：有
– ゲームエンジンとしての機能：有
– 公開環境：有
• 高即時性，ノンプログラミング実装，公開環境有り

9. 実作業比較
• 例：3DモデルをWeb上で公開してぐりぐり見れるようにしたい
• Unity WebGL
– ローカルで開発→WebGLに吐き出し→自前のサーバーで公開
• クロスプラットフォーム向けのインタフェース実装の必要有
• サポート未対応の端末有
• サーバー用意の必要有
• Three.js
– ライブラリをDL→htmlおよびjsで開発→自前のサーバーで公開
• エディタを持たないので、モデルの読み込みやインタフェース等は自前で実装
• サーバー用意の必要有

10. 実作業比較 –PlayCanvas-
• demo

11. デザイナーにも優しい
• ビジュアルエディタ搭載！
• fbx, objからインポート可能！
• ドラック＆ドロップのみ！
• ノンプログラミング実装！
• ブラウザ駆動でクロスプラットフォーム！
• サーバー用意不要！
• これらすべて無料※！！
※上限200MB, PUBLICプロジェクトのみ

12. 2Dについて

13. PlayCanvas 2D #UI
• PlayCanvas公式が“sprite.js”を配布
– ディスプレイ座標で配置
– UIとして機能
• タッチイベント
• マウスイベント
https://github.com/playcanvas/sprites

14. PlayCanvas 2D #SpriteAnimation
• “animatedTexture.js”を配布
• demo

15. PlayCanvas 2D #SpriteAnimation
demo
spritestudioでデータ作成 連番に並べ1枚のpngに
マテリアル作成
animatedTexture.jsを使い板ポリに描画完成！

16. PlayCanvas 2D まとめ
• ２D表現も可能！
• 公式が需要のあるプラグインを随時用意
• 複雑なことは自前で実装する必要有り
• いつかエディタの機能に組み込まれるかも…

17. 今後の展開
• PlayCanvasロードマップ(抜粋)
– Node-based Material Editor シェーダコーディングの知識不要なビジュアルエディタツール
– Collaboration Improvements PlayCanvasプロジェクトでブランチ・マージワークフロー導
入
• 今後 勉強会、ハンズオン随時開催予定！
• 10/22 CEDEC 九州

18. お問い合わせ
• メールアドレス
– info@playcanvas.jp
• ヘルプセンター
– https://support.playcanvas.jp/hc/ja
• follow me
– ＠playcanvasJP

19. 最後に..
一緒に働ける仲間を
大募集中！！
詳細はこちら↓

20. ありがとうございました！