HTML 5 эффективный рисунок на холсте для игры - PullRequest
Новая
       29

HTML 5 эффективный рисунок на холсте для игры

0 голосов
/ 14 сентября 2011

Я пытаюсь разработать игру с элементом canvas.Прямо сейчас я рисую плитки (цветные квадраты) в качестве фона, а герой управляется клавишами со стрелками на основе этой демонстрации: http://www.lostdecadegames.com/demos/simple_canvas_game/

Однако, вызывая showDungeon () для рисования моего фона, мы делаем движениегероя не гладко, как в демоверсии.Я думаю, проблема в том, что я рисую каждую плитку размером 32x32, что замедляет движение в Chrome.Любые предложения или оптимизации кода я могу сделать?Движение хорошо, когда плитки 16x16, но я хочу плитки 32x32.Я вроде не хочу использовать CSS, чтобы удвоить размер холста, так как это может испортить графику с помощью сглаживания.http://www.html5rocks.com/en/tutorials/casestudies/onslaught.html#toc-pixelated

// Draw everything
var render = function() {

   showDungeon();
    ctx.drawImage(img, hero.x, hero.y);

};

// The main game loop
var main = function() {
    var now = Date.now();
    var delta = now - then;

    update(delta / 1000);
    render();

    then = now;
};

// Let's play this game!
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible

не связанная с этим проблема: по какой-то причине я не мог нарисовать зеленый квадрат в качестве героя в render (), поэтому вместо него я использовал изображение.http://jsfiddle.net/4M5Xz/4/

1 Ответ

4 голосов
/ 14 сентября 2011

У вас странный цикл в коде: 

function showDungeon() {
   for (var x = 0; x < (15*32); x++) {
      for (var y = 0; y < (15*32); y++) {
         ...
      }
   }
}

Как будто вы рисуете фон слишком много раз. Я изменил это на: 

function showDungeon() {
   for (var x = 0; x < 15; x++) {
      for (var y = 0; y < 15; y++) {
         ...
      }
   }
}

и снова было гладко.

...