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.
HTML5ゲーム戦国時代に突入目前!ライバルに差をつけろ!
PlayCanvas運営事務局
津田良太郎
はじめに
• 本プレゼンを聞いていただきたい主なターゲット
– UnityやUE4を使ったゲーム開発経験がある
– HTML5ゲームがなんだか今アツそうだと思っている
– ゲームはビジュアルエディタで作りたい
– Web系技術に興味はあるが触っ...
狙い
• 本プレゼンで得られること
– PlayCanvasについて深く知れる
– すぐPlayCanvasでHTML5ゲームが作り始められる
• 本プレゼンで得られないこと
– PlayCanvas以外のHTML5ゲーム開発環境の話
– HT...
自己紹介
津田良太郎 @utautattaro
– PlayCanvas エバンジェリスト
– 2016年より国内向けに
PlayCanvasの普及活動を開始
– ツールを広めるにはまず最初に自分が使ってみる!をモットーに
いろいろサンプルを作...
本日のアジェンダ
• PlayCanvasって何?
• PlayCanvasでどんなことができる?
• PlayCanvasでどんなものが作られた?
• まとめ
PlayCanvasって何?
一言で PlayCanvasとは
ゲームエンジン
です!!
PlayCanvasとは
• ゲームエンジン
– WebGL向けのオープンソースなゲームエンジン
– すべてJavaScriptで記述されていて、scriptタグで呼ぶ
だけで使える
– ライブラリではなくゲームエンジンなので
カテゴリとしては...
PlayCanvas エンジンの特徴
• 軽量
• オールJavaScript
• OSS
PlayCanvasを始めるには – エンジンのビルド
• PlayCanvasエンジンをビルド
git clone https://github.com/playcanvas/engine.git
cd engine
npm install ...
PlayCanvasを始めるには – Get Started
<script src=‘./playcanvas-stable.min.js'></script>
var canvas = document.getElementById(‘ap...
これでゲームが作れる!
これでゲームが作れる…?
• とはならない開発者も多い
– 開発環境を手元で構築する必要がある
– 最低限のWeb関連技術を覚えるコストが発生する
– コードのみで3次元空間をイメージするのはしんどい
– ゲーム開発にはビジュアルエディタがほし...
そこで
_人人人人人人人人人人人_
> PlayCanvas Editor! <
 ̄Y^Y^Y^Y^Y^Y^Y^Y  ̄
PlayCanvas Editor
• クラウドサービスとして提供
• 開発環境の構築必要なし!
• メールアドレス一つで登録、開始可能
• ブラウザ上で動くビジュアルエディタ!
• 初めての人でもHTML5ゲームが
簡単に作れる環境が整ってい...
EditorとEngine単体との違い
PlayCanvas Editor 項目 PlayCanvas Engine
playcanvas.com 開発環境のホスティング 自分でホスト
エディタベース 開発手段 コードベース
× エンジンのカス...
PlayCanvas Editor Get Started
• PlayCanvasのサービスサイトへアクセス
PlayCanvas Editor Get Started
• 右上のSign upをクリック
PlayCanvas Editor Get Started
• メールアドレスとパスワードを設定
PlayCanvas Editor Get Started
• ブラウザ上で開発開始!
PlayCanvas Editor
PlayCanvas Editor
• GUI中心の操作
• ヒエラルキー、インスペクター、アセット
• 360度から見渡せるビューポート
• コードエディタ―
• 統合されたチャット
まとめると
• PlayCanvasの提供方法
– Engine単体での提供と、クラウドサービスとしての提供
– コードベースでゲームが作れる人は単体で
– エディタを使いたい人はWebからアカウント登録
• PlayCanvas Editor...
PlayCanvasでどんなことができる?
大前提
• PlayCanvasはWebGLのゲームエンジンです
– 最終的なアウトプットは1枚のcanvas
– エディタを使ってcanvasの中身を構築していくイメージ
• それ以外のことはやろうと思えばできるけど..
– HTML,CSS...
PlayCanvasでゲームを作る
• ゲーム開発になぞって紹介
– ゲームとして必要最低限な機能
– ゲームエンジンに必要な機能
– PlayCanvasだからできるすごい機能
ゲームとして必要最低限な機能
– レンダリング
– エンティティシステム
– コンポーネントシステム
– メインループ
レンダリング
• WebGL2.0 based renderer
– フィジカルベースドレンダリング(PBR)
– イメージベースドライティング(IBL)
– WebGL2.0非対応環境では1.0にフォールバック可能
エンティティシステム
• エンティティ
– ゲームオブジェクトの単位
– インスタンシング
– 検索
– デストロイ
//エンティティ作成
var entity = new pc.Entity();
//インスタンシング
var cloneEn...
コンポーネントシステム
• ビルトインコンポーネント
– モデル
– サウンド
– アニメーション
– カメラ
– コリジョン
– ライト
– リジッドボディ
– スクリプト
– パーティクルシステム
– Etc..
コンポーネントシステム
• スクリプトからアクセスする場合
– 各コンポーネントはエンティティに紐づく
//自分自身を取得
/* scriptコンポーネントでthisはスクリプト自体を返す。
* this.entityでアタッチされたエンティテ...
メインループ
• PlayCanvasのメインループは60FPS
– requestAnimationFrame()によってループ
• engine/src/framework/application.js 内で呼び出し
– PlayCanva...
ゲームエンジンに必要な機能
– モデル&ボーンアニメーション
– インプットシステム
– 3D オーディオ
– フィジックス
– レベルデザイン
– シーン遷移
モデル&ボーンアニメーション
• Obj,FBX対応
– 独自のjsonフォーマットにコンバート
– ジオメトリ、アニメーションをそれぞれ分割
モデル&ボーンアニメーション
インプットシステム
• キーボード、ゲームパッド
– 値を返すメソッドが予約
– メインループの中で使える //in update method…
//エンターキーが押されたとき
if(this.app.keyboard.wasPressed(...
インプットシステム
• マウス、タッチ
– イベントハンドラを設定し
コールバック関数内に記述
if(this.app.touch){//タッチデバイスかどうか
//タッチデバイス向けのイベントハンドラ
this.app.touch.on(
p...
3Dオーディオ
• オーディオコンポーネント
– サウンドデータを入れるだけで使える
– Web Audio APIを通して実行
– 簡単な編集も
フィジックス
• Bulletベースの物理エンジンを内包
– 3Dフィジックス
– Bullet(C++)をemscriptenでJSにしたAmmo.jsを利用
– 昨年リファクタリングが完了し、ほぼすべてのAPIが
見えるように
– Stat...
フィジックス
レベルデザイン
• スクリプトコンポーネントへのアトリビュート
– エディタから変数へアクセスすることが可能
//スクリプトのアトリビュートに‘speed’を追加
Script.attributes.add(‘speed’,{type:‘num...
レベルデザイン
• attributesの種類
– “number”
– “rgb”,”rgba”
– “string”
– “curve”
– “boolean”
– “vec2”,”vec3”,”vec4”
• オプションの種類
– def...
シーン遷移
• プロジェクト内に複数シーンを作成
– SPAのような作りにすることも可能
PlayCanvasだからできるすごい機能
– エレメントコンポーネント
– リアルタイムコラボレーション
– Swap
– Compless
– リソース管理
– WebVR/AR
エレメントコンポーネント
• UIが作成できる
– canvasに直接描画 ≠ DOM
– ダイナミックフォントに対応(ttfのみ)
– インプットイベントも簡単に実装
リアルタイムコラボレーション
• コンフリクトなしで作業が即時同期
– プロジェクトメンバーにアサインするだけ
– オブジェクトの編集やコード等
swap
• ホットリロードができる
– 実行中のインスタンスに対して動的にアップデート
– 実行URLを開いているすべてのデバイスへ
swap
compless
• ビルド時に複数のスクリプトを連結,難読化
– ビルド時のオプションで選択するだけ
– __game-script.jsにまとめて吐き出し
PlayCanvasアプリのファイル構成
リソース管理
• アセットレジストリ
– チェックボックス一つでロードをストリーミングに
– setTimeout()地獄に悩まされない
リソース管理
• アセットレジストリ
– チェックボックス一つでロードをストリーミングに
– setTimeout()地獄に悩まされない
プリ
ロード
スト
リーミ
ング
DOM操作
DOM操作
preload
prel
oad
描画開始
描画...
WebVR/AR
• VR
– WebVR API経由でCardboard/HTC Vive/Rift等に対応
– Starter Kitを使えば数クリックでWebVR環境を構築
• AR
– マーカーベースは対応済み
– ARCore/ARK...
WebVR/AR
PlayCanvasでどんなものが作られた?
事例10連発
PlayCanvas x Facebookインスタントゲーム
• Kaburin! Ball,
Kaburin! Dodge by KLab
– 事例記事 : KLabがFacebookインスタントゲームでゲームエン
ジンにPlayCanvas...
PlayCanvas x Yahoo!ゲーム かんたんゲームプラス
• ジグザグペンギン by ボトルキューブ
– 事例記事:PlayCanvasを採用し4タイトルのゲームアプ
リを開発したボトルキューブの次なる一手は?
PlayCanvas x ポイントサイト
• OwlsDozer by CMサイト
– 事例記事:CMサイトが自社アドゲーム開発にPlayCanvasを
採用!CMサイトの考える次世代のアドゲームとは?
PlayCanvas x プロダクトビジュアライゼーション
• BMW i8 by BMW
– BMW i8
– 360度好きな角度から眺めたり
自由に色を変えたりできる
PlayCanvas x 建築
• Kitchen Visualizer by Toll Brothers.
– 自分好みのキッチンを構築
PlayCanvas x リッチメディア広告
• TRANSFORMERS THE LAST KNIGHT
– バンブルビーの質問に答えていくと踊ってくれる
PlayCanvas x リッチWebページ
• eBay Retail Report Deutschland
– www.ebay-report.de
– ページ全体をPlayCanvasで構築した例
PlayCanvas x 2Dゲーム
• Master Archer By PlayCanvas
– エレメントコンポーネントで2Dゲームを構築
PlayCanvas x モデリングツール
• VOXELCANVAS
– VOXELCANVAS | HOME
– ボクセルモデリングツール, objエクスポートにも対応
PlayCanvas x マルチプレイ
• ソーシャルVR
– ネットワークエンジン”Photon”と組み合わせた例
まとめ
PlayCanvasではじめよう
• まずはアカウント作成!
– メールアドレスがあれば無料で始められます!
• HTML5ゲーム、怖くない!
– HTML5ゲームでもビジュアルエディタを使った開発を!
• 可能性は無限大!
– ゲームからWe...
本講演を聞いて早速触ってみたくなった方!
• ハンズオンやります
– PlayCanvasもPhotonもWebVRも一緒に触れちゃうハンズオン
– 【ハンズオン】ソーシャルVRアプリをつくろう! ~1時間で複数人参加型のWebVRアプリを開発...
Contact
• ヘルプセンター
– https://support.playcanvas.jp/hc/ja
• Twitter
– https://twitter.com/playcanvasJP
• お問い合わせ
– mailto: in...
Thank you!
Upcoming SlideShare
Loading in …5
×

【第3回html5jゲーム部勉強会】HTML5ゲーム戦国時代に突入目前!ライバルに差をつけろ! PlayCanvasを用いたイマドキ開発手法と先駆者の事例(2018/03/26講演)

1,542 views

Published on

https://html5jgame.connpass.com/event/79033/

Published in: Engineering
  • Login to see the comments

【第3回html5jゲーム部勉強会】HTML5ゲーム戦国時代に突入目前!ライバルに差をつけろ! PlayCanvasを用いたイマドキ開発手法と先駆者の事例(2018/03/26講演)

  1. 1. HTML5ゲーム戦国時代に突入目前!ライバルに差をつけろ! PlayCanvas運営事務局 津田良太郎
  2. 2. はじめに • 本プレゼンを聞いていただきたい主なターゲット – UnityやUE4を使ったゲーム開発経験がある – HTML5ゲームがなんだか今アツそうだと思っている – ゲームはビジュアルエディタで作りたい – Web系技術に興味はあるが触ったことがない – Get Started -> “npm install … “ でウッっとなる – さらっとWebでゲームを作って公開してみたい • yesが1つでもある人におススメ!
  3. 3. 狙い • 本プレゼンで得られること – PlayCanvasについて深く知れる – すぐPlayCanvasでHTML5ゲームが作り始められる • 本プレゼンで得られないこと – PlayCanvas以外のHTML5ゲーム開発環境の話 – HTML5ゲームでご飯を食べる話
  4. 4. 自己紹介 津田良太郎 @utautattaro – PlayCanvas エバンジェリスト – 2016年より国内向けに PlayCanvasの普及活動を開始 – ツールを広めるにはまず最初に自分が使ってみる!をモットーに いろいろサンプルを作ったりハンズオンをしたりしています。
  5. 5. 本日のアジェンダ • PlayCanvasって何? • PlayCanvasでどんなことができる? • PlayCanvasでどんなものが作られた? • まとめ
  6. 6. PlayCanvasって何?
  7. 7. 一言で PlayCanvasとは ゲームエンジン です!!
  8. 8. PlayCanvasとは • ゲームエンジン – WebGL向けのオープンソースなゲームエンジン – すべてJavaScriptで記述されていて、scriptタグで呼ぶ だけで使える – ライブラリではなくゲームエンジンなので カテゴリとしてはUnityやUnreal Engineと同じ
  9. 9. PlayCanvas エンジンの特徴 • 軽量 • オールJavaScript • OSS
  10. 10. PlayCanvasを始めるには – エンジンのビルド • PlayCanvasエンジンをビルド git clone https://github.com/playcanvas/engine.git cd engine npm install fs-extra npm install google-closure-compiler npm install preprocessor cd build node build.js
  11. 11. PlayCanvasを始めるには – Get Started <script src=‘./playcanvas-stable.min.js'></script> var canvas = document.getElementById(‘application’); var app = new pc.Application(canvas, { }); app.start(); var camera = new pc.Entity(‘camera’); camera.addComponent(‘camera’,{clearColor:new pc.Color(0.1,0.1,0.1)}); var right = new pc.Entity(‘light’); light.addComponent(‘light’); app.root.addChild(camera); app.root.addChild(light); app.on('update', function (deltaTime) { Timer += deltaTime }); <canvas id=‘application’></canvas> canvas作成 エンジン読み込み 初期化 カメラとライトの配置 メインループ
  12. 12. これでゲームが作れる!
  13. 13. これでゲームが作れる…? • とはならない開発者も多い – 開発環境を手元で構築する必要がある – 最低限のWeb関連技術を覚えるコストが発生する – コードのみで3次元空間をイメージするのはしんどい – ゲーム開発にはビジュアルエディタがほしい • 少なくとも自分はUnity育ちのゆとり世代なので無理
  14. 14. そこで _人人人人人人人人人人人_ > PlayCanvas Editor! <  ̄Y^Y^Y^Y^Y^Y^Y^Y  ̄
  15. 15. PlayCanvas Editor • クラウドサービスとして提供 • 開発環境の構築必要なし! • メールアドレス一つで登録、開始可能 • ブラウザ上で動くビジュアルエディタ! • 初めての人でもHTML5ゲームが 簡単に作れる環境が整っています!
  16. 16. EditorとEngine単体との違い PlayCanvas Editor 項目 PlayCanvas Engine playcanvas.com 開発環境のホスティング 自分でホスト エディタベース 開発手段 コードベース × エンジンのカスタマイズ 〇 無料から 料金 無料
  17. 17. PlayCanvas Editor Get Started • PlayCanvasのサービスサイトへアクセス
  18. 18. PlayCanvas Editor Get Started • 右上のSign upをクリック
  19. 19. PlayCanvas Editor Get Started • メールアドレスとパスワードを設定
  20. 20. PlayCanvas Editor Get Started • ブラウザ上で開発開始!
  21. 21. PlayCanvas Editor
  22. 22. PlayCanvas Editor • GUI中心の操作 • ヒエラルキー、インスペクター、アセット • 360度から見渡せるビューポート • コードエディタ― • 統合されたチャット
  23. 23. まとめると • PlayCanvasの提供方法 – Engine単体での提供と、クラウドサービスとしての提供 – コードベースでゲームが作れる人は単体で – エディタを使いたい人はWebからアカウント登録 • PlayCanvas Editor – メールアドレス一つで開発開始 – ブラウザ上でリッチなエディタを提供 PlayCanvasは OSSでありゲームエンジンでありクラウドサービスでもある!
  24. 24. PlayCanvasでどんなことができる?
  25. 25. 大前提 • PlayCanvasはWebGLのゲームエンジンです – 最終的なアウトプットは1枚のcanvas – エディタを使ってcanvasの中身を構築していくイメージ • それ以外のことはやろうと思えばできるけど.. – HTML,CSSも書けるけど<body>や<style>に組み込むだけ – CDNからの外部ライブラリ利用とかはできません – 使いたかったら自分で用意してスクリプトとして入れる
  26. 26. PlayCanvasでゲームを作る • ゲーム開発になぞって紹介 – ゲームとして必要最低限な機能 – ゲームエンジンに必要な機能 – PlayCanvasだからできるすごい機能
  27. 27. ゲームとして必要最低限な機能 – レンダリング – エンティティシステム – コンポーネントシステム – メインループ
  28. 28. レンダリング • WebGL2.0 based renderer – フィジカルベースドレンダリング(PBR) – イメージベースドライティング(IBL) – WebGL2.0非対応環境では1.0にフォールバック可能
  29. 29. エンティティシステム • エンティティ – ゲームオブジェクトの単位 – インスタンシング – 検索 – デストロイ //エンティティ作成 var entity = new pc.Entity(); //インスタンシング var cloneEntity = entity.clone(); //クローン作成 cloneEntity.setName(‘clone1’); //名前を設定 //ヒエラルキーに追加 this.app.root.addChild(cloneEntity); //rootの子に追加 //オブジェクトの検索 var target = this.app.root.findByName(‘clone1’); //名前で検索 //オブジェクトの削除 target.destroy();
  30. 30. コンポーネントシステム • ビルトインコンポーネント – モデル – サウンド – アニメーション – カメラ – コリジョン – ライト – リジッドボディ – スクリプト – パーティクルシステム – Etc..
  31. 31. コンポーネントシステム • スクリプトからアクセスする場合 – 各コンポーネントはエンティティに紐づく //自分自身を取得 /* scriptコンポーネントでthisはスクリプト自体を返す。 * this.entityでアタッチされたエンティティを返す*/ var entity = this.entity(); //モデルコンポーネントへのアクセス var modelComponent = entity.model; //コンポーネント取得 modelComponent.type = ‘sphere’; //typeをsphereへ変更
  32. 32. メインループ • PlayCanvasのメインループは60FPS – requestAnimationFrame()によってループ • engine/src/framework/application.js 内で呼び出し – PlayCanvasのスクリプトコンポーネント内では initialize(),update(),swap()が予約済み //スクリプトコンポーネント作成 var Script = pc.createScript(‘script’); //実行時に一度だけ呼ばれる Script.prototype.initialize = function(){ }; //毎フレーム呼ばれる dt = デルタタイム Script.prototype.update = function(dt){ }; //ホットリローディング時に呼ばれる Script.prototype.swap = function(old){ };
  33. 33. ゲームエンジンに必要な機能 – モデル&ボーンアニメーション – インプットシステム – 3D オーディオ – フィジックス – レベルデザイン – シーン遷移
  34. 34. モデル&ボーンアニメーション • Obj,FBX対応 – 独自のjsonフォーマットにコンバート – ジオメトリ、アニメーションをそれぞれ分割
  35. 35. モデル&ボーンアニメーション
  36. 36. インプットシステム • キーボード、ゲームパッド – 値を返すメソッドが予約 – メインループの中で使える //in update method… //エンターキーが押されたとき if(this.app.keyboard.wasPressed(pc.KEY_ENTER)){ } //シフトキーが押されている間 if(this.app.keyboard.isPressed(pc.KEY_SHIFT)){ } //ゲームパッドオブジェクト作成 var gamepads = new pc.GamePads(); //ゲームパッドAPIからデータ取得 var pads = gamepads.poll(); //アナログスティックの値を取得 pads.getAxis(pc.PAD_1,pc.PAD_L_STICK_X); //ボタンの値を取得 pads.isPressed(pc.PAD_1,pc.PAD_FACE_1);
  37. 37. インプットシステム • マウス、タッチ – イベントハンドラを設定し コールバック関数内に記述 if(this.app.touch){//タッチデバイスかどうか //タッチデバイス向けのイベントハンドラ this.app.touch.on( pc.EVENT_TOUCHSTART, //イベント this._touchstart, //コールバック this //スコープ ); }else{ //非タッチデバイス向けのイベントハンドラ this.app.mouse.on( pc.EVENT_MOUSEDOWN, this._mousedown, this ); } Script.prototype._touchstart = function(ev){ //タッチした瞬間に呼ばれる console.log(ev);//タッチされた座標等が格納 }; Script.prototype._mousedown = function(ev){ //マウスが押された瞬間に呼ばれる console.log(ev);//マウスの座標やボタン等が格納 };
  38. 38. 3Dオーディオ • オーディオコンポーネント – サウンドデータを入れるだけで使える – Web Audio APIを通して実行 – 簡単な編集も
  39. 39. フィジックス • Bulletベースの物理エンジンを内包 – 3Dフィジックス – Bullet(C++)をemscriptenでJSにしたAmmo.jsを利用 – 昨年リファクタリングが完了し、ほぼすべてのAPIが 見えるように – Static/kinematic/dynamic – Rigidbodyとcollisionを アタッチするだけ!
  40. 40. フィジックス
  41. 41. レベルデザイン • スクリプトコンポーネントへのアトリビュート – エディタから変数へアクセスすることが可能 //スクリプトのアトリビュートに‘speed’を追加 Script.attributes.add(‘speed’,{type:‘number’}); //実行時に一度だけ呼ばれる Script.prototype.initialize = function(){ console.log(this.speed);//呼び出し };
  42. 42. レベルデザイン • attributesの種類 – “number” – “rgb”,”rgba” – “string” – “curve” – “boolean” – “vec2”,”vec3”,”vec4” • オプションの種類 – default – array – enum – min,max – placeholder
  43. 43. シーン遷移 • プロジェクト内に複数シーンを作成 – SPAのような作りにすることも可能
  44. 44. PlayCanvasだからできるすごい機能 – エレメントコンポーネント – リアルタイムコラボレーション – Swap – Compless – リソース管理 – WebVR/AR
  45. 45. エレメントコンポーネント • UIが作成できる – canvasに直接描画 ≠ DOM – ダイナミックフォントに対応(ttfのみ) – インプットイベントも簡単に実装
  46. 46. リアルタイムコラボレーション • コンフリクトなしで作業が即時同期 – プロジェクトメンバーにアサインするだけ – オブジェクトの編集やコード等
  47. 47. swap • ホットリロードができる – 実行中のインスタンスに対して動的にアップデート – 実行URLを開いているすべてのデバイスへ
  48. 48. swap
  49. 49. compless • ビルド時に複数のスクリプトを連結,難読化 – ビルド時のオプションで選択するだけ – __game-script.jsにまとめて吐き出し PlayCanvasアプリのファイル構成
  50. 50. リソース管理 • アセットレジストリ – チェックボックス一つでロードをストリーミングに – setTimeout()地獄に悩まされない
  51. 51. リソース管理 • アセットレジストリ – チェックボックス一つでロードをストリーミングに – setTimeout()地獄に悩まされない プリ ロード スト リーミ ング DOM操作 DOM操作 preload prel oad 描画開始 描画開始 2.84s 4.18s 2.89s 3.31s
  52. 52. WebVR/AR • VR – WebVR API経由でCardboard/HTC Vive/Rift等に対応 – Starter Kitを使えば数クリックでWebVR環境を構築 • AR – マーカーベースは対応済み – ARCore/ARKitへは順次対応予定
  53. 53. WebVR/AR
  54. 54. PlayCanvasでどんなものが作られた? 事例10連発
  55. 55. PlayCanvas x Facebookインスタントゲーム • Kaburin! Ball, Kaburin! Dodge by KLab – 事例記事 : KLabがFacebookインスタントゲームでゲームエン ジンにPlayCanvasを採用!ネイティブゲームとは異なる、さ くっと遊べるカジュアルゲームの魅力とは?
  56. 56. PlayCanvas x Yahoo!ゲーム かんたんゲームプラス • ジグザグペンギン by ボトルキューブ – 事例記事:PlayCanvasを採用し4タイトルのゲームアプ リを開発したボトルキューブの次なる一手は?
  57. 57. PlayCanvas x ポイントサイト • OwlsDozer by CMサイト – 事例記事:CMサイトが自社アドゲーム開発にPlayCanvasを 採用!CMサイトの考える次世代のアドゲームとは?
  58. 58. PlayCanvas x プロダクトビジュアライゼーション • BMW i8 by BMW – BMW i8 – 360度好きな角度から眺めたり 自由に色を変えたりできる
  59. 59. PlayCanvas x 建築 • Kitchen Visualizer by Toll Brothers. – 自分好みのキッチンを構築
  60. 60. PlayCanvas x リッチメディア広告 • TRANSFORMERS THE LAST KNIGHT – バンブルビーの質問に答えていくと踊ってくれる
  61. 61. PlayCanvas x リッチWebページ • eBay Retail Report Deutschland – www.ebay-report.de – ページ全体をPlayCanvasで構築した例
  62. 62. PlayCanvas x 2Dゲーム • Master Archer By PlayCanvas – エレメントコンポーネントで2Dゲームを構築
  63. 63. PlayCanvas x モデリングツール • VOXELCANVAS – VOXELCANVAS | HOME – ボクセルモデリングツール, objエクスポートにも対応
  64. 64. PlayCanvas x マルチプレイ • ソーシャルVR – ネットワークエンジン”Photon”と組み合わせた例
  65. 65. まとめ
  66. 66. PlayCanvasではじめよう • まずはアカウント作成! – メールアドレスがあれば無料で始められます! • HTML5ゲーム、怖くない! – HTML5ゲームでもビジュアルエディタを使った開発を! • 可能性は無限大! – ゲームからWebサイト プロダクトビジュアライゼーションまで!
  67. 67. 本講演を聞いて早速触ってみたくなった方! • ハンズオンやります – PlayCanvasもPhotonもWebVRも一緒に触れちゃうハンズオン – 【ハンズオン】ソーシャルVRアプリをつくろう! ~1時間で複数人参加型のWebVRアプリを開発~ – 2018/04/10 (火) 19:00 ~ 21:30 – 渋谷・セルリアンタワー – 定員 30名 – お申し込みは こちら
  68. 68. Contact • ヘルプセンター – https://support.playcanvas.jp/hc/ja • Twitter – https://twitter.com/playcanvasJP • お問い合わせ – mailto: info@playcanvas.jp
  69. 69. Thank you!

×