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運営事務局
津田
アジェンダ
1. PlayCanvasとは
– Editor
– Engine
– Community
2. Editorの新機能
– リアルタイムチャット
– アセットレジストリ
– プレビュー強化
– テクスチャ圧縮
– REST API
...
PlayCanvasとは
PlayCanvasとは
• HTML5 WebGLで動く3Dゲームを
ブラウザ上で開発配信できる統合環境
• Editor + Engine + Community 一体型
「クラウドホスティングゲーム開発環境」
– リアルタイムコラボレーシ...
PlayCanvas Editor
• Web上で完全に動作
• 直感的なデザイン
• コラボレーション
• 即時反映
PlayCanvas Engine
• MITライセンスのOSS
• Editorとは別でも提供
• JavaScript 96%
• コンポーネント指向
• 軽量なのが特徴
– ソースコード8MB
– ランタイムコード2.43MB
– gZi...
PlayCanvas Community
• サービスサイトにコミュニティも統合
– 開発物の紹介や相談等活発
• 無料から使える公開環境
– 200MBまで無料で使える
– 人気プロジェクトはExploreに
– 他ゲームのシーンやコードは閲...
クラウドホスティングゲーム開発環境
• 開発環境の構成比較:一般的な開発
開発環境
提供元
検証版
配置先
バージョン管理
ツール
情報共有ツール
配信先
開発グループ検証
会社
開発キット
作業成果
最新データ
配信版
検証版
検証
クラウドホスティングゲーム開発環境
• 開発環境の構成比較:PlayCanvasでの開発
PlayCanva
s
配信先
開発グループ
検証
会社
開発キット
作業
最新データ
配信版検証版
検証
配信版
配信版
開発に必要なものはPC,ネット...
ご利用事例
• CMサイト様
– CMサイトが自社アドゲーム開発にPlayCanvasを採用!CMサイトの考え
る次世代のアドゲームとは?
https://support.playcanvas.jp/hc/ja/articles/1150050...
PlayCanvas Editor
- Webとは思わせない、リッチで高機能な3Dエディターへ -
PlayCanvasの新機能
PlayCanvas Editor
• PlayCanvasのEditorも常に進化を続けています!
– リアルタイムチャット
– アセットレジストリ
– プレビュー機能
– テクスチャ圧縮
リアルタイムチャット
• エディターにリアルタイムチャットが搭載
– 遠隔地での共同作業でもサードパーティのチャットツールが不要に
アセットレジストリ
• アセットごとにロードするタイミングを制御する機能
ロード時間を短縮化
– Asset > preload が falseならストリーミングに
– ロード時間を効率的に短縮化
– pc.AssetRegistry.once...
アセットレジストリ
• モデルケース その1
– asset 118 1.95MB (material 94, model 24)
– アセットが増えれば増えるほど
preload時間は増大 → その対策に
プリ
ロード
スト
リーミ
ング
D...
アセットレジストリ
• モデルケース その2
– 同じゲームシステムでアセットだけ切り替えて
複数展開先にデプロイしたい場合
– Assetごとにタグを設定可能
• pc.AssetRegistry.findByTag()で
タグ付けされたAs...
プレビュー強化
• プレビュー強化により開発を加速!
– Assetプレビュー
– カメラプレビュー
– アニメーションプレビュー
– パーティクルプレビュー
テクスチャ圧縮
• WebGLゲームにとってリソース管理は常に気にするべき存在
– テクスチャビットマップをワンクリック操作で圧縮
– テクスチャの圧縮率とVRAM展開サイズをメニュー上で確認可能。最適化。
– たとえばこの画像
• 4096 ...
テクスチャ圧縮
• PlayCanvasは3つのテクスチャ圧縮形式に対応
• DXT : 全てのデスクトップデバイス及び一部のAndroidデバイス
• PVR : 全てのiOSデバイス及び一部のAndroidデバイス
• ETC1 : 大部分...
REST API
• ダウンロード→デプロイの流れをシームレスに
– API経由でダウンロードファイルの生成を要求
– JobIDが指定されるのでポーリングしてステータスを確認
– パラメータでアプリの名前やリリースノート,バージョン等入力
–...
REST APIのほかの使い方
• PlayCanvasの強み
– 共同作業、リアルタイム感
→ バージョン管理や復元などが難しい
• そこでREST API
– プロジェクト全体をzipでダウンロードすることができるAPIを提供
– 継続的に...
Code Editor
- スクリプティングにも最適 より使いやすくモダンなエディターへ -
PlayCanvas CodeEditor
• PlayCanvasではCode Editorも専用のものを提供
– サードパーティのエディターは基本的に未対応
• 共同開発,予測や補完等のため
– JavaScript, HTML, CSS,...
Code Editorの進化
• 2017年2月に大幅アップデート
– ファイルビューとタブ
• コードエディター内で全てのファイルを参照可能
– キーボードショートカットの拡充
• テキストエディタでの標準的なショートカットをおおむね使用可
...
script2.0
- 次世代スクリプティングシステム -
PlayCanvasの新機能
PlayCanvasでのスクリプティング
• 開発言語はJavaScript
– プロトタイプチェインで基本的には一般的なJS
– コンポーネントとなるスクリプトはpc.createScript()で作成
– 基本的なメソッド
• initia...
ノンリローディング・ノンコンパイル
• swap()
– ホットリローディング時に呼ばれるメソッド。アプリケーション内で
実行中のインスタンスに対して動的にアップデート可能。
複数人での共同編集に対応!
• 複数人で同一コードのリアルタイム編集が可能
– コミット,プッシュ,プルといったワークフローを排除
– コンフリクトを回避
スクリプト連結
• 開発規模に応じて、スクリプト数は増大..
• スクリプト連結機能
複数スクリプトがデプロイ時には1つに
– 単独のJSファイルでの複数スクリプト定義をサポート
– チェックボックス1つで可能
– Option
• >Conc...
スクリプト連結
• モデルケース
13ファイル 1.09MB
Concatenate Scripts
__game-scripts.js
1ファイル 7KB
連結、短縮化
難読化
Engine
- PlayCanvasを支える 軽量で高速なエンジン -
Engine
• MITライセンスで公開中
– 6522 commits
– 26 contributors
– Fork 500↑
• 内部の実装は全て閲覧可能
– オープンソースなので、ロジックやメンバは簡単にわかる
– 全てJavaScr...
PlayCanvas Engineの新機能
• 物理エンジンの最適化
– PlayCanvasには物理エンジン[Ammo.js]がデフォルトで搭載
• Ammo.js … BulletをemscriptenでJavaScriptにクロスコンパイ...
PlayCanvas Engineの新機能
• WebVRの標準搭載
– WebVR…Webブラウザ上で動作するVRアプリケーション
• ハイエンドPCとハイエンドHMDを接続して楽しむタイプ
– ブラウザベンダがHMD向けAPIを公開
• ス...
WebGL2.0
• WebGLの新規格 WebGL2.0が公開
– Open GL ES3.0互換の新しいWebGL
– 基本コンセプトは変わらず、いくつかの新機能搭載
• Transform feedback
• 3D テクスチャ
• MS...
WebGL2.0
• PlayCanvasのランタイムエンジンには実装済み
– Setting > RENDERING > Prefer WebGL 2.0のチェックボックスを入れるだけ!
デフォルトではtrue
– 実行時にWebGL2.0対...
WebGL2.0のブラウザ対応状況
• デスクトップブラウザには徐々に対応中
– Firefox
– Chrome
– Opera がすでに対応済み
– Edge : UNDER CONSIDERATION
– webkit : IN DEVE...
WebGLアプリの今後
- ゲームプラットフォームとしてのWeb -
Webにゲームが戻ってくる日
• 端末性能の向上
– PC, スマホともにWebがゲームプラットフォームとして十分機能する
• 次世代ブラウザゲーム
– 美麗なグラフィックスを活かしたゲームも開発可能に
– 開発環境の登場。Webを意識すること...
昨今のWebGLゲームを取り巻く環境
• HTML5 ゲームプラットフォームが多く登場
– ポイントサイト等のミニゲームプラットフォームが主流だった
– WebGL, ストリーミング技術の向上により大型IPタイトル等も登場
• より増えるWeb...
まとめ
• PlayCanvasは日々進化し続けています!
– ゲーム開発者がWebGLアプリ開発を始めるにはとっても心強い味方!
• Webを意識せず、ゲーム開発に集中できる環境が整ってきている
• ゲームプラットフォームとしてのWebも成長...
Upcoming SlideShare
Loading in …5
×

