Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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ライブラリ...
本日のアジェンダ
1. PlayCanvasライブデモ
2. PlayCanvasのここが便利!
3. これからのWeb/ゲーム
PlayCanvasライブデモ
ライブデモ内容
• ソーシャルVRアプリを作ります
– Webブラウザ上で動作
– クロスプラットフォーム(pc/mobile)
– 移動、視点変更可能
– 同一ルームにいるプレイヤーとやりとり
– 簡易cluster.
PlayCanvasのここが便利!
開発に便利なキットがそろっている
• Model Viewer Starter Kit
– 3Dモデルを手軽に公開,配布可能
– orbit-cameraが実装済み
• VR Starter Kit
– WebVRアプリを手軽に開発
– モバイ...
即時同期でクロスプラットフォームにデバッグ!
• launchタブを開けば即デバッグ端末に!
– ブラウザさえあれば検証可能
– editorでの編集は即時的に反映!
• さらに便利なswapメソッド
– ホットリロード可能
– コードの編集も...
モデルインポーター
• 直接扱えないFBX,OBJをJSONに自動インポート
– 中身はplaneなJSON
– マテリアルグループ毎にマテリアルも生成
• ボーンアニメーションもできちゃう
– アニメーションもJSONに
外部ライブラリの使用も簡単!
• プロジェクトにアップロードするだけ!
– jQuery,Photon,ncmbなどなど
– JavaScriptライブラリならOK
– .min.jsでも.jsでもOK
– PlayCanvas上でちょっとした...
まあまあ使えるCode Editor
• 補完や検索,置換等
– JavaScript, HTML, CSS, Json, GLSLなどが書ける
– 当然日本語も入力できます
attribute
• エディターからスクリプトに値を渡す
– Unityでいう[SerializeField]
– 割と種類も多い
Script.attributes.add(“attr”,{type:“entity”});
Script.p...
数クリックでデプロイ!
• PlayCanvas上で公開可能!
– 検証サイクルが飛躍的にアップ
これからのWeb/ゲーム
FLASHの終焉
• ブラウザベンダーはHTML5への移行を喚起
• Adobeは2020年までにFlashを提供終了と発表
• 代替としてのPlayCanvas
– 3Dのゲームエンジンだが2D/2,5Dも可能
– GUIが手軽に作れる
el...
HTML5とPlayCanvas
• PlayCanvasで変わる開発スタイル
– インストールいらず
– 数クリックでデプロイ
– 多人数即時同期
• ゲームとWebの境界線
– HTML5/JavaScriptで動くモバイル向けゲーム
– ...
拡充されるWebAPI
• Web Payments
– Payment Request API
– 数行で決済フォーム実装
– ゲーム内ストアも簡単に
• GetUserMedia / Stream API
– モバイルも対応済って知ってまし...
参考
【PlayCanvas ハンズオン】ソーシャルVRアプリをつくろう! ~1時間で複数人参加型のWebVRアプリを開発~
– https://support.playcanvas.jp/hc/ja/articles/115012166007...
【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)
【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)
Upcoming SlideShare
Loading in …5
×

【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)

359 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

【Mini Tech Talk】PlayCanvasを用いた新しいゲーム・Web開発スタイル(2017/10/011講演)

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

×