So, how to start a project like this ? What motivated us to create a new version of XMoto is that you can get the 3000+ levels designed for XMoto and then reuse them in the web version of the game.
To make it works, the first thing to do is to look into the bowels of a level, preferably a simple level. So we take the first level (l1038.lvl) and we open it in our favorite text editor: Sublime Text.
jQuery defines itself as
And, as a web developer, I couldn't agree more !
Structure of a level
When you look at the XML level file, it's not difficult to see what are the most important parts:
From line 3 to 10, general informations (name, description, etc.)
From line 11 to 37, "blocks" are defined by many vertices.
From line 38 to 51, "entities" and you can guess, by the name, the purpose of them (PlayerStart, EndOfLevel, Sprite, ...).
Because you need to start somewhere, the first step of our game development will be to display some level blocks on the screen. For this to be completed, we need to parse the blocks from the XML file.
In our case, we don't want to make HTML manipulations, but XML manipulations. More specifically we want to parse the file. "Parsing" is getting data from the file and store it into the memory of the computer. Next, we will be able to use this data to display it on the user's screen.
On the first line, they write a simple XML string. Then they parse this string to get a nice structure in memory. On the third line, they use the find() method to get the value of the <title> tag on the XML. As you may guess, at the end, the title variable contains 'RSS Title'.
In XMoto, the XML is not stored in a string, but in a file. So we need to do things differently. The solution is to make an AJAX call to our file and then call (line 10) a parsing method when the file is loaded.
The (high level) code is the following :
The @xml_parse_* methods are method dedicated to parse specific informations of the file. As we want to parse blocks, this is the xml_parse_blocks() method.
The purpose of this method is to create an internal structure (hash) with general informations about the blocks of the level : position of blocks, texture of blocks, position of vertices (a block is made of a certain number of vertices), etc.
The same parsing structure is repeated for general informations, entities, etc. And after that, every useful part of information about a level is stored in memory.