【GTMF2017】PlayCanvas新機能( 2017/6/30,7/14講演)

GTMF2017公演資料

  • Be the first to comment

  • Be the first to like this

【GTMF2017】PlayCanvas新機能( 2017/6/30,7/14講演)

  1. 1. PlayCanvas運営事務局 津田
  2. 2. アジェンダ 1. PlayCanvasとは – Editor – Engine – Community 2. Editorの新機能 – リアルタイムチャット – アセットレジストリ – プレビュー強化 – テクスチャ圧縮 – REST API 3. あたらしくなった Code Editor – 機能の充実化 – 補完の強化 4. 次世代スクリプティング –script2.0- – ノンリローディング,コンパイル – 共同開発 – パブリッシング時の圧縮化と難読化 5. Engineの新機能 – WebVR ステレオレンダリングの最適化 – WebGL2.0対応 6. WebGLアプリの今後 – WebGLのマーケットプレース – 増えるWeb API 7. まとめ
  3. 3. PlayCanvasとは
  4. 4. PlayCanvasとは • HTML5 WebGLで動く3Dゲームを ブラウザ上で開発配信できる統合環境 • Editor + Engine + Community 一体型 「クラウドホスティングゲーム開発環境」 – リアルタイムコラボレーションに焦点を当てた開発・プレイ環境を目 指し、日々改善が進められている
  5. 5. PlayCanvas Editor • Web上で完全に動作 • 直感的なデザイン • コラボレーション • 即時反映
  6. 6. PlayCanvas Engine • MITライセンスのOSS • Editorとは別でも提供 • JavaScript 96% • コンポーネント指向 • 軽量なのが特徴 – ソースコード8MB – ランタイムコード2.43MB – gZip圧縮後 147KB
  7. 7. PlayCanvas Community • サービスサイトにコミュニティも統合 – 開発物の紹介や相談等活発 • 無料から使える公開環境 – 200MBまで無料で使える – 人気プロジェクトはExploreに – 他ゲームのシーンやコードは閲覧可能
  8. 8. クラウドホスティングゲーム開発環境 • 開発環境の構成比較:一般的な開発 開発環境 提供元 検証版 配置先 バージョン管理 ツール 情報共有ツール 配信先 開発グループ検証 会社 開発キット 作業成果 最新データ 配信版 検証版 検証
  9. 9. クラウドホスティングゲーム開発環境 • 開発環境の構成比較:PlayCanvasでの開発 PlayCanva s 配信先 開発グループ 検証 会社 開発キット 作業 最新データ 配信版検証版 検証 配信版 配信版 開発に必要なものはPC,ネット,ブラウザのみ!
  10. 10. ご利用事例 • CMサイト様 – CMサイトが自社アドゲーム開発にPlayCanvasを採用!CMサイトの考え る次世代のアドゲームとは? https://support.playcanvas.jp/hc/ja/articles/115005023268 • ボトルキューブ様 – PlayCanvasを採用し4タイトルのゲームアプリを開発したボトルキューブ の次なる一手は? https://support.playcanvas.jp/hc/ja/articles/230074267 PlayCanvasの国内でのご採用も徐々に増えてきています!!
  11. 11. PlayCanvas Editor - Webとは思わせない、リッチで高機能な3Dエディターへ - PlayCanvasの新機能
  12. 12. PlayCanvas Editor • PlayCanvasのEditorも常に進化を続けています! – リアルタイムチャット – アセットレジストリ – プレビュー機能 – テクスチャ圧縮
  13. 13. リアルタイムチャット • エディターにリアルタイムチャットが搭載 – 遠隔地での共同作業でもサードパーティのチャットツールが不要に
  14. 14. アセットレジストリ • アセットごとにロードするタイミングを制御する機能 ロード時間を短縮化 – Asset > preload が falseならストリーミングに – ロード時間を効率的に短縮化 – pc.AssetRegistry.once(“load”)イベントを利用して ロードイベントの実行や終了時のコールバック等も
  15. 15. アセットレジストリ • モデルケース その1 – asset 118 1.95MB (material 94, model 24) – アセットが増えれば増えるほど preload時間は増大 → その対策に プリ ロード スト リーミ ング DOM操作 DOM操作 preload prel oad 描画開始 描画開始 2.84s 4.18s 2.89s 3.31s
  16. 16. アセットレジストリ • モデルケース その2 – 同じゲームシステムでアセットだけ切り替えて 複数展開先にデプロイしたい場合 – Assetごとにタグを設定可能 • pc.AssetRegistry.findByTag()で タグ付けされたAssetを検索、ロード • 効率的にアセットを管理 PlayCanva s デプロイ 先 A デプロイ 先 B
  17. 17. プレビュー強化 • プレビュー強化により開発を加速! – Assetプレビュー – カメラプレビュー – アニメーションプレビュー – パーティクルプレビュー
  18. 18. テクスチャ圧縮 • WebGLゲームにとってリソース管理は常に気にするべき存在 – テクスチャビットマップをワンクリック操作で圧縮 – テクスチャの圧縮率とVRAM展開サイズをメニュー上で確認可能。最適化。 – たとえばこの画像 • 4096 x 2048px • JPG 1.81MB • WebGLで扱う場合には24ビットRGB → VRAMの33.6MBを占める – アセットが増えるとデータ量は増大 • WebGLではGPU上のハードウェアでサポートされる いくつかの圧縮テクスチャ形式を提供することで解決
  19. 19. テクスチャ圧縮 • PlayCanvasは3つのテクスチャ圧縮形式に対応 • DXT : 全てのデスクトップデバイス及び一部のAndroidデバイス • PVR : 全てのiOSデバイス及び一部のAndroidデバイス • ETC1 : 大部分のAndroidデバイス • テクスチャアセットのインスペクターから – 現在のサイズ[VRAMで占めるサイズ] • 1/6のサイズに圧縮化 • 動作するデバイスで最適な圧縮方法をPlayCanvasが選択 • 端末で動作するデモはこちら
  20. 20. REST API • ダウンロード→デプロイの流れをシームレスに – API経由でダウンロードファイルの生成を要求 – JobIDが指定されるのでポーリングしてステータスを確認 – パラメータでアプリの名前やリリースノート,バージョン等入力 – ビルド終了後、DLリンクが発行される • Organizationプランのみに提供 PlayCanva s クライアント API経由でリクエスト jobID ビルド jobステータスを確認 アプリのパラメータ指定 応答 download_urlにlink
  21. 21. REST APIのほかの使い方 • PlayCanvasの強み – 共同作業、リアルタイム感 → バージョン管理や復元などが難しい • そこでREST API – プロジェクト全体をzipでダウンロードすることができるAPIを提供 – 継続的にDLすることでバックアップに
  22. 22. Code Editor - スクリプティングにも最適 より使いやすくモダンなエディターへ -
  23. 23. PlayCanvas CodeEditor • PlayCanvasではCode Editorも専用のものを提供 – サードパーティのエディターは基本的に未対応 • 共同開発,予測や補完等のため – JavaScript, HTML, CSS, Json, GLSL, text等が書ける – PlayCanvas以外のJSファイルも入れられる・実行可能 • サードパーティのjsライブラリも ソースファイルをアップロードできるなら使用可能 • <script>タグでURL指定して利用する方法はできない
  24. 24. Code Editorの進化 • 2017年2月に大幅アップデート – ファイルビューとタブ • コードエディター内で全てのファイルを参照可能 – キーボードショートカットの拡充 • テキストエディタでの標準的なショートカットをおおむね使用可 – 検索・置換機能の強化 • インタフェース変更、全ファイルからの検索も1クリック!
  25. 25. script2.0 - 次世代スクリプティングシステム - PlayCanvasの新機能
  26. 26. PlayCanvasでのスクリプティング • 開発言語はJavaScript – プロトタイプチェインで基本的には一般的なJS – コンポーネントとなるスクリプトはpc.createScript()で作成 – 基本的なメソッド • initialize … 初期化時に実行 • update … 毎フレーム実行 • swap … 後述 var Script = pc.createScript('script'); Script.prototype.initialize = function() { }; Script.prototype.update = function(dt) { }; Script.prototype.swap = function(old)
  27. 27. ノンリローディング・ノンコンパイル • swap() – ホットリローディング時に呼ばれるメソッド。アプリケーション内で 実行中のインスタンスに対して動的にアップデート可能。
  28. 28. 複数人での共同編集に対応! • 複数人で同一コードのリアルタイム編集が可能 – コミット,プッシュ,プルといったワークフローを排除 – コンフリクトを回避
  29. 29. スクリプト連結 • 開発規模に応じて、スクリプト数は増大.. • スクリプト連結機能 複数スクリプトがデプロイ時には1つに – 単独のJSファイルでの複数スクリプト定義をサポート – チェックボックス1つで可能 – Option • >Concatenate Scripts
  30. 30. スクリプト連結 • モデルケース 13ファイル 1.09MB Concatenate Scripts __game-scripts.js 1ファイル 7KB 連結、短縮化 難読化
  31. 31. Engine - PlayCanvasを支える 軽量で高速なエンジン -
  32. 32. Engine • MITライセンスで公開中 – 6522 commits – 26 contributors – Fork 500↑ • 内部の実装は全て閲覧可能 – オープンソースなので、ロジックやメンバは簡単にわかる – 全てJavaScriptで記述されているのでスクリプティングに慣れれば実装もわかる • WebGLライブラリとして利用することも可能 – マークアップで開発する方法 – その際はライセンス費用は発生しない
  33. 33. PlayCanvas Engineの新機能 • 物理エンジンの最適化 – PlayCanvasには物理エンジン[Ammo.js]がデフォルトで搭載 • Ammo.js … BulletをemscriptenでJavaScriptにクロスコンパイルしたもの • リファクタリングが完了し、より多くのAPIが利用可能に – もちろんサードパーティの物理エンジンも 利用可能 • ammo.jsはかなりリッチな物理エンジン • p2.jsなど2D限定の物理エンジン等も選択肢
  34. 34. PlayCanvas Engineの新機能 • WebVRの標準搭載 – WebVR…Webブラウザ上で動作するVRアプリケーション • ハイエンドPCとハイエンドHMDを接続して楽しむタイプ – ブラウザベンダがHMD向けAPIを公開 • スマートフォンでステレオレンダリング、汎用ゴーグルで楽しむタイプ – fullscreen API, deviceemotion等要素はそろっている • PlayCanvasはどちらも対応!! – ゲーム開発感覚でWebVRアプリを開発可能 • 特にスマホWebVRに注力 – ステレオレンダリングが最適化、モバイルでの パフォーマンスが大幅に向上
  35. 35. WebGL2.0 • WebGLの新規格 WebGL2.0が公開 – Open GL ES3.0互換の新しいWebGL – 基本コンセプトは変わらず、いくつかの新機能搭載 • Transform feedback • 3D テクスチャ • MSAAを使用したHDRレンダリング • ハードウェアPCF • 対象範囲へのアルファ – mozillaと共同でWebGL2.0デモ 「AFTER THE FLOOD」を公開 https://playcanv.as/e/p/44MRmJRU/
  36. 36. WebGL2.0 • PlayCanvasのランタイムエンジンには実装済み – Setting > RENDERING > Prefer WebGL 2.0のチェックボックスを入れるだけ! デフォルトではtrue – 実行時にWebGL2.0対応プラットフォームかどうかPlayCanvas側で判断 非対応端末だった場合はWebGLでレンダリング
  37. 37. WebGL2.0のブラウザ対応状況 • デスクトップブラウザには徐々に対応中 – Firefox – Chrome – Opera がすでに対応済み – Edge : UNDER CONSIDERATION – webkit : IN DEVELOPMENT 2017.6時点 https://caniuse.com/#search=webgl2 https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webgl20/
  38. 38. WebGLアプリの今後 - ゲームプラットフォームとしてのWeb -
  39. 39. Webにゲームが戻ってくる日 • 端末性能の向上 – PC, スマホともにWebがゲームプラットフォームとして十分機能する • 次世代ブラウザゲーム – 美麗なグラフィックスを活かしたゲームも開発可能に – 開発環境の登場。Webを意識することなくゲーム開発に集中可能 • Webの自由度 – ネイティブアプリとの大きな違い • マーケット管理者に左右されない、コンテンツの自由度 • インストール不要,URLひとつで配信可能
  40. 40. 昨今のWebGLゲームを取り巻く環境 • HTML5 ゲームプラットフォームが多く登場 – ポイントサイト等のミニゲームプラットフォームが主流だった – WebGL, ストリーミング技術の向上により大型IPタイトル等も登場 • より増えるWeb APIとWebアプリの可能性 – Web Audio API … 音声ファイル,動的にエフェクト,リバーブなど – GamePad API … ゲームコントローラの入力を受付 – Indexed DB, WebStorage … データベースやストレージ – Payment Request API … 支払いのチェックアウトフローをより簡単に – http, https, WebSocket, WebRTC … P2Pもサーバー/クライアント通信も。 • 新しい要素は増え続けている – Web Bluetooth API getUserMedia/Stream API iOS 11 ARkitの登場で今後WebARも可能に もちろんPhotonも
  41. 41. まとめ • PlayCanvasは日々進化し続けています! – ゲーム開発者がWebGLアプリ開発を始めるにはとっても心強い味方! • Webを意識せず、ゲーム開発に集中できる環境が整ってきている • ゲームプラットフォームとしてのWebも成長! – 多くのHTML5プラットフォームが登場 – 要素となるWeb APIも数々登場 • Webでの表現手法がより広がる PlayCanvasは皆様のWebGLゲーム開発をお助けします! このタイミングでWebGLゲーム開発をはじめてみませんか?

×