Анимировать персонажа будем с помощью спрайтов, которые можно бесплатно скачать например со следующих сайтов:
“Spriters-resource.com”
“Gameart2d.com”
“OpenGameArt.org”
“Opengamegraphics.com”
“Kenney.nl”
“Reinerstilesets.de”
Я буду использовать следующий спрайт:
Скачать спрайт можно по следующей ссылке.
Спрайт у нас следующих размеров: width=3376 height=1609 (понадобится для javascript кода).
Также можно добавить фон, например следующую картинку:
Скачать данную картинку можно по следующей ссылке.
Теперь перейдем к анимации персонажа с помощью javascript.
При клике на анимацию, она будем случайным образом меняться на другую.
Код javascript анимации:
<div id='klik' onclick='klik()'>
<canvas id='canvas' style='background-image: url(https://capitalwm.ru/wp-content/uploads/2020/01/sozdaem-virtualnogo-personazha-dlya-sajta-na-javascript-1.jpg)'></canvas><br
</div> <script> var k = 0; var canvasWidth = 300; var canvasHeight = 400; var spriteWidth = 3376; var spriteHeight = 1609; var rows = 4; var cols = 15; var trackRight = 1; var trackLeft = 2; var width = spriteWidth/cols; var height = spriteHeight/rows; var curFrame = 0; var frameCount = 8; var x=0; var y=0; var srcX; var srcY; var left = false; var right = true; var speed = 10; var canvas = document.getElementById('canvas'); canvas.width = canvasWidth; canvas.height = canvasHeight; var ctx = canvas.getContext("2d"); var character = new Image(); character.src = "https://capitalwm.ru/wp-content/uploads/2020/01/sozdaem-virtualnogo-personazha-dlya-sajta-na-javascript.jpg"; function updateFrame(){ curFrame = ++curFrame % frameCount; srcX = curFrame * width; ctx.clearRect(x,y,width,height); if(left && x>0){ srcY = trackLeft * height; x-=speed; } if(right && x<canvasWidth-width){ srcY = trackRight * height; x+=speed; } } function draw(){ if (left!=right) { updateFrame(); } ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height); } function klik(){ if (k==0) { left = true; right = false; } if (k==1){ left = false; right = false; } if (k==2) { left = false; right = true; k = -1; } k = k + 1; } setInterval(draw,100); </script>
В данной анимации мы будем использовать не весь спрайт, а только вторую и третью строчку с изображениями, поэтому в параметрах:
var trackRight = 1;
var trackLeft = 2;
указываем 1 и 2, если бы мы захотели использовать первую и вторую строчку, то нужно было бы указать 0 и 1.
В параметрах:
var canvasWidth = 300;
var canvasHeight = 400;
указываем размер окошка, в котором будет показана наша анимация.
В параметрах:
var spriteWidth = 3376;
var spriteHeight = 1609;
указываем ширину и высоту спрайта.
В параметрах:
var rows = 4;
var cols = 15;
указываем количество строк и столбцов в спрайте.
В параметре:
var speed = 10;
указываем на сколько будет смещаться персонаж в анимации, можно поставить, например, значение равное 0.1, тогда персонаж будет стоять на месте.
Также можно добавить кнопки к нашей анимации, а клики убрать:
, тогда код будет следующим:
<canvas id='canvas' style='background-image: url(https://capitalwm.ru/wp-content/uploads/2020/01/sozdaem-virtualnogo-personazha-dlya-sajta-na-javascript-1.jpg)'></canvas><br <button onclick='moveLeft()'>Left</button> <button onclick='moveRight()'>Right</button> <button onclick='moveStop()'>Stop</button> <script> var k = 0; var canvasWidth = 300; var canvasHeight = 400; var spriteWidth = 3376; var spriteHeight = 1609; var rows = 4; var cols = 15; var trackRight = 1; var trackLeft = 2; var width = spriteWidth/cols; var height = spriteHeight/rows; var curFrame = 0; var frameCount = 8; var x=0; var y=0; var srcX; var srcY; var left = false; var right = true; var speed = 10; var canvas = document.getElementById('canvas'); canvas.width = canvasWidth; canvas.height = canvasHeight; var ctx = canvas.getContext("2d"); var character = new Image(); character.src = "https://capitalwm.ru/wp-content/uploads/2020/01/sozdaem-virtualnogo-personazha-dlya-sajta-na-javascript.jpg"; function updateFrame(){ curFrame = ++curFrame % frameCount; srcX = curFrame * width; ctx.clearRect(x,y,width,height); if(left && x>0){ srcY = trackLeft * height; x-=speed; } if(right && x<canvasWidth-width){ srcY = trackRight * height; x+=speed; } } function draw(){ if (left!=right) { updateFrame(); } ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height); } function moveLeft(){ left = true; right = false; } function moveRight(){ left = false; right = true; } function moveStop(){ left = false; right = false; } setInterval(draw,100); </script>
Как вставить данную анимацию к себе на wordpress сайт?
Достаточно просто, например, можно вставить её в виджет “Текст”.
Для этого заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Виджеты”:
Находим виджет “HTML-код”:
, перетаскиваем его в нужный сайдбар (боковую колонку) и вствляем код нашей анимации (если вы используете видет “Текст”, то вствляйте код во вкладке “Текст”):
Если у вас старая версия wordpress и виджет “HTML-код” отсутствует, то находим виджет “Текст” и вставляем код в него:
На этом всё красивых вам виртуальных помощников!