Анимация спрайтов не один раз

123

14 мая 2021, 01:30

Я хотела сделать так, чтобы вся информация о спрайте хранилась в объекте и функцию отрисовки можно было бы использовать много раз не только с одинаковыми спрайтами. Но ошибку найти не могу. Если консолить все данные, которые приходят в функцию, то sx, который должен меняться, остаётся тем же почему-то

    const canvas = document.getElementById('field'); 
    let ctx = canvas.getContext('2d'); 
 
    let cat = { 
        sx: 0, 
        tick_count: 0, 
        width: 96, 
        height: 96, 
        x: 100, 
        y: 100, 
        end: 288, 
        one: 96, 
    }; 
 
    let sprite = new Image(); 
    sprite.src = 'https://ratnotes.files.wordpress.com/2013/01/animal-2a.png'; 
    sprite.onload = function () { 
        tick(); 
        requestAnimationFrame(tick); //вызов анимации 
    }; 
 
    function tick() { 
        if (cat.tick_count > 10) { 
            draw(sprite, ctx, cat.x, cat.y, cat.width, cat.height, cat.sx, cat.end, cat.one, 0); 
            cat.tick_count = 0; 
        } 
        cat.tick_count += 1; 
        requestAnimationFrame(tick); 
    } 
 
    function draw(image, place, xGen, yGen, widthGen, heightGen, sxGen, endPoint, sizeOfOnePoint, syGen) { 
        place.clearRect(xGen, yGen, widthGen, heightGen); //очистка канваса 
        sxGen = (sxGen === endPoint ? 0 : sxGen + sizeOfOnePoint); //переброс в начало, если спрайт закончился 384 - width картинки, 384/4 =96 -шаг, на который сдвигаем 
        place.drawImage(image, sxGen, syGen, widthGen, widthGen, xGen, yGen, widthGen, widthGen); //отображение первого спрайта 
    }

<canvas id="field" width="900" height="400">hi</canvas>

Answer 1

Вы нигде не меняете sx, когда Вы передали его в функцию, функция получила просто число, а не ссылку на переменную в объекте cat.

Вам необходимо либо результат смещения из функции и присвоить его в переменную явно.

const canvas = document.getElementById('field'); 
let ctx = canvas.getContext('2d'); 
 
let cat = { 
  sx: 0, 
  tick_count: 0, 
  width: 96, 
  height: 96, 
  x: 100, 
  y: 50, 
  end: 288, 
  one: 96, 
}; 
 
let sprite = new Image(); 
sprite.src = 'https://ratnotes.files.wordpress.com/2013/01/animal-2a.png'; 
sprite.onload = function() { 
  tick(); 
  requestAnimationFrame(tick); //вызов анимации 
}; 
 
function tick() { 
  if (cat.tick_count > 10) { 
    cat.sx = draw(sprite, ctx, cat.x, cat.y, cat.width, cat.height, cat.sx, cat.end, cat.one, 0); 
    cat.tick_count = 0; 
  } 
  cat.tick_count += 1; 
  requestAnimationFrame(tick); 
} 
 
function draw(image, place, xGen, yGen, widthGen, heightGen, sxGen, endPoint, sizeOfOnePoint, syGen) { 
  // очистка канваса 
  place.clearRect(xGen, yGen, widthGen, heightGen);  
  //переброс в начало, если спрайт закончился 384 - width картинки, 384/4 =96 -шаг, на который сдвигаем 
  sxGen = (sxGen === endPoint ? 0 : sxGen + sizeOfOnePoint);  
  //отображение первого спрайта 
  place.drawImage(image, sxGen, syGen, widthGen, widthGen, xGen, yGen, widthGen, widthGen);  
  return sxGen 
}

<canvas id="field" width="900" height="400">hi</canvas>

или например передать ссылку на объект в эту функцию, чтобы так или иначе вызвать присвоение

cat.sx = ...

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отрисовка картинок в canvas

Я хочу сделать,чтобы функцию draw можно было бы применять много раз с разными картинками, но у меня почему-то не выходитМожет это особенности...

101

javascript

Почему не работает рекурсия?

211

javascript

window.width() 1730. хотя браузер развернут в fullscreen

консоль выдает 1730 ширину окна браузера в фулл скринеscreen

102

javascript

WebSQL. Insert в цикле FOR или WHILE

Не могу разобраться, как заставить исполняться транзакцию каждый раз в цикле, а не только последнийКод специально упростил

153