다트와 웹을 사용하여 애니메이션 루프를 60fps로 구동하려면 어떻게해야합니까?

Question

다트 웹 애플리케이션에서 60fps로 애니메이션 루프 또는 게임 루프를 구동하려면 어떻게해야합니까?

Answer 1

전통적인 window.requestAnimationFrame의 미래 기반 사촌 인 window.animationFrame을 사용하십시오.

다트는 비동기 작업을 처리하는 데보다 객체 지향적 인 방법으로 Future 및 Stream을 사용하도록 전환했습니다. 콜백 기반 (이전 '폐기 됨') requestAnimationFrame은 미래 기반 (새로운 핫) animationFrame으로 대체되었습니다. 여기

는 샘플입니다

import 'dart:html'; 

gameLoop(num delta) { 
    // do stuff 
    window.animationFrame.then(gameLoop); 
} 

void main() { 
    window.animationFrame.then(gameLoop); 
} 

animationFrame의 서명은 다음과 같습니다

Future<num> animationFrame(); 

공지 사항 animationFrame는 "높은 성능을 보유하고 num로 완료 미래를 반환하는 방법 타이머 "는 window.performance.now()과 유사합니다. num은 현재와 페이지가 시작된 시점 사이에 단조롭게 증가하는 차이입니다. 마이크로 초 해상도입니다.

브라우저가 페이지를 그리기 직전에 미래가 완료됩니다. 이 미래가 완료되면 세상의 상태를 업데이트하고 모든 것을 그립니다.

애니메이션 또는 루프를 계속하려면 모든 프레임에서 새 프레임을 animationFrame에서 요청해야합니다. 이 예제에서 gameLoop() 레지스터는 다음 애니메이션 프레임에서 통지를받습니다.

알아두면 좋겠지 만 game_loop이라는 펍 패키지가 있습니다.