- 1 Tutorial: First steps
- 2 Tutorial: What's new in 0.6.0
- 2.1 copying xmoto attributes between objects
- 2.2 Better display of block edges in inkscape
- 2.3 Display the block's texture scaled
- 2.4 Default level/level_id
- 2.5 New extension to change the id of xmoto objects
- 2.6 jointed line
- 2.7 Inksmoto default values
- 2.8 Show xmoto sprites in Inkscape
- 2.9 automatic generation of regression tests to inksmoto
- 2.10 Support for Xmoto 0.5.2 features
- 2.11 Support for Inkscape 0.47 and 48.2
Tutorial: First steps
This part of the tutorial learns the basics to be able to create a level.
Quick look at inkscape
Here is the list of useful tools from Inkscape to create Xmoto levels:
- The selection tool
- The path editing tool
- The sculpting tool
- The zoom in/out tool
- The rectangle tool
- The circle tool
- The star tool
- The hand draw tool
- The bezier curves draw tool
- The Xmoto properties menu
You can also get tutorials on YouTube.
The Xmoto extensions
The Xmoto extensions from the Effects menu allows you to set Xmoto properties to Inkscape objects in the drawing.
Here is a description of the different entries of the Xmoto menu:
- Change Block Properties: Change the properties of the selected blocks.
- Change Block Texture: Change the texture and edge effects of the selected blocks.
- Strawberry: Convert the selected shapes into a strawberry.
- End of level: Convert the selected shapes into a end of the level.
- Particle Source: Convert the selected shapes into a particle source (fire or smoke).
- Player Start: Convert the selected shapes into the start position of the player.
- Sprite: Convert the selected shapes into a sprite (with many parameters for the sprite).
- Wrecker: Convert the selected shapes into a wrecker.
- Add Pin Joint: add a pin joint between two physical blocks.
- Add Pivot Joint: add a pivot joint between to physical blocks.
- Jointed Line...: create a line of jointed blocks
- Set layers properties: Set which layers are for background and what are their scrolling parameters.
- Set sky properties: Change the sky of the level.
- Set level properties: Mandatory options for the level, like its name and id.
- Set other level properties: Allow sprite replacement of the /strawberry/wrecker/end of level/. Add a music to the level.
- Install keyboard shortcuts: Install the Inksmoto specific shortcuts.
- Inksmoto tutorial: Display the link of this tutorial on the wiki.
- Launch level in X-Moto: Launch the level in Xmoto.
- Show the object informations: Show the Xmoto properties of the selected shapes.
- Get new textures and sprites: Download new textures and sprites from the Internet.
- Recreate last.lvl: Recreate the last.lvl level to reload it into Xmoto.
- Copy: Copy the xmoto properties of an object.
- Paste: Paste the xmoto properties stored into the selected objects.
- Change id: Change the id of an element (mandatory use for entities).
- Begin recording a trace session: For unittesting.
- End recording a trace session: For unittesting (the generated tests are in ~/.inkscape/extensions/cur_tests).
- Convert into Zone: Convert the selected shapes into zones (currently, only rectangular zones are used).
Install the Inksmoto shortcuts
You should begin by installing the Inksmoto specific shortcuts. Use the menu entry Effects->X-moto->Other->Install keyboard shortcuts.
Then restart Inkscape to enable them.
The shortcuts are:
- "t": change texture of the selected blocks
- "b": change properties of the selected blocks
- "p": add a pin joint between two physical blocks
- "o": add a pivot joint between two physical blocks
- "y": change the selected objects into strawberry
- "s": change properties of the selected sprites
- "z": change the selected objects into zone
- "w": change the selected objects into wrecker
- "u": change the selected objects into a particle source
- "r": change the selected objects into the player start
- "e": change the selected objects into the end of level
- "a": set layers properties
- "q": set level properties
- "h": set other level properties
- "k": set sky properties
- "x": launch the .lvl into Xmoto
- "l": recreate last.lvl into the home directory (in .inkscape/extensions/)
- "c": copy the xmoto properties of an object
- "v": paste the xmoto properties stored in the selected objects
- "i": change the id of an object
Drawing a simple level
Let's draw a simple level using only the Rectangle, Circle and Star tools.
First, set the zoom of Inkscape to 100% (defaulted to 35% when you create a new svg), then draw your level.
Set level properties
Now that the shapes of the level are drawn, we have to assign them Xmoto properties. For example, we want some shapes to be solid blocks, some others to be background blocks, change their texture...
To change solid blocks texture, select them, then go to the Xmoto effect menu and use the menu entry Effects->X-moto->Blocks->Change Block Texture (or press 't').
The Block textures window opens.
Click on the white thumbnail to select the texture we want. The Texture Selection window pops up:
Click on the texture wanted for the blocks. Now the Block textures window displays the right texture:
Press OK. The texture is then displayed in Inkscape:
Repeat the same procedure to change the texture for the three other blocks.
Now, we want to set them as background blocks. Select them, and use this menu entry: Effects->X-moto->Blocks->Change Block Properties (or press 'b').
The Block properties window opens. Check Background block then press OK.
Now we have to set the level start and its end.
Select the first circle and use this menu entry: Effects->X-moto->Entities->Player Start. Then select the second circle and use this menu entry: Effects->X-moto->Entities->End Of Level.
The level looks like this:
Save the level
Now that our level is drawn and its shapes have Xmoto properties, we have to set the properties of the level, like its name, author, ...
Use the Xmoto menu entry Effects->X-moto->Level->Set level properties. The Level properties window pops up:
Entries in this window (bold ones are mandatory):
- lua script: If your level has a lua script, enter the lua file with its full path.
- level id: The id of the level (only letters, digits and underscore, no space).
- level name: The real name of the level.
- author: The author of the level (you).
- description: A message to add to the level.
- border texture: Choose the texture which be displayed around the level.
Test the level in Xmoto
Now our level is ready to be tested in Xmoto. Use the Xmoto menu entry Effects->X-moto->Other->Launch level in X-moto (or press 'x'). The Launch level in X-Moto window pops up:
If the Xmoto executable is present in your PATH (under Linux and MacOSX), you don't have to fill the parameter. If you're under Windows or you want to use a specific Xmoto executable, then enter your Xmoto executable with its full path.
Here is the level in Xmoto:
Get the .lvl in order to upload it
Now that the level is ready, we have to upload it to the Xmoto website http://xmoto.tuxfamily.org/index.php?page=sendyourlevel
You have to send the level as a .lvl file, not a .svg
- svg: Vector graphic format
- lvl: Xmoto level
There's two ways to get the .lvl:
- When you launch the level in Xmoto from within Inksmoto, the file last.svg and last.lvl are created in the Inkscape home extensions directory:
- Linux & MacOSX: ~/.inkscape/extensions
- Windows: C:\Documents And Settings\<USER>\Application Data\Inkscape\extensions\
- To open Application Data you might have to do Start->run...(or Win-Button+R)->%APPDATA%
- You can also save the svg and the lvl separately using File->Save a Copy... and choosing the appropriate file format (X-Moto Level (*.lvl)).
Svg file of the tutorial
Here is the corresponding svg file of the tutorial level: Media:Tutorial_050.svg
Tutorial: What's new in 0.6.0
copying xmoto attributes between objects
Now you can select an object in Inkscape and copy its Xmoto properties and then select one or more objects and set the copied Xmoto properties.
Better display of block edges in inkscape
Now the edge effects are displayed with two different colors when two differents edge effects are set to a block. And the colors matches the angle set for them.
Display the block's texture scaled
Now the texture is displayed on the block with the right scale, as in Xmoto.
For fast testing you can generate the .lvl and launch it in Xmoto without having to set the level id and name. But set them before uploading your level to the Xmoto website.
New extension to change the id of xmoto objects
Due to how the entities are displayed in Inkscape, you can no longer change the id of an entity with 'right click->Object Properties'. If you do that, the entity will not have the id you specified in the .lvl and it will cause problems when you want to use this entity in a script.
Now you have to use the 'Change id' window to set it ('i' short key)
This new extension allow you to easily create jointed bridges, etc. with joints. See this page for a full description : Jointed Line
Inksmoto default values
Now when you open the window properties for a new object (sprite, blocks, ...), the default values are the one from the last choices you made in this window and no longer a blanck window.
Show xmoto sprites in Inkscape
Now instead of just coloring the shape, the sprites are displayed in Inkscape (along with the collision circle), with full properties (scale, rotation, flip). Every entities are displayed.
automatic generation of regression tests to inksmoto
Now you can record what you're doing in Inksmoto and replay it later. This is an easy way to generate the unittests for Inksmoto.
Use the two extensions in the 'Other' menu to record your sessions. The tests are generated in ~/.inkscape/extensions/cur_tests.
You can play the generated tests with:
cd <inksmoto install dir>/inksmoto/inksmoto_unittests python xmotoTestCase.py
~/bordel/svg2lvl-svn/inkscape/extensions/inksmoto/inksmoto_unittests$ python xmotoTestCase.py tests from module 'test_testBlocks' loaded ... ---------------------------------------------------------------------- Ran 3 tests in 0.511s OK
Support for Xmoto 0.5.2 features
You can set a block color and texture.
You can customise the edge effects:
Important Note: The color parameter is extended from the openGl coloring function, which MULTIPLIES the color value of the texture with the color value of the color you choose here. This may lead to unexpected behaviour: If you use a really green texture (like the glow edge effect), its not possible to change its color, every modification will just make it darker. This happens because the Red-Green-Blue (RGB) values of green are (0,1,0) in open GL. Using a blending color like red (1,0,0) results in a black texture, because (0,1,0) x (1,0,0) = (0,0,0). THIS IS NOT A BUG! Color blending compatible textures, containing basically black/white color values will be added in the future.