[Engine]: Rotate Game Object #33

#33
#33

src/GameObjects/GameObjectBase.js

@@ -1,4 +1,5 @@
 import { CanvasStateInstance } from "../State/CanvasState.js";
+import { UtilsMathInstance } from "../Utils/Math.js";
 
 export default class GameObject {
 	constructor(x, y, fillColor, strokeColor) {
@@ -9,6 +10,8 @@ export default class GameObject {
 		this._x = x; // Get the real position X
 		this._y = y; // Get the real position Y
 		this.z = 0;
+		this.rotation = 0; // Rotation in radians
+		this.angle = 0; // Rotation in degrees
 		this.lastPosition = { x: this._x, y: this._y, z: this.z };
 		this.origin = { x: 0, y: 0 };
 		this.fillColor = fillColor;
@@ -56,6 +59,19 @@ export default class GameObject {
 		return this;
 	}
 
+	// Rotation and angle
+	setRotation(rotation) {
+		this.rotation = rotation;
+		this.angle = UtilsMathInstance.radiansToDegrees(rotation);
+		return this;
+	}
+
+	setAngle(angle) {
+		this.angle = angle;
+		this.rotation = UtilsMathInstance.degreesToRadians(angle);
+		return this;
+	}
+
 	// Origin
 	setOriginX(x) {
 		this.setOrigin(x, this.origin.y);
@@ -106,9 +122,17 @@ export default class GameObject {
 	_render() {
 		if (!this.visible) return;
 
+		CanvasStateInstance.context.save();
+
+		CanvasStateInstance.context.translate(this._x, this._y);
+		CanvasStateInstance.context.rotate(this.rotation);
+		CanvasStateInstance.context.translate(-this._x, -this._y);
+
 		CanvasStateInstance.context.fillStyle = this.fillColor;
 		CanvasStateInstance.context.strokeStyle = this.strokeColor;
 		CanvasStateInstance.context.lineWidth = this.strokeWidth;
 		this._renderType();
+
+		CanvasStateInstance.context.restore();
 	}
 }

src/GameObjects/Polygon/Polygon.js

@@ -80,7 +80,6 @@ export default class Polygon extends GameObject {
 	_renderType() {
 		if (this.vertices.length === 0) return;
 
-		CanvasStateInstance.context.save();
 		CanvasStateInstance.context.translate(this.x, this.y);
 
 		CanvasStateInstance.context.beginPath();
@@ -93,7 +92,5 @@ export default class Polygon extends GameObject {
 
 		CanvasStateInstance.context.stroke();
 		CanvasStateInstance.context.fill();
-
-		CanvasStateInstance.context.restore();
 	}
 }

src/GameObjects/Text/Options.js

@@ -0,0 +1,46 @@
+const TextOptions = {
+	font: {
+		style: {
+			normal: "normal",
+			italic: "italic",
+			oblique: "oblique",
+		},
+		variant: {
+			normal: "normal",
+			smallCaps: "small-caps",
+		},
+		weight: {
+			normal: "normal",
+			bold: "bold",
+			bolder: "bolder",
+			lighter: "lighter",
+		},
+		family: {
+			Arial: "Arial",
+			Verdana: "Verdana",
+			TimesNewRoman: "Times New Roman",
+			CourierNew: "Courier New",
+			serif: "serif",
+			sansSerif: "sans-serif",
+		}
+	},
+	align: {
+		vertical: {
+			top: "top",
+			middle: "middle",
+			bottom: "bottom",
+		},
+		horizontal: {
+			left: "left",
+			center: "center",
+			right: "right",
+		},
+	},
+	direction: {
+		ltr: "ltr",
+		rtl: "rtl",
+		inherit: "inherit",
+	},
+};
+
+export default TextOptions;

src/GameObjects/Text/Text.js

@@ -50,55 +50,6 @@ export default class Text extends GameObject {
 	getRealCenterX() { return this._x + this.width / 2; }
 	getRealCenterY() { return this._y + this.height / 2; }
 
-	getOptions() {
-		const opt = {
-			font: {
-				style: {
-					normal: "normal",
-					italic: "italic",
-					oblique: "oblique",
-				},
-				variant: {
-					normal: "normal",
-					smallCaps: "small-caps",
-				},
-				weight: {
-					normal: "normal",
-					bold: "bold",
-					bolder: "bolder",
-					lighter: "lighter",
-				},
-				family: {
-					Arial: "Arial",
-					Verdana: "Verdana",
-					TimesNewRoman: "Times New Roman",
-					CourierNew: "Courier New",
-					serif: "serif",
-					sansSerif: "sans-serif",
-				}
-			},
-			align: {
-				vertical: {
-					top: "top",
-					middle: "middle",
-					bottom: "bottom",
-				},
-				horizontal: {
-					left: "left",
-					center: "center",
-					right: "right",
-				},
-			},
-			direction: {
-				ltr: "ltr",
-				rtl: "rtl",
-				inherit: "inherit",
-			},
-		};
-
-		return opt;
-	}
-
 	getWords() { return this.text.split(" "); }
 	getWordsNumber() { return this.getWords().length; }
 	getCharacters() { return this.text.split(""); }
@@ -165,8 +116,6 @@ export default class Text extends GameObject {
 
 	// Private
 	_renderType() {
-		CanvasStateInstance.context.save();
-
 		CanvasStateInstance.context.textBaseline = this.alignVertical;
 		CanvasStateInstance.context.textAlign = this.alignHorizontal;
 		CanvasStateInstance.context.direction = this.direction;
@@ -175,7 +124,5 @@ export default class Text extends GameObject {
 
 		CanvasStateInstance.context.fillText(this.text, this.x, this.y);
 		CanvasStateInstance.context.strokeText(this.text, this.x, this.y);
-
-		CanvasStateInstance.context.restore();
 	}
 }