![Page 1: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/1.jpg)
PlayCanvasを用いた新しい
ゲーム・Web開発スタイル
Ryotaro Tsuda (@utautattaro)
GMO CLOUD K.K.
PlayCanvas Team Japan
Technical Advisor
![Page 2: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/2.jpg)
自己紹介
2016.5 ~GMOクラウド株式会社
PlayCanvas運営事務局
Photon運営事務局 テクニカルアドバイザー
津田良太郎 / Ryotaro Tsuda
ryotaro @utautattaro
![Page 3: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/3.jpg)
![Page 4: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/4.jpg)
PlayCanvasの特徴
• Webブラウザ上で完結(インストール必要なし!)
• 豊富な機能を持つゲームエディター, コードエディター
• 軽量なOSSのエンジン(デスクトップ・モバイル問わず動作!)
• 外部JavaScriptライブラリも簡単に使用可能
• WebVR 対応
• 3Dモデルインポーター
• WebGL 2.0対応
• 数クリックでデプロイ
• オンラインマルチ開発
• etc…
![Page 5: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/5.jpg)
本日のアジェンダ
1. PlayCanvasライブデモ
2. PlayCanvasのここが便利!
3. これからのWeb/ゲーム
![Page 6: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/6.jpg)
PlayCanvasライブデモ
![Page 7: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/7.jpg)
ライブデモ内容
• ソーシャルVRアプリを作ります– Webブラウザ上で動作
– クロスプラットフォーム(pc/mobile)
– 移動、視点変更可能
– 同一ルームにいるプレイヤーとやりとり
– 簡易cluster.
![Page 8: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/8.jpg)
PlayCanvasのここが便利!
![Page 9: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/9.jpg)
開発に便利なキットがそろっている
• Model Viewer Starter Kit
– 3Dモデルを手軽に公開,配布可能
– orbit-cameraが実装済み
• VR Starter Kit
– WebVRアプリを手軽に開発
– モバイル向けステレオレンダリング
– ハイエンド向けWebVRAPIが実装済み
![Page 10: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/10.jpg)
即時同期でクロスプラットフォームにデバッグ!
• launchタブを開けば即デバッグ端末に!
– ブラウザさえあれば検証可能
– editorでの編集は即時的に反映!
• さらに便利なswapメソッド
– ホットリロード可能
– コードの編集も即時同期!
![Page 11: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/11.jpg)
モデルインポーター
• 直接扱えないFBX,OBJをJSONに自動インポート
– 中身はplaneなJSON
– マテリアルグループ毎にマテリアルも生成
• ボーンアニメーションもできちゃう
– アニメーションもJSONに
![Page 12: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/12.jpg)
外部ライブラリの使用も簡単!
• プロジェクトにアップロードするだけ!
– jQuery,Photon,ncmbなどなど
– JavaScriptライブラリならOK
– .min.jsでも.jsでもOK
– PlayCanvas上でちょっとした改変も可能
– <script>タグでの外部参照はできません
– 使うときは呼び出し順に注意しましょう
![Page 13: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/13.jpg)
まあまあ使えるCode Editor
• 補完や検索,置換等
– JavaScript, HTML, CSS, Json, GLSLなどが書ける
– 当然日本語も入力できます
![Page 14: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/14.jpg)
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”}
![Page 15: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/15.jpg)
数クリックでデプロイ!
• PlayCanvas上で公開可能!
– 検証サイクルが飛躍的にアップ
![Page 16: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/16.jpg)
これからのWeb/ゲーム
![Page 17: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/17.jpg)
FLASHの終焉
• ブラウザベンダーはHTML5への移行を喚起
• Adobeは2020年までにFlashを提供終了と発表
• 代替としてのPlayCanvas
– 3Dのゲームエンジンだが2D/2,5Dも可能
– GUIが手軽に作れるelementコンポーネントも登場
![Page 18: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/18.jpg)
HTML5とPlayCanvas
• PlayCanvasで変わる開発スタイル
– インストールいらず
– 数クリックでデプロイ
– 多人数即時同期
• ゲームとWebの境界線
– HTML5/JavaScriptで動くモバイル向けゲーム
– 3Dエディターで開発するWebコンテンツ
– PlayCanvasはどちらも対応可能
![Page 19: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/19.jpg)
拡充されるWebAPI
• Web Payments
– Payment Request API
– 数行で決済フォーム実装
– ゲーム内ストアも簡単に
• GetUserMedia / Stream API
– モバイルも対応済って知ってました?
– PlayCanvas – WebAR• ARToolKit互換マーカー式
![Page 20: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/20.jpg)
![Page 21: 【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)](https://reader035.vdocuments.net/reader035/viewer/2022062523/5a6479f97f8b9a57568b475b/html5/thumbnails/21.jpg)
参考
【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/