【ブラウザゲームPFが語る業界トレンドNOW#2 HTML5スペシャル！】メディアミックスをPlayCanvasで実現する(2018/11/06講演)

PlayCanvas運営事務局
宗形修司
The Web-First Game Engine
Collaboratively build stunning HTML5 visualizations and games

本日のアジェンダ
• PlayCanvasとは
– 何ができるのか、どんな特徴があるのか
• PlayCanvas – 事例紹介
– HTML5に焦点を当てて事例をご紹介
• PlayCanvasでのコンテンツ制作の一例
– PlayCanvas事務局のオリジナルコンテンツで制作～公開まで
• まとめ
– PlayCanvasを利用する利点
• その他、PlayCanvasでできる色々なこと

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

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

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

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

PlayCanvasの3D表現
• 豊富な3D要素
– FBX/OBJデータをインポート可能
– 3Dモデルアニメーションの
自動ブレンディング
– デフォルトのマテリアル設定も豊富
– シェーダーもGLSLで書ける
– イメージベースドライティング
(IBL)
– フィジカルベースドレンダリング
(PBR）

PlayCanvasの2D表現
PlayCanvasの
機能で対応
ミドルウェアで対応
• 多くの2D要素が存在
– Static UI
– Dynamic UI
– UI Animation
– Text
– 2D physics
– Particle
– Sprite Animation
– 9slice texture
– Character animation

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

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

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

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

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

PlayCanvas 2DEditorについて
• Sprite Editorの構成要素
フレーム(Frames)
フレームはテクスチャアトラスの
定義された領域です。フレームに
は、名前、位置とサイズ、境界線
があります。

ビューポート(Viewport)
スプライトエディタのビューポートには、
現在選択されているテクスチャアトラス
が表示されます。

インスペクター(INSPECTOR)
インスペクタパネルには、現在選択されている項目
のプロパティが表示されます。インスペクタは、
選択した項目がテクスチャアトラス、フレームまた
はスプライトアセットのいずれであるかによって異
なります。

スプライトアセット
(sprite asset)
アセットパネルには、現在のテク
スチャアトラスから作成されたす
べてのスプライトアセットが表示
されます。

事例紹介
Facebook インスタントゲーム Twitter Player Card
モバイルでも問題なくプレイ可能。
Klab© PlayCanvas運営事務局

PlayCanvasでのコンテンツ制作の一例
【あんずフォト】
美雲あんず（みくもあんず）
GMO公式キャラクター
2012年9月20日の東京ゲームショウ初日にデビュー。
そもそも、あんずちゃんって…誰…？

コンテンツ制作の一例【あんずフォト】
• コンセプト
– Twitter連動型コンテンツを作ろう！
– アバターの着せ替え、アニメーションの切り替えを入れたい
– キャラクターが踊るステージと環境が欲しい
– 特定の時間が経過すると環境光が変わるようにしたい
– グリグリカメラを動かしたい
– 良い感じのポーズでスナップショットを撮りたい
– シェアしたい
– KPIを取得したい

• PlayCanvasでの3Dモデルデータの扱い方
• 3Dmodel/Texture制作
– 3D統合ソフトでキャラクター
その他要素をモデリング
– テクスチャーをマテリアルに適用
• Animation制作
– 各要素にアニメーションを追加
• FBX Export
– メディアに組み込み等の設定を行いエクス
ポートするとPlayCanvasにインポートした
ときにPlayCanvas側のマテリアルに各種
MAPが反映される

• PlayCanvasでのテクスチャの扱い方
アルファマップ、ノーマルマップやスペキュラマップ、
ラフネスやメタルネス等の設定もデフォルトのマテリアルで
可能。必要に応じて追加。
キャラクターのテクスチャグループ
ステージのテクスチャグループ
環境マップのテクスチャグループ

• PlayCanvas Editorに3Dモデルを読み込む

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

• Scriptsに関して
Scripts
Application
Ui
Camerainputer
• anzu_ui.js＝UI要素(ボタン類)を配置と制御
• changer.js＝服カラー、表情、アニメを切り替える
• game_ui.html＝ボタンやモーダル、カルーセルのHTML
• cubemapChanger.js=キューブマップを一定時間経過すると切り替える
• lookatcamera.js＝カメラに対して常に同じ方向を向くようにする
• takescreenshot.js＝スクリーンショットを撮影してサーバーに送信する
• traceanimation.js＝アニメーションの座標を取得し動きをトレース
• keyboard-input.js
• mouse-input.js
• touch-input.js
• orbit-camera.js
キーボード/マウス/タッチ操作関連
※PlayCanvasのmodelviewerのスターターキットに
プリセットで入っているスクリプト群

• Scriptsに関して
Common
• analytics.js=KPI目的のスクリプト
• anzuLoadingScreen.js=ローディングシーンを編集するためのスクリプト
• application-analytics.js=Google Analyticsのアクセス用
• flash.js=撮影時のフラッシュ効果

• Publish/公開に関して

• Publish/公開に関して
https://playcanv.as/p/hJnA3enG/

• Downloadに関して
Zipでダウンロードして自前のサーバーへ
セルフホストする

• Twitter Player Cardへ
• Twitter PlayerCardの設定をおこない…

まとめ
• ゲームに限らずWebGLベースの3Dコンテンツが開発しやすい！
• 高品質なのに軽量なコンテンツを制作できる！
• 面倒なビルドを挟まず即実行確認できるので効率的！
• URL1つであらゆるデバイス上で実行(プレイ)可能！

その他、PlayCanvasでできる色々なこと

• 幅広い2D3D表現が可能
– ゲーム制作に必要なコリジョン、リジットボディ、シミュレーション等が
容易に設定可能
– PhongShaderベースのマテリアル＆物理ベースドライティング
を採用し、リッチなビジュアルも容易に構築可能
– GLSLによるオリジナルシェーダーも実装可能
• 柔軟な開発フロー
– 複数人でのリアルタイム開発が可能
– プランによりパブリック環境/プライベート環境で公開非公開を設定可能
– スマートな開発～公開までの作業フローの実現

• VR対応
– プロジェクト制作時にVR環境用プロジェクトを選択可能
– PlayCanvasオリジナルVRシート有り
• ゲーム以外でも
– HTML5のCanvas機能を使用し、2D3Dで制作した商品説明や
室内ウォークスルーと言ったコンテンツをIframeを用いサイトに
簡単に埋め込み可能
– インタラクティブ性の高い3DWebサイトの構築

お知らせ
https://playcanvas.jp/
https://twitter.com/playcanvasJP
https://www.facebook.com/groups/playcanvasjp/
ユーザー助け合い所
JP公式サイト
JP公式ツイッター

【ブラウザゲームPFが語る業界トレンドNOW#2 HTML5スペシャル！】メディアミックスをPlayCanvasで実現する(2018/11/06講演)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 【ブラウザゲームPFが語る業界トレンドNOW#2 HTML5スペシャル！】メディアミックスをPlayCanvasで実現する(2018/11/06講演)

Semelhante a 【ブラウザゲームPFが語る業界トレンドNOW#2 HTML5スペシャル！】メディアミックスをPlayCanvasで実現する(2018/11/06講演) (20)