Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 69 Ad

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

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

【第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!

×