【playcanvas×ncmb...
TRANSCRIPT
PlayCanvas運営事務局
津田
登壇者の自己紹介
• 津田良太郎@utautattaro
ＧＭＯクラウド株式会社PlayCanvas運営事務局
テクニカルアドバイザー
サンプル開発と技術支援が主PhotonやPlayCanvasをつかっていろいろな技術サンプルを作ってます
アジェンダ
• PlayCanvasとは– グラフィックスAPI ・ WebGLとは
– WebGLアプリ開発のイマドキ
– PlayCanvas詳細
– PlayCanvasでできること
– PlayCanvasの開発スタイル
• WebGLアプリの今後– ゲームプラットフォームとしてのWeb
– HTML5ゲームプラットフォームとPlayCanvas
– 拡充されるWebAPI
• まとめ
PlayCanvasとは
PlayCanvasとは
• HTML5 WebGLで動く3Dゲームを
ブラウザ上で開発配信できる統合環境
• Editor ＋ Engine ＋ Community 一体型
「クラウドホスティングゲーム開発環境」– リアルタイムコラボレーションに焦点を当てた開発・プレイ環境を目
指し、日々改善が進められている
そもそもグラフィックスAPIって
• 2D/3Dの3DCGを描画するためのAPI– 大きく分けて、DirectXとOpenGLの2つがある
• DirectX:MS向けの高速GL
• OpenGL:クロスプラットフォーム
• WebGLはOpen GLの仲間！– WebGL 1.0はOpenGL ES 2.0の互換
– ブラウザからGPUアクセスするJavaScript API
OpenGL1.3
OpenGL ES 2.0
WebGL 2.0
OpenGL ES 3.0
OpenGL ES 3.2 OpenGL4.5
WebGLとは
• Webブラウザ上で3DCGを表示させる標準仕様– WebブラウザからGPUアクセスするJavascript API
– 特別なプラグイン必要なし！
• Web上での3D表現のデファクトスタンダード
WebGLのための開発ライブラリ・フレームワーク
• WebGLを簡単に扱うための多くのライブラリ・フレームワークが登場
– Web• three.js 一番使われているWebGLライブラリ。無料。
• A-FRAME three.jsを利用して開発されたWebVR用フレームワーク
– ゲーム
• Unity
• Unreal Engine emscriptenを利用してJavaScriptにクロスコンパイル
WebGLのための開発ライブラリ・フレームワーク
• 最終的にはJSでWebGLを叩く形になるWeb ゲーム
– WebGLライブラリに深い部分は任せて、アプリの開発に専念。
– 開発者は抽象化されたHLAPIを使用– マークアップや、コードベースで開発していく
スタイルが多く、無料でOSSがほとんど
WebGL(GPU)
WebGL library(JS)
アプリケーション(html,JS)
HLAPI
LLAPI C# IL C++LLVM
IL JS
mono IL2CPP Clang Binaryen
– C#およびC++で記述されたコードを、さまざまな技術を利用してJavaScriptにクロスコンパイル
PlayCanvas Engine
• MITライセンスで公開されているOSS• JavaScriptだけで記述された軽量なエンジン• 多機能
– 豊富なグラフィックス– 衝突・物理– 音声– リソース管理– Entity/コンポーネントシステム– スクリプティングシステム– 各種I/O
• 軽量なのが特徴– ソースコード8MB– ランタイムコード2.43MB– gZip圧縮後 147KB
PlayCanvas Engine
• Engineそのものは、Webの文化にのっとっている– OSSでエンジン単体なら無料で使用可
– マークアップとJavaScriptを利用してコードベースで開発
WebGL(GPU)
PlayCanvas Engine(JS)
アプリケーション(JS)
HLAPI
LLAPI
PlayCanvas Editor
• ゲーム開発の文化も取り入れ、3Dのビジュアルエディタを搭載– Web上で完全に動作
– モデルインポーター(FBX,OBJ)
– 直感的なデザイン
– コラボレーション
– 即時反映
PlayCanvas Editor
• ビジュアルエディタを介してエンジンを使用– Web上で動作するためエンジンのダウンロードやインストール不要
URLひとつで開発開始
– 開発者はマークアップや描画APIを気にすることなく3DWebアプリ開発可能
– 内部ではJavaScript製のエンジンが走っているため、リロード、コンパイル不要で即時的に反映されるリアルタイム感
– コラボレーションも可能。プッシュ,コミットといったワークフローを排除
PlayCanvas Community
• サービスサイトにコミュニティも統合– 開発物の紹介や相談等活発
• 無料から使える公開環境
– 200MBまで無料で使える
– 人気プロジェクトはExploreに
– 他ゲームのシーンやコードは閲覧可能
PlayCanvasでできること
• ブラウザゲーム開発
• スマホブラウザゲーム
• リッチメディア広告
• WebVR
• プロダクトビジュアライゼーション
ブラウザゲーム開発
• Webブラウザ上で動作するゲームを開発可能
• ブラウザ上でネイティブレベルのグラフィックが表現可能です。
TANX
MOANA Wayfinding with code
スマホブラウザゲーム開発
• PlayCanvas製アプリはモバイルブラウザでも動作します。
• touchやdevicemotion等のモバイル向けイベントも実装。モバイルブラウザゲームが手軽に開発が可能です。
Master ArcherTANX
リッチメディア広告
• Webで動作するPlayCanvas製アプリは手軽にリッチメディア広告が作成できます。
• ゲームのアセットをそのまま利用して広告を作成
• 体験版をWeb上で展開などなど・・・
TRANSFORMERS THE LAST KNIGHT
WebVR
• Webブラウザ上でVRアプリケーションを楽しむWebVRにも対応– ハイエンドWebVR (ハイエンドPCとHMDで楽しむもの)
– スマホブラウザVR (スマホブラウザからアクセスして汎用ゴーグルで楽しむもの)
• 天球画像のビューワーなどもノンプログラミングで実装可能！
WebVR Lab
360 lookaround camera
プロダクトビジュアライゼーション
• モデルデータを手軽に読み込んで公開することが可能なのでモデルビューワーとしても最適。
• Model Viewer Starter Kitを利用すると、ノンプログラミングでモデルの公開ができます。
BMW i8Black Diamond
PlayCanvasの開発スタイル
• ワークフロー
• モデルインポート
• スクリプティング
• 外部ライブラリの使用
• デバッグ
• コラボレーション
• REST API
PlayCanvasで変わるワークフロー
• 開発環境の構成比較：一般的な開発
開発環境提供元
検証版配置先
バージョン管理ツール
情報共有ツール
配信先
開発グループ検証会社
開発キット作業成果
最新データ
配信版
検証版
検証
クラウドホスティングゲーム開発環境
• 開発環境の構成比較：PlayCanvasでの開発
開発に必要なものはPC，ネット，ブラウザのみ！
PlayCanvas
配信先
開発グループ
検証会社
開発キット
作業
最新データ
配信版検証版
検証
配信版
配信版
PlayCanvas
配信先
開発グループ
検証会社
開発キット
作業
最新データ
配信版検証版
検証
配信版
配信版
開発序盤～中盤
PlayCavnasは全てWeb上で動作- エンジンのインストール不要- URLひとつで開発開始
- データは常に最新の状態
PlayCanvas
配信先
開発グループ
検証会社
開発キット
作業
最新データ
配信版検証版
検証
配信版
配信版
開発中盤～終盤
- 無料から使える公開環境- 数クリックでデプロイ可能- URLを共有するだけで公開可能
PlayCanvas
配信先
開発グループ
検証会社
開発キット
作業
最新データ
配信版検証版
検証
配信版
配信版
開発終盤
- 最後に作成したアプリケーションをzipダウンロード可能- エンジンごとダウンロードされるので、依存関係はなし- スクリプトは連結され、短縮化・難読化される
モデルインポート
• PlayCanvasではFBX, OBJ等の3Dモデルが扱えます– ボーンアニメーションにも対応
– Webではそのまま解釈できないのでインポートするとPlayCanvasが解釈できるjson形式に自動的に変換
– マテリアルが内包されていた場合も自動でコンバート
スクリプティング
• 開発言語は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) { };
外部ライブラリの使用
• jQueryなどの外部ライブラリも使用可能– ライブラリをプロジェクトにアップロードすれば使用可能
– 仕様上、playcanvas.comからの外部参照はできない
• QRコード作成：jQuery.qrcode.js
• PCスマホ間同期通信：photon-JSSDK
VR Flight Simulator
デバッグ
• URLを渡すだけで即時的に全端末で実行！– JavaScriptのみで動作しているため、コンパイルをはさまず即時同期
– 従来のようなワークフローを排除
コラボレーション
• 複数人で同一コードのリアルタイム編集が可能– コミット，プッシュ，プルといったワークフローを排除
– コンフリクトを回避
REST API
• ダウンロード→デプロイの流れをシームレスに– API経由でダウンロードファイルの生成を要求
– JobIDが指定されるのでポーリングしてステータスを確認
– パラメータでアプリの名前やリリースノート，バージョン等入力
– ビルド終了後、DLリンクが発行される
• Organizationプランのみに提供
PlayCanvasクライアント
API経由でリクエスト
jobID ビルド
jobステータスを確認アプリのパラメータ指定
応答 download_urlにlink
ご利用事例
• ＣＭサイト様– ＣＭサイトが自社アドゲーム開発にPlayCanvasを採用！ＣＭサイトの考え
る次世代のアドゲームとは？https://support.playcanvas.jp/hc/ja/articles/115005023268
• ボトルキューブ様– PlayCanvasを採用し4タイトルのゲームアプリを開発したボトルキューブの
次なる一手は？https://support.playcanvas.jp/hc/ja/articles/230074267
PlayCanvasの国内でのご採用も徐々に増えてきています！！
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も可能に
まとめ
• PlayCanvasは日々進化し続けています！– ゲーム開発者がWebGLアプリ開発を始めるにはとっても心強い味方！
• Webを意識せず、ゲーム開発に集中できる環境が整ってきている
• ゲームプラットフォームとしてのWebも成長！– 多くのHTML5プラットフォームが登場
– 要素となるWeb APIも数々登場• Webでの表現手法がより広がる
PlayCanvasは皆様のWebGLゲーム開発をお助けします！
このタイミングでWebGLゲーム開発をはじめてみませんか？
いかがでしたか？
• PlayCanvasの手軽さ、パワフルさを体感していただければ幸いです。
• まだまだ紹介し切れていない機能も！– エクストリームプログラミング
– リアルタイム通信
– モバイル対応
– 2D / スプライトアニメーション
– WebVR
• どこが聞きたいかアンケートに是非お書きください！
今後の予定
• 【来週！】9/13(水) PlayCanvas × Photon ソーシャルVRハンズオン！ ＠渋谷
– ネットワークエンジンPhotonと組み合わせてソーシャルVRアプリをつくります！
• 全国行脚勉強会を実施予定！
– 予定地)札幌，福岡，名古屋，大阪
• この後も勉強会・ワークショップ続々開催予定！
日本語ヘルプセンターやってます
• ナレッジベースや、コミュニティ(フォーラム)機能のあるヘルプセンター– 本家ブログ記事の翻訳，技術的なTips，日本での事例記事やイベント告知等
の最新情報盛りだくさん！
• こんなものがほしい、ここを教えてほしい等のご要望はお気軽に！
• コンテンツの充実化を図って行きますので、ぜひご利用ください！
• https://support.playcanvas.jp/hc/ja
お問い合わせ
• メールアドレス
• ヘルプセンター
– https://support.playcanvas.jp/hc/ja
• 最新情報はtwitterで！– ＠playcanvasJP
最後に..
一緒に働ける仲間を
大募集中！！
詳細はこちら↓
