Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Check these out next

1 of 63 Ad
1 of 63 Ad

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

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Advertisement

【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. ご清聴ありがとうございました!

×