Create Your Own Level Editor: Part 1/3

In this tutorial, you’ll learn how to make a level editor for the Cut the Rope clone that was previously covered on this site. Using the level editor you can easily make new levels. All you have to do is drag and drop the ropes and pineapples to where you like them. By Barbara Reichart.

Leave a rating/review
Save for later
Share
You are currently viewing page 2 of 6 of this article. Click here to view the first page.

Setting ID and Damping Parameters for the Pineapples

Now the position handling is complete. But in addition to the position, you need to store the relationship between the pineapple and ropes. This is only possible if you can identify each pineapple uniquely. You can do this by giving each pineapple a unique ID, which you’ll store in the XML file.

Always make sure your pineapples know who they are.

Always make sure your pineapples know who they are.

Additionally, not all pineapples need to behave identically. In the tutorial where you created the game, you implemented the ability to adjust the “bounciness” of each pineapple by changing its damping factor. If you didn’t work through that tutorial — no worries! The links to that tutorial are at the beginning of this one, so head over and take a look.

However, if you have to manually set up each pineapple’s damping parameter, that’ll be a lot of work! You can avoid this by setting a default value that is reasonable in most cases. This will allow you to focus on the exceptions — the pineapples that don’t have the default bounciness value. Here you’ll use 0.3 as your default, which is the same default that was used in the game tutorial.

The XML representing a pineapple looks something like this:

<pineapple id="1" x="0.50" y="0.70"/>

As you can see, this represents a pineapple with ID 1 and level coordinates of (0.5, 0.7). The damping is not specified, which means that the default of 0.3 will be used.

Here’s a definition of a pineapple that does not use the default damping:

<pineapple id="2" x="0.50" y="1.00" damping="0.01"/>

Setting up Your Rope Parameters

Now it’s time to consider the storage requirements of the ropes. Each rope has two anchor points — a starting point and an ending point — which both need to be tied to either a pineapple or the background. So how do you reference the bodies to attach your rope?

Recall that the pineapples all have a unique ID — you can use this as one anchor point of your rope. But what if a rope is tied to the background? For this you can set the body ID attribute to -1; alternately, just leave the body attribute empty and use the background as the default value if one is not supplied.

Quick — what’s the position of a rope that’s tied to a pineapple? That’s easy — it’s the position of the pineapple. Therefore, you don’t need to store this anchor point’s position, as you can just reference the position of the pineapple instead.

The benefit of storing the position just once (and referencing it by pineapple ID) is that you avoid the conundrum of storing contradictory information in your XML file if the values are stored more than once — especially if you’re editing it by hand, which is where mistakes tend to happen.

However, the background is a really big area — in this case, you’ll need to store the exact position of the anchor. Again, store this endpoint of the rope using relative coordinates, just as you did with the pineapple.

You only need one last property to store all the details about your rope. You can tie a rope really tightly, or you can let it hang loosely between its two anchor points. This property is defined as “sagginess”. The higher the sagginess value, the looser your rope. The default value sagginess value will be 1.1.

Putting Your XML File Format Together

Putting all of the above elements together to form the XML for your rope information, you’ll have something very similar to the following:

 
<rope>
	<anchorA body="1"/>
   	<anchorB body="-1" x="0.85" y="0.80"/>
</rope>

At this point, you are almost done with designing the format of your level file. There’s only two things left to implement.

The first thing to handle is the XML version header that indicates the version of XML being used, as shown below:

 
<?xml version="1.0"?>

Now you just need a good name for your top-level root element in your XML file. So pick a nice, descriptive name for your root element — like level:

<level> </level>

Okay — here’s the final test for your XML file creation. Can you bring it all together? Using all of the elements that you have defined above, try to write the XML for the level used in the original Cut the Verlet tutorial. Try not to peek at the spoiler below! :]

[spoiler title=”XML file representing level from tutorial”]

<?xml version="1.0"?>
<level>
    <pineapple id="1" x="0.50" y="0.70"/>
    <pineapple id="2" x="0.50" y="1.00" damping="0.01"/>
    <rope>
        <anchorA body="-1" x="0.15" y="0.80"/>
        <anchorB body="1"/>
    </rope>
    <rope>
        <anchorA body="1"/>
        <anchorB body="-1" x="0.85" y="0.80"/>
    </rope>
    <rope>
        <anchorA body="1"/>
        <anchorB body="-1" x="0.83" y="0.60"/>
    </rope>
    <rope sagity="1.0">
        <anchorA body="-1" x="0.65" y="1.0"/>
        <anchorB body="2"/>
    </rope>
</level>

[/spoiler]

Before you move on, compare your XML file to the spoiler code above to make sure you haven’t missed anything!

Creating Your XML File Handler

Now that you’ve designed the XML format for your level, you’ll need a mechanism to handle the XML files that store your level’s data.

In this tutorial, you’ll use GDataXML for creating and parsing XML files in your project.

If you need specifics on how GDataXML works and how to set it up for your own projects, you can check out our tutorial How To Read and Write XML Documents with GDataXML.

Note: GDataXML isn’t the only player in the XML parser game. In fact, there’s another tutorial that compares GDataXML to other parsers available for iOS here: How To Choose The Best XML Parser for Your iPhone Project.

The starter project has already been set up to work with GDataXML.

The starter project contains an XML file, levels/level0.xml, with the same level data that was used in the game tutorial. You’ll load the level data from this file, instead of using the hard coded implementation in the original game.

Loading a file into your game and using its contents is not terribly difficult, but it does require several steps.

  1. First, you need to be able to locate and open the file.
  2. Second, you’ll need some model classes that mirror the contents of the file and will be used to temporarily store and access all the file’s information in memory.
  3. And finally, you’ll need to load and parse the XML file to put all of its information into those model classes!

Here’s how to implement your file handling methods, step-by-step.

Barbara Reichart

Contributors

Barbara Reichart

Author

Over 300 content creators. Join our team.