3

画面上でボールをバウンドさせる簡単なプログラムを作成しました。すべてが機能しますが、画像がちらつきやすく、滑らかではありません。

画面下部の速度が大きいため、画像がちらつくのではないかと思います。

ちらつきを減らすためにボールの動きを補間する方法について誰かが何かアイデアを持っているのだろうかと思いました。

位置を更新するために呼び出されます

      this.step = function()
      {
        thegame.myface.y = thegame.myface.y + thegame.myface.vSpeed;
        if (thegame.myface.y > thegame.height)
        {
        thegame.myface.vSpeed = -thegame.myface.vSpeed;
        }
        else
        {
        thegame.myface.vSpeed = thegame.myface.vSpeed + 1;
        }
      }
  },

再描画するために呼び出されます

draw: function()
      {
          //clears the canvas
          thegame.ctx.clearRect(0,0,thegame.width,thegame.height);
          //draw the objects
          thegame.ctx.drawImage(thegame.imgFace,this.x-this.width/2,this.y-this.height/2);
          return;
      },

でフレームワークを呼び出すindex.html

<script type="text/javascript">
thegame.init(450,450);
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
(function()
 {
 var lastTime = 0;
 var vendors = ['ms', 'moz', 'webkit', 'o'];
 for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x)
 {
 window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
 window.cancelRequestAnimationFrame = window[vendors[x]+'CancelRequestAnimationFrame'];
 }
 if (!window.requestAnimationFrame)
 {
 var f = function(callback, element)
 {
 var currTime = new Date().getTime();
 var timeToCall = Math.max(0, 16-(currTime-lastTime));
 var id = window.setTimeout(function()
     {
     callback(currTime+timeToCall);
     }, timeToCall);
 lastTime = currTime+timeToCall;
 return id;
 };
window.requestAnimationFrame = f;
 }
if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id)
    {
        clearTimeout(id);
    };
 }());
(function gameloop()
 {
 thegame.update();
 requestAnimationFrame(gameloop);
 thegame.draw();
 })();
</script>

の定義を編集するthegame

   init: function(width, height)
   {
       var canvas = $("<canvas width='"+width+"' height='"+height+"'></canvas>");
       canvas.appendTo("body");
       thegame.ctx = canvas.get(0).getContext("2d");
       thegame.width = width;
       thegame.height = height;
       thegame.imgFace = new Image();
       thegame.imgFace.src = "face.png";
       thegame.myface = new thegame.makeFace(width/2,height/2);
   },
4

2 に答える 2

0

あなたのキャンバスはどれくらいの大きさですか？ちらつきの問題が解決するかどうかはわかりませんが、追加の最適化として、各更新の前に、clearRect（）呼び出しを変更して、ダーティな領域のみをクリアすることをお勧めします。

例：thegame.ctx.clearRect（this.x-this.width / 2、this.y-this.height / 2、thegame.imgFace.width、thegame.imgFace.height）;

于 2012-12-30T19:12:19.197 に答える
0

それは視覚についてです。まず、requestanimationframeを介して、ブラウザによってゲームループが呼び出される速度を確認します。Chromeの場合は、タスクマネージャーが役立ちます。そうでない場合は、タイムスタンプを使用して自分でレートを計算します。少なくとも1秒間に60回実行する必要があります。ブラウザがこの速度で実行されていても、動きがスムーズでない場合は、速度がその速度に対して速すぎます。

ただし、動きの知覚をだますためのオプションがあります。1つは画像を小さくする（単純）、もう1つはモーションブラー（複雑）です。後者を行うには、基本的にゲームを2倍の速度で非表示にして実行し、表示されているキャンバスに2つのブレンドされたフレームを描画します。または、同じ速度で少し簡単に、最後の2つの画像を追跡し、キャンバスに50％のアルファで両方を描画します。より多くの背景情報が必要な場合は、最新のホビット映画が通常の1秒あたり24フレームではなく48で撮影された理由についての説明に従ってください。

画像が水平方向に切り刻まれている/半分にカットされているように見える場合は、ブラウザがモニターに適切に同期されていません。この場合、垂直同期（vsync）がシステムまたは表示オプションによってどこかで上書きされていないことを確認してください。

于 2012-12-29T14:42:10.067 に答える