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.

PlayCanvas:2D機能とライブラリ組み込みのいろは - PlayCanvas運営事務局 - GTMF 2018 TOKYO

774 views

Published on

PlayCanvasはリッチな3D向けのゲームエンジンだと思っていませんか?
実はモバイルWebブラウザで動く2DゲームもPlayCanvasで作ることができます!
本セッションではUIや2Dアニメーション、物理などPlayCanvas 2Dについてのノウハウを余すことなくお話します!

また後半にはPlayCanvasにサードパーティのライブラリを組み込む方法も伝授予定!「PlayCanvasと組み合わせてモバイルWebでなんかやりたい…」という方は必見です!

Published in: Technology
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS 1NTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

PlayCanvas:2D機能とライブラリ組み込みのいろは - PlayCanvas運営事務局 - GTMF 2018 TOKYO

  1. 1. The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games PlayCanvas運営事務局 津田 良太郎 宗形 修司
  2. 2. はじめに • 本プレゼンを聞いていただきたい主なターゲット – UnityやUE4を使ったゲーム開発経験がある – HTML5ゲームがなんだか今アツそうだと思っている – かつてFlashを使ってWeb2Dコンテンツを作っていた – 3Dゲームエンジンで2Dゲームを開発したことがある – Webで2Dゲームを動かしたい – PlayCanvasにサードパーティライブラリを組み込みたい • Yesが1つでもある人にオススメ!
  3. 3. 狙い • 本プレゼンで得られること – PlayCanvasで2Dゲームを作るノウハウ – PlayCanvasにサードパーティライブラリを組み込むノウハウ • 本プレゼンで話さないこと – PlayCanvas以外のHTML5ゲーム開発環境の話 – HTML5ゲームでご飯を食べる話
  4. 4. 登壇者の自己紹介 • 津田 良太郎 – 2016年よりPlayCanvas運営事務局 デベロッパー目線でPlayCanvasを広める ために活動中 utautattaro.com • 宗形 修司 – 2018年よりPlayCanvas運営事務局 デザイナー目線でPlayCanvasを広める ために活動中
  5. 5. 本日のアジェンダ • Webと2D • PlayCanvasとは • PlayCanvas 2D Feature • PlayCanvasにサードパーティライブラリを組み込む • PlayCanvasで2Dゲームを作る利点・欠点 • まとめ
  6. 6. Webと2D
  7. 7. Saying Goodbye to Flash • ブラウザベンダーはHTML5への移行を喚起 • Adobeは2020年までにFlashを提供終了と発表 • 新たなWebにおける2D表現は? – Canvas2D : HTML5の2D描画機能 – WebGL : ウェブ標準の3D,2Dレンダリングの標準規格
  8. 8. PlayCanvasとは
  9. 9. PlayCanvas • 3DWebGLゲームエンジン • クラウド上で開発、そのままデプロイ • 中身はオールJSの軽量なエンジン • 詳しくは – 過去講演:https://support.playcanvas.jp/hc/ja/sections/115003159628 – 利用事例:https://support.playcanvas.jp/hc/ja/sections/115001686867 https://www.indianmotorcycle.com/en-us/chieftain-elite-black-hills-silver/build/
  10. 10. PlayCanvasの得意な表現分野 • 3D多め – デフォルトのマテリアルは機能豊富 – シェーダーもGLSLで書ける • 主な利用事例 – ゲーム、非ゲームで半々 – 軽量さと表現力を活かした Webコンテンツ等
  11. 11. PlayCanvasで2D ?
  12. 12. PlayCanvasと2Dは相性が悪い? • 事例は多くはない – やはり3Dのフォトリアル表現なものが目立つ • PlayCanvasで2Dゲーム作るのは難しい? – 一昔前は難しかったが今は2D向け機能も • どんな風に作るの? – 3D空間にspriteを置いていく 2.5Dな開発スタイル • PlayCanvasで2Dゲームを作る利点は – PlayCanvasの開発システムをそのまま使える – 3Dリソースを使って2D表現も可能
  13. 13. PlayCanvas 2D Feature
  14. 14. PlayCanvas製2Dサンプルゲーム
  15. 15. Master Archer • 2Dシューティングミニゲーム • プレイヤー数71万人 • PlayCanvas製 • Facebookインスタントゲームで公開中
  16. 16. • 多くの2D要素が存在 – Static UI – Dynamic UI – UI Animation – Text – 2D physics – Particle – Sprite Animation – 9slice texture – Character animation PlayCanvasの 機能で対応 新機能で対応! ミドルウェアで対応 Master Archerの2D要素
  17. 17. そもそもPlayCanvasでの2Dアセットの取り扱い① • 画像データの話 • JPG/PNG/GIF/TGA/BMP/TIF/HDR/EXRが読み込み可能 – インポートされたJPGとPNGファイルは元の形式のまま保たれます。 • 画像は.pngに自動変換 • カラーブレンディング/透過調整(opacity)可能 • 単一画像データ(背景やUI素材)はフリーサイズでOK • キャラクター等のスプライトシートは2のべき乗で!
  18. 18. そもそもPlayCanvasでの2Dアセットの取り扱い② • テクスチャ圧縮の話 – PlayCanvasでは3つのテクスチャ圧縮形式に対応 • DXT: 全てのデスクトップデバイス及び一部のAndroidデバイス • PVR: 全てのiOSデバイス及び一部のAndroidデバイス • ETC: 大部分のAndroidデバイス • 1024×1024/483kbのテクスチャを圧縮 • DXT: 190kb • PVR: 304kb • ETC: 199kb チェックボックス入れるだけでOK!
  19. 19. そもそもPlayCanvasでの2Dアセットの取り扱い③ • 2Dオブジェクトアニメーションの概念 PlayCanvas上でのアニメーション編集は不可 • キャラクターアニメーションの場合 2Dアニメーション編集ソフトで制作されたjson/atlas/テクスチャを インポートして使用 • 連番アニメーションの場合 整列したスプライトシートを読み込み、PlayCanvas側で スクリプトでアニメーションを再生
  20. 20. そもそもPlayCanvasでの2Dアセットの取り扱い④ • Layer system 表示する(レンダリングする)種類と順番をコントロール • UI UIとして前面に表示 HIERARCHYの順番で表示さ れる • World オブジェクトとしてz軸の 距離で表示順が変わる
  21. 21. 余談ですがPlayCanvasでの3Dの概念 • 3Dに共通のボーンとオブジェクトの概念 – 3Dアニメーションの場合、オブジェクトとボーン、 アニメーションキーを含むFBXをPlayCanvasの ASSETS欄の任意のフォルダにドラック&ドロップ でOK! インポートしたFBXはJSONに自動変換されるので、 最終的には不要です。
  22. 22. Static UI • スクリーンコンポーネントとエレメントコンポーネント – キャンバス:スクリーンC – 部品:エレメントC • ボタンとして扱うことが可能 – Use Inputにチェック Script.prototype.initialize = function() { //クリックしたときのイベントハンドラを追加 this.entity.element.on("mousedown",this.click,this); }; Script.prototype.click = function(ob){ console.log(ob); //タッチした座標のオブジェクト };
  23. 23. Layout Group • レイアウト機能 – 水平・垂直など https://developer.playcanvas.com/en/user-manual/user-interface/layout-groups/
  24. 24. スクリーンは2種類 • 2Dスクリーンと3Dスクリーン – 3Dスクリーンはワールド座標を持つ エディター アウトプット
  25. 25. 3Dスクリーンのワールド座標 • element.onで取得できるのはキャンバス座標 – 3Dスクリーン内のUIエレメントのタッチ座標を取得したい場合 はcameraコンポーネント内のScreentoWorld()を使う https://developer.playcanvas.com/ja/tutorials/entity-picking-without-physics/ Script.prototype.click = function(ob){ //カメラエンティティを取得 var cameraObj = this.app.root.findByName("Camera"); //レンダリングしている最も近い距離のワールド座標 var start = cameraObj.camera.screenToWorld(ob.x, ob.y, cameraObj.camera.nearClip); //レンダリングしている最も遠い距離のワールド座標 var end = cameraObj.camera.screenToWorld(ob.x, ob.y, cameraObj.camera.farClip); //...startからendまでrayを飛ばして座標を取得 };
  26. 26. Dynamic UI • これもエレメントコンポーネントでカバー • つけたいアニメーションに応じてスクリプトを記述 https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/
  27. 27. UI animation • 時と場合によっては板ポリでやるのも手 – 内容が変わらない/変わっても数パターンの時はおススメ • 利点 – ワールド座標で扱える – パーティクルで制御可能
  28. 28. Text Elements • Elementコンポーネントでダイナミックフォントをサポート – TrueTypeフォントが利用可能 • Canvasに直接描画 ≠DOM
  29. 29. どうやってWebGLにフォントをレンダリングしているか • プリプロセスにフォントリソースデータを生成 – ttfからjsonとpngを生成 – ダイナミックフォントに見えてじつはビットマップフォント • 使用する文字を定義した分の文字がレンダリングされたpngを生成 – jsonには使用する文字とpngのパスが格納 プリプロセッサ
  30. 30. フォントを使う上での注意点 • 含める文字は使う分だけ! – 常用漢字2136字とかも入るがデータが重くなる pngデータの一部 1922文字(31 * 62) を超えると次のpngへ 一枚およそ8MB
  31. 31. 2D physics • デフォルトの物理エンジンが利用可能 • 2Dスクリーンは使わない! – エレメントコンポーネントと物理エンジンの座標系が違う エディター レンダリング https://qiita.com/Humimaro/items/0efe67618d7e8eddff85 指定した コライダー 衝突で静止する エンティティ 実際のコライダー (一部)
  32. 32. 2D physics • 3Dスクリーンを使ってカメラをOrthographicに – 座標系がそろう – canvasサイズをfixにして 以後World座標で管理していくのがおすすめ
  33. 33. SpriteAnimation, 9slice texture • 独自のスクリプトで対応 – https://developer.playcanvas.com/en/tutorials/animated-textures/ – https://forum.playcanvas.com/t/9-slice-sprite-for-you/708 – アタッチしただけですぐ使えるような形で公開中 – プロジェクトごと公開しているのですぐ使える
  34. 34. Sprite Animation, 9slice Texture • 新機能Sprite Editorでサポート! – 今まではスクリプト実装が必要だったがデフォルトコンポーネ ントで対応 – スクリプト不要で手軽に実装できるように Sprite animation 9slice texture
  35. 35. Sprite Editorの起動 • Sprite Edtior Pngを右クリックで出る Create Texture Atlasを選択。 新たに生成された左上にマークが あるpngをダブルクリックで Sprite編集エディターが開きます。
  36. 36. Sprite Editorの起動
  37. 37. 2D animation • Sprite Edtior ・Textureatlasアセット 元画像をAtlas化したpng ・Spriteアセット SpriteEditorで編集した データ。シーンに配置 するのはこっち
  38. 38. 2D animation • FRAME IN TEXTURE ATLAS(アニメーション) 矩形で各画像を囲んでいくとFrameが生成されていく NEW SLICE SPRITE FROM SELECTIONを押すと 1枚にまとめられたSprite データが生成される
  39. 39. 9slice texture
  40. 40. 2D animation • Render Mode(Simple/Sliced/Tiled) 通常の表示 • Simple
  41. 41. 2D animation • Render Mode(Simple/Sliced/Tiled) 青と緑の枠内の画 角比率を維持。 青枠内部の比率の みが変化します。 • Sliced
  42. 42. 2D animation • Render Mode(Simple/Sliced/Tiled) タイリングします。 • Tiled
  43. 43. 9slice textureをスケーリングするときの注意点 • Sizeのコントロール 作業スペース内に配置したオブジェクト、または HIERARCHYにある該当オブジェクト を選択時に出るSize欄で縦横比を指定します。 Scaleでの調整はSpriteの効果が出ません。
  44. 44. Pixels per unit
  45. 45. Pixels per unit • Pixels Per Unit SpriteのPixel比率をコ ントロールします。 Pixel Per Unit 500 Pixel Per Unit 100 Pixel Per Unit 1
  46. 46. Sprite Editor 遷移図 • Sprite Edtiorの話 Source PNG/JPEG/GI F… Texture Asset Textureatlas Asset f Animated Sprite Asset Sprite Asset Render mode Simple Sliced Tiled Spriteコンポーネント Type : Simple Entity Sprite Spriteコンポーネント Type : Animated Entity Clip Sprite Editor インポート Create Texture Atlas
  47. 47. perticle • Shurikenっぽいやつ搭載 – GPUパーティクル – パラメーターがそこそこある
  48. 48. Character animation • Spineプラグイン – Spineの2Dアニメーションが利用可能
  49. 49. Spineプラグイン利用方法 • PlayCanvasのリポジトリで公開中 – https://github.com/playcanvas/playcanvas-spine – ただ上記はバージョンが古い&フルパッケージなのでお勧めしない • 公式サンプルプロジェクト – https://playcanvas.com/project/549812/overview/spine-plugin – 最新版はこちらからforkするのが無難 – ビルドされたライブラリはplaycanvas-spine.js – インタフェースはspine.js
  50. 50. Spine側の準備 • エクスポートの話 – JSONが選択されている状態でエクスポートボタンを押すだけ! デフォルトの設定で問題あり ませんが、ページのサイズは 2のべき乗で! これだけでPlayCanvasに読み込める アニメーション込みデータ一式が出力 されます!
  51. 51. PlayCanvas側 • Spine.jsにアタッチしていこう ASSETSへ ドラック&ドロップ 各スロットルへ ドラック&ドロップ ENTITY ↓ +ADD SCRIPT ↓ Spineを選択 (atlas /Json/テクスチャ指定) Anzuを選択 (キャラクターコントローラー)
  52. 52. PlayCanvas側 • 気を付けよう! Spineから書き出されたPNGデータは PlayCanvasにインポートしただけだと alphaが反映されません。 COMPRESSIONのAlphaにチェックを入れ、 Compressをクリックしてください。 これで正しく透過情報が反映されます。
  53. 53. アニメーションの再生、スキンの差し替え Script.prototype.initialize = function() { //アニメーションを"walk"に設定 this.entity.spine.state.setAnimationByName(0, "walk", true); //スキンを"Red"に設定 this.entity.spine.spine.skeleton.setSkinByName("Red"); }; Script.prototype.update = function(dt) { if(this.app.keyboard.wasPressed(pc.KEY_SPACE){ //スキンを"Blue"に設定 this.entity.spine.spine.skeleton.setSkinByName("Blue"); } if(this.app.keyboard.wasPressed(pc.KEY_ENTER) && this.entity.spine.state.tracks["0"].animation.name == "walk"){ //"attack"アニメーションを実行 this.entity.spine.state.setAnimationByName(0, "attack", false); this.entity.spine.state.onComplete = function (track, count) { if (this.tracks[0].animation.name === "attack") { //"attack"アニメーションが終了したら"walk"に戻す this.setAnimationByName(track, "walk", true); } }; } } アニメーションを設定 インデックス アニメーション ループ スキンを名前で指定 アニメーションが終了したとき のコールバック
  54. 54. ジョイントの座標取得 • メソッドにはないので独自で実装 – Node内にあるworldX,worldYを利用して算出可能 • ワンライナーでいける • ノードの座標 = (エンティティの原点 + node座標 ) * スケール Script.prototype.update = function(dt){ for(let i in this.entity.spine.skeleton.bones){ //各ジョイントにboxを配置する boxes[i].setPosition(this.getNodePosition(this.entity.spine.skeleton.bones[i])); } } Script.prototype.getNodePosition = function(node){ return this.entity.getPosition().clone().add(new pc.Vec3(node.worldX,node.worldY,0).mul(this.entity.getLocalScale())); };
  55. 55. Spineオブジェクト操作の注意点 • PlayCanvasで取得できる座標はジョイント – 末端のポイントは取得できない • 対応していない機能が多々ある • そんな時はエラーが出る
  56. 56. サードパーティライブラリ組み込み
  57. 57. そのライブラリがどこで動くのか考える ①PlayCanvasと並列 ②PlayCanvasのパイプライン内 Data Persistence UI Backend Rendering engine Browser engine User Interface Networking JavaScript Interpreter PlayCanvas① ② https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
  58. 58. ①PlayCanvasと並列のレイヤー • PlayCanvasのレンダリングパイプラインに組み込まないようなもの – WebGL描画に関係のないもの • ネットワークエンジン(Photon等) • サウンドミドルウェア • jQuery • CSSフレームワークなどなど • JSライブラリをPlayCanvasにアップロードするだけで使える – アップロードするだけで呼び出される – Import, require()とかは不要 • CDNからの呼び出しはできない
  59. 59. Photonの例 • ライブラリと一緒にインタフェース用のスクリプトをつけると親切 – Photon for PlayCanvasの例 • シングルトンパターン – app.js • PlayCanvasスクリプトコンポーネント Photonへ渡したい要素をattributesで表出 demoloadbalancing.jsのインスタンスをメンバに格納 Photonを叩く場合はapp.jsがアタッチされた エンティティから叩く – demoloadbalancing.js • 普通のJavaScriptファイル 主に使う機能を抜粋、抽象化して記述 PhotonのJSSDKを叩く – Photon-Javascript-SDK.min.js • PhotonのJSライブラリ実体 https://utautattaro.github.io/Photon-for-PlayCanvas/ Photon-Javascript- SDK.min.js demoloadbalancing.js app.js その他の PCスクリプト 使用に必要な情報 AppID, region等 Entity
  60. 60. 呼び出し順に注意 • Script Loading Orderより呼び出し順を変更する – 上から順に呼び出される – ライブラリを叩くスクリプトより前に ライブラリ本体を読み込むように
  61. 61. ②PlayCanvasのパイプラインに組み込む • PlayCanvasのレンダリングパイプラインに組み込むべきもの – Spine等のビジュアルが絡むもの • PlayCanvasは1枚のCanvasを最終的に吐き出す – Canvasを吐き出すような別のツールと組み合わせる場合は PlayCanvas向けにライブラリを作成する必要がある • ライブラリそのものはアップロードすれば動作する
  62. 62. Spineの例 PlayCanvas engine Playcanvas-spine-min.js spine.js Atlas, skeleton,texture Entity spine.js Atlas, skeleton,textrue Entity https://github.com/playcanvas/playcanvas-spine var Spine = pc.createScript("spine"); Spine.attributes.add("atlas", {type: "asset", assetType: "text"}); Spine.attributes.add("skeleton", {type: "asset", assetType: "json"}); Spine.attributes.add("textures", {type: "asset", array: true, assetType: "texture"}); Spine.attributes.add("priority", {type: "number", default: 1}); Spine.prototype.initialize = function () { if (this.atlas && this.textures && this.skeleton) { // If all assets are present, add the spine component to the entity this.entity.addComponent("spine", { atlasAsset: this.atlas.id, textureAssets: this.textures.map(function (a) {return a.id;}), skeletonAsset: this.skeleton.id }); } } spine.js pc.extend(pc, function () { var Spine = function (app, atlasData, skeletonData, textureData) { this._app = app; this._position = new pc.Vec3(); ... } } PlayCanvas-spine.js PlayCanvasのオブジェクトに Spineコンポーネントを追加 addComponentでスクリプトコンポー ネントから呼び出せるように attributesに必要となるアセット を定義
  63. 63. PlayCanvasで2Dゲームを作る利点・欠点
  64. 64. 欠点 • Canvas2Dに比べるとtoo rich – 対応プラットフォームは狭まる – パフォーマンスの問題 • キャンバス座標とワールド座標を考慮する必要がある – キャンバス座標のみ考慮した設計は難しい – 考慮する要素が増えるため、実装は複雑化する
  65. 65. 利点 • 3Dの機能を活かした2D表現が可能 – 3D空間をOrthographicなカメラで2.5D的表現 – GLSLによるトゥーンシェーダーなども実装可能 • PlayCanvasの機能や資源がフルに使える – リアルタイムコラボレーション – アセットレジストリ – バージョン管理システム(今後リリース予定) – 豊富なオープンソースライブラリ等々
  66. 66. まとめ • PlayCanvasの2D機能は増えてきています! • PlayCanvasに搭載されていなくてもスクリプト対応で解決できる • 外部ライブラリは簡単に使えます! • 3Dゲームエンジンでの2Dゲーム作成に慣れているのであれば HTML5ゲーム開発環境としてPlayCanvasを選択するのが吉!
  67. 67. Thank you ! The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games

×