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.

【HTML5 Conference 2018】あんずフォト:PlayCanvasでリッチアドコンテンツを開発して発信してみた(2018/11/25講演)

302 views

Published on

【HTML5 Conference 2018】あんずフォト:PlayCanvasでリッチアドコンテンツを開発して発信してみた(2018/11/25講演)

Published in: Engineering
  • Be the first to comment

【HTML5 Conference 2018】あんずフォト:PlayCanvasでリッチアドコンテンツを開発して発信してみた(2018/11/25講演)

  1. 1. あんずフォト:PlayCanvas でリッチアドコンテンツを 開発して発信してみた PlayCanvas運営事務局 津田 良太郎 宗形 修司 The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games
  2. 2. 本日のアジェンダ • PlayCanvasとは • オリジナルコンテンツを作ってみた 【あんずフォト】 • Twitter Player Cardについて • 企画概要 • 素材の制作 • 開発 • さいごに
  3. 3. 登壇者の自己紹介  宗形 修司  テクニカルアーティスト/3DCGデザイナー キャラクター/背景/エフェクト/UIなど一通り  2017年12月よりPlayCanvas運営事務局  デザイナー目線でPlayCanvasを広める ために活動中
  4. 4. 登壇者の自己紹介  津田良太郎 @utautattaro  Webとゲームの間を行ったり来たりなエンジニア  短期間でいろいろ作るプロトタイパー  趣味は旅行とバドミントン  PlayCanvas運営事務局(2016.4 - )  utautattaro.com
  5. 5. 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とは PC Firefox 63.0.1 iPhone6 Safari
  9. 9. PlayCanvasとは • 基本的には1枚のcanvas HTML CSS
  10. 10. PlayCanvasとは • ブラウザ上で動作/HTML5ゲームプラットフォームも対応 – モバイル/PC/Oculus Goなどでも動作 – WebGL(v1/v2)に対応したブラウザなら大体動く – エンジン自体の多くはES5ベースで記述 ※2018/10下旬時点
  11. 11. PlayCanvasとは • 豊富な3D要素 – FBX/OBJデータをインポート可能 JSONに自動変換! – 複数のモーションを持つ3Dモデルの アニメーションを自動ブレンディング! – Physicalシェーダーベースの高品質マテリアル 各設定項目も豊富 – シェーダーもGLSLで書ける – イメージベースドライティング (IBL) – フィジカルベースドレンダリング (PBR)
  12. 12. 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作成 エンジン読み込み 初期化 カメラとライトの配置 メインループ
  13. 13. これでゲームが作れる! とはならない
  14. 14. そこで _人人人人人人人人人人人_ > PlayCanvas Editor! <  ̄Y^Y^Y^Y^Y^Y^Y^Y  ̄
  15. 15. PlayCanvas Editor • PlayCanvas Editorの構成要素 メニュー(MENU) シーンのビューモードやプロジェク トセッティング等の作業が行えます。
  16. 16. PlayCanvas Editor • PlayCanvas Editorの構成要素 シーン(SCENE) シーンビューには製作中のゲーム世界 (シーン)が表示され、自由な位置・角 度から眺めることができます。
  17. 17. PlayCanvas Editor • PlayCanvas Editorの構成要素 ヒエラルキー(HIERARCHY) シーン内に存在するオブジェクト の一覧が表示されます。 編集中の シーン内でオブジェクトをコピー/ ペーストしたり、適切な名前をつ けて整理することもできます。
  18. 18. PlayCanvas Editor • PlayCanvas Editorの構成要素 アセット(ASSETS) 製作中のプロジェクト(ゲーム全 体)に含まれるモデル、スクリプ ト、グラフィックやサウンドなど のデータ、その他のリソースが ファイル単位で表示されます。
  19. 19. PlayCanvas Editor • PlayCanvas Editorの構成要素 インスペクター(INSPECTOR) シーンの中で選択肢中のオブジェクトが持つ属性を 表示・編集するためのビューです。 属性には座標 やメッシュといった見た目上のものから、衝突判定 や物理制御に関するパラメーターなどもあり、その 他ユーザー定義のものもここに表示されます。
  20. 20. オリジナルコンテンツを作ってみた 【あんずフォト】
  21. 21. オリジナルコンテンツ【あんずフォト】の説明 • 使用キャラクター 美雲あんず (みくもあんず) GMOアプリクラウド公式キャラクター 2012年9月20日の東京ゲームショウ初日にデビュー。 • Twitter連動型コンテンツ キャラクターの衣装、表情、アニメーションを 切り替えスナップショットを撮影し、 撮ったスナップショットをシェアできる。 また、時間の経過で環境(IBL)が変化する。 Twitter Player Cardで提供。
  22. 22. オリジナルコンテンツ【あんずフォト】の説明 App Card Player Card Tweet App Card
  23. 23. Twitter Player Cardについて
  24. 24. Twitter Player Cardについて • Twitter Player Cardとは – Twitter上で別のWebページを 組み込んで表示するcard – Youtubeなどで利用 – 技術的にはiframeで表示 – 表示されるページと – Cardの飛び先は別で指定できる – Twitter developerサイトから、 ドメイ ン単位で事前登録が必要 – 承認まで約2日程度
  25. 25. Player Card x WebGLの懸念点 • twitter.com上に独自htmlを表示できるのでなかなか危険な技術 – YoutubeやSoundCloud等ストリーミングメディアは良くても、 端末のGPUへアクセスできるWebGLはいろいろできちゃうので危険 • Twitter Developer ポリシー (抜粋) 1. カードが表示されるすべてのプラットフォームで同じ快適な動作となるようにカードを開発してください。 2. 次のいずれも行わないでください。 a. カードの使用目的を含め、カードに設定されているTwitterの制限を超えたり回避したりすること。 b. カード内またはカードからTwitter上で生じる行為に、金銭的なインセンティブまたは取引 (仮想通貨を含む) を結び付けること。
  26. 26. Player Card x WebGLの事例 • Poly (Google) • Sketchfab • 3Dモデルビューワーでの 事例は多い • 体験版をtwitter cardで展開する ゲームスタジオなども
  27. 27. 企画概要
  28. 28. 企画段階 • 要旨  PlayCanvas x Twitter Player Cardのマーケティング活用サン プルとして開発  Twitter上で動くUGCとして Twitter上で仕組みが回るように  最終的に美雲あんずtwitterで拡散
  29. 29. 企画概要 • コンセプト – アバターの着せ替え、アニメーションの切り替えを入れたい – キャラクターが踊るステージと環境が欲しい – 特定の時間が経過すると環境光が変わるようにしたい – グリグリカメラを動かしたい – 良い感じのポーズでスナップショットを撮りたい – シェアしたい – KPIを取得したい
  30. 30. システム構成 • コンテンツはすべて 中間サーバーにホスト • 体験用URLとシェアURLは パラメータで分ける システム構成図 WebGLライブラリ PlayCanvas UI HTML (一部WebGL) CSSフレームワーク Bootstrap バックエンド GMOアプリ クラウド サーバーサイド PHP
  31. 31. 素材の制作
  32. 32. 【あんずモデル作成】 • Polygon△=5500 • Texture=512×512 diffuseのみ 衣装×6、表情×5 • アニメーション dance1/dance2/ Idling/ Run/walk/jump
  33. 33. 【あんずモデル作成】 PlayCanvas ビューポートMAYA ビューポート ローンチ画面
  34. 34. 【ステージ制作】 • Polygon△=406 • Texture=512×512 Diffuse/Alpha • アニメーション 回転アニメーション ライト用アニメーション
  35. 35. ステージ素材 キーフレームアニメーション 【ステージ制作】
  36. 36. 【環境マップ制作】
  37. 37. Web上での3D表現 Web上で3D表現を実現するには… 3DモデルをThree.jsで描画させる場合。 それぞれの3D素材のフォーマットに合わせた「Loader」と呼ばれるファイルが必要。 Camera、Light、3Dmesh、material、texture、animation、renderer…etc 要は手間が掛かります!
  38. 38. PlayCanvas Editor • PlayCanvas Editorで3Dモデルを扱う
  39. 39. PlayCanvas Editor • PlayCanvas Editorで3Dモデルを扱う FBXはASSETE欄ドラック&ドロップで自動的にJSON に変換 テクスチャも用途に応じた圧縮が設定可能
  40. 40. PlayCanvas Editor • 標準マテリアルの設定項目 オフセット&タイリング アンビエント(陰影情報) ディフューズ(カラー情報)
  41. 41. PlayCanvas Editor • 標準マテリアルの設定項目 スペキュラ エミッシブ(自己発光)
  42. 42. PlayCanvas Editor • 標準マテリアルの設定項目 オパシティ(透過) ノーマルマップ(法線マッピング) パララックス(視差マッピング)
  43. 43. PlayCanvas Editor • 標準マテリアルの設定項目 エンバイロメント(環境マッピング) ライトマップ(ベイクマップ) アザー(レンダリング順、効果適応on/off)
  44. 44. 開発
  45. 45. モック開発 • まずモックでアニメーションビューワーを開発(1人日) – アニメーション付きFBXをインポートするだけでリスト化 • スピード調整 • 早送り/巻き戻し • 360ビュー – デザイナーがすぐ 確認できるように https://playcanv.as/p/4TZNJ6bN/
  46. 46. 背景 | Cubemap • 時間で変化する6種類のcubemapを用意 – 1cubemap およそ3MB – 6種で18MB • Assetレジストリを利用して必要なcubemapのみロード
  47. 47. アセットレジストリを利用した非同期ロード //時間に応じて引数を最大値とした整数を返す currentCubemapId = getIntFromtime(this.cubemaps.length); //表示するcubemapアセットを取得 cubemapassets = this.app.assets.findByTag("cubemap"+currentCubemapId); //cubemapに使用する画像リソースすべてを取得 var cubemapcounter = cubemapassets.length; for(let i in cubemapassets){ this.app.assets.load(cubemapassets[i]);//使用する画像リソースをすべてロード cubemapassets[i].ready(function(as){//アセットのロードが完了したときのコールバック cubemapcounter--; if(cubemapcounter === 0){ //すべての画像のロードが終了したらskyboxに設定 _self.app.scene.setSkybox(_self.cubemaps[currentCubemapId].resources); //ロード終了時にgaにイベント発行 gtag('event', "Process:loaded:" + _self.cubemaps[currentCubemapId].name, { 'event_category': "Process", 'event_label' : "none", 'value' : _self.app.gametimer }); } }); } Cubemapを構築する 画像すべてをtagで検 索して配列で取得 すべてのアセットを ロード アセットのロード終了 を待って設定をする
  48. 48. ステージの構成オレンジ色の 土台 (Static mesh) 周囲を回る パネル スポットライ トの光線を示 す板ポリ スポットライ トに追従する 光源
  49. 49. スポットライトの実装 • Maya上で付けたアニメーションに ライトオブジェクトを追従させる – emissiveマテリアルではライティ ングが反映されない spot lightを焚いてアニメーショ ン座標にスクリプトで追従 //アニメーション座標を拾いたいエンティティの最初のmeshを取得 this.model = this.targetEntity.model.model.meshInstances["0"].node; //自分自身の角度にアニメーションの回転角を適応 this.entity.setEulerAngles(this.model.getEulerAngles());
  50. 50. スポットライトの実装 • ライトの光線を目立たせるため、板ポリはカメラを追従し続ける カメラ追従なし カメラ追従あり //引数のvec3ポジションを向き続ける this.entity.lookAt(camera.getLocalPosition());
  51. 51. UIの実装とアバターカスタマイズ • UIは基本的にHTMLで実装 – WebGL CanvasのキャプチャにUIを載せないため(後述) • アバターのカスタマイズはテクスチャ切り替えで実現 – ボタン押下イベントで テクスチャを切り替え – アセットは非同期で読み込み 終了するまでボタンはdisableに
  52. 52. 体験向上のための非同期ロード • アセットは基本的に最低限を除きすべて非同期でロード – Firefoxデベロッパーツールで帯域をシミュレートしてデバッグ
  53. 53. 写真撮影 フロントエンド側 • 撮影ボタン押下時にフラッシュ発光 – カメラ前面にある板ポリのopacityをmaxに • ロゴ表示 – 待機させてある2Delementをenableに
  54. 54. 写真撮影 バックエンド側 • toDataURL()でCanvasデータを取得してサーバーにPOST – 受け取ったサーバー側でpng化してCDNに保存 – https://qiita.com/utautattaro/items/fe342c3ed5fa405f8d87 • 管理画面から一覧で見れるように
  55. 55. 写真撮影からシェアまで • PC/モバイルでtwitter shareページの開き方を分ける – PC: ajaxで飛ばしwindow.open()でtwitterを開く ※ポップアップブロック対策とplayer card上だとlocation.hrefが効かない – モバイル:sjaxで飛ばし、location.hrefで遷移 ※モバイルのtwitter cardはtwitterブラウザで起動するため、遷移するとpostのプロセスが切れるのでsjaxで 待つ。Ajaxでsuccess:に書いてもOK。window.open()はモバイルsafariで動かないことがあるので使わない。
  56. 56. コード例 if(pc.platform.mobile){//モバイルブラウザ $.ajax({ type: "POST", url:"../file/saveimage.php", data: { "timestamp":name, "canvasdata": data }, async: true,//asyncはtrueで送信を待つ success: function(j_data){ document.getElementById("log").innerHTML = "画像の保存に成功しました"; }, error: function (XMLHttpRequest, textStatus, errorThrown) { document.getElementById("log").innerHTML = "画像の保存に失敗しました"; } }); //終了後にシェア用のURLに飛ばす window.location.href = twitterurl; }else{//PCブラウザ //window.open()でポップアップブロックされた場合は新規タブで開く window.open(twitterurl,'tweetwindow', 'width=640, height=480’)? console.log("opened") : window.open().location.href = twitterurl; //開いてからajax $.ajax({…}); } pc.platform.mobile で端末を特定可 能!便利! 同期通信で待つ、その間 レンダリングの処理も止 まるので、気になるよう なasyncで成功時に飛ば してもOK 普通に起動してもポップ アップブロックされるこ とがあるので三項演算子 で回避
  57. 57. 効果測定 • Google Analyticsを組み込み、各種イベントをgtagで発火 – Input / Process等 • ボタン押下を測定 – 写真撮影ボタン80に対して シェアボタン46 みたいなデータが取れる • ロード完了タイミングも測定 – 値にゲームタイムを送信してベンチを測ることも(平均は6.4秒でした) ※2018.11.4のデータ
  58. 58. 全体の工程 • 全体進行 – 2018.3あんずモデル作成 – 2018.4あんずアニメーション作成 – 2018.4 企画確認 – 2018.5 アプリケーション開発・システム開発 – 2018.6 確認 – 2018.7 リリース  デザイナー×1/エンジニア×1
  59. 59. さいごに
  60. 60. まとめ デザイナー×1人、エンジニア×1人が約1か月で Twitter連動型コンテンツ【あんずフォト】を企画~開発~公開 PlayCanvasの複数人同時開発、即ローンチ確認が可能という特性 を生かし、非常に効率的なトライ&エラーを行うことができた。 結果、短期間でインタラクティブ性の高いコンテンツに仕上げる ことができた!
  61. 61. イベントやります! • ブラウザゲーム開発環境勉強会! – ミドルウェア企業と一緒に最新のブラウザゲーム開発環境につ いてお話します!
  62. 62. We Are Hiring ! • PlayCanvasを一緒に広めてくれる仲間を募集中です! • Webデザイナー – https://hrmos.co/pages/gmocloud/jobs/0000052 • Webエンジニア – https://hrmos.co/pages/gmocloud/jobs/0000053 • より詳しい情報はジョブボードかブースで!
  63. 63. ご清聴ありがとうございました!

×