So, first things first - the requirements. Early on in the design process we knew that we wanted a game with beautiful themed levels that didn't have a tiled look. We felt that this tiled look was usually due to excessive re-use of small tileable graphics, or regular grid-based placement of graphics. However, we also knew that to keep the overall size of our image assets low, we were going to have to employ some kind of tiling technique.
After checking out free products like TileStudio, tIDE, Tiled, and Mappy, we found that we had complaints with them all. All were inherently grid-based, which is kind of what one would expect from 2D tile-based map editors. We were interested in some kind of editor that would provide a more free-form method of placing tiles. What we really wanted was something like the level editor used in Aquaria (seen in this video).
TileStudio and tIDE provided the ability to include collision shape information in the level, which was very appealing, but it too was heavily based on the grid, and we were hoping to be able to define collision geometry in a manner that was completely independently from the graphical tiles.
Since MassHabit's artist Mike was already planning on using Illustrator to produce the majority of the art for the game, we decided to explore using Illustrator as our sole level editing tool. To create a level, we would simply save an Illustrator document in .svg format, and ensure that it only contained references to external graphics (rather than defining vector graphics directly in the document). To do this, we simply saved the document as an SVG 1.1 file and in the SVG Options dialog, we chose the setting to "link" images rather than "embed" them. The resulting file was a reasonably concise, hierarchal description of the scene that we had composed in Illustrator.
Here's an example of what the tutorial scene from Squibble looks like in Illustrator, and the SVG necessary to describe it:
 |
