• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Problem mit Sprite Animation

R41D3R

New member
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.
stickman.png

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. :D

EDIT: Ich habe meinen Fehler gefunden. Die Variablen in der update Funktion gehörten da nicht hin.
 
Zuletzt bearbeitet:
NB: Ich würde ja sowas nicht mit einem Canvas machen, sondern mit einem <img> oder einem <div> mit Hintergrundbild. Dann kann man nämlich das Männchen auch einfach über etwas drüberlaufen lassen, wenn das Sprite einen durchsichtigen Hintergrund hat. Bei einem Canvas ist das etwas kompliziert, da der Hintergrund bei jedem Animationsschritt neu gezeichnet werden muss...
 
Zurück
Oben