PlayCanvas運営事務局

津田

アジェンダ

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. まとめ

PlayCanvasとは

PlayCanvasとは

• HTML5 WebGLで動く3Dゲームを

ブラウザ上で開発配信できる統合環境

• Editor ＋ Engine ＋ Community 一体型

「クラウドホスティングゲーム開発環境」– リアルタイムコラボレーションに焦点を当てた開発・プレイ環境を目指し、日々改善が進められている

PlayCanvas Editor

• Web上で完全に動作

• 直感的なデザイン

• コラボレーション

• 即時反映

PlayCanvas Engine

• MITライセンスのOSS

• Editorとは別でも提供

• JavaScript 96%

• コンポーネント指向

• 軽量なのが特徴– ソースコード8MB

– ランタイムコード2.43MB

– gZip圧縮後 147KB

PlayCanvas Community

• サービスサイトにコミュニティも統合– 開発物の紹介や相談等活発

• 無料から使える公開環境

– 200MBまで無料で使える

– 人気プロジェクトはExploreに

– 他ゲームのシーンやコードは閲覧可能

クラウドホスティングゲーム開発環境

• 開発環境の構成比較：一般的な開発

開発環境提供元

検証版配置先

バージョン管理ツール

情報共有ツール

配信先

開発グループ検証会社

開発キット作業成果

最新データ

配信版

検証版

検証

クラウドホスティングゲーム開発環境

• 開発環境の構成比較：PlayCanvasでの開発

PlayCanva

s

配信先

開発グループ

検証会社

開発キット

作業

最新データ

配信版検証版

検証

配信版配信版

開発に必要なものはPC，ネット，ブラウザのみ！

ご利用事例

• ＣＭサイト様– ＣＭサイトが自社アドゲーム開発にPlayCanvasを採用！ＣＭサイトの考える次世代のアドゲームとは？https://support.playcanvas.jp/hc/ja/articles/115005023268

• ボトルキューブ様– PlayCanvasを採用し4タイトルのゲームアプリを開発したボトルキューブの次なる一手は？https://support.playcanvas.jp/hc/ja/articles/230074267

PlayCanvasの国内でのご採用も徐々に増えてきています！！

PlayCanvas Editor- Webとは思わせない、リッチで高機能な3Dエディターへ -

PlayCanvasの新機能

PlayCanvas Editor

• PlayCanvasのEditorも常に進化を続けています！– リアルタイムチャット

– アセットレジストリ

– プレビュー機能

– テクスチャ圧縮

リアルタイムチャット

• エディターにリアルタイムチャットが搭載– 遠隔地での共同作業でもサードパーティのチャットツールが不要に

アセットレジストリ

• アセットごとにロードするタイミングを制御する機能ロード時間を短縮化

– Asset > preload が falseならストリーミングに

– ロード時間を効率的に短縮化

– pc.AssetRegistry.once(“load”)イベントを利用してロードイベントの実行や終了時のコールバック等も

アセットレジストリ

• モデルケース その1

– asset 118 1.95MB (material 94, model 24)

– アセットが増えれば増えるほどpreload時間は増大 → その対策に

プリロード

ストリーミング

DOM操作

DOM操作

preload

prel

oad

描画開始

描画開始

2.84s 4.18s

2.89s 3.31s

アセットレジストリ

• モデルケース その2– 同じゲームシステムでアセットだけ切り替えて複数展開先にデプロイしたい場合

– Assetごとにタグを設定可能

• pc.AssetRegistry.findByTag()でタグ付けされたAssetを検索、ロード

• 効率的にアセットを管理

PlayCanva

s

デプロイ先

A

デプロイ先

B

プレビュー強化

• プレビュー強化により開発を加速！– Assetプレビュー

– カメラプレビュー

– アニメーションプレビュー

– パーティクルプレビュー

テクスチャ圧縮

• WebGLゲームにとってリソース管理は常に気にするべき存在– テクスチャビットマップをワンクリック操作で圧縮– テクスチャの圧縮率とVRAM展開サイズをメニュー上で確認可能。最適化。

– たとえばこの画像

• 4096 x 2048px

• JPG 1.81MB

• WebGLで扱う場合には24ビットRGB→ VRAMの33.6MBを占める

– アセットが増えるとデータ量は増大• WebGLではGPU上のハードウェアでサポートされるいくつかの圧縮テクスチャ形式を提供することで解決

テクスチャ圧縮

• PlayCanvasは3つのテクスチャ圧縮形式に対応• DXT : 全てのデスクトップデバイス及び一部のAndroidデバイス

• PVR : 全てのiOSデバイス及び一部のAndroidデバイス

• ETC1 : 大部分のAndroidデバイス

• テクスチャアセットのインスペクターから– 現在のサイズ[VRAMで占めるサイズ]

• 1/6のサイズに圧縮化

• 動作するデバイスで最適な圧縮方法をPlayCanvasが選択

• 端末で動作するデモはこちら

REST API

• ダウンロード→デプロイの流れをシームレスに– API経由でダウンロードファイルの生成を要求

– JobIDが指定されるのでポーリングしてステータスを確認

– パラメータでアプリの名前やリリースノート，バージョン等入力

– ビルド終了後、DLリンクが発行される

• Organizationプランのみに提供

PlayCanva

sクライアント

API経由でリクエスト

jobID ビルド

jobステータスを確認アプリのパラメータ指定

応答 download_urlにlink

REST APIのほかの使い方

