HTML5 + WebGLゲームエンジン"PlayCanvas"を使った初級編ワークショップです。 実際に簡単なミニゲーム開発を通して、PlayCanvas Editorのご説明から、ゲーム開発に必要となるキーボード入力や、デバック作業、オブジェクトのクローン、物理演算等、手を動かしながら理解を進めていきます。 ワークショップでは以下のチュートリアルを使用いたします。 チュートリアル - PlayCanvasの基本操作 https://support.playcanvas.jp/hc/ja/articles/224163827

1. GMOクラウド株式会社
ソリューション事業部
PlayCanvas運営事務局
テクニカルアドバイザー 津田良太郎

2. 津田良太郎
【略歴】
2012.4 - 神奈川工科大学 入学
2014.8 - チームラボ ハードウェアエンジニア インターン
2015.4 – 神奈川工科大学 白井研究室
2016.4 - GMOクラウド
2016.8 – ソリューション事業部 PlayCanvas運営事務局
【趣味】
旅行，ビール，カメラ，ツーリング，ゲームジャム
GMOクラウド株式会社
ソリューション事業部
PlayCanvas運営事務局
テクニカルアドバイザー
登壇者の自己紹介

3. はじめに - PlayCanvasとは -
• 開発環境 ＋ 学習環境 ＋ 公開環境 一体型の
クラウド型ゲーム開発プラットフォーム
• キーワード
– オープンソース
– 3Dゲームエンジン
– HTML5 + WebGL(GLSL)
– クロスプラットフォーム
– リッチメディア広告
– JavaScript
– エクストリームプログラミング
– リアルタイムマルチプレイ
– ブラウザゲーム
– WebVR

4. クラウド型ゲーム開発プラットフォーム
学習環境 公開環境開発環境
GAME Editor With API
Reference
Read Other Project
Hosting on
playcanv.as
Explore
CODE Editor
Collaborator
Community

5. そもそも”WebGL”とは？
• ウェブブラウザで3次元コンピュータグラフィックスを表示させる
ための標準仕様。特別なブラウザのプラグインなしで、ハードウェ
アでアクセラレートされた三次元グラフィックスを表示可能にする。
HTMLのcanvas要素を使い、javascriptで記述可。
• 現在の対応状況
Wikipedia, wgld.orgより引用
「Can I use ?」 http://caniuse.com/#feat=webgl

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. WebGL開発が可能なツール・ライブラリ
• Three.js WebGL 3D Library
– 最近のリッチなWebサイトの実装は大体これ(な気がする)
– 軽量、オープンソース、無料(MITライセンス)
– HTMLとjavascriptで記述
– エディタを持たない
– ゲームエンジンとしての機能はない

8. PlayCanvas
• ランタイムコード，スクリプトどちらもjavascript
– 軽量・高速・高即時性
– モバイル対応（WebVR Ready, スマホVR）
• ビジュアルエディター
– WebGLに関する深い知識がなくても
javascriptネイティブのWebGLアプリが開発可能
• 無料の公開環境(200MB)
– サーバ用意不要
– 簡単なデモやモデルビューワー、配布に最適

9. *内容* 戦車ゲームを作ります
#PlayCanvas Intro
#KeyBoard Input
#Console.log / Debug
#attribute
#EntityTemplate / clone
#rigidbody / collision
ワークショップ - PlayCanvasの基本操作編 -

10. ワークショップ資料はこちら(チュートリアルページに飛びます)
https://support.playcan
vas.jp/hc/ja/articles/2
24163827

12. いかがでしたか？
• PlayCanvasの手軽さ、パワフルさを体感していただけ
れば幸いです。
• まだまだ紹介し切れていない機能も！
– エクストリームプログラミング
– リアルタイム通信
– モバイル対応
– 2D / スプライトアニメーション
– WebVR

13. 今後の予定
• 10/22 CEDEC 九州
• 11/13 デジゲー博@秋葉原
• この後も勉強会・ワークショップ続々開催予定！

14. ヘルプセンター始めました
• ナレッジベースや、コミュニティ(フォーラム)
機能のあるヘルプセンターを開設しました
• コンテンツの充実化を図って行きますので、ぜ
ひご利用ください！
• https://support.playcanvas.jp/hc/ja

15. お問い合わせ
• メールアドレス
– info@playcanvas.jp
• ヘルプセンター
– https://support.playcanvas.jp/hc/ja
• follow me
– ＠playcanvasJP

16. 最後に..
一緒に働ける仲間を
大募集中！！
詳細はこちら↓