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.
GMOクラウド株式会社
PlayCanvas運営事務局 津田良太郎
津田良太郎
【略歴】
2012.4 - 神奈川工科大学 入学
2014.8 - チームラボ ハードウェアエンジニア
2015.4 – 神奈川工科大学 白井研究室(VR/エンタテイメント)
2016.4 - GMOクラウド
2016.8 – ソリ...
agenda
• PlayCanvasについて
– intro
– WebGLとPlayCanvas
– どのあたりが“デザイナーにも優しい”のか
– PlayCanvasで2Dに挑戦してみた
• 今後の展開について
はじめに - PlayCanvasとは -
• 開発環境 + 学習環境 + 公開環境 一体型の
クラウド型ゲーム開発プラットフォーム
• キーワード
– オープンソース
– 3Dゲームエンジン
– HTML5 + WebGL(GLSL)
– ク...
クラウド型ゲーム開発プラットフォーム
学習環境 公開環境開発環境
GAME Editor With API
Reference
Read Other Project
Hosting on
playcanv.as
Explore
CODE Edi...
そもそも”WebGL”とは?
• ウェブブラウザで3次元コンピュータグラフィックスを表示させる
ための標準仕様。特別なブラウザのプラグインなしで、ハードウェ
アでアクセラレートされた三次元グラフィックスを表示可能にする。
HTMLのcanvas...
WebGL向けライブラリ
• Unity WebGL,Unreal Engine WebGL
– C++, C#をjavascriptへクロスコンパイル※
• 即時性が失われてしまう
• サポートブラウザが少なくパフォーマンスが低い
• Thr...
WebGLとPlayCanvas
• PlayCanvas
– ランタイムコード:javascript
– スクリプト:javascript
– ビジュアルエディタ:有
– ゲームエンジンとしての機能:有
– 公開環境:有
• 高即時性,ノンプ...
実作業比較
• 例:3DモデルをWeb上で公開してぐりぐり見れるようにしたい
• Unity WebGL
– ローカルで開発→WebGLに吐き出し→自前のサーバーで公開
• クロスプラットフォーム向けのインタフェース実装の必要有
• サポート未...
実作業比較 –PlayCanvas-
• demo
デザイナーにも優しい
• ビジュアルエディタ搭載!
• fbx, objからインポート可能!
• ドラック&ドロップのみ!
• ノンプログラミング実装!
• ブラウザ駆動でクロスプラットフォーム!
• サーバー用意不要!
• これらすべて無料※...
2Dについて
PlayCanvas 2D #UI
• PlayCanvas公式が“sprite.js”を配布
– ディスプレイ座標で配置
– UIとして機能
• タッチイベント
• マウスイベント
https://github.com/playcanvas/...
PlayCanvas 2D #SpriteAnimation
• “animatedTexture.js”を配布
• demo
PlayCanvas 2D #SpriteAnimation
demo
spritestudioでデータ作成 連番に並べ1枚のpngに
マテリアル作成
animatedTexture.jsを使い板ポリに描画完成!
PlayCanvas 2D まとめ
• 2D表現も可能!
• 公式が需要のあるプラグインを随時用意
• 複雑なことは自前で実装する必要有り
• いつかエディタの機能に組み込まれるかも…
今後の展開
• PlayCanvasロードマップ(抜粋)
– Node-based Material Editor シェーダコーディングの知識不要なビジュアルエディタツール
– Collaboration Improvements PlayCa...
お問い合わせ
• メールアドレス
– info@playcanvas.jp
• ヘルプセンター
– https://support.playcanvas.jp/hc/ja
• follow me
– @playcanvasJP
最後に..
一緒に働ける仲間を
大募集中!!
詳細はこちら↓
ありがとうございました!
Upcoming SlideShare
Loading in …5
×

デザイナーにも優しいクラウド型ゲームエンジン"PlayCanvas"

クラウド型ゲームエンジン"PlayCanvas"を紹介しております。
主に3D,2D,アニメーション等デザイナーに寄った資料となっております。

2016年9月5日 
#SpriteStudio 勉強会 『発注 x 受注 x Friendship』@GMO Yours

  • Be the first to comment

