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

1. あんずフォト：PlayCanvas
でリッチアドコンテンツを
開発して発信してみた
PlayCanvas運営事務局
津田 良太郎
宗形 修司
The Web-First Game Engine
Collaboratively build stunning HTML5 visualizations and games

2. 本日のアジェンダ
• PlayCanvasとは
• オリジナルコンテンツを作ってみた
【あんずフォト】
• Twitter Player Cardについて
• 企画概要
• 素材の制作
• 開発
• さいごに

3. 登壇者の自己紹介
 宗形 修司
 テクニカルアーティスト/3DCGデザイナー
キャラクター/背景/エフェクト/UIなど一通り
 2017年12月よりPlayCanvas運営事務局
 デザイナー目線でPlayCanvasを広める
ために活動中

4. 登壇者の自己紹介
 津田良太郎 @utautattaro
 Webとゲームの間を行ったり来たりなエンジニア
 短期間でいろいろ作るプロトタイパー
 趣味は旅行とバドミントン
 PlayCanvas運営事務局(2016.4 - )
 utautattaro.com

5. PlayCanvasとは

6. 一言で PlayCanvasとは
ゲームエンジン
です！！

7. PlayCanvasとは
• WebGLゲーム開発エンジン
3D要素に強く、カジュアルゲームから、
リッチコンテンツまで幅広く開発が可能
• クラウド型の開発エンジン
エンジンのインストールや
プラグインのダウンロードが不要
• 中身はオールJSの軽量なエンジン
コンパイルをはさむ必要がなく、
即時性が高いのが特徴
• 詳しくは
– 過去講演：https://support.playcanvas.jp/hc/ja/sections/115003159628
– 利用事例：https://support.playcanvas.jp/hc/ja/sections/115001686867

8. PlayCanvasとは
PC Firefox 63.0.1 iPhone6 Safari

9. PlayCanvasとは
• 基本的には1枚のcanvas
HTML
CSS

10. PlayCanvasとは
• ブラウザ上で動作/HTML5ゲームプラットフォームも対応
– モバイル/PC/Oculus Goなどでも動作
– WebGL(v1/v2)に対応したブラウザなら大体動く
– エンジン自体の多くはES5ベースで記述 ※2018/10下旬時点

