html 렌더링 및 속도 문제

Question

저는 게임 개발 초기 단계에 있습니다. 저는 표면에 더 큰 이미지를 그리면서 이미지를 사용하여 애니메이션을 만듭니다. 다음 코드 예제는 다음과 같습니다

void drawNextFrame() { 
    //surf.canvas().clear(); 
    surf.clear(); 
    float startX = entity.flipH ? entity.width : 0; 
    float endX = entity.flipH ? -entity.width : entity.width; 
    float width = entity.width; 
    float height = entity.height; 
    //surf.canvas().drawImage(image, 0, 0, 
    surf.drawImage(image, 0, 0, 
      width, height, 
      (width * curFrame) + startX, 0, 
      endX, height); 
} 

surf는 SurfaceLayer의 표면과 image는 Image 자산입니다. 이 게임의 Java 버전은 멋지게 작동하며 부드럽고 반응이 뛰어나며 프레임이 떨어지거나 렌더링 문제가 발생하지 않습니다. 그래도 HTML 버전에 문제가 있습니다. 느린 것처럼 보이며 애니메이션에 많은 프레임을 떨어 뜨립니다. 예를 들어, 반복되는 플레이어의 실행 애니메이션이 있습니다. HTML 버전이 플레이어가 공백이되기 전에 한 번만 애니메이션을 재생하는 것처럼 보입니다. 다른 애니메이션을 점프하거나 트리거하면 실행 애니메이션을 다시 재생할 수 있지만 캐릭터를 비우기 전에 애니메이션 루프를 한 번 반복 재생하지 않습니다. surf.clear()가 계속해서 발사되는 데 문제가 있으며 때로는 프레임이 서로 쌓이는 경우가 있습니다.

모든 종류의 디버깅을 수행하여 프레임을 너무 빨리 그리지 않았는지 확인했습니다. 나는 paint() 메서드를 건드리지 않을 것이다. 나는 을 CanvasLayer으로 바꾸려고 시도했는데, 그게 어떤 유형의 렌더링 문제에 관한 행동을 바꾸는 것처럼 보였을 때, 그리고 그럴 때 일어 났을 때, 그것은 여전히 ​​아주 unplayable 한 경험이었습니다. 또한 예를 들어, 플레이어가 거꾸로 향하고있을 때 내 이미지의 거울 이미지를 만드는 데 실패했습니다. 위의 Canvas 버전에 주석 처리 된 코드를 포함 시켰습니다.이 경우 surf은 CanvasImage의 인스턴스입니다. 차이를 만드는 경우 이러한 애니메이션 그리기 이외에 Box2D 사용하고 있습니다.

제 질문은 : 정상입니까? 이러한 유형의 문제가있는 유일한 사람은 누구이며 해결 방법을 찾은 사람이 있습니까? 난 그냥 내가 뭔가 잘못하고 있는지 확인하고 내가 취하고있는 접근법이 유효한지 확인하고 싶다.

나는 PlayN의 1.2 브랜치가있는 매우 현대적인 컴퓨터에서 Chrome을 테스트하고 있습니다. 나는 구축하고 다음 명령을 Maven을 통해 명령 줄에서 내 프로젝트의 HTML 버전을 테스트 :

mvn clean 
mvn install 
mvn test -Ptest-html 

을 그리고 나는 크롬으로 http://localhost:8080로 이동합니다.

내가 계속 실행중인 추가 문제는 페이지를 새로 고침해도 게임이 항상로드되지 않는다는 것입니다. AssetWatcher를 구현하여 시작하기 전에 모든 것을 사용할 수 있는지 확인하고 일반적으로 브라우저 캐시를 지우고 Chrome을 다시 시작한 후에 한 번 작동합니다. 그런 다음 새로 고침으로 인해 게임이로드되면 운이 좋은 것입니다. 일반적으로 캐시를 지우는 과정을 반복하고 다시 테스트하려면 브라우저를 다시 시작해야합니다.

저는 많은 코드를 제공하지 않고 많은 질문을하고 있지만 저는 SVN 저장소에있는 모든 것을 온라인으로 가지고 있으며 누구나 볼 수 있도록 기꺼이 열어 드릴 것입니다.

도움을 주시면 감사하겠습니다. 시간 내 주셔서 감사합니다!

Answer 1

PlayN 샘플을 보았습니까? 특히 CuteGame은 관련성이있는 것처럼 보입니다.참조 :

• Game Class Immediate Layer Renderer
• Cute World paint Method (게임 클래스 렌더러에 의해 호출)
• Cute World paintObjects method (페인트에 의해 호출)