phaser ui comps

Phaser 3 UI 구성 요소, Adobe Animate가 제작했습니다

무엇입니까?

[abode animate] (https://www.adobe.com/ru/products/animate.html), JSON 및 BITMAPS로 내보내기 [jsfl script] (https://github.com/xense/phaser-ui-comps/blob/jsfl/exportttopaser. 코드의 숫자.

ComponentClip 제공된 JSON 및 ATLASES가있는 자체를 빌드하며 UIComponentPrototype 이를 제어하고 상태를 전환하고 클릭을 듣고 드래그 및 기타 이벤트를 제어하는 ​​데 도움이됩니다.

또한, UIComponentPrototype 및 Children Classes는 현재 상태 또는 전혀 실제 클립 인스턴스가 있으면 신경 쓰지 않으므로 예를 들어 애니메이션 문서의 창에서 일부 버튼 인스턴스를 제거하고 UIComponentPrototype 인스턴스를 유지하면 아무런 나쁜 일이 발생하지 않습니다.

모든 비트 맵은 애니메이션 문서 라이브러리와 동일한 폴더 구조를 가진 PNG 파일로 내보내집니다. TexturePacker 또는 원하는 다른 도구를 사용하여 Atlases에 포장하십시오.

어디서 어떻게 사용합니까?

메인 프레임 워크 리포

문서, 튜토리얼, 예제

라이브 예

문제, 버그, 새로운 구성 요소 아이디어

애니메이션 문서 예제

애니메이션 문서를 내보내십시오

animate에서 jsfl 스크립트를 실행하려면`명령> run command`를 선택하고 스크립트로 이동 한 다음 열기를 클릭하십시오.

설치 방법?

NPM에서 로컬로 최신 버전을 설치하고 package.json 파일에 저장하려면 :

npm install --save phaser-ui-comps

또는 원사를 사용하는 경우

yarn add phaser-ui-comps

또는 https://github.com/xense/phaser-ui-comps/tree/master/dist에서 Miniedifed 버전을 다운로드 할 수 있습니다

또는 JSDELIVR CDN 버전을 사용하십시오

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

메모! PhaserComps는 alterscore.js /dist 폴더에 두 가지 빌드가 있습니다. 하나는 밑줄이 포함되어 있고 다른 하나는 그것 없이는 다른 하나가 있으므로 PhaserComps를로드하기 전에로드해야합니다.

간단한 사용

 < 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 ) ;
}