11. PlayCanvasとは
• 豊富な3D要素
– FBX/OBJデータをインポート可能
JSONに自動変換！
– 複数のモーションを持つ3Dモデルの
アニメーションを自動ブレンディング！
– Physicalシェーダーベースの高品質マテリアル
各設定項目も豊富
– シェーダーもGLSLで書ける
– イメージベースドライティング
(IBL)
– フィジカルベースドレンダリング
(PBR）

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. これでゲームが作れる！
とはならない

14. そこで
＿人人人人人人人人人人人＿
＞ PlayCanvas Editor! ＜
￣Y^Y^Y^Y^Y^Y^Y^Y ￣

15. PlayCanvas Editor
• PlayCanvas Editorの構成要素
メニュー(MENU)
シーンのビューモードやプロジェク
トセッティング等の作業が行えます。

16. PlayCanvas Editor
• PlayCanvas Editorの構成要素
シーン(SCENE)
シーンビューには製作中のゲーム世界
（シーン）が表示され、自由な位置・角
度から眺めることができます。

17. PlayCanvas Editor
• PlayCanvas Editorの構成要素
ヒエラルキー(HIERARCHY)
シーン内に存在するオブジェクト
の一覧が表示されます。 編集中の
シーン内でオブジェクトをコピー/
ペーストしたり、適切な名前をつ
けて整理することもできます。

18. PlayCanvas Editor
• PlayCanvas Editorの構成要素
アセット(ASSETS)
製作中のプロジェクト（ゲーム全
体）に含まれるモデル、スクリプ
ト、グラフィックやサウンドなど
のデータ、その他のリソースが
ファイル単位で表示されます。

19. PlayCanvas Editor
• PlayCanvas Editorの構成要素
インスペクター(INSPECTOR)
シーンの中で選択肢中のオブジェクトが持つ属性を
表示・編集するためのビューです。 属性には座標
やメッシュといった見た目上のものから、衝突判定
や物理制御に関するパラメーターなどもあり、その
他ユーザー定義のものもここに表示されます。

20. オリジナルコンテンツを作ってみた
【あんずフォト】

21. オリジナルコンテンツ【あんずフォト】の説明
• 使用キャラクター
美雲あんず （みくもあんず）
GMOアプリクラウド公式キャラクター
2012年9月20日の東京ゲームショウ初日にデビュー。
• Twitter連動型コンテンツ
キャラクターの衣装、表情、アニメーションを
切り替えスナップショットを撮影し、
撮ったスナップショットをシェアできる。
また、時間の経過で環境(IBL)が変化する。
Twitter Player Cardで提供。

22. オリジナルコンテンツ【あんずフォト】の説明
App Card
Player Card Tweet
App Card

23. Twitter Player Cardについて

24. Twitter Player Cardについて
• Twitter Player Cardとは
– Twitter上で別のWebページを
組み込んで表示するcard
– Youtubeなどで利用
– 技術的にはiframeで表示
– 表示されるページと
– Cardの飛び先は別で指定できる
– Twitter developerサイトから、
ドメイ ン単位で事前登録が必要
– 承認まで約2日程度

25. Player Card x WebGLの懸念点
• twitter.com上に独自htmlを表示できるのでなかなか危険な技術
– YoutubeやSoundCloud等ストリーミングメディアは良くても、
端末のGPUへアクセスできるWebGLはいろいろできちゃうので危険
• Twitter Developer ポリシー (抜粋)
1. カードが表示されるすべてのプラットフォームで同じ快適な動作となるようにカードを開発してください。
2. 次のいずれも行わないでください。
a. カードの使用目的を含め、カードに設定されているTwitterの制限を超えたり回避したりすること。
b. カード内またはカードからTwitter上で生じる行為に、金銭的なインセンティブまたは取引 (仮想通貨を含む)
を結び付けること。

26. Player Card x WebGLの事例
• Poly (Google)
• Sketchfab
• 3Dモデルビューワーでの
事例は多い
• 体験版をtwitter cardで展開する
ゲームスタジオなども

27. 企画概要

28. 企画段階
• 要旨
 PlayCanvas x Twitter Player
Cardのマーケティング活用サン
プルとして開発
 Twitter上で動くUGCとして
Twitter上で仕組みが回るように
 最終的に美雲あんずtwitterで拡散

29. 企画概要
• コンセプト
– アバターの着せ替え、アニメーションの切り替えを入れたい
– キャラクターが踊るステージと環境が欲しい
– 特定の時間が経過すると環境光が変わるようにしたい
– グリグリカメラを動かしたい
– 良い感じのポーズでスナップショットを撮りたい
– シェアしたい
– KPIを取得したい

30. システム構成
• コンテンツはすべて
中間サーバーにホスト
• 体験用URLとシェアURLは
パラメータで分ける
システム構成図
WebGLライブラリ PlayCanvas
UI HTML
(一部WebGL)
CSSフレームワーク Bootstrap
バックエンド GMOアプリ
クラウド
サーバーサイド PHP

31. 素材の制作

32. 【あんずモデル作成】
• Polygon△＝5500
• Texture＝512×512
diffuseのみ
衣装×6、表情×5
• アニメーション
dance1/dance2/ Idling/
Run/walk/jump

33. 【あんずモデル作成】
PlayCanvas ビューポートMAYA ビューポート ローンチ画面

34. 【ステージ制作】
• Polygon△＝406
• Texture＝512×512
Diffuse/Alpha
• アニメーション
回転アニメーション
ライト用アニメーション

35. ステージ素材 キーフレームアニメーション
【ステージ制作】

36. 【環境マップ制作】

37. Web上での3D表現
Web上で3D表現を実現するには…
3DモデルをThree.jsで描画させる場合。
それぞれの3D素材のフォーマットに合わせた「Loader」と呼ばれるファイルが必要。
Camera、Light、3Dmesh、material、texture、animation、renderer…etc
要は手間が掛かります！

38. PlayCanvas Editor
• PlayCanvas Editorで3Dモデルを扱う

39. PlayCanvas Editor
• PlayCanvas Editorで3Dモデルを扱う
FBXはASSETE欄ドラック＆ドロップで自動的にJSON
に変換
テクスチャも用途に応じた圧縮が設定可能

40. PlayCanvas Editor
• 標準マテリアルの設定項目
オフセット＆タイリング
アンビエント(陰影情報)
ディフューズ(カラー情報)

41. PlayCanvas Editor
• 標準マテリアルの設定項目
スペキュラ
エミッシブ(自己発光)

42. PlayCanvas Editor
• 標準マテリアルの設定項目
オパシティ(透過)
ノーマルマップ(法線マッピング)
パララックス(視差マッピング)

43. PlayCanvas Editor
• 標準マテリアルの設定項目
エンバイロメント(環境マッピング)
ライトマップ(ベイクマップ)
アザー(レンダリング順、効果適応on/off)

44. 開発

45. モック開発
• まずモックでアニメーションビューワーを開発(1人日)
– アニメーション付きFBXをインポートするだけでリスト化
• スピード調整
• 早送り/巻き戻し
• 360ビュー
– デザイナーがすぐ
確認できるように
https://playcanv.as/p/4TZNJ6bN/

46. 背景 | Cubemap
• 時間で変化する6種類のcubemapを用意
– 1cubemap およそ3MB
– 6種で18MB
• Assetレジストリを利用して必要なcubemapのみロード

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. ステージの構成オレンジ色の
土台
(Static mesh)
周囲を回る
パネル
スポットライ
トの光線を示
す板ポリ
スポットライ
トに追従する
光源

49. スポットライトの実装
• Maya上で付けたアニメーションに
ライトオブジェクトを追従させる
– emissiveマテリアルではライティ
ングが反映されない
spot lightを焚いてアニメーショ
ン座標にスクリプトで追従
//アニメーション座標を拾いたいエンティティの最初のmeshを取得
this.model = this.targetEntity.model.model.meshInstances["0"].node;
//自分自身の角度にアニメーションの回転角を適応
this.entity.setEulerAngles(this.model.getEulerAngles());

50. スポットライトの実装
• ライトの光線を目立たせるため、板ポリはカメラを追従し続ける
カメラ追従なし カメラ追従あり
//引数のvec3ポジションを向き続ける
this.entity.lookAt(camera.getLocalPosition());

51. UIの実装とアバターカスタマイズ
• UIは基本的にHTMLで実装
– WebGL CanvasのキャプチャにUIを載せないため(後述)
• アバターのカスタマイズはテクスチャ切り替えで実現
– ボタン押下イベントで
テクスチャを切り替え
– アセットは非同期で読み込み
終了するまでボタンはdisableに

52. 体験向上のための非同期ロード
• アセットは基本的に最低限を除きすべて非同期でロード
– Firefoxデベロッパーツールで帯域をシミュレートしてデバッグ

53. 写真撮影 フロントエンド側
• 撮影ボタン押下時にフラッシュ発光
– カメラ前面にある板ポリのopacityをmaxに
• ロゴ表示
– 待機させてある2Delementをenableに

54. 写真撮影 バックエンド側
• toDataURL()でCanvasデータを取得してサーバーにPOST
– 受け取ったサーバー側でpng化してCDNに保存
– https://qiita.com/utautattaro/items/fe342c3ed5fa405f8d87
• 管理画面から一覧で見れるように

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. コード例
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. 効果測定
• Google Analyticsを組み込み、各種イベントをgtagで発火
– Input / Process等
• ボタン押下を測定
– 写真撮影ボタン80に対して
シェアボタン46
みたいなデータが取れる
• ロード完了タイミングも測定
– 値にゲームタイムを送信してベンチを測ることも(平均は6.4秒でした)
※2018.11.4のデータ

58. 全体の工程
• 全体進行
– 2018.3あんずモデル作成
– 2018.4あんずアニメーション作成
– 2018.4 企画確認
– 2018.5 アプリケーション開発・システム開発
– 2018.6 確認
– 2018.7 リリース
 デザイナー×1/エンジニア×1

59. さいごに

60. まとめ
デザイナー×１人、エンジニア×１人が約１か月で
Twitter連動型コンテンツ【あんずフォト】を企画～開発～公開
PlayCanvasの複数人同時開発、即ローンチ確認が可能という特性
を生かし、非常に効率的なトライ＆エラーを行うことができた。
結果、短期間でインタラクティブ性の高いコンテンツに仕上げる
ことができた！

61. イベントやります！
• ブラウザゲーム開発環境勉強会！
– ミドルウェア企業と一緒に最新のブラウザゲーム開発環境につ
いてお話します！

62. We Are Hiring !
• PlayCanvasを一緒に広めてくれる仲間を募集中です！
• Webデザイナー
– https://hrmos.co/pages/gmocloud/jobs/0000052
• Webエンジニア
– https://hrmos.co/pages/gmocloud/jobs/0000053
• より詳しい情報はジョブボードかブースで！

63. ご清聴ありがとうございました！