PlayCanvasは、とまらない @html5jゲーム部 2017/2/15

Copyright BottleCube Inc, All Rights Reserved.

社長付　執行役員小川雅和

2017 年 2 月 15 日

第２回 html5j ゲーム部

PlayCanvas は、とまらない

Copyright BottleCube Inc, All Rights Reserved. 2

小川雅和株式会社ボトルキューブ

社長付　執行役員

略歴‘98 年

ゲームプログラマーデビュー

’01 年ボトルキューブ設立

’15 年末頃より

HTML5+WebGL ゲーム開発研究として

PlayCanvas を選定し、実証開発に取り組

み。大いにファンになる。

講演前にひとこと

HTML5 の見識は浅いです！

それでも PlayCanvas なら WebGL ゲームが

作れます！

自己紹介


ボトルキューブでは、 PlayCanvas で、こんなゲームを開発しました。

Yahoo! ゲーム内の「かんたんゲーム」にて、 2016 年 5 月頃から

配信しております。

とりぴょ～ん脱毛指令ハナゲリオン

ジグザグペンギンマネーラッシュパズル

http://webgame.bottlecube.co.jp/?game_id=bo-0001-toripyon

http://webgame.bottlecube.co.jp/?game_id=bo-0002-hanagelion

http://webgame.bottlecube.co.jp/?game_id=bo-0003-zigzagpenguin

http://webgame.bottlecube.co.jp/?game_id=bo-0004-moneyrushpuzzle


PlayCanvas については、 CEDEC2016 でのワークショップ登壇や、国内運営事務局からも取材をしていただきました。


本講演の狙い

PlayCanvas の概要のご説明

PlayCanvas の今と将来性

PlayCanvas で WebGL ゲームを作るということ


PlayCanvas ってなに？


PLAYCANVAS 社が開発したHTML5+WebGL で動く３ D ゲームをブラウザ上で開発配信できる統合環境


2011 年にロンドンで、クラウドホスティングゲーム開発環境を構築するため PLAYCANVAS 社が設立されました。

次世代の開発環境として、リアルタイムコラボレーションに焦点を当てたゲームの開発＆プレイ環境のソーシャルハブを目指して日々改善が進められています。




この２ワードを軸に機能は継続的に改善されています。2016 年後半は 1.5 カ月ごとのペースで大型機能追加


もう少しわかりやすく


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

開発グループ

開発環境提供元バージョン管理ツール

情報共有ツール

検証版配置先配信先

開発キット作業成果

最新データ

検証版

配信版検証会社


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

開発グループPlayCanvas配信先

作業成果

配信版

検証会社

配信版

最新データ

検証版

開発キット

配信版

( 有料 )

今そこで直したことが、そのままチームメンバーに反映！開発がリアルタイムライブ感をもって進行します。


ざっくりいうと、

ブラウザで完結する HTML5+WebGL ゲーム開発統合環境。

開発配信に最低必要なものは、ネット、 PC 、ブラウザだけ。

リアルタイムに開発情報と開発成果は共有更新されます。

機能は日々進化していっています。


PlayCanvas の進化と拡大


2016 年の PlayCanvas の５つの大きなアップデート

1. Script2.0 の導入スクリプトのホットスワップができるようになりました。これによってページリロードせずにコード変更が反映されるようになりました。

2. WebVR の統合サポートステレオ画面への最適化を含め、 WebVR アプリ開発環境がサポートされました。

3.光源マップ処理の最適化静的な光源処理を起動時に事前計算したテクスチャ用意し描画を超高速化します。

4. テクスチャビットマップをワンクリック操作で圧縮

テクスチャの圧縮率と VRAM展開サイズをメニュー上で確認して選択可能に。

5. REST API対応によるビルド自動化外部からスクリプト実行による、定期的な最新版自動生成に対応。


ほか、直近ではこんなアップデートが実施されました。パーティクルおよびアニメーションのリアルタイムプレ

ビュー開発環境のエディタウィンドウ上でのパーティクルとモデルアニメーションのプレビューに対応しました。 https://twitter.com/playcanvasJP/status/810661373709586433 https://twitter.com/playcanvasJP/status/810685722407694336

Audio コンポーネントが Web Audio API対応WebAudioAPI対応により音声に動的エフェクトを充てられるようになりました。http://developer.playcanvas.com/ja/tutorials/audio-effects/

物理エンジン最適化物理エンジンとしてオープンソースの物理エンジン「 Bullet 」を emscriptenによって JavaScript にクロスコンパイルした「 Ammo.js 」を利用しています。このリファクタリングが完了し、最適化した物理エンジンとなりました。

開発グループチャット機能も環境内に統合エディタウィンドウ内にチャット窓が開きます。 VisualStudioOnline もビックリ。

https://twitter.com/playcanvasJP/status/810661373709586433



