Ich habe mir gestern diverse Tutorials zum Thema Sprite Animation durchgelesen, u.a. auch dieses Sprite Animation - Build New Games.
Nun habe ich selber ausprobiert und es hat auch geklappt ein kleines Strichmännchen zum laufen zu bekommen.
Das ist das Sprite.
Nach dem ich die Animation mit diversen Key Events manipulieren wollte, konnte ich die Animation nicht mehr im Browser angezeigt bekommen.
Und jetzt wollte ich wieder zum Anfang zurück aber ich bekomme es nicht hin bzw. sehe meinen Fehler nicht.
Hier der Code:
Tut mir Leid das es ein bisschen verschoben ist.
Ich hoffe auf eure Hilfe und bedanke mich schon einmal bei euch.
EDIT: Ich habe meinen Fehler gefunden. Die Variablen in der update Funktion gehörten da nicht hin.
Nun habe ich selber ausprobiert und es hat auch geklappt ein kleines Strichmännchen zum laufen zu bekommen.
Das ist das Sprite.
Nach dem ich die Animation mit diversen Key Events manipulieren wollte, konnte ich die Animation nicht mehr im Browser angezeigt bekommen.
Und jetzt wollte ich wieder zum Anfang zurück aber ich bekomme es nicht hin bzw. sehe meinen Fehler nicht.
Hier der Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
</body>
<canvas id="myCanvas" width="500" height="100"></canvas>
<script type="text/javascript">
var canvas, ctx, img;
function main(){
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext("2d");
img = new Image();
img.src = 'stickman.png';
img.onload = setTimeout( update, 1000 / 60 );
}
function update() {
var frame = 2;
var lastUpdateTime = 0;
var acDelta = 0;
var msPerFrame = 100;
window.requestAnimationFrame(update);
var delta = Date.now() - lastUpdateTime;
if (acDelta > msPerFrame)
{
acDelta = 0;
draw(frame);
frame++;
if (frame >= 4) frame = 2;
} else
{
acDelta += delta;
}
lastUpdateTime = Date.now();
}
function draw(frame){
ctx.clearRect(0, 0, 96, 96);
ctx.drawImage(img, frame*96, 0, 96, 96, 0, 0, 96, 96);
}
main();
</script>
</body>
</html>Tut mir Leid das es ein bisschen verschoben ist.
Ich hoffe auf eure Hilfe und bedanke mich schon einmal bei euch.
EDIT: Ich habe meinen Fehler gefunden. Die Variablen in der update Funktion gehörten da nicht hin.
Zuletzt bearbeitet:
