/**** 
* Classes
****/ 
// SplitSquare: A square that can be split into two, then each half can be split again
var SplitSquare = Container.expand(function () {
	var self = Container.call(this);
	// State: 0 = whole, 1 = split in 2, 2 = split in 4
	self.splitState = 0;
	// Store child pieces for later reference
	self.pieces = [];
	// Add the initial whole square
	var whole = self.attachAsset('splitSquare1', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	self.pieces.push(whole);
	// Helper to clear all pieces
	self.clearPieces = function () {
		for (var i = 0; i < self.pieces.length; i++) {
			if (self.pieces[i] && self.pieces[i].parent) {
				self.pieces[i].parent.removeChild(self.pieces[i]);
			}
		}
		self.pieces = [];
	};
	// Split into 2 pieces (vertical split)
	self.splitInTwo = function () {
		self.clearPieces();
		// Use the actual width of the splitSquare2 asset for perfect alignment
		var pieceW = LK.getAsset('splitSquare2', {
			anchorX: 0.5,
			anchorY: 0.5
		}).width;
		var left = self.attachAsset('splitSquare2', {
			anchorX: 1,
			anchorY: 0.5,
			x: -pieceW / 2,
			y: 0
		});
		var right = self.attachAsset('splitSquare2', {
			anchorX: 0,
			anchorY: 0.5,
			x: pieceW / 2,
			y: 0
		});
		self.pieces.push(left, right);
		self.splitState = 1;
	};
	// Split into 4 pieces (each half split horizontally)
	self.splitInFour = function () {
		self.clearPieces();
		// Use the actual width/height of the splitSquare3/4 assets for perfect alignment
		var pieceW = LK.getAsset('splitSquare3', {
			anchorX: 0.5,
			anchorY: 0.5
		}).width;
		var pieceH = LK.getAsset('splitSquare3', {
			anchorX: 0.5,
			anchorY: 0.5
		}).height;
		// Top-left
		var tl = self.attachAsset('splitSquare3', {
			anchorX: 1,
			anchorY: 1,
			x: -pieceW / 2,
			y: -pieceH / 2
		});
		// Bottom-left
		var bl = self.attachAsset('splitSquare4', {
			anchorX: 1,
			anchorY: 0,
			x: -pieceW / 2,
			y: pieceH / 2
		});
		// Top-right
		var tr = self.attachAsset('splitSquare3', {
			anchorX: 0,
			anchorY: 1,
			x: pieceW / 2,
			y: -pieceH / 2
		});
		// Bottom-right
		var br = self.attachAsset('splitSquare4', {
			anchorX: 0,
			anchorY: 0,
			x: pieceW / 2,
			y: pieceH / 2
		});
		self.pieces.push(tl, bl, tr, br);
		self.splitState = 2;
	};
	// Handle click/tap to split
	self.down = function (x, y, obj) {
		if (self.splitState === 0) {
			self.splitInTwo();
		} else if (self.splitState === 1) {
			self.splitInFour();
		}
	};
	return self;
});

/**** 
* Initialize Game
****/ 
// Add a SplitSquare to the center of the game
var game = new LK.Game({
	backgroundColor: 0xffffff
});

/**** 
* Game Code
****/ 
// Add a SplitSquare to the center of the game
var splitSquare = new SplitSquare();
splitSquare.x = 2048 / 2;
splitSquare.y = 2732 / 2;
game.addChild(splitSquare);

===================================================================
--- original.js
+++ change.js
@@ -27,57 +27,67 @@
 	};
 	// Split into 2 pieces (vertical split)
 	self.splitInTwo = function () {
 		self.clearPieces();
-		// Left half
+		// Use the actual width of the splitSquare2 asset for perfect alignment
+		var pieceW = LK.getAsset('splitSquare2', {
+			anchorX: 0.5,
+			anchorY: 0.5
+		}).width;
 		var left = self.attachAsset('splitSquare2', {
 			anchorX: 1,
 			anchorY: 0.5,
-			x: -whole.width / 4,
+			x: -pieceW / 2,
 			y: 0
 		});
-		// Right half
 		var right = self.attachAsset('splitSquare2', {
 			anchorX: 0,
 			anchorY: 0.5,
-			x: whole.width / 4,
+			x: pieceW / 2,
 			y: 0
 		});
 		self.pieces.push(left, right);
 		self.splitState = 1;
 	};
 	// Split into 4 pieces (each half split horizontally)
 	self.splitInFour = function () {
 		self.clearPieces();
-		var offset = whole.width / 4;
-		var halfH = whole.height / 4;
+		// Use the actual width/height of the splitSquare3/4 assets for perfect alignment
+		var pieceW = LK.getAsset('splitSquare3', {
+			anchorX: 0.5,
+			anchorY: 0.5
+		}).width;
+		var pieceH = LK.getAsset('splitSquare3', {
+			anchorX: 0.5,
+			anchorY: 0.5
+		}).height;
 		// Top-left
 		var tl = self.attachAsset('splitSquare3', {
 			anchorX: 1,
 			anchorY: 1,
-			x: -offset,
-			y: -halfH
+			x: -pieceW / 2,
+			y: -pieceH / 2
 		});
 		// Bottom-left
 		var bl = self.attachAsset('splitSquare4', {
 			anchorX: 1,
 			anchorY: 0,
-			x: -offset,
-			y: halfH
+			x: -pieceW / 2,
+			y: pieceH / 2
 		});
 		// Top-right
 		var tr = self.attachAsset('splitSquare3', {
 			anchorX: 0,
 			anchorY: 1,
-			x: offset,
-			y: -halfH
+			x: pieceW / 2,
+			y: -pieceH / 2
 		});
 		// Bottom-right
 		var br = self.attachAsset('splitSquare4', {
 			anchorX: 0,
 			anchorY: 0,
-			x: offset,
-			y: halfH
+			x: pieceW / 2,
+			y: pieceH / 2
 		});
 		self.pieces.push(tl, bl, tr, br);
 		self.splitState = 2;
 	};