http://developer.playcanvas.com/ja/tutorials/audio-effects/

http://developer.playcanvas.com/ja/tutorials/audio-effects/


Will Eastcott(PLAYCANVAS CEO) 　より 2016/8/16 にいただいたPlayCanvas 開発計画リストトップ 10項目

-*Server API:* An API to enable automation of key tasks from script, such as asset uploading and game publishing.-*Editor API:* An API to extend the Editor with new functionality. This API already exists - we just need to finalize and document it.-*Asset Variants:* An update to the asset pipeline to generate multiple formats for certain asset types to transparently take advantage of things like texture compression. This should be released in the next couple of weeks.-*Asset LOD:* An update to the asset pipeline to generate multiple levels of detail of certain asset types for fasting loading of scenes.- *Clustering:* Smarter placement of project data in world regions to facilitate faster loading/access.- *Entity Hierarchy:* Provide option to expand model type entities in the hierarchy to manipulate individual sub-components without having to resort to script. - *Node-based Material Editor:* An artist-friendly visual editing tool for creating new material types that does not require any knowledge of shader coding. - *Publish to CDN:* Currently, projects published to playcanvas.com are served from S3. We want to shift over to CDN (CloudFront). - *Collaboration Improvements:* We are considering a branch-merge workflow for PlayCanvas projects. - *Templates:* A mechanism to package up portions of a scene to be reused in any project.

( メールから抜粋 )


Will Eastcott(PLAYCANVAS CEO) 　より 2016/8/16 にいただいたPlayCanvas 開発計画リストトップ 10項目

-*Server API:* An API to enable automation of key tasks from script, such as asset uploading and game publishing.-*Editor API:* An API to extend the Editor with new functionality. This API already exists - we just need to finalize and document it.-*Asset Variants:* An update to the asset pipeline to generate multiple formats for certain asset types to transparently take advantage of things like texture compression. This should be released in the next couple of weeks.-*Asset LOD:* An update to the asset pipeline to generate multiple levels of detail of certain asset types for fasting loading of scenes.- *Clustering:* Smarter placement of project data in world regions to facilitate faster loading/access.- *Entity Hierarchy:* Provide option to expand model type entities in the hierarchy to manipulate individual sub-components without having to resort to script. - *Node-based Material Editor:* An artist-friendly visual editing tool for creating new material types that does not require any knowledge of shader coding. - *Publish to CDN:* Currently, projects published to playcanvas.com are served from S3. We want to shift over to CDN (CloudFront). - *Collaboration Improvements:* We are considering a branch-merge workflow for PlayCanvas projects. - *Templates:* A mechanism to package up portions of a scene to be reused in any project.

( メールから抜粋 )

サーバー API 　ゲームのアップロードや公開など重要な作業をスクリプトから自動化できる API です。

エディタ API 　　エディタを新機能で拡張する API です。この API はできています。最終版にしてドキュメントをつくる必要はあります。

アセット多様化　テクスチャ圧縮のような明確な効果がある複数フォーマットからの生成するアセットパイプラインの更新です。これは、２週間以内にリリースされるはずです。

アセット LOD 　シーンのロードを軽減するため、アセットパイプラインで特定のアセット種類で複数の LOD を生成する更新です。

クラスタリング　読み込みとアクセスの高速化促進するため、世界の地域にあわせたプロジェクトデータの適当な配置をします。

エンティティヒエラルキー　スクリプトに頼らず個々のサブコンポーネントを操作するため、 Hierarchy 内のモデルタイプのエンティティを拡張するためのオプションを提供します。

ノードベースのマテリアルエディタ　 Shader コーディングの知識が不要な新規のマテリアルタイプを作成するアーティスト向けビジュアルエディタツールです。

CDN でのパブリッシュ　現在、プロジェクト公開する PlayCanvas.com は、 Amazon S3 で提供しています。これを、 CDN(Amazon CloudFront) に移行したいです。

コラボレーション改善　 PlayCanvas プロジェクトで、ブランチ - マーチワークフローを導入検討してます。

テンプレート　どのプロジェクトでも再利用できるシーンの一部をパッケージする機能です。

さらなる開発性向上と遊びやすさの発展展望が計画されています


採用事例やパートナーシップの事例は拡大し続けています。

ディズニーが子供用プログラム教育ソフト“Moana HOUR OF CODE” の開発に採用しました。

Mozilla との WebGL2.0用デモ「 AFTER the FLOOD」を共同開発。本デモでの WebGL2.0 の機能

Transform feedback:葉のパーティクルアニメーションを GPU で処理しています。

3D テクスチャ手続き型クラウドの作成に使用。

MSAA を使用した HDR レンダリング

アンチエイリアスされた HDRサーフェスを的確にブレンディング。

