2

昨日ダートをいじり始めて、シンプルなゲームエンジンを作ってみようと思いました。私もcanvas要素に慣れていないので、どこかでばかげた間違いを犯していると確信しています。

これが私のメインのゲームループです。

class FunTime {

FunTime(){

   gameTime = new Date.now();

   gameState = new List<IDrawableGameComponent>();

   StartMenu startMenu = new StartMenu();

   gameState.add(startMenu);

   CanvasElement _canvas = document.query('#canvas');

   context = _canvas.getContext('2d');

 }

 List<IDrawableGameComponent> gameState;
 Date gameTime;
 CanvasRenderingContext2D context;


}

void main() {

  var exit = false;

  FunTime game = new FunTime();

  Date previousDraw = new Date.now();

  while (!exit){

    game.gameTime = new Date.now();

    //update
    game.gameState.last().update(game.gameTime);

     int elapsed = game.gameTime.difference(previousDraw).inMilliseconds;
     //draw (60 fps)
     if(previousDraw == null || elapsed > 16){

       //print("Draw Called{$elapsed}");
       previousDraw = game.gameTime;
       game.gameState.last().draw(game.gameTime, game.context);
     }

  }

}

StartMenuコードのコードは次のとおりです。

class StartMenu implements IDrawableGameComponent{
  num positionX = 0;
  StartMenu(){

  }
  void load(){

  }
  void update(Date gameTime){
    //if(positionX < 200)
     // positionX++;
  }
  void draw(Date gameTime, CanvasRenderingContext2D ctx){
    ctx.clearRect(0, 0, 800, 600);
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,800,600);
    ctx.fillStyle = 'white';
    ctx.fillRect(positionX, 50, 400, 200);
  }
}

何らかの理由で、コードをステップ実行しない限り、長方形が描画されることはありません。次のクリアが呼び出される前に、brwoserがそれを描画するのに十分な時間がないようです。描画間隔を長くしてみましたが、何も変わりません。

これが私が問題を解決した方法です：

class FunTime {

FunTime(){

    gameTime = new Date.now();

    gameState = new List<IDrawableGameComponent>();

    StartMenu startMenu = new StartMenu();

    gameState.add(startMenu);

    canvas = document.query('#canvas');

    context = canvas.getContext('2d');

    _previousDraw = 0;

    animate(0);

  }

  animate(int time){

    int elapsed = time - _previousDraw;

    if( _previousDraw == 0 || elapsed > 16){

      this.gameState.last().draw(time, this.context);

      _previousDraw = time;

    }

    this.gameState.last().update(time);

    window.webkitRequestAnimationFrame(animate, this.canvas);
  }

  int _previousDraw;

  List<IDrawableGameComponent> gameState;

  Date gameTime;

  CanvasRenderingContext2D context;

  CanvasElement canvas;

}

void main() {

  FunTime game = new FunTime();

}
4

1 に答える 1

4

main() メソッドの while ループは、ブラウザー スレッドが描画できるように戻ることはありません。これが、ステップスルーするときにのみ機能する理由です。

この代替方法は有効です: window.setInterval を使用して 16 ミリ秒ごとに関数を呼び出しますが、これはゲーム ループの正しい方法ではない可能性があります。

void main() {
  var exit = false;
  FunTime game = new FunTime();
  Date previousDraw = new Date.now();

  window.setInterval(   () {   //note the callback
    game.gameTime = new Date.now();
    //update
    game.gameState.last().update(game.gameTime);

    int elapsed = game.gameTime.difference(previousDraw).inMilliseconds;
    //draw (60 fps)
    if(previousDraw == null || elapsed > 16){

      previousDraw = game.gameTime;
      game.gameState.last().draw(game.gameTime, game.context);
    }
  }, 16);  //16 ms
}
于 2012-04-08T19:25:17.990 に答える