0
클릭 가능한 스프라이트가 포함 된 간단한 게임 메뉴를 만들려고합니다. 메뉴를 탐색하는 데 버튼으로 사용됩니다.스프라이트가 작동하도록 상호 작용을 할 수 없습니다.
내 응용 프로그램의
구조 (I 최신 pixi.js에게 (v4.3.5) 사용하고 있습니다) :
- loader.module합니다 (pixi.loaders를 사용합니다 .Loader)
- events.module (기본 서브 이벤트/퍼브 모듈)
- base.view
- menu.view는 (확장 base.vi EW)
- game.main
는 모든 지금 작동하는 방법?
보기를 초기화하기 전에 모든 리소스와 UI 요소를 명시 적으로 정의해야합니다.
menu.view에서 다음 속성을 정의해야합니다.
this.resources = [
{ name: 'start', src: 'img/start.png'},
{ name: 'start2', src: 'img/start2.png'}
];
this.ui = [{
name: 'start', /// resource name
type: 'img',
pos: { x: 0, y: 0 }
}];
view.init()를 호출해야합니다. 시각적 측면에서 evrything은 완벽하게 작동하지만 '시작'스프라이트 (
interactive 및
buttonMode은
true로 설정 됨)는 모든 마우스 이벤트에 반응하지 않습니다.
아래의 메서드는 필요한 리소스를 가져오고 새 스프라이트를 반환합니다. 또한이 프로세스의 일부로 실제 상호 작용 기능을 사용할 수 있습니다. 그러나 어떤 이유로 든 테스트 기능이 실행되지 않습니다.
__getSpriteObject(element){
let sprite = new PIXI.Sprite(this.loader.loader.resources[ element.name ].texture);
sprite.x = element.pos.x;
sprite.y = element.pos.y;
sprite.interactive = true;
sprite.buttonMode = true;
console.log(sprite)
sprite.on('pointerdown', function(){
console.log("what")
})
return sprite;
}
위 정보가 충분하지 않은 경우 여기 example도 있습니다.