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.

【CEDEC+KYUSHU 2018 】スマホブラウザ向けにPlayCanvasでゲームを作る話(2018/12/01講演)

53 views

Published on

スマホブラウザ向けにPlayCanvasでゲームを作る話

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

【CEDEC+KYUSHU 2018 】スマホブラウザ向けにPlayCanvasでゲームを作る話(2018/12/01講演)

  1. 1. The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games PlayCanvas運営事務局 宗形修司 津田良太郎
  2. 2. アジェンダ  PlayCanvasの説明  PlayCanvasでスマホゲーを作る!  アーティスト側の視点  エンジニア側の視点  まとめ  お知らせ
  3. 3. 登壇者の自己紹介  宗形修司  テクニカルアーティスト/3DCGデザイナー キャラクター/背景/エフェクト/UIなど一通り  2017年12月よりPlayCanvas運営事務局  デザイナー目線でPlayCanvasを広める ために活動中
  4. 4. 登壇者の自己紹介  津田良太郎 @utautattaro  Webとゲームの間を行ったり来たりなエンジニア  短期間でいろいろ作るプロトタイパー  趣味は旅行とバドミントン  PlayCanvas運営事務局(2016.4 - )  utautattaro.com
  5. 5. What is PlayCanvas? イントロダクション
  6. 6. 一言で PlayCanvasとは ゲームエンジン です!!
  7. 7. PlayCanvasとは • WebGLゲーム開発エンジン 3D要素に強く、カジュアルゲームから、 リッチコンテンツまで幅広く開発が可能 • クラウド型の開発エンジン エンジンのインストールや プラグインのダウンロードが不要 • 中身はオールJSの軽量なエンジン コンパイルをはさむ必要がなく、 即時性が高いのが特徴 • 詳しくは – 過去講演:https://support.playcanvas.jp/hc/ja/sections/115003159628 – 利用事例:https://support.playcanvas.jp/hc/ja/sections/115001686867
  8. 8. PlayCanvasとは • ブラウザ上で動作/HTML5ゲームプラットフォームも対応 – モバイル/PC/Oculus Goなどでも動作 – WebGL(v1/v2)に対応したブラウザなら大体動く – エンジン自体の多くはES5ベースで記述 ※2018/10下旬時点
  9. 9. PlayCanvasとは • 豊富な3D要素 – FBX/OBJデータをインポート可能 JSONに自動変換 – 3Dモデルアニメーションの 自動ブレンディング – physicsシェーダをベースとした高品質マテリアル 各設定項目も豊富 – シェーダーもGLSLで書ける – イメージベースドライティング (IBL) – フィジカルベースドレンダリング (PBR)
  10. 10. PlayCanvasを始めるには – Get Started <script src=‘./playcanvas-stable.min.js'></script> var canvas = document.getElementById(‘application’); var app = new pc.Application(canvas, { }); app.start(); var camera = new pc.Entity(‘camera’); camera.addComponent(‘camera’,{clearColor:new pc.Color(0.1,0.1,0.1)}); var right = new pc.Entity(‘light’); light.addComponent(‘light’); app.root.addChild(camera); app.root.addChild(light); app.on('update', function (deltaTime) { Timer += deltaTime }); <canvas id=‘application’></canvas> canvas作成 エンジン読み込み 初期化 カメラとライトの配置 メインループ
  11. 11. これでもゲームは作れる! だけど…ねぇ
  12. 12. _人人人人人人人人人人人_ > PlayCanvas Editor! <  ̄Y^Y^Y^Y^Y^Y^Y^Y  ̄ そこで!!
  13. 13. PlayCanvas Editor • クラウドサービスとして提供 • 開発環境の構築必要なし! • メールアドレス一つで登録、開始可能 • ブラウザ上で動くビジュアルエディタ! • 初めての人でもHTML5ゲームが 簡単に作れる環境が整っています!
  14. 14. PlayCanvasEditorの説明 • PlayCanvas Editorを使用する https://playcanvas.jp/
  15. 15. メニュー(MENU) シーンのビューモードやプロジェクト セッティング等の作業が行えます。 PlayCanvas Editorの構成要素
  16. 16. ヒエラルキー(HIERARCHY) シーン内に存在するオブジェクト の一覧が表示されます。 編集中の シーン内でオブジェクトをコピー/ ペーストしたり、適切な名前をつ けて整理することもできます。 PlayCanvas Editorの構成要素
  17. 17. シーン(SCENE) シーンビューには製作中のゲーム世界 (シーン)が表示され、自由な位置・角 度から眺めることができます。 PlayCanvas Editorの構成要素
  18. 18. アセット(ASSETS) 製作中のプロジェクト(ゲーム全 体)に含まれるモデル、スクリプ ト、グラフィックやサウンドなど のデータ、その他のリソースが ファイル単位で表示されます。 PlayCanvas Editorの構成要素
  19. 19. インスペクター(INSPECTOR) シーンの中で選択肢中のオブジェクトが持つ属性を 表示・編集するためのビューです。 属性には座標 やメッシュといった見た目上のものから、衝突判定 や物理制御に関するパラメーターなどもあり、その 他ユーザー定義のものもここに表示されます。 PlayCanvas Editorの構成要素
  20. 20. PlayCanvasでスマホゲーを作る!
  21. 21. PlayCanvas製スマホブラウザタイトル(ゲーム) PlayCanvas社 (C)KLab Inc. 2D要素のみで構成 2D3D要素で構成 Master Archer Kabrin! Ball
  22. 22. PlayCanvas製スマホブラウザタイトル(非ゲーム) PlayCanvas運営事務局 PlayCanvas運営事務局 3Dベースで構成 Twitter Player Card 3Dベースで構成 商品説明デモ あんずフォト PlayCanvas冷蔵庫
  23. 23. アーティスト側の視点 PlayCanvasでスマホゲーを作る!
  24. 24. 項目  PlayCanvasの2D表現 使用できる機能 2Dアニメーション(Sprite Animation) Sprite Editorの構成要素  PlayCanvasの3D表現 PlayCanvas Editorの構成概要 3Dモデル テクスチャ/マテリアル 環境マップ アニメーション Maya/PlayCanvas Editor/実行画面比較
  25. 25. PlayCanvasの 機能で対応 ミドルウェアで対応 • PlayCanvasの主な2D要素 – Static UI – Dynamic UI – UI Animation – Text – 2D physics – Particle – Sprite Animation – 9slice texture – Character animation PlayCanvasの2D表現 ※PlayCanvasではSpineのデータが使えます
  26. 26. PlayCanvasの2D表現 TextureAtlasからシーンへ ・Textureatlasアセット 元画像をAtlas化したpng ダブルクリックでSprite Editor が立ち上がります。 ・Spriteアセット SpriteEditorで編集し たデータ。シーンに配 置するのはこっち
  27. 27. フレーム(Frames) フレームはテクスチャアトラスの 定義された領域です。 フレームに は、名前、位置とサイズ、境界線 があります。 Sprite Editorの構成要素
  28. 28. インスペクター(INSPECTOR) インスペクタパネルには、現在選択されている項目 のプロパティが表示されます。 インスペクタは、 選択した項目がテクスチャアトラス、フレームまた はスプライトアセットのいずれであるかによって異 なります。 Sprite Editorの構成要素
  29. 29. スプライトアセット (Sprite Assets) アセットパネルには、現在のテク スチャアトラスから作成されたす べてのスプライトアセットが表示 されます。 Sprite Editorの構成要素
  30. 30. ビューポート(Viewport) スプライトエディタのビューポートに は、現在選択されているテクスチャアト ラスが表示されます。 Sprite Editorの構成要素
  31. 31. PlayCanvasの3D表現
  32. 32. PlayCanvasでの3Dモデルデータの扱い方 • 3Dmodel/Texture制作 – 3D統合ソフトでキャラクター その他要素をモデリング。 – テクスチャーをマテリアルに適用 • Animation制作 – 各要素にキーフレームアニメーションを 追加(※ボーンアニメーションを推奨) • FBX Export – 【メディアに組み込み】等の設定を行いエクスポー トするとPlayCanvasにインポートしたときに PlayCanvas側のマテリアルに各種MAPが反映される
  33. 33. PlayCanvas冷蔵庫を例にー3Dモデル • Polygon△=7506 • Texture=1024×1024 Diffuse Alpha Opacity Specular CubeMap • アニメーション 回転アニメーション
  34. 34. 既存の3DJSライブラリでモデルを扱うには… 【参考】3DモデルをThree.jsで描画させる場合。 それぞれの3D要素のフォーマットにあわせた「Loader」と呼ばれるファイルが必要。 Camera/Light/3Dmesh/Material/Texture/Animation/Renderer…etc 要は手間が掛かります!
  35. 35. FBXのインポート
  36. 36. FBXのインポート FBXはドラック&ドロップで自動的にJSON に変換 テクスチャも用途に応じた圧縮が設定可能
  37. 37. PlayCanvas冷蔵庫を例に~テクスチャ/マテリアル
  38. 38. 環境マップの生成 Prefilterボタンを押さないとキューブに テクスチャが貼られただけの状態
  39. 39. 環境マップの効果ってどんなもの? プリミティブな球に画像をマテリアル(diffuse)に貼っ た場合、IBLを有効にするCubemapとしは働かないの で、中央に置いた球に周辺環境が反映されてない。 Metalness:1 Glossiness:100
  40. 40. Launchで実行した際に画像データが歪む。規則性のあるジグザグになってい る。球のpolygon法線の方向とpolygon数の少なさから、UVに対し画像が フィットしていない可能性がある。 環境マップの効果ってどんなもの?
  41. 41. Cubemap用に画像を分解し、 PlayCanvasのCUBEMAP生成Assetの FACESに各画像を適用 環境マップの効果ってどんなもの?
  42. 42. 画像の歪みは無くなります。ただし、IBLとして機能はしていません。 環境マップの効果ってどんなもの?
  43. 43. PrefilteringをすることでIBLの効果が球に反映される 環境マップの効果ってどんなもの?
  44. 44. アニメーションの扱いに関して シンプルに頂点アニメーションを インポートした場合、回転軸がガタガタする PlayCanvas ビューポートMAYA ビューポート
  45. 45. • PlayCanvas冷蔵庫を例にーアニメーション ボーン/ウェイト設定をした アニメーションで回避 PlayCanvas ビューポートMAYA ビューポート アニメーションの扱いに関して
  46. 46. PlayCanvas ビューポートMAYA ビューポート 実行画面 Maya/PlayCanvas Editor/実行画面比較 • あんずフォト3Dキャラを例にー比較
  47. 47. まとめ  3Dモデル(FBXorOBJ)をドラック&ドロップで簡単にインポート可能  インポートした3Dデータは、 アニメーションとオブジェクトデータを自動で分解しJSONに変換  主要なフォーマットを扱えるテクスチャ(JPG/PNG/GIF/TGA/BMP/TIF/HDR/EXR)  iPhone/Android等に最適化した圧縮方法を選択可能  マテリアルはフィジカルシェーディングをベースとし, フィジカルベースドレンダリングを採用した高品質なレンダリングが行える  自動でアニメーションブレンディングを行うのでアニメーションの繋ぎが自然
  48. 48. まとめ
  49. 49. エンジニア側の視点 PlayCanvasでスマホゲーを作る!
  50. 50. 項目  モバイルブラウザでのパフォーマンス  ローディングに関して  開発方法
  51. 51. モバイルブラウザでのパフォーマンス • 基本的にはモバイルでも60FPSでループ – デスクトップと同様 – requestAnimationFrame()によってループ • engine/src/framework/application.js 内で呼び出し • 解像度は端末に依存 – 後述
  52. 52. ベンチマークアプリの開発と検証 • ベンチマークアプリを作成して検証 – 評価:20FPSに下がるまで 何インスタンスレンダリングできるか • 項目 – スタティックメッシュ – アニメーションつきスタティックメッシュ – 物理制御されたプリミティブ(box, sphere) – シンプルなパーティクル – リッチなパーティクル(テクスチャ、カラー値) – 2Dスプライトアニメーション ※イニシャライズ時のオーバーヘッドがあるため、初期インスタンス生成時のFPSのショットノイズは計測に考慮しない
  53. 53. 各端末での検証結果 端末 項目 iPhone8 [373x553] iPhone7plus [375x591] oppo R15 pro [360x678] Galaxy S6 edge[360x560] MacBook Pro※1 [1280x703] Let’s note※2 [1536x734] スタティックメッシュ 1441 1343 533 303 815 992 アニメーション付き メッシュ 875 796 250 150 438 588 物理プリミティブ(box) 325 336 245 104 315 460 物理プリミティブ (Sphere) 568 458 303 271 417 575 シンプルなパーティクル 253 213 27 218 606 878 リッチなパーティクル 170 188 51 51 408 804 2Dスプライトアニメー ション 4714 3631 2237 548 2860 3735 合計 9092 6965 3640 1650 5795 8009 ※表示している結果は数回実行した結果の平均値として算出しています。ブラウザはすべてGoogle Chromeを利用して測定しています。 ※1[Macbook Pro Retina 13-inch Early 2015 2.7GHz Intel Core i5, メモリ8GB, Intel Iris Graphics] ※2[2.4GHz Intel Core i5-6300U メモリ8GB, Intel HD Graphics 520]
  54. 54. 0 1000 2000 3000 4000 5000 6000 7000 8000 9000 10000 iPhone8 iPhone7plus oppo R15 pro Galaxy S6 edge[360x560] MacBook Pro※1 Let’s note※2 スコア 項目 メッシュはiOSの方が パフォーマンスが出 やすい パーティクルは端末 のGPUに大きく依存 する
  55. 55. 検証結果を受けて • モバイルでの実行環境 – 3Dモデルはそこそこレンダリングできる – 解像度はピクセルパーフェクトではなく、 場合によってはPCより高いスコアが出る – iOSはバージョンが上がるにつれてスコアが伸びる – Androidは機種によるばらつきが激しい – パーティクルはGPUに依存する
  56. 56. ローディング • 事前のダウンロード/インストールがない! – ネイティブアプリとの一番の違い – 基本はWebなので、ページを開いた時に コンテンツがロードされる • WebのUX設計と同様、プリロードが長いと UXは著しく下がる – 非同期ロードを利用したりして回避
  57. 57. アセットレジストリ • 非同期ロードの機能 – チェックボックス一つでプリロード/ストリーミングを切り替え – ロードタイミングはレンダリングが必要になった瞬間or任意 プリ ロード スト リーミ ング DOM操作 DOM操作 preload prel oad 描画開始 描画開始 2.84s 4.18s 2.89s 3.31s this.app.assets.load(asset);//assetをロード asset.ready(function(as){//assetのロードが完了したときのコールバック });
  58. 58. 非同期ロードのデバッグ • Firefoxデベロッパーツールで帯域をシミュレート ※Regular 3G回線に帯域を絞ってシミュレート
  59. 59. パフォーマンスとローディングまとめ • パフォーマンスはそこそこ出る – まずはターゲットプラットフォームをある程度絞る – ベンチマークを計測してみる • ローディングは設計が必要 – プリロードに欲しいもの/ストリーミングでいいもの – ストリーミング完了を待つべきオブジェクトの選定
  60. 60. 開発方法 • PCで開発/launch URLをスマホで開いて実行 – 作業は即時的に同期
  61. 61. タッチイベント • タッチイベント向けのAPI – イベントハンドラを設定、引数からデータ取得 script.prototype.initialize = function(){ if(this.app.touch){//タッチデバイスかどうか this.app.touch.on(pc.EVENT_TOUCHSTART,this.start,this); //指が触れた瞬間 this.app.touch.on(pc.EVENT_TOUCHMOVE,this.move,this); //触れた指が動いた瞬間 this.app.touch.on(pc.EVENT_TOUCHEND,this.end,this); //触れた指が離れた瞬間 } }; script.prototype.start = function(event){ //タッチした瞬間呼ばれるコールバック //触れた位置のキャンバス座標を取得 var fingerPosition = new pc.Vec2( event.changedTouches[0].x, event.changedTouches[0].y ); }; If文でくくる 非タッチデバイス ではエラー mouseイベントと は格納場所が微妙 に違うので注意!
  62. 62. Elementコンポーネントへのタッチイベント • Elementコンポーネントでも タッチイベントは取得可能 //elementを触った瞬間 this.entity.element.on(pc.EVENT_TOUCHSTART,this.start,this); //触れた指が動いた瞬間 this.entity.element.on(pc.EVENT_TOUCHMOVE,this.move,this); //elementから触れた指が離れた瞬間 this.entity.element.on(pc.EVENT_TOUCHEND,this.end,this);
  63. 63. ユーザー端末を特定する • this.app.touchはタッチデバイスすべてを含む – Surfaceやタブレット等も含む – モバイルやOSで分けたい場合は以下のように記述 if(pc.platform.mobile){//モバイル端末ならtrue} if(pc.platform.desktop){//PCならtrue} if(pc.platform.ios){//iOSならtrue} if(pc.platform.android){//Androidならtrue}
  64. 64. デバッグ • 基本はブラウザデベロッパーツールで – 見た目の問題はこれでほぼカバー – タッチイベントもエミュレートしてくれる • 実機が必要なデバッグ – プラットフォーム・ベンダー依存のもの – ジャイロ等ハードウェア依存のもの • そのままだとスマホブラウザのコンソールは見れない… – ブラウザのデベロッパーツールと連携で使える – ブレークポイントも使える
  65. 65. パッとすぐ確認したい人向け • console.error(); – デバッガの コンソールにエラー出力 – スマホの場合は画面に出力 – 階層構造ではないが 値を確認したいときは便利
  66. 66. SPAとPWA • 単一URLで動作させたい – SPAのようなページ遷移を挟まない設計にする – 複数シーンを用意しシーン遷移させる • アプリっぽくする – 設定することでホームに 追加することが可能 – フルスクリーンで実行
  67. 67. さいごに
  68. 68. まとめ • モバイルブラウザでもなんなく動作 – 3Dモデルデータやアニメーションを使用しても PCブラウザとパフォーマンスの差異はほとんど感じられない – GPUを使用するような表現は各端末に大きく依存するので要チェック • ブラウザ向け3Dライブラリの中では非常に効率的なワークフロー – Web上で3D表現する際、ドラック&ドロップだけで 3Dモデル、テクスチャ、アニメーションをインポート可能 – 1つのProjectで複数人での共同開発が可能 URLを渡すだけの実機デバッグ可能。効率的なトライ&エラーで開発を高速化! • ネイティブ環境との違いに要注意! – 事前ロードではなく逐次ロードなので、アセットの取り扱いをミスるとUXに直結 – SPAとPWAによってアプリっぽくすることも可能だが、中身はWebです!
  69. 69. イベントやります! • ブラウザゲーム開発環境勉強会! – ミドルウェア企業と一緒に最新のブラウザゲーム開 発環境についてお話します!
  70. 70. ご清聴ありがとうございました

×