[Engine]: update sprite to work with sprite sheets #45

#45

src/GameObjects/GameObjectBase.js

@@ -136,7 +136,7 @@ export default class GameObject {
 		return this;
 	}
 
-	_render() {
+	_render(deltaTime) {
 		if (!this.visible) return;
 
 		CanvasStateInstance.context.save();
@@ -154,7 +154,7 @@ export default class GameObject {
 		CanvasStateInstance.context.fillStyle = this.fillColor;
 		CanvasStateInstance.context.strokeStyle = this.strokeColor;
 		CanvasStateInstance.context.lineWidth = this.strokeWidth;
-		this._renderType();
+		this._renderType(deltaTime);
 
 		CanvasStateInstance.context.restore();
 	}

src/GameObjects/Sprite/Animation.js

@@ -0,0 +1,59 @@
+export default class Animation {
+	constructor(parent, name, numberOfFrames, speed, loop = true) {
+		this._parent = parent;
+		this.name = name;
+		this.numberOfFrames = numberOfFrames;
+		this.speed = speed;
+		this.loop = loop;
+		this.reversed = false; // TODO: Not Working
+		this.yoyo = false; // TODO: Not Working
+
+		this._currentFrame = 0;
+		this._currentTime = 0;
+	}
+
+	getFrame() { return this.numberOfFrames[this._currentFrame]; }
+
+	reset() {
+		this._currentFrame = 0;
+		this._currentTime = 0;
+		return this;
+	}
+
+	setName(name) {
+		this.name = name;
+		return this;
+	}
+	setSpeed(speed) {
+		this.speed = speed;
+		return this;
+	}
+	setNumberOfFrames(numberOfFrames) {
+		this.numberOfFrames = numberOfFrames;
+		return this;
+	}
+	setLoop(loop) {
+		this.loop = loop;
+		return this;
+	}
+
+	// Private
+	_update(deltaTime) {
+		this._currentTime += deltaTime * 100;
+
+		if (this._currentTime >= this.speed) {
+			this._currentTime = 0;
+			this._currentFrame++;
+
+			if (this._currentFrame >= this.numberOfFrames) {
+				if (this.loop) this._currentFrame = 0;
+				else {
+					this._currentFrame = this.numberOfFrames - 1;
+					this._parent.animations.pause();
+				}
+			}
+		}
+
+		this._parent.setFrame(this._currentFrame);
+	}
+}

src/GameObjects/Sprite/Animations.js

@@ -0,0 +1,50 @@
+import Animation from "./Animation.js";
+
+export default class Animations {
+	constructor(parent) {
+		this._parent = parent;
+		this.animations = {};
+		this.currentAnimation = null;
+		this.paused = true;
+	}
+
+	get(name) { return this.animations[name]; }
+
+	add(name, numberOfFrames, speed, loop = true) {
+		this.animations[name] = new Animation(this._parent, name, numberOfFrames, speed, loop);
+		return this.get(name);
+	}
+
+	reset(name) {
+		this.animations[name].reset();
+		return this.get(this.currentAnimation);
+	}
+
+	play(name) {
+		if (this.currentAnimation) this.currentAnimation.reset();
+		this.currentAnimation = this.animations[name];
+		this.resume();
+		return this.get(this.currentAnimation);
+	}
+
+	pause() {
+		this.paused = true;
+		return this.get(this.currentAnimation);
+	}
+
+	resume() {
+		this.paused = false;
+		return this.get(this.currentAnimation);
+	}
+
+	setName(name, newName) { return this.animations[name].setName(newName); }
+	setSpeed(name, speed) { return this.animations[name].setSpeed(speed); }
+	setNumberOfFrames(name, numberOfFrames) { return this.animations[name].setNumberOfFrames(numberOfFrames); }
+	setLoop(name, loop) { return this.animations[name].setLoop(loop); }
+
+	// Private
+	_update(deltaTime) {
+		if (this.paused) return;
+		if (this.currentAnimation) this.currentAnimation._update(deltaTime);
+	}
+}

src/GameObjects/Sprite/Sprite.js

@@ -3,6 +3,8 @@ import { CanvasStateInstance } from "../../State/CanvasState.js";
 import Rectangle from "../Rectangle/Rectangle.js";
 import Types from "../Types.js";
 
+import Animations from "./Animations.js";
+
 export default class Sprite extends Rectangle {
 	constructor(x, y, key, frame = 0, width = 0, height = 0) {
 		super(x, y, "#ffffff", "#000000");
@@ -11,13 +13,24 @@ export default class Sprite extends Rectangle {
 		this.width = width || AssetsManagerInstance.getSpriteSize(key).width;
 		this.height = height || AssetsManagerInstance.getSpriteSize(key).height;
 
+		this.animations = new Animations(this);
+
 		this._type = Types.sprite;
 	}
 
 	get x() { return this._x - this.width * this.origin.x * this.scale.x; } // Get the position X relative to the origin
 	get y() { return this._y - this.height * this.origin.y * this.scale.y; } // Get the position Y relative to the origin
 
-	_renderType() {
+	setFrame(frame) {
+		this.frame = frame;
+		return this;
+	}
+
+	getNumFramesByWidth() { return Math.floor(this.texture.width / this.width); }
+
+	// Private
+	_renderType(deltaTime) {
+		this.animations._update(deltaTime);
 		CanvasStateInstance.context.drawImage(
 			this.texture, // Image
 			this.frame * this.width, 0, // Source X, Source Y

src/Scenes/SceneManager.js

@@ -107,7 +107,7 @@ export default class SceneManager {
 
 		const zSortedChildren = this.currentScene.children.sort((a, b) => a.z - b.z);
 		zSortedChildren.forEach(child => {
-			if (child._render) child._render();
+			if (child._render) child._render(this.deltaTime);
 			if (GlobalStateManagerInstance.debug && child._debug) child._debug();
 		});