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

459 views

Published on

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

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

Published in: Technology
  • Be the first to comment

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

×