| Squibble's tutorial scene as viewed in Illustrator |
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1500px" height="1500px" viewBox="0 0 1500 1500" enable-background="new 0 0 1500 1500" xml:space="preserve"> <g id="platforms"> <image overflow="visible" enable-background="new " width="135" height="108" xlink:href="lab/platform_single2.png" transform="matrix(1 0 0 1 1293.8613 635.3711)"> </image> <image overflow="visible" enable-background="new " width="135" height="108" xlink:href="lab/platform_end1.png" transform="matrix(1 0 0 1 986.8613 544.3711)"> </image> <image overflow="visible" enable-background="new " width="135" height="108" xlink:href="lab/platform_end2.png" transform="matrix(1 0 0 1 581.8613 544.3711)"> </image> <image overflow="visible" enable-background="new " width="135" height="108" xlink:href="lab/platform_mid1.png" transform="matrix(1 0 0 1 716.8613 544.3711)"> </image> <image overflow="visible" enable-background="new " width="135" height="108" xlink:href="lab/platform_mid2.png" transform="matrix(1 0 0 1 851.8613 544.3711)"> </image> </g> <g id="collision"> <rect x="338.862" y="236" fill="#13FF00" stroke="#000000" stroke-width="1.5" width="1848.138" height="151.745"/> <rect x="338.862" y="885.115" fill="#13FF00" stroke="#000000" stroke-width="1.5" width="1848.138" height="320.65"/> <rect x="338.862" y="236" fill="#13FF00" stroke="#000000" stroke-width="1.5" width="200.581" height="954.769"/> <rect x="1996.885" y="236" fill="#13FF00" stroke="#000000" stroke-width="1.5" width="190.115" height="954.769"/> <rect x="600" y="560.243" fill="#13FF00" stroke="#000000" stroke-width="1.5" width="502.5" height="75"/> <rect x="1312.564" y="651.244" fill="#13FF00" stroke="#000000" stroke-width="1.5" width="97.5" height="75"/> </g> </svg>
Ok, so it's not the most beautiful thing in the world (it IS xml after all...), but it contains all the information we need to recreate this scene in the game. The layer structure from Illustrator is maintained by using group elements (<g>). So we've got one layer that contains a few block graphics, each with its position defined in the transform attribute. The second layer defines the collision geometry for the scene, using simple rectangles. Sure, there's lots of attributes that we don't care about, but all in all, it's pretty usable.
In the screenshot above, the collision rectangles protrude off the canvas to the right. The reason for this was that the game constrains the camera to the canvas area, and in this particular scene, Squibble was meant to shoot off to the right, out of the view of the camera. Typical levels would be mostly contained in the viewable canvas region.
The next step was to write some loading code that would open this SVG file and parse it into a form that could be rendered by the game. Now, the game programmers among you have probably been thinking "scene graph" ever since I wrote "hierarchal description of the scene" several paragraphs ago. Well, you're more or less correct, the code would load this SVG description into a scene graph of sorts. For those of you who are unfamiliar with scene graphs, they're just a hierarchal tree used to store game objects. This tree can be "walked" at runtime to update or render the game objects (see Wikipedia on Scene Graphs).
There is, however, a catch. A typical scene graph would have transformations at each node of the tree that are concatenated as the tree is descended. But the SVG files that Illustrator produces don't have transformations at each node - they only have a single transformation at each leaf of the tree. This fact turned out to be only mildly inconvenient for our game, as most the the level trees are very flat. That is, they tend to consist of sibling groups of leaf nodes, as in the example above. In fact, since the leaf node transforms stored in the SVG are absolute (and not relative to the parent, like in most scene graphs), we can more quickly traverse the tree, since we do not have to concatenate transforms along the way.
Once the loading code could parse an SVG scene into a scene graph of drawable entities, the next step was to figure out how this SVG format could be changed to include some game meta data. For instance, Squibble required that some collision geometry would damage the player, and other collision geometry would not. This was easily solved by putting our collision geometry on different layers in the Illustrator document and assigning a special name to each layer that would indicate it's purpose. These layer names in Illustrator show up as the group ids in the SVG.
Here's an SVG fragment defining two different types of collision geometry:
<g id="collision"> <rect x="338.862" y="236" fill="#13FF00" stroke="#000000" stroke-width="1.5" width="1848.138" height="151.745"/> <rect x="338.862" y="885.115" fill="#13FF00" stroke="#000000" stroke-width="1.5" width="1848.138" height="320.65"/> </g> <g id="hurty"> <rect x="1996.885" y="236" fill="#13FF00" stroke="#000000" stroke-width="1.5" width="190.115" height="954.769"/> </g>
Aside from static renderable objects, the game would need to define and place more complex entities like enemies, and even the player himself. For these entities, we wanted to keep many of their properties defined in the level file so that they could easily be tweaked from Illustrator. The easiest way we could find to attach arbitrary data to an SVG element was by sneaking it into the onclick attribute. In Illustrator, you can open up the "SVG Interactivity" window, and this will allow you to set the Javascript code for various events on the currently selected object. We didn't use Javascript syntax, but instead filled the onclick event with a simple css-like variable definition language. For instance, below we define an enemy (a parrot actually) that follows a curved path:
<image overflow="visible" enable-background="new " width="120" height="120" id="npc2" xlink:href="npcs/parrot/parrot0001.png" onclick="type: parrot; path: path_npc3;" transform="matrix(1 0 0 1 1102 1287)"></image> <path id="path_npc3" fill="none" stroke="#000000" stroke-width="1.5" d="M2560,732c-202.5,75-297-37.5-568.5,21c-232.891,50.181-282-277.5-439.5-253.5"/>
Notice the onclick attribute of the <image> element. It contains two variables: The first tells the loading code which class should actually be instantiated to represent this entity, and the second variable says that this entity should follow the path with id="path_npc3". When the enemy is initialized prior to the game starting, it will retrieve the path with this id and make the enemy move along it.
Several more onclick variables were necessary in order to implement the various features of Squibble, but it was typically very fast and easy to add support for them.
I'll leave you with a screenshot and the complete SVG file for the first forest level of Squibble:
 |
