Почему мой анимированный персонаж скользит влево?

Question

Я использую простую анимацию рисования clearInterval для анимации таблицы спрайтов. У меня есть две анимации, и для обоих я установил одинаковый размер холста. Я проверил ширину таблицы спрайтов, чтобы убедиться, что она правильная. По какой-то причине анимация выполняется, но мой персонаж скользит влево, и часть следующего кадра становится видимой до начала анимации. Я проверял снова и снова на наличие ошибок. Надеюсь, просто что-то упустил. Вот мой код. Spritesheet с проблемой размещен в ссылке внизу поста. Большое вам спасибо.

// QUIZGAME ANIMATION

var canvasWidth = 200;
var canvasHeight = 250;
var canvas2Height = 250;
var canvas2Width = 200;

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

document.addEventListener("DOMContentLoaded", function(event) {
  canvas1.width = canvasWidth;
  canvas1.height = canvasHeight;
  canvas2.height = canvas2Height;
  canvas2.width = canvas2Width;
});

var spriteWidth = 605;
var spriteHeight = 200;

var sprite2Width = 1632;
var sprite2Height = 200;


var columns = 3;
var rows = 1;
var columns2 = 11;
var rows2 = 1;

var width = spriteWidth / columns;
var height = spriteHeight / rows;
var height2 = sprite2Height / rows2;
var width2 = sprite2Width / columns2;

var curFrame = 0;
var curFrame2 = 0;

var frameCount = 3;
var frameCount2 = 11;

var x = 0;
var y = 0;
var x2 = 0;
var y2 = 0;

var frameX = 0;
var frameY = 0;
var frameX2 = 0;
var frameY2 = 0;

var ctx = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");

var character = new Image();
var character2 = new Image();

character.src = "img/testanimation.png";
character2.src = "https://i.stack.imgur.com/7uRCO.png";

function changeFrameIndex() {
  curFrame = ++curFrame % frameCount;
  frameX = curFrame * width;
  ctx.clearRect(x, y, width, height);
}

function changeFrame2Index() {
  curFrame2 = ++curFrame2 % frameCount2;
  frameX2 = curFrame2 * width2;
  ctx2.clearRect(x2, y2, width2, height2);
}

function draw() {
  //Updating the frame 
  changeFrameIndex();
  //Drawing the image 
  ctx.drawImage(character, frameX, frameY, width, height, x, y, width, height);
}

function draw2() {
  changeFrame2Index();
  ctx2.drawImage(character2, frameX2, frameY2, width2, height2, x2, y2, width2, height2);
}

//setInterval(draw, 140); // disabled by editor because source is unavailable
setInterval(draw2, 100);

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

spritesheet с выпуском

Я частично решил проблему, но все еще немного сбит с толку. Я обрезал некоторое пустое пространство с конца таблицы спрайтов (делая sprite2Width = 1604 вместо исходного 1632), что помогло, уменьшив движение почти до нуля, но по какой-то причине мне все еще нужно уточнить ширину, которая составляет 4-6 пикселей. короче фактического png. Анимация теперь работает после обрезки ширины листа спрайта в 1604 пикселей и установки sprite2Width = 1598; (в отличие от 1604). У кого-нибудь есть идеи, почему здесь разница в 6 px? Может быть, связанный с CSS? По крайней мере, это работает.

Answer 1

Первое, что вы должны сделать при устранении неисправностей, это упростить ваш код ...

Возьмите это к простому базовому, затем начните играть с переменными, которые строят каждый кадр, да, как вы обнаружите, что для каждого спрайта есть отступ 6px, вы можете компенсировать это в коде, чтобы увидеть вычисление ширины.

var character = new Image();
character.src = "https://i.stack.imgur.com/7uRCO.png";

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var spriteWidth = 1632;
var columns = 11;

var width = (spriteWidth / columns) - 3;
var curFrame = 0;

function draw() {
  ctx.clearRect(0, 0, 900, 900);
  curFrame = ++curFrame % columns;
  ctx.drawImage(character, curFrame * width, 0, width, 200, 0, 0, width, 200);
}

setInterval(draw, 100);

<canvas id="canvas" height=175></canvas>

... и для записи, что спрайт не самый красивый