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 – 神奈川工科大学 白井研究室
2016.4 - GMOクラウド
2016.8 – ソリューション事業...
はじめに - 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
– asm.js, emscriptenでjsへクロスコンパイル
– 同様のアセットを使用したゲームのDLサイズ
– PlayCan...
WebGL開発が可能なツール・ライブラリ
• Three.js WebGL 3D Library
– 最近のリッチなWebサイトの実装は大体これ(な気がする)
– 軽量、オープンソース、無料(MITライセンス)
– HTMLとjavascrip...
PlayCanvas
• ランタイムコード,スクリプトどちらもjavascript
– 軽量・高速・高即時性
– モバイル対応(WebVR Ready, スマホVR)
• ビジュアルエディター
– WebGLに関する深い知識がなくても
java...
*内容* 戦車ゲームを作ります
#PlayCanvas Intro
#KeyBoard Input
#Console.log / Debug
#attribute
#EntityTemplate / clone
#rigidbody / col...
ワークショップ資料はこちら(チュートリアルページに飛びます)
https://support.playcan
vas.jp/hc/ja/articles/2
24163827
いかがでしたか?
• PlayCanvasの手軽さ、パワフルさを体感していただけ
れば幸いです。
• まだまだ紹介し切れていない機能も!
– エクストリームプログラミング
– リアルタイム通信
– モバイル対応
– 2D / スプライトアニメー...
今後の予定
• 10/22 CEDEC 九州
• 11/13 デジゲー博@秋葉原
• この後も勉強会・ワークショップ続々開催予定!
ヘルプセンター始めました
• ナレッジベースや、コミュニティ(フォーラム)
機能のあるヘルプセンターを開設しました
• コンテンツの充実化を図って行きますので、ぜ
ひご利用ください!
• https://support.playcanvas.j...
お問い合わせ
• メールアドレス
– info@playcanvas.jp
• ヘルプセンター
– https://support.playcanvas.jp/hc/ja
• follow me
– @playcanvasJP
最後に..
一緒に働ける仲間を
大募集中!!
詳細はこちら↓
WebGLで動くブラウザゲームをPlayCanvasで簡単に作っちゃおう【初級編】
WebGLで動くブラウザゲームをPlayCanvasで簡単に作っちゃおう【初級編】
Upcoming SlideShare
Loading in …5
×

WebGLで動くブラウザゲームをPlayCanvasで簡単に作っちゃおう【初級編】

HTML5 + WebGLゲームエンジン"PlayCanvas"を使った初級編ワークショップです。
実際に簡単なミニゲーム開発を通して、PlayCanvas Editorのご説明から、ゲーム開発に必要となるキーボード入力や、デバック作業、オブジェクトのクローン、物理演算等、手を動かしながら理解を進めていきます。

ワークショップでは以下のチュートリアルを使用いたします。
チュートリアル - PlayCanvasの基本操作
https://support.playcanvas.jp/hc/ja/articles/224163827

  • Be the first to comment

WebGLで動くブラウザゲームをPlayCanvasで簡単に作っちゃおう【初級編】

  1. 1. GMOクラウド株式会社 ソリューション事業部 PlayCanvas運営事務局 テクニカルアドバイザー 津田良太郎
  2. 2. 津田良太郎 【略歴】 2012.4 - 神奈川工科大学 入学 2014.8 - チームラボ ハードウェアエンジニア インターン 2015.4 – 神奈川工科大学 白井研究室 2016.4 - GMOクラウド 2016.8 – ソリューション事業部 PlayCanvas運営事務局 【趣味】 旅行,ビール,カメラ,ツーリング,ゲームジャム GMOクラウド株式会社 ソリューション事業部 PlayCanvas運営事務局 テクニカルアドバイザー 登壇者の自己紹介
  3. 3. はじめに - PlayCanvasとは - • 開発環境 + 学習環境 + 公開環境 一体型の クラウド型ゲーム開発プラットフォーム • キーワード – オープンソース – 3Dゲームエンジン – HTML5 + WebGL(GLSL) – クロスプラットフォーム – リッチメディア広告 – JavaScript – エクストリームプログラミング – リアルタイムマルチプレイ – ブラウザゲーム – WebVR
  4. 4. クラウド型ゲーム開発プラットフォーム 学習環境 公開環境開発環境 GAME Editor With API Reference Read Other Project Hosting on playcanv.as Explore CODE Editor Collaborator Community
  5. 5. そもそも”WebGL”とは? • ウェブブラウザで3次元コンピュータグラフィックスを表示させる ための標準仕様。特別なブラウザのプラグインなしで、ハードウェ アでアクセラレートされた三次元グラフィックスを表示可能にする。 HTMLのcanvas要素を使い、javascriptで記述可。 • 現在の対応状況 Wikipedia, wgld.orgより引用 「Can I use ?」 http://caniuse.com/#feat=webgl
  6. 6. WebGL開発が可能なツール・ライブラリ • Unity WebGL, Unreal Engine WebGL – asm.js, emscriptenでjsへクロスコンパイル – 同様のアセットを使用したゲームのDLサイズ – PlayCanvasとUnity WebGLの比較 – PlayCanvas – https://support.playcanvas.jp/hc/ja/articles/224611748 – PlayCanvasとUnreal WebGLの比較 – PlayCanvas – https://support.playcanvas.jp/hc/ja/articles/225568967 Unity PlayCanvas 4.72MB 0.22MB Tappy Chicken(Unreal) Flappy Bird(PlayCanvas) 10.0MB 0.22MB
  7. 7. WebGL開発が可能なツール・ライブラリ • Three.js WebGL 3D Library – 最近のリッチなWebサイトの実装は大体これ(な気がする) – 軽量、オープンソース、無料(MITライセンス) – HTMLとjavascriptで記述 – エディタを持たない – ゲームエンジンとしての機能はない
  8. 8. PlayCanvas • ランタイムコード,スクリプトどちらもjavascript – 軽量・高速・高即時性 – モバイル対応(WebVR Ready, スマホVR) • ビジュアルエディター – WebGLに関する深い知識がなくても javascriptネイティブのWebGLアプリが開発可能 • 無料の公開環境(200MB) – サーバ用意不要 – 簡単なデモやモデルビューワー、配布に最適
  9. 9. *内容* 戦車ゲームを作ります #PlayCanvas Intro #KeyBoard Input #Console.log / Debug #attribute #EntityTemplate / clone #rigidbody / collision ワークショップ - PlayCanvasの基本操作編 -
  10. 10. ワークショップ資料はこちら(チュートリアルページに飛びます) https://support.playcan vas.jp/hc/ja/articles/2 24163827
  11. 11. いかがでしたか? • PlayCanvasの手軽さ、パワフルさを体感していただけ れば幸いです。 • まだまだ紹介し切れていない機能も! – エクストリームプログラミング – リアルタイム通信 – モバイル対応 – 2D / スプライトアニメーション – WebVR
  12. 12. 今後の予定 • 10/22 CEDEC 九州 • 11/13 デジゲー博@秋葉原 • この後も勉強会・ワークショップ続々開催予定!
  13. 13. ヘルプセンター始めました • ナレッジベースや、コミュニティ(フォーラム) 機能のあるヘルプセンターを開設しました • コンテンツの充実化を図って行きますので、ぜ ひご利用ください! • https://support.playcanvas.jp/hc/ja
  14. 14. お問い合わせ • メールアドレス – info@playcanvas.jp • ヘルプセンター – https://support.playcanvas.jp/hc/ja • follow me – @playcanvasJP
  15. 15. 最後に.. 一緒に働ける仲間を 大募集中!! 詳細はこちら↓

×