ハードウェア PCFより低いコストで、さらに向上したシャドウフィルタリングを実現。

対象範囲へのアルファアンチエイリアスされた葉の茂みをレンダリング

http://partners.disney.com/hour-of-code

https://playcanv.as/p/44MRmJRU/



Google Chrome での WebVR 正式対応にともなうパートナー認定PlayCanvasほか 2 環境が早期パートナーとして紹介されています。ニュースソース :TechCrunch

WebVR Lab ： https://playcanv.as/p/sAsiDvtC/

http://jp.techcrunch.com/2017/02/10/20170209google-officially-brings-webvr-to-chrome/

https://playcanv.as/p/sAsiDvtC/



GlobalGameJam 2017＠東京工科大での開発採用 RoboCoke

http://globalgamejam.org/2017/games/robocoke




そのほか新着の周辺情報 (PlayCanvas 運営事務局より ) webvr.info に掲載

WebVR ポータル webvrinfo に掲載されました https://webvr.info/

Facebook インスタントゲームへのゲーム提供Facebook インスタントゲーム市場は、 2017 年 2 月現在利用者 293万人。こちらに次の 2 本のゲームが登録されています。King “Shuffle Cats Mini” https://www.facebook.com/ShuffleCatsMini/PLAYCANVAS “Master Archer” https://www.facebook.com/MasterArcherInstant/

ゲームクリエイターズカンファレンス 17@ 大阪での出展2/18(土 ) に大阪で開催される、ゲームクリエイターズカンファレンス 17(http://gc-conf.com) のVR ブースで PlayCanvas 運営事務局が出展されます。PlayCanvas WebVR によるコンテンツを出展予定とのことです。

https://webvr.info/

https://www.facebook.com/ShuffleCatsMini/

https://www.facebook.com/MasterArcherInstant/

http://gc-conf.com/


ゲーム作りをする現場としてのPlayCanvas


冒頭 2016 年 Yahoo ゲームでのゲーム提供して以来、弊社では商用コンテンツ開発での利用は停止しています。

Yahoo! ゲームかんたんゲームプラスへのHTML5 ゲームの新規開発提供は続けています。

それは、 Canvas を主体に軽量で起動する別ライブラリベースでの開発に切り替わっています。


なぜ？


日本でのゲーム市場に対しては、Too Rich すぎる PlayCanvas のゲーム

1. 商用の HTML5 ゲームを提供できる国内マーケット不足 2017 年 2 月現在、十分な国内利用者がいる

HTML5 ゲーム配信市場は、 Yahoo! ゲームのみです。キャリア公式マーケットもありますが、いずれも参入障壁が高い。Facebook インスタントゲームは、国内知名度がまだ不十分。

2. WebGL がスペックを発揮できないブラウザたち PC ブラウザゲーム国内市場では、 IE11ユーザーが主体。 Microsoft Edge も Webkitベースでないので、 WebGL2.0対応で問題あ

り。モバイル国内市場においては、ブラウザの性能がばらつき過ぎている。

3. WebVR市場はまだまだ開拓期黎明期を脱しつつも、マネタイズ手法ができる市場が形成されていません。


日本でのゲーム市場に対しては、Too Rich すぎる PlayCanvas のゲーム

1. 商用の HTML5 ゲームを提供できる国内マーケット不足 2017 年 2 月現在、十分な国内利用者がいる

HTML5 ゲーム配信市場は、 Yahoo! ゲームのみです。キャリア公式マーケットもありますが、いずれも参入障壁が高い。Facebook インスタントゲームは、国内知名度がまだ不十分。

2. WebGL がスペックを発揮できないブラウザたち PC ブラウザゲーム国内市場では、 IE11ユーザーが主体。 Microsoft Edge も Webkitベースでないので、 WebGL2.0対応で問題あ

り。モバイル国内市場においては、ブラウザの性能がばらつき過ぎている。

3. WebVR市場はまだまだ開拓期黎明期を脱しつつも、マネタイズ手法ができる市場が形成されていません。

WebGL ゲーム開発継続は厳しいという経営判断


まとめWebGL ゲームを集団でつくり、遊ぶツールとして

は、依然として他の追随を許さない優秀な環境です。

国内にて商用に開発するとした場合、WebGL/WebVR のマネタイズ市場が未成熟です。十分な売り上げを今現段階で見込むのは高リスクです。

国外に目をやれば、ポジショニングの確立しつつあり、研究開発での導入事例は増え続けています。

PlayCanvas は成長期。国内市場はまだ黎明期です。

誰かが市場成長させてから参入しますか？


【実践】 WEB VR プロジェクトを作って公開してみましょう


ご清聴ありがとうございました。

PlayCanvasは、とまらない @html5jゲーム部 2017/2/15

Software

Transcript of PlayCanvasは、とまらない @html5jゲーム部 2017/2/15