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.
PlayCanvas運営事務局
宗形 修司
The Web-First Game Engine
Collaboratively build stunning HTML5 visualizations and games
本日のアジェンダ
• PlayCanvasとは
– 何ができるのか、どんな特徴があるのか
• PlayCanvas – 事例紹介
– HTML5に焦点を当てて事例をご紹介
• PlayCanvasでのコンテンツ制作の一例
– PlayCanva...
登壇者の自己紹介
• 宗形 修司
– テクニカルアーティスト/3DCGデザイナー
キャラクター/背景/エフェクト/UIなど一通り
– 2017年12月よりPlayCanvas運営事務局
– デザイナー目線でPlayCanvasを広める
ために活...
PlayCanvasとは
PlayCanvasとは
• WebGLゲーム開発エンジン
3D要素に強く、カジュアルゲームから、
リッチコンテンツまで幅広く開発が可能
• クラウド型の開発エンジン
エンジンのインストールや
プラグインのダウンロードが不要
• 中身はオールJ...
PlayCanvasとは
PlayCanvasとは
• 基本的には1枚のcanvas
HTML
CSS
PlayCanvasとは
• ブラウザ上で動作/HTML5ゲームプラットフォームも対応
– モバイル/PC/Oculus Goなどでも動作
– WebGL(v1/v2)に対応したブラウザなら大体動く
– エンジン自体の多くはES5ベースで記述 ...
PlayCanvasの3D表現
• 豊富な3D要素
– FBX/OBJデータをインポート可能
– 3Dモデルアニメーションの
自動ブレンディング
– デフォルトのマテリアル設定も豊富
– シェーダーもGLSLで書ける
– イメージベースドライテ...
PlayCanvasの2D表現
PlayCanvasの
機能で対応
ミドルウェアで対応
• 多くの2D要素が存在
– Static UI
– Dynamic UI
– UI Animation
– Text
– 2D physics
– Par...
PlayCanvas Editorについて
• PlayCanvas Editorの構成要素
メニュー(MENU)
シーンのビューモードやプロジェク
トセッティング等の作業が行えます。
PlayCanvas Editorについて
• PlayCanvas Editorの構成要素
ヒエラルキー(HIERARCHY)
シーン内に存在するオブジェクト
の一覧が表示されます。 編集中の
シーン内でオブジェクトをコピー/
ペーストしたり...
PlayCanvas Editorについて
• PlayCanvas Editorの構成要素
シーン(SCENE)
シーンビューには製作中のゲーム世界
(シーン)が表示され、自由な位置・角
度から眺めることができます。
PlayCanvas Editorについて
• PlayCanvas Editorの構成要素
インスペクター(INSPECTOR)
シーンの中で選択肢中のオブジェクトが持つ属性を
表示・編集するためのビューです。 属性には座標
やメッシュといっ...
PlayCanvas Editorについて
• PlayCanvas Editorの構成要素
アセット(ASSETS)
製作中のプロジェクト(ゲーム全
体)に含まれるモデル、スクリプ
ト、グラフィックやサウンドなど
のデータ、その他のリソースが...
PlayCanvas 2DEditorについて
• Sprite Editorの構成要素
フレーム(Frames)
フレームはテクスチャアトラスの
定義された領域です。 フレームに
は、名前、位置とサイズ、境界線
があります。
PlayCanvas 2DEditorについて
• Sprite Editorの構成要素
ビューポート(Viewport)
スプライトエディタのビューポートには、
現在選択されているテクスチャアトラス
が表示されます。
PlayCanvas 2DEditorについて
• Sprite Editorの構成要素
インスペクター(INSPECTOR)
インスペクタパネルには、現在選択されている項目
のプロパティが表示されます。 インスペクタは、
選択した項目がテクス...
PlayCanvas 2DEditorについて
• Sprite Editorの構成要素
スプライトアセット
(sprite asset)
アセットパネルには、現在のテク
スチャアトラスから作成されたす
べてのスプライトアセットが表示
されます。
PlayCanvas 2DEditorについて
• Sprite Editorの構成要素
PlayCanvas – 事例紹介
事例紹介
Facebook インスタントゲーム Twitter Player Card
モバイルでも問題なくプレイ可能。
Klab© PlayCanvas運営事務局
PlayCanvasでのコンテンツ制作の一例
【あんずフォト】
美雲あんず (みくもあんず)
GMO公式キャラクター
2012年9月20日の東京ゲームショウ初日にデビュー。
そもそも、あんずちゃんって…誰…?
コンテンツ制作の一例【あんずフォト】
• コンセプト
– Twitter連動型コンテンツを作ろう!
– アバターの着せ替え、アニメーションの切り替えを入れたい
– キャラクターが踊るステージと環境が欲しい
– 特定の時間が経過すると環境光が変わ...
コンテンツ制作の一例【あんずフォト】
• PlayCanvasでの3Dモデルデータの扱い方
• 3Dmodel/Texture制作
– 3D統合ソフトでキャラクター
その他要素をモデリング
– テクスチャーをマテリアルに適用
• Animati...
コンテンツ制作の一例【あんずフォト】
• PlayCanvasでのテクスチャの扱い方
アルファマップ、ノーマルマップやスペキュラマップ、
ラフネスやメタルネス等の設定もデフォルトのマテリアルで
可能。必要に応じて追加。
キャラクターのテクスチャ...
コンテンツ制作の一例【あんずフォト】
• PlayCanvas Editorに3Dモデルを読み込む
コンテンツ制作の一例【あんずフォト】
• PlayCanvas Editorに3Dモデルを読み込む
FBXはドラック&ドロップで自動的にJSON
に変換
テクスチャも用途に応じた圧縮が設定可能
コンテンツ制作の一例【あんずフォト】
• Scriptsに関して
Scripts
Application
Ui
Camerainputer
• anzu_ui.js=UI要素(ボタン類)を配置と制御
• changer.js=服カラー、表情、ア...
コンテンツ制作の一例【あんずフォト】
• Scriptsに関して
Common
• analytics.js=KPI目的のスクリプト
• anzuLoadingScreen.js=ローディングシーンを編集するためのスクリプト
• applica...
コンテンツ制作の一例【あんずフォト】
• Publish/公開に関して
コンテンツ制作の一例【あんずフォト】
• Publish/公開に関して
https://playcanv.as/p/hJnA3enG/
コンテンツ制作の一例【あんずフォト】
• Downloadに関して
Zipでダウンロードして自前のサーバーへ
セルフホストする
コンテンツ制作の一例【あんずフォト】
• Twitter Player Cardへ
• Twitter PlayerCardの設定をおこない…
まとめ
まとめ
• ゲームに限らずWebGLベースの3Dコンテンツが開発しやすい!
• 高品質なのに軽量なコンテンツを制作できる!
• 面倒なビルドを挟まず即実行確認できるので効率的!
• URL1つであらゆるデバイス上で実行(プレイ)可能!
その他、PlayCanvasでできる色々なこと
その他、PlayCanvasでできる色々なこと
• 幅広い2D3D表現が可能
– ゲーム制作に必要なコリジョン、リジットボディ、シミュレーション等が
容易に設定可能
– PhongShaderベースのマテリアル&物理ベースドライティング
を採用...
その他、PlayCanvasでできる色々なこと
• VR対応
– プロジェクト制作時にVR環境用プロジェクトを選択可能
– PlayCanvasオリジナルVRシート有り
• ゲーム以外でも
– HTML5のCanvas機能を使用し、2D3Dで制...
お知らせ
https://playcanvas.jp/
https://twitter.com/playcanvasJP
https://www.facebook.com/groups/playcanvasjp/
ユーザー助け合い所
JP公式サ...
Upcoming SlideShare
Loading in …5
×

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

