Merge pull request #51 from 201flaviosilva/41-engine-preload-function

41 engine preload function

src/Game.js

@@ -1,3 +1,4 @@
+import { AssetsManagerInstance } from "./State/AssetsManager.js";
 import { GlobalStateManagerInstance } from "./State/GlobalStateManager.js";
 import { CanvasStateInstance } from "./State/CanvasState.js";
 import SceneManager from "./Scenes/SceneManager.js";
@@ -13,9 +14,17 @@ export default class Game {
 		CanvasStateInstance.setCanvas(config.canvas);
 		CanvasStateInstance.setBackgroundColor(config.backgroundColor);
 
-		// Start Scene Manager
-		const sceneManager = new SceneManager();
-		sceneManager.addScene(config.scene);
-		sceneManager.startScene(0);
+		// Assets
+		new Promise((resolve, reject) => {
+			AssetsManagerInstance.load(config.assets).then(() => {
+
+				// Start Scene Manager
+				const sceneManager = new SceneManager();
+				sceneManager.addScene(config.scene);
+				sceneManager.startScene(0);
+
+				resolve();
+			}).catch(reject);
+		});
 	}
 }

src/GameObjects/AudioPlay/AudioPlay.js

@@ -0,0 +1,76 @@
+import { AssetsManagerInstance } from "../../State/AssetsManager.js";
+import { CanvasStateInstance } from "../../State/CanvasState.js";
+import Types from "../Types.js";
+
+export default class AudioPlay {
+	constructor(name, loop = true, paused = false, volume = CanvasStateInstance.volume, muted = false) {
+		this.name = name;
+		this.audio = AssetsManagerInstance.getAudio(name);
+		this.audio.volume = volume;
+		this.audio.loop = loop;
+		this.audio.muted = muted;
+
+		this.paused = paused;
+		this.volume = volume;
+		this.loop = loop;
+		this.muted = muted;
+
+		this._type = Types.audioPlay;
+
+		if (!this.paused) this.play();
+	}
+
+	play() {
+		this.audio.currentTime = 0;
+		this.audio.loop = this.loop;
+		this.audio.play();
+		return this;
+	}
+
+	playOnce() {
+		this.audio.currentTime = 0;
+		this.audio.loop = false;
+		this.audio.play();
+		return this;
+	}
+
+	pause() {
+		this.paused = true;
+		this.audio.pause();
+		return this;
+	}
+
+	resume() {
+		this.paused = false;
+		this.audio.loop = this.loop;
+		this.audio.play();
+		return this;
+	}
+
+	stop() {
+		this.audio.pause();
+		this.audio.currentTime = 0;
+		return this;
+	}
+
+	setVolume(volume) {
+		this.volume = volume;
+		this.audio.volume = volume;
+		return this;
+	}
+
+	setLoop(loop) {
+		this.loop = loop;
+		this.audio.loop = loop;
+		return this;
+	}
+
+	setMuted(muted) {
+		this.muted = muted;
+		this.audio.muted = muted;
+		return this;
+	}
+
+	isEnded() { return this.audio.ended; }
+	getDuration() { return this.audio.duration; }
+}

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/GameObjects.js

@@ -1,9 +1,11 @@
 // Draw
 import GameObjectBase from "./GameObjectBase.js";
+import AudioPlay from "./AudioPlay/AudioPlay.js";
 import Circle from "./Circle/Circle.js";
 import Line from "./Line/Line.js";
 import Polygon from "./Polygon/Polygon.js";
 import Rectangle from "./Rectangle/Rectangle.js";
+import Sprite from "./Sprite/Sprite.js";
 import Text from "./Text/Text.js";
 import Triangle from "./Triangle/Triangle.js";
 
@@ -19,10 +21,12 @@ export default class GameObjects {
 	constructor() {
 		// Basic GameObject
 		this.GameObjectBase = GameObjectBase;
+		this.AudioPlay = AudioPlay;
 		this.Circle = Circle;
 		this.Line = Line;
 		this.Polygon = Polygon;
 		this.Rectangle = Rectangle;
+		this.Sprite = Sprite;
 		this.Text = Text;
 		this.Triangle = Triangle;
 

src/GameObjects/Sprite/Animation.js

@@ -0,0 +1,62 @@
+export default class Animation {
+	constructor(parent, name, startFrame, numberOfFrames, speed, loop = true) {
+		this._parent = parent;
+		this.name = name;
+		this.startFrame = startFrame;
+		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;
+	}
+
+	setName(name) {
+		this.name = name;
+		return this;
+	}
+	setSpeed(speed) {
+		this.speed = speed;
+		return this;
+	}
+	setStartFrame(startFrame) {
+		this.startFrame = startFrame;
+		return this;
+	}
+	setNumberOfFrames(numberOfFrames) {
+		this.numberOfFrames = numberOfFrames;
+		return this;
+	}
+	setLoop(loop) {
+		this.loop = loop;
+		return this;
+	}
+
+	reset() {
+		this._currentFrame = 0;
+		this._currentTime = 0;
+		return this;
+	}
+
+	// Private
+	_update(deltaTime) {
+		this._currentTime += deltaTime * 100;
+
+		if (this._currentTime >= this.speed) {
+			this._currentTime -= this.speed;
+			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.startFrame + this._currentFrame);
+	}
+}

src/GameObjects/Sprite/Animations.js

@@ -0,0 +1,52 @@
+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, startFrame, speed = 100, loop = true) {
+		this.animations[name] = new Animation(this._parent, name, startFrame, numberOfFrames, speed, loop);
+		return this.get(name);
+	}
+
+	getAnimationsNames() { return Object.keys(this.animations); }
+
+	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

@@ -0,0 +1,42 @@
+import { AssetsManagerInstance } from "../../State/AssetsManager.js";
+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");
+		this.texture = AssetsManagerInstance.getSprite(key);
+		this.frame = frame;
+		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
+
+	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
+			this.width, this.height, // Source Width, Source Height
+			this.x, this.y, // Destination X, Destination Y
+			this.width, this.height  // Destination Width, Destination Height
+		);
+	}
+}

src/GameObjects/Text/Text.js

@@ -3,7 +3,7 @@ import { CanvasStateInstance } from "../../State/CanvasState.js";
 import Types from "../Types.js";
 
 export default class Text extends GameObject {
-	constructor(x, y, text = "", fillColor = "#ffffff", strokeColor = "#000000") {
+	constructor(x, y, text = "", fillColor = "#000000", strokeColor = "#ffffff") {
 		super(x, y, fillColor, strokeColor);
 		this.text = text;
 
@@ -18,6 +18,8 @@ export default class Text extends GameObject {
 		this.alignHorizontal = "left"; // left, center, right // textAlign
 		this.direction = "inherit"; // ltr, rtl, inherit
 
+		this.setStrokeWidth(0);
+
 		this._type = Types.text;
 	}
 

src/GameObjects/Types.js

@@ -1,8 +1,10 @@
 const Types = {
+	audioPlay: "AudioPlay",
 	circle: "Circle",
 	line: "Line",
 	polygon: "Polygon",
 	rectangle: "Rect",
+	sprite: "Sprite",
 	text: "Text",
 	triangle: "Triangle",
 }

src/Scenes/Scene.js

@@ -34,5 +34,5 @@ export default class Scene {
 
 	start() { }
 	update(delta) { }
-	posRender(ctx) { }
+	posRender(context) { }
 }

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();
 		});