Bevor 3D seinen Siegeszug im Bereich der Computerspiele antrat wurde üblicherweise mit Sprites gearbeitet. Im Bereich der Flash Spiele hat dieser Ansatz, insbesondere durch die Game Engine flixel und der immer beliebteren Retro Optik, in letzter Zeit eine kleine Renaissance erlebt. In diesem Beiträg möchte ich allerdings nicht auf die Umsetzung innerhalb der Flash Plattform eingehen, sondern zeigen wie sich eine auf Sprites basierte Animation mit dem HTML5 Canvas Element umsetzen lässt.
Zu Beginn benötigen wir natürlich unseren Sprite inkl. der einzelnen Animationsstufen:
Quelle: SpriteLib GPL
Ich denke das Prinzip wird hiermit schon klar. Wir lassen jetzt, wie in einem Daumenkino, die einzelnen Bilder hintereinander ablaufen. Dazu brauchen wir erst ein wenig HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/canvas-sprite.js"></script> <head> <body onLoad="initCanvas()"> <canvas id="canvas" /> </body> </html>
Zentrales Element ist hier, wie in dem Processing.js Artikel, das Canvas Element. Nun noch ein wenig JavaScript:
var context;
var canvas;
var img = new Image();
var sprite;
function initCanvas() {
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
img.src = "img/sprite.png";
img.onload = function(){
sprite = new Sprite( 128 );
setInterval(mainLoop, 80);
};
}
function mainLoop(){
canvas.height = canvas.height; //clears the canvas
canvas.height = canvas.width = sprite.size;
sprite.update();
sprite.draw();
}
function Sprite( spriteSize ) {
//Reihenfolge der Einzelbilder
this.frames = new Array( 0,1,2,3,4,5);
this.currentFrame = 0;
this.size = spriteSize;
this.draw = function(){
context.drawImage(
img,
this.frames[this.currentFrame]*this.size, 0,
this.size,this.size,
0, 0,
this.size,this.size );
};
this.update = function() {
//den Index auf das nächste Einzelbild setzen
this.currentFrame++;
//wurde das letzte Einzelbild erreicht => zurück auf Anfang
if( this.currentFrame >= this.frames.length ){
this.currentFrame = 0;
}
};
}
Die wichtigste Stelle ist der Aufruf der context.drawImage Funktion (Zeile 26). Hier wird statt dem gesamten Sprite nur ein bestimmter Ausschnitt, abhängig von dem aktuellen Einzelbild, ausgeschnitten und angezeigt. Da diese Funktion ein kleines Parameter-Monster ist empfiehlt sich ein Blick in die Doku.
Das Beispiel findet ihr lauffähig unter: http://antwerpes.it/examples/canvas_sprite/
Dann viel Spass beim Ausprobieren.
Hallo …
Da ich selber auch Flash-Spiele mit AS2 und AS3 geschrieben habe, bin ich sehr gespannt was sich mit HTML5 alles machen lässt. Es gibt ja schon ein Spiel mit HTML5, das aussieht als wären sie mit AS2 entwickelt worden.