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