| Forest 1, as viewed in Illustrator |
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="3000px" height="2250px" viewBox="0 0 3000 2250" enable-background="new 0 0 3000 2250" xml:space="preserve"> <g id="background-2" onclick="parallax_x: 0.1f;"> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_1.png" transform="matrix(1 0 0 1 -375 1535)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_2.png" transform="matrix(1 0 0 1 -375 1085)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_3.png" transform="matrix(1 0 0 1 -375 635)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_4.png" transform="matrix(1 0 0 1 -375 185)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_5.png" transform="matrix(1 0 0 1 -375 -265)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_1.png" transform="matrix(1 0 0 1 825 1535)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_2.png" transform="matrix(1 0 0 1 825 1085)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_3.png" transform="matrix(1 0 0 1 825 635)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_4.png" transform="matrix(1 0 0 1 825 185)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_5.png" transform="matrix(1 0 0 1 825 -265)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_1.png" transform="matrix(1 0 0 1 2025 1535)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_2.png" transform="matrix(1 0 0 1 2025 1085)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_3.png" transform="matrix(1 0 0 1 2025 635)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_4.png" transform="matrix(1 0 0 1 2025 185)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_5.png" transform="matrix(1 0 0 1 2025 -265)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_1.png" transform="matrix(1 0 0 1 3225 1535)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_2.png" transform="matrix(1 0 0 1 3225 1085)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_3.png" transform="matrix(1 0 0 1 3225 635)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_4.png" transform="matrix(1 0 0 1 3225 185)"> </image> <image overflow="visible" enable-background="new " width="1200" height="450" xlink:href="forest/background_5.png" transform="matrix(1 0 0 1 3225 -265)"> </image> </g> <g id="midground"> <image overflow="visible" enable-background="new " width="675" height="375" xlink:href="forest/ground.png" transform="matrix(1 0 0 1 -375.001 1920)"> </image> <image overflow="visible" enable-background="new " width="675" height="375" xlink:href="forest/ground.png" transform="matrix(1 0 0 1 299.999 1920)"> </image> <image overflow="visible" enable-background="new " width="675" height="375" xlink:href="forest/ground.png" transform="matrix(1 0 0 1 975 1920)"> </image> <image overflow="visible" enable-background="new " width="675" height="375" xlink:href="forest/ground.png" transform="matrix(1 0 0 1 1649.998 1920)"> </image> <image overflow="visible" enable-background="new " width="675" height="375" xlink:href="forest/ground.png" transform="matrix(1 0 0 1 2324.998 1920)"> </image> <image overflow="visible" enable-background="new " width="675" height="375" xlink:href="forest/ground.png" transform="matrix(1 0 0 1 2999.998 1920)"> </image> <image overflow="visible" enable-background="new " width="20" height="102" xlink:href="common/exit-sign/exit-sign-post.png" transform="matrix(-0.975 0 0 -1 2732.9971 1777.5)"> </image> <image overflow="visible" enable-background="new " width="120" height="120" xlink:href="common/exit-sign/exit-sign0001.png" onclick="animationfile: common/exit-sign/anim.def;" transform="matrix(1 0 0 1 2681.998 1704.4043)"> </image> </g> <g id="platforms"> <image overflow="visible" enable-background="new " width="42" height="177" xlink:href="common/sign-post.png" transform="matrix(7.549790e-008 -1 1 7.549790e-008 1386.9956 1767.001)"> </image> <image overflow="visible" enable-background="new " width="122" height="99" xlink:href="common/sign-arrow.png" transform="matrix(-4.371139e-008 -1 1 -4.371139e-008 1373.9995 1800)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(-1 0 0 1 258.001 934.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(1 0 0 1 1474 1709)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end3.png" transform="matrix(-1 0 0 1 1744.001 1708.999)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(-1 0 0 1 544 591.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(-1 0 0 1 987.001 1098.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(-1 0 0 1 315 171.9995)"> </image> <image overflow="visible" enable-background="new " width="102" height="75" xlink:href="forest/column-base.png" transform="matrix(1 0 0 1 2325 2013)"> </image> <image overflow="visible" enable-background="new " width="102" height="75" xlink:href="forest/column-base.png" transform="matrix(1 0 0 1 2979 2013)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end3.png" transform="matrix(1 0 0 1 1083 885)"> </image> <image overflow="visible" enable-background="new " width="42" height="177" xlink:href="common/sign-post.png" transform="matrix(1.192488e-008 1 -1 1.192488e-008 1082.5 1080)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end3.png" transform="matrix(1 0 0 1 367 1099)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(-1 0 0 1 2282.001 1108.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end3.png" transform="matrix(1 0 0 1 2012 1109)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(-1 0 0 1 2780.001 1593.999)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end3.png" transform="matrix(1 0 0 1 2510 1594)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(1 0 0 1 274 592)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(1 0 0 1 637 1099)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(1 0 0 1 -90.002 172)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid3.png" transform="matrix(1 0 0 1 4 592)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid3.png" transform="matrix(0.5926 0 0 1 772 1099)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 4.001 591.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 274.001 591.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(1 0 0 1 -12 935)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 -11.999 934.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(-1 0 0 1 514 1597.999)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(1 0 0 1 244 1598)"> </image> <image overflow="visible" enable-background="new " width="122" height="99" xlink:href="common/sign-arrow.png" transform="matrix(-4.371139e-008 -1 1 -4.371139e-008 992.9995 1133)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid3.png" transform="matrix(1 0 0 1 -26 1598)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 244.001 1597.999)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(1 0 0 1 2332 1369)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(-1 0 0 1 2602.001 1368.999)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid3.png" transform="matrix(-1 0 0 1 2872.001 1368.999)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(1 0 0 1 2872 1369)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(1 0 0 1 2602 1369)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(-1 0 0 1 2881.001 884.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(1 0 0 1 2611 885)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid3.png" transform="matrix(1 0 0 1 2341 885)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 2341.001 884.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 2611.001 884.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(1 0 0 1 2071 885)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(1 0 0 1 2061 1742)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid3.png" transform="matrix(1 0 0 1 1801 885)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 1801.001 884.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 2071.001 884.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 2061.001 1741.999)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid2.png" transform="matrix(0.763 0 0 1 1562.999 885)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid3.png" transform="matrix(1 0 0 1 1293 885)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-0.5556 0 0 1 1292.998 885)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 1563.001 884.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 637.001 1098.9976)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid1.png" transform="matrix(-1 0 0 1 180.001 171.9995)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end1.png" transform="matrix(1 0 0 1 1791 1742)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-end2.png" transform="matrix(-1 0 0 1 2428.001 1741.999)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-mid3.png" transform="matrix(0.7333 0 0 1 2195.002 1742)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single1.png" transform="matrix(1 0 0 0.9947 1249 1426.5)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single1.png" transform="matrix(1 0 0 0.9947 1752.9961 412.5)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single1.png" transform="matrix(1 0 0 0.9947 2618.4961 529.5)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single1.png" transform="matrix(1 0 0 0.9947 2411.4961 1033.498)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single1.png" transform="matrix(1 0 0 1 2681 1034)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single1.png" transform="matrix(1 0 0 1 2643 1870)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single1.png" transform="matrix(1 0 0 0.9947 622 319)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single2.png" transform="matrix(1 0 0 0.9947 1498 1426.002)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single2.png" transform="matrix(1 0 0 1 2013 1369.5039)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single2.png" transform="matrix(1 0 0 0.9947 1247 1174.5)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single2.png" transform="matrix(1 0 0 0.9947 1262.5 255)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single2.png" transform="matrix(1 0 0 0.9947 1958.4961 529.5)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single2.png" transform="matrix(1 0 0 1 372 1343.5039)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single2.png" transform="matrix(1 0 0 0.9947 402 49)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single3.png" transform="matrix(1 0 0 0.9947 1498 1174.5)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single3.png" transform="matrix(1 0 0 0.9947 1557.9961 256.5)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single3.png" transform="matrix(1 0 0 0.9947 2241.9961 529.5)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single3.png" transform="matrix(1 0 0 1 135 1195)"> </image> <image overflow="visible" enable-background="new " width="135" height="95" xlink:href="forest/platform-single3.png" transform="matrix(1 0 0 1 621 862)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-3.png" transform="matrix(1 0 0 1 875 991)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-1.png" transform="matrix(1 0 0 1 875 851)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-3.png" transform="matrix(1 0 0 1 377 994)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-1.png" transform="matrix(1 0 0 1 377 931)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-2.png" transform="matrix(1 0 0 1 875 726)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-1.png" transform="matrix(1 0 0 1 875 586)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-2.png" transform="matrix(1 0 0 1 875 450)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-3.png" transform="matrix(1 0 0 1 875 319)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-1.png" transform="matrix(1 0 0 1 875 205)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-2.png" transform="matrix(1 0 0 1 875 66)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-3.png" transform="matrix(1 0 0 1 1803 1599)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-3.png" transform="matrix(1 0 0 1 875 -69)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-2.png" transform="matrix(1 0 0 1 1803 1455)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-3.png" transform="matrix(1 0 0 1 1803 1312)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-1.png" transform="matrix(1 0 0 1 1803 1173)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-3.png" transform="matrix(1 0 0 1 2981 1506)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-1.png" transform="matrix(1 0 0 1 2982 1366.5)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-1.png" transform="matrix(1 0 0 1 2976 1888)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-2.png" transform="matrix(1 0 0 1 2325 1885)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-3.png" transform="matrix(1 0 0 1 2325 1747)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-2.png" transform="matrix(1 0 0 1 1803 1033)"> </image> <image overflow="visible" enable-background="new " width="108" height="180" xlink:href="forest/column-3.png" transform="matrix(1 0 0 1 1803 889)"> </image> </g> <g id="moving-platforms"> <image overflow="visible" enable-background="new " width="135" height="95" id="platform_1" xlink:href="forest/platform-single1.png" onclick="type: platform; path: path_platform_1;" transform="matrix(1 0 0 0.9947 602 1343.5)"> </image> <path id="path_platform_1" fill="none" stroke="#FF0000" stroke-width="7.5" d="M669.502,1391.5 c129.75,78.75,533.25,296.25,646.5,364.5"/> <image overflow="visible" enable-background="new " width="135" height="95" id="platform_2" xlink:href="forest/platform-single2.png" onclick="type: platform; path: path_platform_2;" transform="matrix(1 0 0 0.9947 962 884.498)"> </image> <path id="path_platform_2" fill="none" stroke="#FF0000" stroke-width="7.5" d="M1029.502,937c0-104.25,0-596.25,0-675"/> <image overflow="visible" enable-background="new " width="135" height="95" id="platform_3" xlink:href="forest/platform-single3.png" onclick="type: platform; path: path_platform_3;" transform="matrix(1 0 0 0.9947 2864 884.498)"> </image> <path id="path_platform_3" fill="none" stroke="#FF0000" stroke-width="7.5" d="M2933.002,934c0.75-119.25-0.75-558.75,0-675"/> </g> <g id="hurty-images"> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 -14 554)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 200.001 553.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 176 554)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 123.001 892.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 240.001 892.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 398 553.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 395 554)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 467 1054)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 684.001 1053.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 659 1054)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 896.001 1053.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 846 1231)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 730 1231)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 968 1231)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 -1 493 1231)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 118.001 1988.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 229.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 215 1986)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 452 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 436 1990)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 662.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 773.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 756 1986)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 994.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 1203.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 979 1990)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 1310.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1300 1986)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 1537.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1523 1990)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 1748.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 1860.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1845 1986)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 2097.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 2097 1990)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 2338.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1.192488e-008 1 1 -1.192488e-008 853 662)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1.192488e-008 1 1 -1.192488e-008 853 559)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1954.5 1694.498)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1887 1694)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 2186.001 1694.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 2177 1698)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 2398.001 1696.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 2418 1986)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 2628.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 2609 1990)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 2836.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 2945.001 1986.999)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 2929 1986)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 -1 2604 1506)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 2642 1506)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 2023 1018)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 -1 1994 1018)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 2233 1017)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 2348 1018)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 -1 2330.0078 1018)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 2579.0078 1017)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 2703.0078 1018)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 -1 2685 1018)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1902 839)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 1931.001 838.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1692 840)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1577 839)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 1594.001 838.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1345 840)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 1221 839)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 1240.001 838.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 2480 839)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 2495.001 838.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 2247 840)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 1 2121 839)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 1 2139.001 838.9976)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 2802 1506)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(-1 0 0 -1 3000.5 1506)"> </image> <image overflow="visible" enable-background="new " width="128" height="87" xlink:href="forest/spikes.png" transform="matrix(1 0 0 -1 2775.002 1506)"> </image> </g> <g id="meta"> <circle id="camera" onclick="type: camera;" fill="#FF0000" stroke="#000000" stroke-width="1.5" cx="52.623" cy="88.001" r="12.123"/> <image overflow="visible" enable-background="new " width="60" height="60" id="player" xlink:href="common/squibble/squibble0001.png" onclick="type: player;" transform="matrix(1 0 0 1 70.6221 58)"> </image> </g> <g id="collectables"> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 195 101)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 261 101)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 330 158)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 439.5 281)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 534 425)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 663 591.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 663 663.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 517.5 782)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 405 782)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 292.5 782)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 292.5 996.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 292.5 1211)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 292.5 1425.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 411 1532)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 642 1532)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 777 1667)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1015.5 1796)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1423.5 1641.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1423.5 1529)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1423.5 1416.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1423.5 1304)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1423.5 1191.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1423.5 1079)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1261.5 1079)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1015.5 1079)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1015.5 812)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1015.5 728)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1015.5 644)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1015.5 560)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1306.5 488)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1591.5 488)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1682.25 578.75)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1803 669.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 1992 767)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2145 767)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2298 767)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2466 767)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2664 767)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2907 594.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2907 714.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2907 834.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2907 954.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2907 1074.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2680.5 1284.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2509.5 1284.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2223 1284.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2223 1431.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2223 1578.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2509.5 1779.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2652 1760)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2794.5 1749.5)"> </image> <image overflow="visible" enable-background="new " width="51" height="51" xlink:href="common/droplet.png" onclick="type: item;" transform="matrix(1 0 0 1 2932.5 1757)"> </image> </g> <g id="npc"> <path id="path_npc1" fill="none" stroke="#000000" stroke-width="1.5" d="M458.5,1581c-89.741,0-347.496,0-429.375,0"/> <image overflow="visible" enable-background="new " width="90" height="90" id="npc1" xlink:href="npcs/hedgehog/hedgehog0001.png" onclick="type: hedgehog; path: path_npc1;" transform="matrix(1 0 0 1 149.499 1536)"> </image> <path id="path_npc2" fill="none" stroke="#000000" stroke-width="1.5" d="M1754.5,1344c-36-34.5-197.999-66.721-310.5,4.14 c-112.501,70.861-270,15.36-286.875-4.14"/> <image overflow="visible" enable-background="new " width="120" height="120" id="npc2" xlink:href="npcs/parrot/parrot0001.png" onclick="type: parrot; path: path_npc2;" transform="matrix(1 0 0 1 1102 1287)"> </image> <path id="path_npc3" fill="none" stroke="#000000" stroke-width="1.5" d="M2560,732c-202.5,75-297-37.5-568.5,21 c-232.891,50.181-282-277.5-439.5-253.5"/> <image overflow="visible" enable-background="new " width="120" height="120" id="npc3" xlink:href="npcs/parrot/parrot0001.png" onclick="type: parrot; path: path_npc3;" transform="matrix(1 0 0 1 1547.498 445.5)"> </image> <path id="path_npc4" fill="none" stroke="#000000" stroke-width="1.5" d="M2953,1350c-89.74,0-483.621,0-565.5,0"/> <image overflow="visible" enable-background="new " width="90" height="90" id="npc4" xlink:href="npcs/hedgehog/hedgehog0001.png" onclick="type: hedgehog; path: path_npc4;" transform="matrix(1 0 0 1 2643.998 1305)"> </image> </g> <g id="foreground" onclick="parallax_x: -0.4f;"> <image overflow="visible" enable-background="new " width="290" height="188" xlink:href="forest/foreground_shrub_1.png" transform="matrix(0.9983 0 0 0.9973 798.5029 2040.8564)"> </image> <image overflow="visible" enable-background="new " width="290" height="188" xlink:href="forest/foreground_shrub_1.png" transform="matrix(0.7629 0 0 0.7622 2284.2725 2004.4639)"> </image> <image overflow="visible" enable-background="new " width="218" height="186" xlink:href="forest/foreground_shrub_2.png" transform="matrix(0.7903 0 0 0.7921 1526.2285 2033.7939)"> </image> <image overflow="visible" enable-background="new " width="218" height="186" xlink:href="forest/foreground_shrub_2.png" transform="matrix(0.7903 0 0 0.7921 -367.436 2005.6904)"> </image> <image overflow="visible" enable-background="new " width="290" height="188" xlink:href="forest/foreground_shrub_1.png" transform="matrix(0.9983 0 0 0.9973 -157.7607 1962.1064)"> </image> <image overflow="visible" enable-background="new " width="600" height="17" xlink:href="forest/foreground_ground_top.png" transform="matrix(1 0 0 1 -378 2112)"> </image> <image overflow="visible" enable-background="new " width="600" height="17" xlink:href="forest/foreground_ground_top.png" transform="matrix(1 0 0 1 221 2112)"> </image> <image overflow="visible" enable-background="new " width="600" height="17" xlink:href="forest/foreground_ground_top.png" transform="matrix(1 0 0 1 820 2112)"> </image> <image overflow="visible" enable-background="new " width="600" height="17" xlink:href="forest/foreground_ground_top.png" transform="matrix(1 0 0 1 1419 2112)"> </image> <image overflow="visible" enable-background="new " width="600" height="17" xlink:href="forest/foreground_ground_top.png" transform="matrix(1 0 0 1 2018 2112)"> </image> <image overflow="visible" enable-background="new " width="600" height="17" xlink:href="forest/foreground_ground_top.png" transform="matrix(1 0 0 1 2617 2112)"> </image> <image overflow="visible" enable-background="new " width="600" height="17" xlink:href="forest/foreground_ground_top.png" transform="matrix(1 0 0 1 3216 2112)"> </image> <image overflow="visible" enable-background="new " width="600" height="17" xlink:href="forest/foreground_ground_top.png" transform="matrix(1 0 0 1 3816 2112)"> </image> </g> <g id="hurty"> <rect x="-1" y="577.5" fill="#FF0000" width="514.66" height="45"/> <rect x="-7" y="918" fill="#FF0000" width="237.16" height="45"/> <rect x="455.16" y="1084.5" fill="#FF0000" width="456.161" height="45"/> <rect x="875.16" y="573" fill="#FF0000" width="45" height="205.5"/> <rect x="1882.999" y="1723.5" fill="#FF0000" width="498.161" height="45"/> <rect x="2522.16" y="1432.5" fill="#FF0000" width="528.91" height="45"/> <rect x="1882.999" y="949.5" fill="#FF0000" width="919.661" height="45"/> <rect x="1123.249" y="868.5" fill="#FF0000" width="1503.911" height="45"/> <rect x="507.5" y="1161" fill="#FF0000" width="453.16" height="45"/> <rect x="-0.84" y="2016" fill="#FF0000" width="3010.66" height="45"/> </g> <g id="collision"> <rect x="396" y="949.5" fill="#00FF00" width="75" height="232.5"/> <rect x="418.5" y="55.5" fill="#00FF00" width="105" height="75"/> <rect x="-10.5" y="598.5" fill="#00FF00" width="534" height="75"/> <rect x="387" y="1351.5" fill="#00FF00" width="105" height="75"/> <rect x="1276.5" y="264" fill="#00FF00" width="105" height="75"/> <rect x="1575" y="264" fill="#00FF00" width="105" height="75"/> <rect x="1974" y="537" fill="#00FF00" width="105" height="75"/> <rect x="2259" y="537" fill="#00FF00" width="105" height="75"/> <rect x="2029.5" y="1378.5" fill="#00FF00" width="105" height="75"/> <rect x="2659.5" y="1875" fill="#00FF00" width="105" height="75"/> <rect x="2634" y="537" fill="#00FF00" width="105" height="75"/> <rect x="2425.5" y="1039.5" fill="#00FF00" width="105" height="75"/> <rect x="2697" y="1039.5" fill="#00FF00" width="105" height="75"/> <rect x="1768.5" y="420" fill="#00FF00" width="105" height="75"/> <rect x="1263" y="1437" fill="#00FF00" width="105" height="75"/> <rect x="1515" y="1437" fill="#00FF00" width="105" height="75"/> <rect x="1263" y="1183.5" fill="#00FF00" width="105" height="75"/> <rect x="1515" y="1183.5" fill="#00FF00" width="105" height="75"/> <rect x="150" y="1203" fill="#00FF00" width="105" height="75"/> <rect x="637.5" y="327" fill="#00FF00" width="105" height="75"/> <rect x="637.5" y="870" fill="#00FF00" width="105" height="75"/> <rect x="894" y="-31.5" fill="#00FF00" width="75" height="1213.5"/> <rect x="1818" y="952.5" fill="#00FF00" width="75" height="865.5"/> <rect x="2343" y="1771.5" fill="#00FF00" width="75" height="370.5"/> <rect y="181.5" fill="#00FF00" width="286.5" height="75"/> <rect x="396" y="1108.5" fill="#00FF00" width="573" height="75"/> <rect x="-88.5" y="1606.5" fill="#00FF00" width="574.5" height="75"/> <rect x="1095" y="892.5" fill="#00FF00" width="1764" height="75"/> <rect x="-9" y="940.5" fill="#00FF00" width="247.5" height="75"/> <rect x="2031.49" y="1114.5" fill="#00FF00" width="229.01" height="75"/> <rect x="2529" y="1600.5" fill="#00FF00" width="235.01" height="75"/> <rect x="2997" y="1428" fill="#00FF00" width="75" height="235.01"/> <rect x="2997" y="1902.49" fill="#00FF00" width="75" height="235.01"/> <rect x="1492.5" y="1717.5" fill="#00FF00" width="232.5" height="75"/> <rect x="1818" y="1749" fill="#00FF00" width="600" height="75"/> <rect x="2356.5" y="1378.5" fill="#00FF00" width="724.01" height="75"/> <rect x="-375" y="2040.854" fill="#00FF00" width="3750" height="584.146"/> </g> <g id="exit"> <rect x="3000" y="1663" fill="#2277FF" width="375" height="240"/> </g> <g id="boundary"> <rect x="-375" y="-373.5" fill="#00FF00" width="375.846" height="2998.5"/> <rect x="3000" y="-360" fill="#00FF00" width="375" height="2023"/> <rect x="3000" y="1902" fill="#00FF00" width="375" height="605"/> <rect x="3375" y="1473.381" fill="#00FF00" width="375" height="656.619"/> <rect x="-375" y="-373.5" fill="#00FF00" width="3750" height="375"/> </g> </svg>