デザイナーにも優しいクラウド型ゲームエンジン"PlayCanvas"

  1. 1. GMOクラウド株式会社 PlayCanvas運営事務局 津田良太郎
  2. 2. 津田良太郎 【略歴】 2012.4 - 神奈川工科大学 入学 2014.8 - チームラボ ハードウェアエンジニア 2015.4 – 神奈川工科大学 白井研究室(VR/エンタテイメント) 2016.4 - GMOクラウド 2016.8 – ソリューション事業部 PlayCanvas運営事務局 【趣味】 旅行,ビール,カメラ,ツーリング,ゲームジャム GMOクラウド株式会社 ソリューション事業部 PlayCanvas運営事務局 テクニカルアドバイザー 登壇者の自己紹介
  3. 3. agenda • PlayCanvasについて – intro – WebGLとPlayCanvas – どのあたりが“デザイナーにも優しい”のか – PlayCanvasで2Dに挑戦してみた • 今後の展開について
  4. 4. はじめに - PlayCanvasとは - • 開発環境 + 学習環境 + 公開環境 一体型の クラウド型ゲーム開発プラットフォーム • キーワード – オープンソース – 3Dゲームエンジン – HTML5 + WebGL(GLSL) – クロスプラットフォーム – リッチメディア広告 – JavaScript – エクストリームプログラミング – リアルタイムマルチプレイ – ブラウザゲーム – WebVR
  5. 5. クラウド型ゲーム開発プラットフォーム 学習環境 公開環境開発環境 GAME Editor With API Reference Read Other Project Hosting on playcanv.as Explore CODE Editor Collaborator Community
  6. 6. そもそも”WebGL”とは? • ウェブブラウザで3次元コンピュータグラフィックスを表示させる ための標準仕様。特別なブラウザのプラグインなしで、ハードウェ アでアクセラレートされた三次元グラフィックスを表示可能にする。 HTMLのcanvas要素を使い、javascriptで記述可。 • 現在の対応状況 Wikipedia, wgld.orgより引用 「Can I use ?」 http://caniuse.com/#feat=webgl
  7. 7. WebGL向けライブラリ • Unity WebGL,Unreal Engine WebGL – C++, C#をjavascriptへクロスコンパイル※ • 即時性が失われてしまう • サポートブラウザが少なくパフォーマンスが低い • Three.js – javascript 3DLibrary • ビジュアルエディタを持たない • ゲームエンジンとしての機能はない ※Unity - マニュアル: WebGL での開発を始めるにあたって http://docs.unity3d.com/ja/current/Manual/webgl-gettingstarted.html
  8. 8. WebGLとPlayCanvas • PlayCanvas – ランタイムコード:javascript – スクリプト:javascript – ビジュアルエディタ:有 – ゲームエンジンとしての機能:有 – 公開環境:有 • 高即時性,ノンプログラミング実装,公開環境有り
  9. 9. 実作業比較 • 例:3DモデルをWeb上で公開してぐりぐり見れるようにしたい • Unity WebGL – ローカルで開発→WebGLに吐き出し→自前のサーバーで公開 • クロスプラットフォーム向けのインタフェース実装の必要有 • サポート未対応の端末有 • サーバー用意の必要有 • Three.js – ライブラリをDL→htmlおよびjsで開発→自前のサーバーで公開 • エディタを持たないので、モデルの読み込みやインタフェース等は自前で実装 • サーバー用意の必要有
  10. 10. 実作業比較 –PlayCanvas- • demo
  11. 11. デザイナーにも優しい • ビジュアルエディタ搭載! • fbx, objからインポート可能! • ドラック&ドロップのみ! • ノンプログラミング実装! • ブラウザ駆動でクロスプラットフォーム! • サーバー用意不要! • これらすべて無料※!! ※上限200MB, PUBLICプロジェクトのみ
  12. 12. 2Dについて
  13. 13. PlayCanvas 2D #UI • PlayCanvas公式が“sprite.js”を配布 – ディスプレイ座標で配置 – UIとして機能 • タッチイベント • マウスイベント https://github.com/playcanvas/sprites
  14. 14. PlayCanvas 2D #SpriteAnimation • “animatedTexture.js”を配布 • demo
  15. 15. PlayCanvas 2D #SpriteAnimation demo spritestudioでデータ作成 連番に並べ1枚のpngに マテリアル作成 animatedTexture.jsを使い板ポリに描画完成!
  16. 16. PlayCanvas 2D まとめ • 2D表現も可能! • 公式が需要のあるプラグインを随時用意 • 複雑なことは自前で実装する必要有り • いつかエディタの機能に組み込まれるかも…
  17. 17. 今後の展開 • PlayCanvasロードマップ(抜粋) – Node-based Material Editor シェーダコーディングの知識不要なビジュアルエディタツール – Collaboration Improvements PlayCanvasプロジェクトでブランチ・マージワークフロー導 入 • 今後 勉強会、ハンズオン随時開催予定! • 10/22 CEDEC 九州
  18. 18. お問い合わせ • メールアドレス – info@playcanvas.jp • ヘルプセンター – https://support.playcanvas.jp/hc/ja • follow me – @playcanvasJP
  19. 19. 最後に.. 一緒に働ける仲間を 大募集中!! 詳細はこちら↓
  20. 20. ありがとうございました!

×