創建 HTML 5 animation 使用精靈表

Question

我正在嘗試使用下圖創建 canvas animation ..

請檢查鏈接。 https://i.stack.imgur.com/Pv2sI.jpg

像普通的 animation 一樣，我正在嘗試運行這個精靈表圖像，但我在某個地方失敗了。

這是我的代碼-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

 <canvas id='canvas'></canvas><br />
 <button onclick='moveLeft()'>Left</button>
 <button onclick='moveRight()'>Right</button>
 <script>
 var canvasWidth = 650; 
 var canvasHeight = 350;
 
 var spriteWidth = 379; 
 var spriteHeight = 133; 
 
 var rows = 2; 
 var cols = 8; 
 
 var trackRight = 0; 
 var trackLeft = 1; 
 
 var width = spriteWidth/cols; 
 var height = spriteHeight/rows; 
 
 var curFrame = 0; 
 var frameCount = 8; 
 
 var x=0;
 var y=200; 
 
 var srcX; 
 var srcY; 
 
 var left = false; 
 var right = true;
 
 var speed = 12; 
 
 var canvas = document.getElementById('canvas');
 canvas.width = canvasWidth;
 canvas.height = canvasHeight; 
 
 var ctx = canvas.getContext("2d");
 
 var character = new Image(); 
 character.src = "jpg.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(){
 updateFrame();
 ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);
 }
 
 
 function moveLeft(){
 left = true; 
 right = false; 
 }
 
 function moveRight(){
 left = false;
 right = true; 
 }
 
 setInterval(draw,100);
 
 </script>
</body>
</html>

但這似乎不能正常工作。 它在奇怪的 state 中運行。 只像圖像的中心區域。 我能做些什么？

Answer 1

您的 spritesheet 未正確完成，每個步驟的寬度必須相同，否則您的 animation 會發生變化。 此外，您可以僅使用 css 為 spritesheet 設置動畫。 我以這個精靈表為例： https://www.codeandweb.com/o/blog/2016/05/10/how-to-create-a-sprite-sheet/spritestrip-1536.png

<body>
    <style>
        #animSheet {
            background-image: url("spritesheet.png");
            width: 256px;
            height: 256px;
            animation: animSheet 1s steps(6) infinite;
        }

        @keyframes animSheet {
            0% {
                background-position: 1536px;
            }

            100% {
                background-position: 0px;
            }
        }
    </style>

<div id="animSheet"></div>

創建 HTML 5 animation 使用精靈表

問題描述

1 個解決方案

解決方案1
0 2021-02-06 14:11:47

創建 HTML 5 animation 使用精靈表

問題描述

1 個解決方案

解決方案1 0 2021-02-06 14:11:47

解決方案1
0 2021-02-06 14:11:47