phaser ui comps

Adobe Animateによって構築されたPhaser 3 UIコンポーネント

それは何ですか？

[Abode Animate]（https://www.adobe.com/ru/products/animate.html）でUIを構築し、jsflスクリプトとjsflスクリプトでjsonとbitmapsにエクスポートしてください[https://github.com/xense/phaser-ui-comps/blob/master/jsfl/exporttophaser.コードにマジック番号を配置します。

ComponentClip 、提供されたJSONとATLASESで構築され、 UIComponentPrototypeはそれらを制御し、状態を切り替え、Click、ドラッグなどのイベントを聴くのに役立ちます。

さらに、 UIComponentPrototypeとITの子供のクラスは気にしないでください。現在の状態またはまったく実際のクリップインスタンスがある場合、たとえば、アニメートドキュメントのウィンドウでボタンインスタンスを削除してUIComponentPrototypeインスタンスを削除すると、悪いことはありません。

すべてのビットマップは、Animateドキュメントライブラリと同じフォルダー構造を持つPNGファイルにエクスポートされます。テクスチャパッカーまたは好きな他のツールを使用して、それらをアトラーゼに詰めてください。

どこでどのように使用しますか？

メインフレームワークリポジトリ

ドキュメント、チュートリアル、例

ライブの例

問題、バグ、新しいコンポーネントのアイデア

ドキュメントのアニメーション例

Animateドキュメントをエクスポートします

AnimateでJSFLスクリプトを実行するには、[コマンド]> [コマンドを実行]を選択し、スクリプトに移動し、[開く]をクリックします。

インストール方法は？

npmからローカルに最新バージョンをインストールし、 package.jsonファイルに保存するには：

npm install --save phaser-ui-comps

または、糸を使用している場合

yarn add phaser-ui-comps

または、https://github.com/xense/phaser-ui-comps/tree/master/distからminifiedバージョンをダウンロードできます

または、JSDELIVR CDNバージョンを使用します

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-ui-comps-with-underscore.min.js " > </ script >

注記！ PhaserCompsを使用しますanderscore.js /distフォルダーには2つのビルドがあります。

簡単な使用

 < script src =" path/to/scripts/phaser.js " > </ script >
< script src =" path/to/scripts/phaser-ui-comps-with-underscore.min.js " > </ script > 

 const COMPONENT_CONFIG = "comp-config" ;
const TEXTURE_CONFIG = "my_texture" ;


var game = new Phaser . Game ( {
    type : Phaser . AUTO ,
    parent : "phaser-example" ,
    width : 800 ,
    height : 600 ,
    scene : {
        preload : preload ,
        create : create
    }
} ) ;


function preload ( ) {
    this . load . json ( COMPONENT_CONFIG , "assets/my_component.json" ) ;
    this . load . multiatlas ( TEXTURE_CONFIG , "assets/atlases/my_atlas.json" , "assets/atlases/" ) ;
}

function create ( ) {
    let clip = new PhaserComps . ComponentClip (
        this , 
        this . cache . json . get ( COMPONENT_CONFIG ) , 
        [ TEXTURE_CONFIG ]
    ) ;
    
    let component = new PhaserComps . UIComponents . UIComponentPrototype ( ) ;
    component . appendClip ( clip ) ;
}