Early on into the development of Cut-it, i decided to make a custom level editor as3 for the game. Here’s how and why i did make one.

Before reading ..

i strongly suggest you to play the first flash version of the game to know what the white blocks, grey blocks, green blocks means and also the Super Cut it or Cut it for Android for the updated level editor version.

Play Cut it Flash Version

Play Super Cut it on Kong / Download Cut it from Playstore

 

Why make a level editor ?

The original cut it used a 32×24 pixel bmp image for its levels. A color dot in that image represents a block of some proportion in the game. I made several levels, a level pack to speak, by making such bitmaps. It was restricting in many ways and i decided to add custom functionality like rotation, non regular blocks, circular blocks etc.

What this level editor is not about

This level editor is made for this game only, not a general editor like a tile based editor etc. This level editor i made won’t be using any file formats like json or xml to save the level data, it just spits out the code i need to paste in the levels section. But similar method could be implemented using json and xml loading, if you prefer that way.

First things first. What you need out of Level editor

Well, in my case, i just needed a single level code class, defining each objects position, dimension etc. My ‘CutitLevel’ class looks like this.

package
{
	/**
	 * @author Faisal
	 */
	import nape.geom.Vec2;
	import nape.geom.Vec2List;
	
	public class CutitLevel
	{
		//white box details
		public var whiteBoxPos	:Vec2;
		public var whiteBoxDims	:Vec2;
		
		public var cutBoxPositions	:Vec2List = new Vec2List();
		public var cutBoxDims		:Vec2List = new Vec2List();
		public var cutBoxColors		:Array = [];
		
		public var greenBoxPositions:Vec2List = new Vec2List();
		public var greenBoxDims		:Vec2List = new Vec2List();
		
		public var greyBoxPositions	:Vec2List = new Vec2List();
		public var greyBoxDims		:Vec2List = new Vec2List();
		
		public var circlePositions	:Vec2List = new Vec2List();
		public var circleDims		:Vec2List = new Vec2List();
		
		public var isWindy		:Boolean = false;
		
		public function CutitLevel()
		{
		
		}
	}
}

In my Levels class, each level in an array is instanced like this

	LevelArray = [];
	var levelToAdd:CutitLevel = new CutitLevel();
	
	/////////////Level 1////////////////////////
	levelToAdd.whiteBoxPos = new Vec2(352, 155);
	levelToAdd.whiteBoxDims = new Vec2(45, 45);
	levelToAdd.cutBoxPositions.add(new Vec2(354, 190));
	levelToAdd.cutBoxDims.add(new Vec2(444, 26));
	
	levelToAdd.cutBoxColors = [2, 3];
	
	levelToAdd.greenBoxPositions.add(new Vec2(178, 200));
	levelToAdd.greenBoxPositions.add(new Vec2(500, 200));
	levelToAdd.greenBoxPositions.add(new Vec2(228, 400));
	levelToAdd.greenBoxDims.add(new Vec2(24, 24));
	levelToAdd.greenBoxDims.add(new Vec2(24, 24));
	levelToAdd.greenBoxDims.add(new Vec2(250, 24));
	
	LevelArray.push(levelToAdd);

What the first version of level editor did was

giving me the output code based on the drawings i made on the mainpage in a textbox (which looks like the above code). And i copy it and paste it on the level class. The UI components were made from the awesome ‘minimal components library’ by keith peters. The editor looks like below screenshot shows

Well, to make things more accessible, i loaded a jpg image with filename ‘level.jpg’ as a backdrop reference for me to draw on. So i made sketches, save it as level.jpg (using URLRequest) and start the editor, draw over them, changing blocks with Q & E keys. After level is done i press C, and the codebox will appear with code in it. I copy paste it and run it to test the level. There’s no undo, can’t edit when something is done. Plus I cannot preview how the level might behave, until i integrate them in the code. It was a bit hard. The whole 30 levels of first game was done like this.

Try the first editor if you like

What’s going on inside this level editor..

So the level editor working goes like this, for those who are curious.

1. Mousedown listeners are added to stage. Also Keydown listeners are also added.

2. On MouseDown, MouseMove, MouseUp event is added and a box sprite is updated according to mouse position and initial click position.

3. During MouseUp event the box sprite is drawn to the canvas bitmap data. Also code based on the active selection (selected using mousewheel or keys Q or E) is added as text top the text box.

Making it more awesome and flexible. Introducing Level editor Reloaded.

Let me start by the screenshot of the editor in action.

So several months after cut it was released, decided to make it for android. This time i decided to include more level customizations, modes and updated level editor.

 Checkout the Editor here

For the new expansion, I’ve decided to throw away previous level code and replace it with arrays. Now any level will looks like

/// Level 1 ///
newGameLevel = new CutitLevel();
				
newGameLevel.gravity.setxy(0, 400);
newGameLevel.greenBoxParams[newGameLevel.greenBoxParams.length]=[100,180,40,40,0,false];
newGameLevel.greenBoxParams[newGameLevel.greenBoxParams.length]=[700,180,40,40,0,false];
newGameLevel.cutBoxParams[newGameLevel.cutBoxParams.length]=[403.5,147,593,26,2,0];
newGameLevel.whiteBoxParams=[399,94,80,80,0,false];
newGameLevel.greenBoxParams[newGameLevel.greenBoxParams.length]=[401,442,400,84,0,false];
newGameLevel.batteryPos.setxy(400,440);
newGameLevel.batteryRotScale.setxy(0,1);
newGameLevel.coinPositions=[400,360,400,280,400,200];
classicLevelArray.push(newGameLevel);

The values in arrays are like, in the order, x y positions, width, height, angle, whether its a circle or not

Also integrated live playtesting to it. So that when i press Enter, i can play it and see what happens. And come back and change it and replay it. It is awesome.

In this version each object that gets added is treated as a separate gameobject. Each gameobjects holds information about its size and properties. When saving, i loop through the added game objects and generate the code and copy it to clipboard for pasting. Also saves a screenshot of the level, that might come in handy later. More details on that later.

File saving and file loading. Future plans

If you’re loading and saving a JSON file or an XML file, i guess the procedures are kind of same. Instead of generating the code, you just have to put the values directly as JSON file objects or XML markups.

Let me know if you need any clarifications in any part.

Cut it Devlog Series

Part I – The Beginning

Part II – The mechanism of Cutting

Part V – The As3 Level Editor

Part IX – Converting Starling to Native Flash