Inksmoto-0.5.0
Contents
About
The Inksmoto level editor is implemented as an extension to Inkscape, an Open Source vector graphics editor.
Installation
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 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
To learn how to use Inkscape you can use the official Inkscape tutorials:
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:
- Blocks
- Change Block Properties: Change the properties of the selected blocks.
- Change Block Texture: Change the texture and edge effects of the selected blocks.
- Entities
- 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.
- Joint
- Add Pin Joint: add a pin joint between two physical blocks.
- Add Pivot Joint: add a pivot joint between to physical blocks.
- Level
- 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.
- Other
- 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.
- Zones
- 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
- "s": change properties of the selected sprites
- "z": change the selected objects into zone
- "w": change the selected objects into wrecker
- "x": launch the .lvl into Xmoto
- "l": recreate last.lvl into the home directory (in .inkscape/extensions/)
- "y": change the selected objects into strawberry
- "p": add a pin joint between two physical blocks
- "v": add a pivot joint between two physical blocks
Drawing a simple level
Let's draw a simple level using only the Rectangle, Circle and Star tools.
First, put the zoom of Inkscape to 100% (defaulted to 35% when you create a new svg), then draw your level.
Here's is a simple level drawn using the Star tool and the Rectangle tool for the shapes and the Circle tool for the two little circles:
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...
Example
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\
- 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: Create a chipmunk level
Since x-moto 0.5.0 and inksmoto 0.5.0 you can create "physics levels".
Chipmunk blocks
Chipmunk properties
- Infinite Mass = Makes the block ultra heavy
- Mass = mass of he block
- Elasticicty = Elasticicty of he block
- Friction = Friction of he block
Making a simple Chipmunk level
Let's make a simple chipmunk level with some physics blocks.
First, put the zoom of Inkscape to 100% (defaulted to 35% when you create a new svg), then draw your level.
First you draw the elvel as before, and I will tell you how to configure the ball.
Set level properties
Do it as before, but the ball.
You should add more mass to the ball so it won't move too easily under your bike.
You also might want to add some texture to the ball. ;)
And here we go!
Here is the .svg so you can examine the level. Media:chipmunktutorial.svg
Joints
You can attach physical blocks together using joints. For the moment, X-moto only supports two types of joints, pivot and pin joints.
- Pivot Joints simply allow two objects to pivot about a single point.
- Pin Joints connect two blocks with a solid pin or rod. It keeps the anchor points at a set distance from one another.
Important things:
- Two blocks connected by a joint won't collision together.
- You can't put physical blocks in other layers. Only the main layer (not even the second main layer).
- You can set both blocks as background or non-background (putting one as a background and the other as not background will make the two blocks collisionning).
Pivot joints
Pivot Joints simply allow two objects to pivot about a single point.
To add a pivot joint between two physical blocks, add a small circle where you want those blocks to pivot. Then select the two blocks and finally the small circle (you have to select the joint as the third object).
The two blocks don't have to be touching themself. Neither does the joint.
Example
Select the two blocks then the joint and use the menu entry Effects->X-moto->Joint->Add Pivot Joint.
And the result:
The level in X-moto. Note how the system collapses because the block on the ground wasn't heavy enough:
Trick
To avoid that the system collapses you can set the mass of one of the physical blocks to infinite. You can put that block outside of the playing part of the level (you can even set it as a background block).
Example:
Select the heavy block and use the menu entry Effects->X-moto->Blocks->Change Block Properties (or press 'b'), then check the Infinite Mass button:
Now, the level in Xmoto. The system no longer collapses, the infinite mass block no longer moves and the other block rotates around the pivot joint:
Svg file of the pivot joint tutorial
Here is the svg file so that you can test it: Media:Tutorial_050_pivot_joint.svg
Pin joints
Pin Joints connect two rigid bodies with a solid pin or rod. It keeps the anchor points at a set distance from one another.
To add a pin joint between two physical blocks, add a small rectangle linking the two blocks. Then select the two blocks and finally the small rectangle (you have to select the joint as the third object).
Note that the rectangle representing the joint doesn't have to actually touch the blocks, but it's easy to figure out which blocks it joints if it does touch them. The pin joint is always between the two blocks centers.
For example, we want this tank to roll on the ground. (Don't forget to set all the tank blocks as physical blocks).
First add all the rectangles which will be the pin joints:
Then select two blocks and finally a joint, use the menu Effects->X-moto->Joint->Add Pin Joint. Repeat that operation for all the joints:
The slightly modified tank in Xmoto (some part of the tank are background blocks so that they collision with the other tank blocks):
Svg file of the pin joint tutorial
Here is the svg file so that you can test it: Media:Tutorial_050_pin_joint.svg