我正在尽力制作游戏,但是我却坚持要制作动画。
我正在尝试改编我发现的教程,但没有看到动画。相反,我.png
在屏幕上看到了整个文件。
这是我的代码(以及jsfiddle的链接http://jsfiddle.net/ae3nj03a/3/)
我将不胜感激任何帮助或指导。
var fantom = new Image(300,60); //obrazek ma wymiary 24,24
fantom.src = 'obrazki/SpriteGracz.png';
function draw() {
var nr_klatki = 1;
var liczba_klatek_fantom = 5;
var szerokosc_klatki = fantom.width / liczba_klatek_fantom;
var wysokosc_klatki = fantom.height;0
var c = document.createElement('canvas');
ggctx=c.getContext('2d');
c.fillStyle = "#111";
//c.fillRect(0,0,200,100);
nr_klatki++;
if (nr_klatki>liczba_klatek_fantom) {
nr_klatki = 1;
}
var xklatki = (nr_klatki-1)*szerokosc_klatki;
ggctx.drawImage(fantom, xklatki, 0, szerokosc_klatki, wysokosc_klatki, 60, 35, szerokosc_klatki, wysokosc_klatki);
return draw;
}
function rysuj(callback){
var gracz = document.createElement("canvas");
gctx = gracz.getContext("2d");
gctx.fillStyle = "black";
//gracz.width = 640;
//gracz.height = 480;
gracz = new Image();
gracz.onload = function(){
setInterval(draw(), 20);
};
gracz.src = "../obrazki/SpriteGracz.png";
//gctx.arc(310, 410, 20, 0, 2*Math.PI);
//gctx.fill();
// dom.dodKlase(gracz, "plansza");
dom.dodKlase(gracz, "gracze");
return gracz;
callback();
}
//function ()
function setup(){
var boardElement = $("#ekran-gry .ekran-planszy")[0];
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
dom.dodKlase(canvas, "plansza");
boardElement.appendChild(createBackground());
boardElement.appendChild(rysuj());
boardElement.appendChild(canvas);
// rysuj();
}
我不会直接回答您的问题,因为您的问题中根本没有足够的工作代码来轻松诊断问题。
根据您的描述,很可能您没有充分修剪Sprite表。您需要提供要使用的小图片的x / y / w / h坐标。听起来您没有这样做。
这是一个在HTML5画布上设置精灵动画的非常简单的工作示例。请注意,这在<IE10中不起作用。
$(function(){
var spritesheet = new Image(),
canvas = $("#game")[0].getContext('2d'),
spriteWidth = 64,
spriteHeight = 64,
indexX = 0,
indexX_max = 7,
indexY = 11,
lastFrameUpdate = 0,
frameRate = 1000 / 16, // 16 frames per second (calculated in milliseconds)
destX = 0,
destY = 0;
spritesheet.src = 'http://i.stack.imgur.com/X2Dt6.png';
function drawNextSprite(){
var currentTime = Date.now(),
timeSinceLastUpdate = currentTime - lastFrameUpdate,
spriteX,
spriteY;
// If it's been less than 1/16 of a second since the last update, then
// don't update the sprite yet
if ( timeSinceLastUpdate < frameRate ){
window.requestAnimationFrame(drawNextSprite);
return;
}
lastFrameUpdate = currentTime;
if ( indexX > indexX_max ) indexX = 0;
if ( destX > 80 ) destX = -spriteWidth;
// find the next sprite image to use
spriteX = spriteWidth * indexX;
spriteY = spriteHeight * indexY;
// clear the area we last drew on (so that we don't leave a trail)
canvas.clearRect( destX, destY, spriteWidth, spriteHeight );
canvas.drawImage(
spritesheet, // the spritesheet
spriteX, spriteY, spriteWidth, spriteHeight, // where is the sprite frame?
destX, destY, spriteWidth, spriteHeight // where should we draw it on the canvas?
);
// increment to the next sprite image
indexX++;
// move our sprite across the screen
destX += 3;
window.requestAnimationFrame(drawNextSprite);
}
drawNextSprite(); // draw the first frame
});
#game{
border: solid black 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="game" height="80" width="80"></canvas>
有关我使用的Sprite工作表的信息,包括相关的版权,可以在这里找到:http
://opengameart.org/content/universal-lpc-sprite-male-01版权/归因声明:Gaurav Munjal
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句