PlayCanvas:2D機能とライブラリ組み込みのいろは - PlayCanvas運営事務局 - GTMF 2018 OSAKA
•
0 gefällt mir•1,483 views
PlayCanvasはリッチな3D向けのゲームエンジンだと思っていませんか？ 実はモバイルWebブラウザで動く2DゲームもPlayCanvasで作ることができます！ 本セッションではUIや2Dアニメーション、物理などPlayCanvas 2Dについてのノウハウを余すことなくお話します！ また後半にはPlayCanvasにサードパーティのライブラリを組み込む方法も伝授予定！「PlayCanvasと組み合わせてモバイルWebでなんかやりたい…」という方は必見です！
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie PlayCanvas:2D機能とライブラリ組み込みのいろは - PlayCanvas運営事務局 - GTMF 2018 OSAKA
Ähnlich wie PlayCanvas:2D機能とライブラリ組み込みのいろは - PlayCanvas運営事務局 - GTMF 2018 OSAKA (20)
Mehr von Game Tools & Middleware Forum
Mehr von Game Tools & Middleware Forum (20)
PlayCanvas:2D機能とライブラリ組み込みのいろは - PlayCanvas運営事務局 - GTMF 2018 OSAKA
- 1. The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games PlayCanvas運営事務局 津田 良太郎 宗形 修司
- 2. はじめに • 本プレゼンを聞いていただきたい主なターゲット – UnityやUE4を使ったゲーム開発経験がある – HTML5ゲームがなんだか今アツそうだと思っている – かつてFlashを使ってWeb2Dコンテンツを作っていた – 3Dゲームエンジンで2Dゲームを開発したことがある – Webで2Dゲームを動かしたい – PlayCanvasにサードパーティライブラリを組み込みたい • Yesが1つでもある人にオススメ！
- 3. 狙い • 本プレゼンで得られること – PlayCanvasで2Dゲームを作るノウハウ – PlayCanvasにサードパーティライブラリを組み込むノウハウ • 本プレゼンで話さないこと – PlayCanvas以外のHTML5ゲーム開発環境の話 – HTML5ゲームでご飯を食べる話
- 4. 登壇者の自己紹介 • 津田 良太郎 – 2016年よりPlayCanvas運営事務局 デベロッパー目線でPlayCanvasを広める ために活動中 utautattaro.com • 宗形 修司 – 2018年よりPlayCanvas運営事務局 デザイナー目線でPlayCanvasを広める ために活動中
- 5. 本日のアジェンダ • Webと2D • PlayCanvasとは • PlayCanvas 2D Feature • PlayCanvasにサードパーティライブラリを組み込む • PlayCanvasで2Dゲームを作る利点・欠点 • まとめ
- 6. Webと2D
- 8. Saying Goodbye to Flash • ブラウザベンダーはHTML5への移行を喚起 • Adobeは2020年までにFlashを提供終了と発表 • 新たなWebにおける2D表現は？ – Canvas2D : HTML5の2D描画機能 – WebGL : ウェブ標準の3D,2Dレンダリングの標準規格
- 9. PlayCanvasとは
- 10. 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/
- 11. PlayCanvasの得意な表現分野 • 3D多め – デフォルトのマテリアルは機能豊富 – シェーダーもGLSLで書ける • 主な利用事例 – ゲーム、非ゲームで半々 – 軽量さと表現力を活かした Webコンテンツ等
- 12. PlayCanvasで2D ?
- 13. PlayCanvasと2Dは相性が悪い？ • 事例は多くはない – やはり3Dのフォトリアル表現なものが目立つ • PlayCanvasで2Dゲーム作るのは難しい？ – 一昔前は難しかったが今は2D向け機能も • どんな風に作るの？ – 3D空間にspriteを置いていく 2.5Dな開発スタイル • PlayCanvasで2Dゲームを作る利点は – PlayCanvasの開発システムをそのまま使える – 3Dリソースを使って2D表現も可能
- 16. Master Archer • 2Dシューティングミニゲーム • プレイヤー数71万人 • PlayCanvas製 • Facebookインスタントゲームで公開中
- 17. • 多くの2D要素が存在 – Static UI – Dynamic UI – UI Animation – Text – 2D physics – Particle – Sprite Animation – 9slice texture – Character animation PlayCanvasの 機能で対応 新機能で対応！ ミドルウェアで対応 Master Archerの2D要素
- 18. そもそもPlayCanvasでの2Dアセットの取り扱い① • 画像データの話 • JPG/PNG/GIF/TGA/BMP/TIF/HDR/EXRが読み込み可能 – インポートされたJPGとPNGファイルは元の形式のまま保たれます。 • 画像は.pngに自動変換 • カラーブレンディング/透過調整(opacity)可能 • 単一画像データ(背景やUI素材)はフリーサイズでOK • キャラクター等のスプライトシートは2のべき乗で！
- 19. そもそもPlayCanvasでの2Dアセットの取り扱い② • テクスチャ圧縮の話 – PlayCanvasでは3つのテクスチャ圧縮形式に対応 • DXT: 全てのデスクトップデバイス及び一部のAndroidデバイス • PVR: 全てのiOSデバイス及び一部のAndroidデバイス • ETC: 大部分のAndroidデバイス • 1024×1024/483kbのテクスチャを圧縮 • DXT: 190kb • PVR: 304kb • ETC: 199kb チェックボックス入れるだけでOK!
- 20. そもそもPlayCanvasでの2Dアセットの取り扱い③ • 2Dオブジェクトアニメーションの概念 PlayCanvas上でのアニメーション編集は不可 • キャラクターアニメーションの場合 2Dアニメーション編集ソフトで制作されたjson/atlas/テクスチャを インポートして使用 • 連番アニメーションの場合 整列したスプライトシートを読み込み、PlayCanvas側で スクリプトでアニメーションを再生
- 21. そもそもPlayCanvasでの2Dアセットの取り扱い④ • Layer system 表示する(レンダリングする)種類と順番をコントロール • UI UIとして前面に表示 HIERARCHYの順番で表示さ れる • World オブジェクトとしてｚ軸の 距離で表示順が変わる
- 23. 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); //タッチした座標のオブジェクト };
- 24. Layout Group • レイアウト機能 – 水平・垂直など https://developer.playcanvas.com/en/user-manual/user-interface/layout-groups/
- 26. 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を飛ばして座標を取得 };
- 27. Dynamic UI • これもエレメントコンポーネントでカバー • つけたいアニメーションに応じてスクリプトを記述 https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/
- 28. UI animation • 時と場合によっては板ポリでやるのも手 – 内容が変わらない/変わっても数パターンの時はおススメ • 利点 – ワールド座標で扱える – パーティクルで制御可能
- 29. Text Elements • Elementコンポーネントでダイナミックフォントをサポート – TrueTypeフォントが利用可能 • Canvasに直接描画 ≠DOM
- 30. どうやってWebGLにフォントをレンダリングしているか • プリプロセスにフォントリソースデータを生成 – ttfからjsonとpngを生成 – ダイナミックフォントに見えてじつはビットマップフォント • 使用する文字を定義した分の文字がレンダリングされたpngを生成 – jsonには使用する文字とpngのパスが格納 プリプロセッサ
- 31. フォントを使う上での注意点 • 含める文字は使う分だけ！ – 常用漢字2136字とかも入るがデータが重くなる pngデータの一部 1922文字(31 * 62) を超えると次のpngへ 一枚およそ8MB
- 32. 2D physics • デフォルトの物理エンジンが利用可能 • 2Dスクリーンは使わない！ – エレメントコンポーネントと物理エンジンの座標系が違う エディター レンダリング https://qiita.com/Humimaro/items/0efe67618d7e8eddff85 指定した コライダー 衝突で静止する エンティティ 実際のコライダー (一部)
- 33. 2D physics • 3Dスクリーンを使ってカメラをOrthographicに – 座標系がそろう – canvasサイズをfixにして 以後World座標で管理していくのがおすすめ
- 34. SpriteAnimation, 9slice texture • 独自のスクリプトで対応 – https://developer.playcanvas.com/en/tutorials/animated-textures/ – https://forum.playcanvas.com/t/9-slice-sprite-for-you/708 – アタッチしただけですぐ使えるような形で公開中 – プロジェクトごと公開しているのですぐ使える
- 35. Sprite Animation, 9slice Texture • 新機能Sprite Editorでサポート！ – 今まではスクリプト実装が必要だったがデフォルトコンポーネ ントで対応 – スクリプト不要で手軽に実装できるように Sprite animation 9slice texture
- 36. Sprite Editorの起動 • Sprite Edtior Pngを右クリックで出る Create Texture Atlasを選択。 新たに生成された左上にマークが あるpngをダブルクリックで Sprite編集エディターが開きます。
- 37. Sprite Editorの起動
- 38. 2D animation • Sprite Edtior ・Textureatlasアセット 元画像をAtlas化したpng ・Spriteアセット SpriteEditorで編集した データ。シーンに配置 するのはこっち
- 39. 2D animation • FRAME IN TEXTURE ATLAS(アニメーション) 矩形で各画像を囲んでいくとFrameが生成されていく NEW SLICE SPRITE FROM SELECTIONを押すと 1枚にまとめられたSprite データが生成される
- 40. 9slice texture
- 41. 2D animation • Render Mode(Simple/Sliced/Tiled) 通常の表示 • Simple
- 42. 2D animation • Render Mode(Simple/Sliced/Tiled) 青と緑の枠内の画 角比率を維持。 青枠内部の比率の みが変化します。 • Sliced
- 43. 2D animation • Render Mode(Simple/Sliced/Tiled) タイリングします。 • Tiled
- 45. Pixels per unit
- 46. Pixels per unit • Pixels Per Unit SpriteのPixel比率をコ ントロールします。 Pixel Per Unit 500 Pixel Per Unit 100 Pixel Per Unit 1
- 47. 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
- 48. perticle • Shurikenっぽいやつ搭載 – GPUパーティクル – パラメーターがそこそこある
- 49. Character animation • Spineプラグイン – Spineの2Dアニメーションが利用可能
- 50. Spineプラグイン利用方法 • PlayCanvasのリポジトリで公開中 – https://github.com/playcanvas/playcanvas-spine – ただ上記はバージョンが古い＆フルパッケージなのでお勧めしない • 公式サンプルプロジェクト – https://playcanvas.com/project/549812/overview/spine-plugin – 最新版はこちらからforkするのが無難 – ビルドされたライブラリはplaycanvas-spine.js – インタフェースはspine.js
- 52. PlayCanvas側 • Spine.jsにアタッチしていこう ASSETSへ ドラック＆ドロップ 各スロットルへ ドラック＆ドロップ ENTITY ↓ ＋ADD SCRIPT ↓ Spineを選択 (atlas /Json/テクスチャ指定) Anzuを選択 (キャラクターコントローラー)
- 54. アニメーションの再生、スキンの差し替え 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); } }; } } アニメーションを設定 インデックス アニメーション ループ スキンを名前で指定 アニメーションが終了したとき のコールバック
- 55. ジョイントの座標取得 • メソッドにはないので独自で実装 – 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())); };
- 56. Spineオブジェクト操作の注意点 • PlayCanvasで取得できる座標はジョイント – 末端のポイントは取得できない • 対応していない機能が多々ある • そんな時はエラーが出る
- 57. サードパーティライブラリ組み込み
- 58. そのライブラリがどこで動くのか考える ①PlayCanvasと並列 ②PlayCanvasのパイプライン内 Data Persistence UI Backend Rendering engine Browser engine User Interface Networking JavaScript Interpreter PlayCanvas① ② https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
- 59. ①PlayCanvasと並列のレイヤー • PlayCanvasのレンダリングパイプラインに組み込まないようなもの – WebGL描画に関係のないもの • ネットワークエンジン（Photon等） • サウンドミドルウェア • jQuery • CSSフレームワークなどなど • JSライブラリをPlayCanvasにアップロードするだけで使える – アップロードするだけで呼び出される – Import, require()とかは不要 • CDNからの呼び出しはできない
- 60. 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
- 61. 呼び出し順に注意 • Script Loading Orderより呼び出し順を変更する – 上から順に呼び出される – ライブラリを叩くスクリプトより前に ライブラリ本体を読み込むように
- 62. ②PlayCanvasのパイプラインに組み込む • PlayCanvasのレンダリングパイプラインに組み込むべきもの – Spine等のビジュアルが絡むもの • PlayCanvasは1枚のCanvasを最終的に吐き出す – Canvasを吐き出すような別のツールと組み合わせる場合は PlayCanvas向けにライブラリを作成する必要がある • ライブラリそのものはアップロードすれば動作する
- 63. 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に必要となるアセット を定義
- 65. 欠点 • Canvas2Dに比べるとtoo rich – 対応プラットフォームは狭まる – パフォーマンスの問題 • キャンバス座標とワールド座標を考慮する必要がある – キャンバス座標のみ考慮した設計は難しい – 考慮する要素が増えるため、実装は複雑化する
- 66. 利点 • 3Dの機能を活かした2D表現が可能 – 3D空間をOrthographicなカメラで2.5D的表現 – GLSLによるトゥーンシェーダーなども実装可能 • PlayCanvasの機能や資源がフルに使える – リアルタイムコラボレーション – アセットレジストリ – バージョン管理システム(今後リリース予定) – 豊富なオープンソースライブラリ等々
- 67. まとめ • PlayCanvasの2D機能は増えてきています！ • PlayCanvasに搭載されていなくてもスクリプト対応で解決できる • 外部ライブラリは簡単に使えます！ • 3Dゲームエンジンでの2Dゲーム作成に慣れているのであれば HTML5ゲーム開発環境としてPlayCanvasを選択するのが吉！
- 68. Thank you ! The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games