Emanuele Feronato

Talking about Iromeku game, Actionscript 3, Flash and Game development.

Did you play Iromeku?

You have a game panel of a few colored squares and, using color affecting tiles, your objective is to change your panel to match that of the target.

I have to admit I did not like the game that much, it’s a bit difficult to play with colors rather than numbers, but I liked a lot the way you can change tiles with a cascade effect.

So i decided to code a little prototype to achieve the same effect, just in a clearer way.

The idea is simple: a Movieclip called Tile with a square and a dynamic text in it called valueText is created, then I am randomly placing ten of them on the stage. Every Tile object has two properties called defaultVal which represents its default value (a number from 0 to 9), and actualVal which is the actual value, at the beginning the same of default value.

package {
	import flash.display.Sprite;
	public class Main extends Sprite {
		public function Main() {
			for (var i:Number=0; i<10; i++) {
				var tile:Tile=new Tile();
				tile.defaultVal=i
				tile.actualVal=i;
				tile.valueText.text=i.toString();
				tile.x=Math.random()*500+70;
				tile.y=Math.random()*340+70;
				tile.buttonMode=true;
				tile.valueText.mouseEnabled=false;
				addChild(tile);
			}
		}
	}
}

This is the result:

Now, we just want a couple of listeners to be able to pick, drag and drop tiles. Picked tiles will be moved on top, this is very important for the gameplay:

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	public class Main extends Sprite {
		private var currentTile:Tile;
		public function Main() {
			for (var i:Number=0; i<10; i++) {
				var tile:Tile=new Tile();
				tile.defaultVal=i
				tile.actualVal=i;
				tile.valueText.text=i.toString();
				tile.x=Math.random()*500+70;
				tile.y=Math.random()*340+70;
				tile.buttonMode=true;
				tile.valueText.mouseEnabled=false;
				addChild(tile);
				tile.addEventListener(MouseEvent.MOUSE_DOWN,pickTile);
			}
		}
		private function pickTile(e:MouseEvent):void {
			currentTile=e.currentTarget as Tile;
			setChildIndex(currentTile,numChildren-1);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,moveTile);
			stage.addEventListener(MouseEvent.MOUSE_UP,dropTile);
		}
		private function moveTile(e:MouseEvent):void {
			currentTile.x=mouseX;
			currentTile.y=mouseY;
		}
		private function dropTile(e:MouseEvent):void {
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,moveTile);
			stage.removeEventListener(MouseEvent.MOUSE_UP,dropTile);
		}
	}
}

And this is the result, pick up and drag tiles

Now, the funniest part. Once a tile is over another tile, the upper tile value is added to the lower tile value. I am doing this only using Display List depth and hit tests:

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	public class Main extends Sprite {
		private var currentTile:Tile;
		public function Main() {
			for (var i:Number=0; i<10; i++) {
				var tile:Tile=new Tile();
				tile.defaultVal=i;
				tile.actualVal=i;
				tile.valueText.text=i.toString();
				tile.x=Math.random()*500+70;
				tile.y=Math.random()*340+70;
				tile.buttonMode=true;
				tile.valueText.mouseEnabled=false;
				addChild(tile);
				tile.addEventListener(MouseEvent.MOUSE_DOWN,pickTile);
			}
			updateValues();
		}
		private function pickTile(e:MouseEvent):void {
			currentTile=e.currentTarget as Tile;
			setChildIndex(currentTile,numChildren-1);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,moveTile);
			stage.addEventListener(MouseEvent.MOUSE_UP,dropTile);
		}
		private function moveTile(e:MouseEvent):void {
			currentTile.x=mouseX;
			currentTile.y=mouseY;
			updateValues();
		}
		private function dropTile(e:MouseEvent):void {
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,moveTile);
			stage.removeEventListener(MouseEvent.MOUSE_UP,dropTile);
		}
		private function updateValues():void {
			for (var i:Number=9; i>=0; i--) {
				var tile:Tile=getChildAt(i) as Tile;
				tile.actualVal=tile.defaultVal;
			}
			for (i=9; i>=0; i--) {
				tile=getChildAt(i) as Tile;
				for (var j:Number=i-1; j>=0; j--) {
					var underTile:Tile=getChildAt(j) as Tile;
					if (tile.hitTestObject(underTile)) {
						underTile.actualVal+=tile.actualVal;
					}
				}
				tile.valueText.text=tile.actualVal.toString();
			}
		}
	}
}

And this is the result: pick up, drag and drop tiles and see how their values change

Finding a decent gameplay for this prototype is up to you, anyway you can download the source code