2016-11-15 1 views
1

스프라이트 시트 빌더를 사용하여 일반 MovieClip에서 SpriteSheet 유형의 객체를 생성하고 있습니다. 그 후, 나는이 같은 SpriteStage에 추가 일정을 포함, 객체의 스프라이트 유형을 만들 수 SpriteSheet를 사용SpriteStage에서 SpriteSheet를 사용하여 렌더링 한 애니메이션이 제대로 표시되지 않습니다.

var spriteStage = new createjs.SpriteStage(canvas); 
var sprite = new createjs.Sprite(spriteSheet); 
spriteStage.addChild(sprite); 
sprite.play(); 
createjs.Ticker.addEventListener("tick", spriteStage); 

문제는 : 어떤이의 결과 것은 깨진 애니메이션이다. 몇 개의 프레임 만 표시되고 애니메이션은 몇 개의 프레임을 매우 빠르게 반복하거나 전혀 수행하지 않는 것처럼 보입니다.

틱 업데이트 기능에서 console.log(sprite.currentFrame)을 사용하면 모든 프레임이 초당 30의 속도로 증가하는 것을 볼 수 있지만 실제로 표시되는 것은 이에 해당하지 않습니다.

정상적으로 Stage을 사용하여 Sprite 애니메이션을 추가하고 재생하면 잘 작동합니다. 또한 Chrome://gpu에 따르면 WebGL이 활성화되어 있으므로 문제가되지 않습니다.

답변

1

SpriteStage에는 스프라이트가 사용할 수있는 단일 이미지를 참조하는 SpriteContainers가 필요합니다. http://www.createjs.com/docs/easeljs/classes/SpriteContainer.html

이전 WebGL 접근 방식입니다. 우리가 베타 테스트중인 곧 출시 될 새로운 EaselJS 접근 방식 인 StageGL에 관심이있을 수 있습니다. 기본적으로 Stage와 동일하게 작동하지만 더 많은 콘텐츠를 수용합니다 (더 빠른 방법입니다). 위의 접근 방식은 StageGL의 작동 방식에 더 가깝습니다. https://github.com/CreateJS/EaselJS/tree/StageGL-beta

우리는 여전히 (인해 다른 우선 순위 지연되었습니다) 문서 및 데모를 연마하지만,이 곧 태그를 얻을 수 있도록 노력하겠습니다됩니다 GitHub의에 지점이 있습니다

.

+0

감사합니다. StageGL은 매우 흥미롭게 보입니다. 곧 살펴 보겠습니다. 한 가지 더. 스테이지에 추가 된 'SpriteContainer'를 사용하여 접근법을 시도했을 때, 하나의 이미지 만 사용하는 스프라이트 같은 객체 만 추가 할 수 있다는 것을 알았습니다. 이 경우 'SpriteStage'에 애니메이션 객체를 어떻게 추가 할 수 있습니까? –

+0

그것은 SpriteContainer/SpriteStage 접근 방식의 제한 사항입니다. Sprite는 SpriteSheets를 사용하여 일반 무대에서와 같은 방식으로 애니메이션을 만들 수 있습니다. 어떤 종류의 애니메이션을하려고하십니까? – Lanny

+0

저는 보통 애니메이션 객체로 일반 MovieClip을 사용합니다. 그러나 대부분 셰이프로 만들어 졌기 때문에 렌더링하는 데 비용이 많이 듭니다. 그래서 지금까지 개체를 반복하고 캐시하는 메서드를 사용하여 개체가 여전히 애니메이션으로 처리되는 동안 성능 저하가 최소화 된 것입니다. 그러나 앱이 점점 더 복잡 해짐에 따라 애니메이션을 재생하는 더욱 효율적인 방법을 찾고있었습니다. 스프라이트 시트는 대답처럼 보이지만, 내 보낸 플래시 그래픽보다 구현이 훨씬 더 복잡합니다. –

관련 문제