102 views

Published on

ブラウザゲームPFが語る業界トレンドNOW#2 HTML5スペシャル!

Published in: Design
  • Be the first to comment

  • Be the first to like this

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

  1. 1. PlayCanvas運営事務局 宗形 修司 The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games
  2. 2. 本日のアジェンダ • PlayCanvasとは – 何ができるのか、どんな特徴があるのか • PlayCanvas – 事例紹介 – HTML5に焦点を当てて事例をご紹介 • PlayCanvasでのコンテンツ制作の一例 – PlayCanvas事務局のオリジナルコンテンツで制作~公開まで • まとめ – PlayCanvasを利用する利点 • その他、PlayCanvasでできる色々なこと
  3. 3. 登壇者の自己紹介 • 宗形 修司 – テクニカルアーティスト/3DCGデザイナー キャラクター/背景/エフェクト/UIなど一通り – 2017年12月よりPlayCanvas運営事務局 – デザイナー目線でPlayCanvasを広める ために活動中
  4. 4. PlayCanvasとは
  5. 5. PlayCanvasとは • WebGLゲーム開発エンジン 3D要素に強く、カジュアルゲームから、 リッチコンテンツまで幅広く開発が可能 • クラウド型の開発エンジン エンジンのインストールや プラグインのダウンロードが不要 • 中身はオールJSの軽量なエンジン コンパイルをはさむ必要がなく、 即時性が高いのが特徴 • 詳しくは – 過去講演:https://support.playcanvas.jp/hc/ja/sections/115003159628 – 利用事例:https://support.playcanvas.jp/hc/ja/sections/115001686867
  6. 6. PlayCanvasとは
  7. 7. PlayCanvasとは • 基本的には1枚のcanvas HTML CSS
  8. 8. PlayCanvasとは • ブラウザ上で動作/HTML5ゲームプラットフォームも対応 – モバイル/PC/Oculus Goなどでも動作 – WebGL(v1/v2)に対応したブラウザなら大体動く – エンジン自体の多くはES5ベースで記述 ※2018/10下旬時点
  9. 9. PlayCanvasの3D表現 • 豊富な3D要素 – FBX/OBJデータをインポート可能 – 3Dモデルアニメーションの 自動ブレンディング – デフォルトのマテリアル設定も豊富 – シェーダーもGLSLで書ける – イメージベースドライティング (IBL) – フィジカルベースドレンダリング (PBR)
  10. 10. PlayCanvasの2D表現 PlayCanvasの 機能で対応 ミドルウェアで対応 • 多くの2D要素が存在 – Static UI – Dynamic UI – UI Animation – Text – 2D physics – Particle – Sprite Animation – 9slice texture – Character animation
  11. 11. PlayCanvas Editorについて • PlayCanvas Editorの構成要素 メニュー(MENU) シーンのビューモードやプロジェク トセッティング等の作業が行えます。
  12. 12. PlayCanvas Editorについて • PlayCanvas Editorの構成要素 ヒエラルキー(HIERARCHY) シーン内に存在するオブジェクト の一覧が表示されます。 編集中の シーン内でオブジェクトをコピー/ ペーストしたり、適切な名前をつ けて整理することもできます。
  13. 13. PlayCanvas Editorについて • PlayCanvas Editorの構成要素 シーン(SCENE) シーンビューには製作中のゲーム世界 (シーン)が表示され、自由な位置・角 度から眺めることができます。
  14. 14. PlayCanvas Editorについて • PlayCanvas Editorの構成要素 インスペクター(INSPECTOR) シーンの中で選択肢中のオブジェクトが持つ属性を 表示・編集するためのビューです。 属性には座標 やメッシュといった見た目上のものから、衝突判定 や物理制御に関するパラメーターなどもあり、その 他ユーザー定義のものもここに表示されます。
  15. 15. PlayCanvas Editorについて • PlayCanvas Editorの構成要素 アセット(ASSETS) 製作中のプロジェクト(ゲーム全 体)に含まれるモデル、スクリプ ト、グラフィックやサウンドなど のデータ、その他のリソースが ファイル単位で表示されます。
  16. 16. PlayCanvas 2DEditorについて • Sprite Editorの構成要素 フレーム(Frames) フレームはテクスチャアトラスの 定義された領域です。 フレームに は、名前、位置とサイズ、境界線 があります。
  17. 17. PlayCanvas 2DEditorについて • Sprite Editorの構成要素 ビューポート(Viewport) スプライトエディタのビューポートには、 現在選択されているテクスチャアトラス が表示されます。
  18. 18. PlayCanvas 2DEditorについて • Sprite Editorの構成要素 インスペクター(INSPECTOR) インスペクタパネルには、現在選択されている項目 のプロパティが表示されます。 インスペクタは、 選択した項目がテクスチャアトラス、フレームまた はスプライトアセットのいずれであるかによって異 なります。
  19. 19. PlayCanvas 2DEditorについて • Sprite Editorの構成要素 スプライトアセット (sprite asset) アセットパネルには、現在のテク スチャアトラスから作成されたす べてのスプライトアセットが表示 されます。
  20. 20. PlayCanvas 2DEditorについて • Sprite Editorの構成要素
  21. 21. PlayCanvas – 事例紹介
  22. 22. 事例紹介 Facebook インスタントゲーム Twitter Player Card モバイルでも問題なくプレイ可能。 Klab© PlayCanvas運営事務局
  23. 23. PlayCanvasでのコンテンツ制作の一例 【あんずフォト】 美雲あんず (みくもあんず) GMO公式キャラクター 2012年9月20日の東京ゲームショウ初日にデビュー。 そもそも、あんずちゃんって…誰…?
  24. 24. コンテンツ制作の一例【あんずフォト】 • コンセプト – Twitter連動型コンテンツを作ろう! – アバターの着せ替え、アニメーションの切り替えを入れたい – キャラクターが踊るステージと環境が欲しい – 特定の時間が経過すると環境光が変わるようにしたい – グリグリカメラを動かしたい – 良い感じのポーズでスナップショットを撮りたい – シェアしたい – KPIを取得したい
  25. 25. コンテンツ制作の一例【あんずフォト】 • PlayCanvasでの3Dモデルデータの扱い方 • 3Dmodel/Texture制作 – 3D統合ソフトでキャラクター その他要素をモデリング – テクスチャーをマテリアルに適用 • Animation制作 – 各要素にアニメーションを追加 • FBX Export – メディアに組み込み等の設定を行いエクス ポートするとPlayCanvasにインポートした ときにPlayCanvas側のマテリアルに各種 MAPが反映される
  26. 26. コンテンツ制作の一例【あんずフォト】 • PlayCanvasでのテクスチャの扱い方 アルファマップ、ノーマルマップやスペキュラマップ、 ラフネスやメタルネス等の設定もデフォルトのマテリアルで 可能。必要に応じて追加。 キャラクターのテクスチャグループ ステージのテクスチャグループ 環境マップのテクスチャグループ
  27. 27. コンテンツ制作の一例【あんずフォト】 • PlayCanvas Editorに3Dモデルを読み込む
  28. 28. コンテンツ制作の一例【あんずフォト】 • PlayCanvas Editorに3Dモデルを読み込む FBXはドラック&ドロップで自動的にJSON に変換 テクスチャも用途に応じた圧縮が設定可能
  29. 29. コンテンツ制作の一例【あんずフォト】 • 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のスターターキットに プリセットで入っているスクリプト群
  30. 30. コンテンツ制作の一例【あんずフォト】 • Scriptsに関して Common • analytics.js=KPI目的のスクリプト • anzuLoadingScreen.js=ローディングシーンを編集するためのスクリプト • application-analytics.js=Google Analyticsのアクセス用 • flash.js=撮影時のフラッシュ効果
  31. 31. コンテンツ制作の一例【あんずフォト】 • Publish/公開に関して
  32. 32. コンテンツ制作の一例【あんずフォト】 • Publish/公開に関して https://playcanv.as/p/hJnA3enG/
  33. 33. コンテンツ制作の一例【あんずフォト】 • Downloadに関して Zipでダウンロードして自前のサーバーへ セルフホストする
  34. 34. コンテンツ制作の一例【あんずフォト】 • Twitter Player Cardへ • Twitter PlayerCardの設定をおこない…
  35. 35. まとめ
  36. 36. まとめ • ゲームに限らずWebGLベースの3Dコンテンツが開発しやすい! • 高品質なのに軽量なコンテンツを制作できる! • 面倒なビルドを挟まず即実行確認できるので効率的! • URL1つであらゆるデバイス上で実行(プレイ)可能!
  37. 37. その他、PlayCanvasでできる色々なこと
  38. 38. その他、PlayCanvasでできる色々なこと • 幅広い2D3D表現が可能 – ゲーム制作に必要なコリジョン、リジットボディ、シミュレーション等が 容易に設定可能 – PhongShaderベースのマテリアル&物理ベースドライティング を採用し、リッチなビジュアルも容易に構築可能 – GLSLによるオリジナルシェーダーも実装可能 • 柔軟な開発フロー – 複数人でのリアルタイム開発が可能 – プランによりパブリック環境/プライベート環境で公開非公開を設定可能 – スマートな開発~公開までの作業フローの実現
  39. 39. その他、PlayCanvasでできる色々なこと • VR対応 – プロジェクト制作時にVR環境用プロジェクトを選択可能 – PlayCanvasオリジナルVRシート有り • ゲーム以外でも – HTML5のCanvas機能を使用し、2D3Dで制作した商品説明や 室内ウォークスルーと言ったコンテンツをIframeを用いサイトに 簡単に埋め込み可能 – インタラクティブ性の高い3DWebサイトの構築
  40. 40. お知らせ https://playcanvas.jp/ https://twitter.com/playcanvasJP https://www.facebook.com/groups/playcanvasjp/ ユーザー助け合い所 JP公式サイト JP公式ツイッター

×