Engine set origin for a game object

examples/FollowMouse/index.html

@@ -20,6 +20,7 @@ <h1>Impacto - Follow Mouse</h1>
 		class Game extends Impacto.Scene {
 			start() {
 				this.rectangle = new Impacto.GameObjects.Rectangle(400, 300, 50, 50, "#00ff00");
+				this.rectangle.setOrigin(0.5);
 				this.addChild(this.rectangle);
 			}
 
@@ -30,7 +31,7 @@ <h1>Impacto - Follow Mouse</h1>
 				// console.log(Impacto.Inputs.Mouse.getButtonKeyByName("right"));
 				// console.log(Impacto.Inputs.Mouse.isButtonDownByName("left"));
 				// console.log(Impacto.Inputs.Mouse.isButtonDownByButtonCode(2));
-				this.rectangle.setPosition(Impacto.Inputs.Mouse.getPosition().x - this.rectangle.width / 2, Impacto.Inputs.Mouse.getPosition().y - this.rectangle.height / 2);
+				this.rectangle.setPosition(Impacto.Inputs.Mouse.getPosition().x, Impacto.Inputs.Mouse.getPosition().y);
 			}
 		}
 

examples/RectangleOverlappingArea/index.html

@@ -20,12 +20,14 @@ <h1>Impacto - Rectangle Overlapping Area</h1>
 
 			start() {
 				this.rectMouse = new Impacto.GameObjects.PhysicsRectangle(350, 250, 50, 50, "#ff0000")
-					.setSize(Impacto.Utils.Math.randomInt(25, 200), Impacto.Utils.Math.randomInt(25, 200));
+					.setSize(Impacto.Utils.Math.randomInt(25, 200), Impacto.Utils.Math.randomInt(25, 200))
+					.setOrigin(0.5);
 				this.addChild(this.rectMouse);
 
 				this.rectStop = new Impacto.GameObjects.PhysicsRectangle(0, 0, 100, 100, "#0000ff");
 				this.rectStop.setSize(Impacto.Utils.Math.randomInt(25, 200), Impacto.Utils.Math.randomInt(25, 200));
-				this.rectStop.setPosition(400 - this.rectStop.width / 2, 300 - this.rectStop.height / 2);
+				this.rectStop.setPosition(400, 300);
+				this.rectStop.setOrigin(0.5);
 				this.addChild(this.rectStop);
 
 
@@ -34,21 +36,26 @@ <h1>Impacto - Rectangle Overlapping Area</h1>
 			}
 
 			update() {
-				// Random new sizes
+				// Random new sizes on Space down
 				if (Impacto.Inputs.KeyBoard.isKeyPressed(Impacto.Inputs.KeyBoard.keys.space)) {
 					this.rectStop.setSize(Impacto.Utils.Math.randomInt(25, 200), Impacto.Utils.Math.randomInt(25, 200));
-					this.rectStop.setPosition(400 - this.rectStop.width / 2, 300 - this.rectStop.height / 2);
+					this.rectStop.setPosition(400, 300);
 
 					this.rectMouse.setSize(Impacto.Utils.Math.randomInt(25, 200), Impacto.Utils.Math.randomInt(25, 200));
 				}
 
-				this.rectMouse.setPosition(Impacto.Inputs.Mouse.getPosition().x - this.rectMouse.width / 2, Impacto.Inputs.Mouse.getPosition().y - this.rectMouse.height / 2);
+				// Update Mouse Rectangle position
+				this.rectMouse.setPosition(Impacto.Inputs.Mouse.getPosition().x, Impacto.Inputs.Mouse.getPosition().y);
 
-				if (Impacto.Utils.CollisionDetection.overlapRectangleAndRectangle(this.rectMouse, this.rectStop)) {
+				// Update Area Collision
+				const rectMouseBounds = this.rectMouse.getBounds();
+				const rectStopBounds = this.rectStop.getBounds();
+				if (Impacto.Utils.CollisionDetection.overlapRectangleAndRectangle(rectMouseBounds, rectStopBounds)) {
 					this.rectMouse.setFillColor("#00ff00");
 					this.rectStop.setFillColor("#00ff00");
 
-					const collisionBoundsRect = Impacto.Utils.CollisionDetection.getBoundsOfTwoOverlappingRectangles(this.rectMouse, this.rectStop);
+					// Draw Collision Area
+					const collisionBoundsRect = Impacto.Utils.CollisionDetection.getBoundsOfTwoOverlappingRectangles(rectMouseBounds, rectStopBounds);
 					this.areaCollision.setPosition(collisionBoundsRect.x, collisionBoundsRect.y);
 					this.areaCollision.setSize(collisionBoundsRect.width, collisionBoundsRect.height);
 

rollup.config.js

@@ -2,13 +2,13 @@ import resolve from "rollup-plugin-node-resolve";
 import commonjs from "rollup-plugin-commonjs";
 import babel from "rollup-plugin-babel";
 
-const forder = "_ignore/Build/";
-// const forder = "dist/";
+// const folder = "_ignore/Build/";
+const folder = "dist/";
 const umd = {
-	input: forder + "Impacto.js",
+	input: "src/Impacto.js",
 	output: {
 		name: "Impacto",
-		file: forder + "Impacto.umd.js", // Universal Module Definition
+		file: folder + "Impacto.umd.js", // Universal Module Definition
 		format: "umd",
 	},
 	plugins: [
@@ -25,11 +25,11 @@ export default [
 	{
 		input: "src/Impacto.js",
 		output: [ // https://betterprogramming.pub/what-are-cjs-amd-umd-esm-system-and-iife-3633a112db62
-			{ file: forder + "Impacto.esm.js", format: "esm" }, // ES Module
-			{ file: forder + "Impacto.cjs.js", format: "cjs" }, // CommonJS
-			// { file: forder + "Impacto.amd.js", format: "amd" }, // Asynchronous Module Definition
-			// { file: forder + "Impacto.system.js", format: "system" }, // 
-			// { file: forder + "Impacto.iife.js", format: "iife" }, // IIFE (vanilla) probably useless
+			{ file: folder + "Impacto.esm.js", format: "esm" }, // ES Module
+			{ file: folder + "Impacto.cjs.js", format: "cjs" }, // CommonJS
+			// { file: folder + "Impacto.amd.js", format: "amd" }, // Asynchronous Module Definition
+			// { file: folder + "Impacto.system.js", format: "system" }, // 
+			// { file: folder + "Impacto.iife.js", format: "iife" }, // IIFE (vanilla) probably useless
 		],
 		plugins: [
 			babel({

src/GameObjects/Circle/Circle.js

@@ -6,6 +6,9 @@ export default class Circle extends GameObject {
 		super(x, y, fillColor, strokeColor);
 		this.radius = radius;
 	}
+
+	get x() { return this._x - this.radius * this.origin.x; } // Get the position X relative to the origin
+	get y() { return this._y - this.radius * this.origin.y; } // Get the position Y relative to the origin
 }
 
 Object.assign(Circle.prototype, CommonMethods);

src/GameObjects/Circle/CommonMethods.js

@@ -4,6 +4,7 @@ const CommonMethods = {
 	getRadius: function () { return this.radius; },
 	setRadius: function (radius) { this.radius = radius; },
 
+	// Positions Based in the origin
 	getTop: function () { return this.y - this.radius; },
 	getBottom: function () { return this.y + this.radius; },
 	getLeft: function () { return this.x - this.radius; },
@@ -12,6 +13,15 @@ const CommonMethods = {
 	getCenterX: function () { return this.x; },
 	getCenterY: function () { return this.y; },
 
+	// Get Real Positions
+	getRealTop: function () { return this._y - this.radius; },
+	getRealBottom: function () { return this._y + this.radius; },
+	getRealLeft: function () { return this._x - this.radius; },
+	getRealRight: function () { return this._x + this.radius; },
+
+	getRealCenterX: function () { return this._x; },
+	getRealCenterY: function () { return this._y; },
+
 	getBounds: function () { return { x: this.getLeft(), y: this.getTop(), width: this.radius * 2, height: this.radius * 2 }; },
 
 	// ----- Private methods -----

src/GameObjects/Circle/PhysicsCircle.js

@@ -9,6 +9,9 @@ export default class Circle extends GameObject {
 		this._type = "Circle";
 	}
 
+	get x() { return this._x - this.radius * this.origin.x; } // Get the position X relative to the origin
+	get y() { return this._y - this.radius * this.origin.y; } // Get the position Y relative to the origin
+
 	_debugBody() {
 		if (!this.active) return;
 		CanvasInstance.context.fillStyle = "rgba(0, 0, 0, 0)";

src/GameObjects/GameObjectBase.js

@@ -7,10 +7,11 @@ export default class GameObject {
 		this.name = `Obj - ${this.id}`;
 
 		// Render
-		this.x = x;
-		this.y = y;
+		this._x = x; // Get the real position X
+		this._y = y; // Get the real position Y
 		this.z = 0;
-		this.lastPosition = { x: this.x, y: this.y, z: this.z };
+		this.lastPosition = { x: this._x, y: this._y, z: this.z };
+		this.origin = { x: 0, y: 0 };
 		this.fillColor = fillColor;
 		this.strokeColor = strokeColor;
 		this.visible = true;
@@ -24,24 +25,25 @@ export default class GameObject {
 	// Render
 	// Position
 	setX(x) {
-		this.setPosition(x, this.y, this.z);
+		this.setPosition(x, this._y, this.z);
 		return this;
 	}
 	setY(y) {
-		this.setPosition(this.x, y, this.z);
+		this.setPosition(this._x, y, this.z);
 		return this;
 	}
 	setZ(z) {
-		this.setPosition(this.x, this.y, z);
+		this.setPosition(this._x, this._y, z);
 		return this;
 	}
 	getPosition() { return { x: this.x, y: this.y, z: this.z }; }
+	getRealPosition() { return { x: this._x, y: this._y, z: this.z }; }
 	setPosition(x, y, z = this.z, force = false) {
 		if (this.bodyType === "S" && !force) return;
 		this.lastPosition = { x: this.x, y: this.y, z: this.z };
 
-		this.x = x;
-		this.y = y;
+		this._x = x;
+		this._y = y;
 		this.z = z;
 		return this;
 	}
@@ -55,6 +57,20 @@ export default class GameObject {
 		return this;
 	}
 
+	// Origin
+	setOriginX(x) {
+		this.setOrigin(x, this.origin.y);
+		return this;
+	}
+	setOriginY(y) {
+		this.setOrigin(this.origin.x, y);
+		return this;
+	}
+	setOrigin(x = 0, y = x) {
+		this.origin = { x, y };
+		return this;
+	}
+
 	getCenter() { return { x: this.getCenterX(), y: this.getCenterY() }; }
 
 	getTopLeft() { return { x: this.getLeft(), y: this.getTop() }; }
@@ -65,8 +81,8 @@ export default class GameObject {
 	getBottomCenter() { return { x: this.getCenterX(), y: this.getBottom() }; }
 	getBottomRight() { return { x: this.getRight(), y: this.getBottom() }; }
 
-	getLeftCenter() { return { x: this.getLeft(), y: this.getCenterY() }; }
-	getRightCenter() { return { x: this.getRight(), y: this.getCenterY() }; }
+	getCenterLeft() { return { x: this.getLeft(), y: this.getCenterY() }; }
+	getCenterRight() { return { x: this.getRight(), y: this.getCenterY() }; }
 
 	// Color
 	setFillColor(fillColor) {

src/GameObjects/PhysicsGameObject.js

@@ -158,8 +158,8 @@ export default class PhysicsGameObject extends GameObject {
 		);
 
 		this.setPosition(
-			this.x + this.velocity.x * SceneManagerInstance.deltaTime,
-			this.y + this.velocity.y * SceneManagerInstance.deltaTime
+			this._x + this.velocity.x * SceneManagerInstance.deltaTime,
+			this._y + this.velocity.y * SceneManagerInstance.deltaTime
 		);
 	}
 

src/GameObjects/Rectangle/CommonMethods.js

@@ -1,14 +1,23 @@
 import { CanvasInstance } from "../../Utils/Canvas.js";
 
 const CommonMethods = {
-	// Get Positions
+	// Positions Based in the origin
 	getTop: function () { return this.y; },
 	getBottom: function () { return this.y + this.height; },
 	getLeft: function () { return this.x; },
 	getRight: function () { return this.x + this.width; },
 
-	getCenterX: function () { return this.x + this.width / 2; },
-	getCenterY: function () { return this.y + this.height / 2; },
+	getCenterX: function () { return this.getLeft() + this.width / 2; },
+	getCenterY: function () { return this.getTop() + this.height / 2; },
+
+	// Get Real Positions
+	getRealTop: function () { return this._y; },
+	getRealBottom: function () { return this._y + this.height; },
+	getRealLeft: function () { return this._x; },
+	getRealRight: function () { return this._x + this.width; },
+
+	getRealCenterX: function () { return this.getRealLeft() + this.width / 2; },
+	getRealCenterY: function () { return this.getRealTop() + this.height / 2; },
 
 	// Size
 	setWidth: function (width) {
@@ -25,8 +34,18 @@ const CommonMethods = {
 		this.height = height;
 		return this;
 	},
+
+	// Update position and size of the rectangle (used mostly in static objects)
+	refresh: function (x, y, width, height) {
+		this.setPosition(x, y, this.z, true);
+		this.setSize(width, height, true);
+		return this;
+	},
+
+	// Utils
 	getBounds: function () { return { x: this.getLeft(), y: this.getTop(), width: this.width, height: this.height }; },
 	getArea: function () { return this.width * this.height; },
+	getPerimeter: function () { return 2 * (this.width + this.height); },
 	getVertices: function () {
 		return [
 			{ x: this.x, y: this.y },
@@ -36,13 +55,6 @@ const CommonMethods = {
 		];
 	},
 
-	// Update position and size of the rectangle (used mostly in static objects)
-	refresh: function (x, y, width, height) {
-		this.setPosition(x, y, this.z, true);
-		this.setSize(width, height, true);
-		return this;
-	},
-
 	// ----- Private methods -----
 	_renderType: function () {
 		CanvasInstance.context.fillRect(this.x, this.y, this.width, this.height);

src/GameObjects/Rectangle/PhysicsRectangle.js

@@ -9,8 +9,13 @@ export default class Rectangle extends PhysicsGameObject {
 		this.height = height;
 
 		this._type = "Rect";
+
+		this.setOrigin(0);
 	}
 
+	get x() { return this._x - this.width * this.origin.x; } // Get the position X relative to the origin
+	get y() { return this._y - this.height * this.origin.y; } // Get the position Y relative to the origin
+
 	// ----- Private methods -----
 	_debugBody() {
 		CanvasInstance.context.fillStyle = "rgba(0, 0, 0, 0)";

src/GameObjects/Rectangle/Rectangle.js

@@ -6,7 +6,12 @@ export default class Rectangle extends GameObject {
 		super(x, y, fillColor, strokeColor);
 		this.width = width;
 		this.height = height;
+
+		this.setOrigin(0);
 	}
+
+	get x() { return this._x - this.width * this.origin.x; } // Get the position X relative to the origin
+	get y() { return this._y - this.height * this.origin.y; } // Get the position Y relative to the origin
 }
 
 Object.assign(Rectangle.prototype, CommonMethods);