• PlayCanvasの強み– 共同作業、リアルタイム感

→ バージョン管理や復元などが難しい

• そこでREST API– プロジェクト全体をzipでダウンロードすることができるAPIを提供

– 継続的にDLすることでバックアップに

Code Editor- スクリプティングにも最適 より使いやすくモダンなエディターへ -

PlayCanvas CodeEditor

• PlayCanvasではCode Editorも専用のものを提供– サードパーティのエディターは基本的に未対応

• 共同開発，予測や補完等のため

– JavaScript, HTML, CSS, Json, GLSL, text等が書ける

– PlayCanvas以外のJSファイルも入れられる・実行可能

• サードパーティのjsライブラリもソースファイルをアップロードできるなら使用可能

• <script>タグでURL指定して利用する方法はできない

Code Editorの進化

• 2017年2月に大幅アップデート– ファイルビューとタブ

• コードエディター内で全てのファイルを参照可能

– キーボードショートカットの拡充

• テキストエディタでの標準的なショートカットをおおむね使用可

– 検索・置換機能の強化

• インタフェース変更、全ファイルからの検索も1クリック！

script2.0- 次世代スクリプティングシステム -

PlayCanvasの新機能

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)

{ };

ノンリローディング・ノンコンパイル

• swap()– ホットリローディング時に呼ばれるメソッド。アプリケーション内で実行中のインスタンスに対して動的にアップデート可能。

複数人での共同編集に対応！

• 複数人で同一コードのリアルタイム編集が可能– コミット，プッシュ，プルといったワークフローを排除

– コンフリクトを回避

スクリプト連結

• 開発規模に応じて、スクリプト数は増大..

• スクリプト連結機能複数スクリプトがデプロイ時には1つに– 単独のJSファイルでの複数スクリプト定義をサポート

– チェックボックス1つで可能

– Option

• >Concatenate Scripts

スクリプト連結

• モデルケース

13ファイル 1.09MB

Concatenate Scripts

__game-scripts.js

1ファイル 7KB

連結、短縮化難読化

Engine- PlayCanvasを支える 軽量で高速なエンジン -

Engine

• MITライセンスで公開中– 6522 commits

– 26 contributors

– Fork 500↑

• 内部の実装は全て閲覧可能– オープンソースなので、ロジックやメンバは簡単にわかる

– 全てJavaScriptで記述されているのでスクリプティングに慣れれば実装もわかる

• WebGLライブラリとして利用することも可能– マークアップで開発する方法

– その際はライセンス費用は発生しない

PlayCanvas Engineの新機能

• 物理エンジンの最適化– PlayCanvasには物理エンジン[Ammo.js]がデフォルトで搭載

• Ammo.js … BulletをemscriptenでJavaScriptにクロスコンパイルしたもの

• リファクタリングが完了し、より多くのAPIが利用可能に

– もちろんサードパーティの物理エンジンも利用可能

• ammo.jsはかなりリッチな物理エンジン

• p2.jsなど2D限定の物理エンジン等も選択肢

PlayCanvas Engineの新機能

• WebVRの標準搭載– WebVR…Webブラウザ上で動作するVRアプリケーション

• ハイエンドPCとハイエンドHMDを接続して楽しむタイプ

– ブラウザベンダがHMD向けAPIを公開

• スマートフォンでステレオレンダリング、汎用ゴーグルで楽しむタイプ

– fullscreen API, deviceemotion等要素はそろっている

• PlayCanvasはどちらも対応！！– ゲーム開発感覚でWebVRアプリを開発可能

• 特にスマホWebVRに注力

– ステレオレンダリングが最適化、モバイルでのパフォーマンスが大幅に向上

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/

WebGL2.0

• PlayCanvasのランタイムエンジンには実装済み– Setting > RENDERING > Prefer WebGL 2.0のチェックボックスを入れるだけ！デフォルトではtrue

– 実行時にWebGL2.0対応プラットフォームかどうかPlayCanvas側で判断非対応端末だった場合はWebGLでレンダリング

WebGL2.0のブラウザ対応状況

• デスクトップブラウザには徐々に対応中

– Firefox

– Chrome

– Opera がすでに対応済み

– Edge : UNDER CONSIDERATION

– webkit : IN DEVELOPMENT

2017.6時点https://caniuse.com/#search=webgl2https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webgl20/

WebGLアプリの今後- ゲームプラットフォームとしてのWeb -

Webにゲームが戻ってくる日

• 端末性能の向上– PC, スマホともにWebがゲームプラットフォームとして十分機能する

• 次世代ブラウザゲーム– 美麗なグラフィックスを活かしたゲームも開発可能に– 開発環境の登場。Webを意識することなくゲーム開発に集中可能

• Webの自由度– ネイティブアプリとの大きな違い

• マーケット管理者に左右されない、コンテンツの自由度• インストール不要，ＵＲＬひとつで配信可能

昨今の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も

まとめ

• PlayCanvasは日々進化し続けています！– ゲーム開発者がWebGLアプリ開発を始めるにはとっても心強い味方！

• Webを意識せず、ゲーム開発に集中できる環境が整ってきている

• ゲームプラットフォームとしてのWebも成長！– 多くのHTML5プラットフォームが登場

– 要素となるWeb APIも数々登場• Webでの表現手法がより広がる

PlayCanvasは皆様のWebGLゲーム開発をお助けします！

このタイミングでWebGLゲーム開発をはじめてみませんか？