Inksmoto-0.5.0

From X-Moto
Revision as of 01:45, 13 March 2013 by XMOTOFREAK (talk | contribs) (Other Linuxes)
Jump to: navigation, search

Contents

About

The Inksmoto level editor is implemented as an extension to Inkscape, an Open Source vector graphics editor.

Svg of levels build with the 0.4.1 version of Inksmoto are not compatible with this release (but if enough people ask for it, a convertor can been added to Inksmoto)

Even if the application windows changed, there's still plenty of stuffs from the 0.4.x tutorial which applies to the 0.5.1 version, check it out: Inksmoto 0.4.1 tutorial

Installation

Required softwares

The 0.5.1 version of Inksmoto requires Inkscape 0.46.

   * inkscape (=0.46)
   * python (>=2.5) (tested on 2.5)
   * python-lxml
   * python-tk
   * python-imaging-tk

Installation on Windows

Just download and execute this executable: Inksmoto 0.5.0 for Windows

Installation on Linux

Ubuntu

Under Debian/Ubuntu, you can use this .deb file to install Inksmoto with the command line or graphically:

  • Command line:
wget Inksmoto 0.5.1
sudo dpkg -i inksmoto-0.5.1.deb
  • Graphically:
    • download the .deb file Inksmoto 0.5.1
    • double click on it from the file explorer to install it (with GDebi in Gnome for example)

Warning: If you have previously installed the svn version in your home dir, you should better delete it:

rm -rf ~/.inkscape/extensions

Other Linuxes

Install the prerequisites first then install Inksmoto:

cd ~
wget Inksmoto 0.5.1
cd /usr/share/inkscape
sudo tar zxvf ~/inksmoto-0.5.1.tar.gz

Warning: If you have previously installed the svn version in your home dir, you should better delete it:

rm -rf ~/.inkscape/extensions

Installation on Mac OS X

Download prerequisites

Install Inkscape, Python, PIL, and Inksmoto.

Install Inksmoto

Extract extensions.tar.gz with the appropriate Mac OS X tool. Then copy the content of the extracted extensions directory into:

/Applications/Inkscape.app/Contents/Resources/extensions

Warning: If you have previously installed the svn version in your home dir, you should better delete it:

rm -rf ~/.inkscape/extensions

Then launch Inkscape

Tutorial: First steps

This part of the tutorial learns the basics to be able to create a level.

Quick look at inkscape

Inksmoto 050 01.png

Here is the list of useful tools from Inkscape to create Xmoto levels:

  1. The selection tool
  2. The path editing tool
  3. The zoom in/out tool
  4. The rectangle tool
  5. The circle tool
  6. The star tool
  7. The hand draw tool
  8. The bezier curves draw tool
  9. The Xmoto properties menu

To learn how to use Inkscape you can use the official Inkscape tutorials: Inkscape2.png

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
  • "o": add a pivot joint between two physical blocks
  • "a": set layers properties
  • "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
  • "q": set level properties
  • "h": set other level properties
  • "k": set sky properties

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: Inksmoto 050 02.png

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').

Inksmoto 050 03.png

The Block textures window opens.

Inksmoto 050 04.png

Click on the white thumbnail to select the texture we want. The Texture Selection window pops up:

Inksmoto 050 05.png

Click on the texture wanted for the blocks. Now the Block textures window displays the right texture:

Inksmoto 050 06.png

Press OK. The texture is then displayed in Inkscape:

Inksmoto 050 07.png

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').

Inksmoto 050 08.png

The Block properties window opens. Check Background block then press OK.

Inksmoto 050 09.png

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:

Inksmoto 050 10.png

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:

Inksmoto 050 11.png

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:

Inksmoto 050 12.png

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:

Inksmoto 050 13.png

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

Properties.png

  • 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 level as before, and I will tell you how to configure the ball. Chipmunklevel.png

Set level properties

Do it as before, but the ball.

Ballproperties.png

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!

Chiplevelinxmoto.png

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 (or press "v").

Inksmoto 050 14.png

And the result:

Inksmoto 050 15.png

The level in X-moto. Note how the system collapses because the block on the ground wasn't heavy enough:

Inksmoto 050 16.png

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:

Inksmoto 050 17.png

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:

Inksmoto 050 18.png

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).

Inksmoto 050 19.png

First add all the rectangles which will be the pin joints:

Inksmoto 050 20.png

Then select two blocks and finally a joint, use the menu Effects->X-moto->Joint->Add Pin Joint (or press "p"). Repeat that operation for all the joints:

Inksmoto 050 21.png

The slightly modified tank in Xmoto (some part of the tank are background blocks so that they collision with the other tank blocks):

Inksmoto 050 22.png

Svg file of the pin joint tutorial

Here is the svg file so that you can test it: Media:Tutorial_050_pin_joint.svg

A bridge with pin joints

Here is a svg file with a pin joints bridge: Media:bridge.svg

Note that the two small square blocks have an infinite mass.

Tutorial: More advanced topics

Even if the windows changed, all the advanced topics from the 0.4.x tutorial applies to the 0.5.0 version, check it out: Inksmoto 0.4.1 tutorial

Tutorial: Layers and Backgrounds

Layers can get confusing but once you get the basics it should all be easy. The simple explanation is that: in Inksmoto you can have 1 main layer, which can have background/dynamic/chipmunk blocks, and every other layer is ONLY background blocks. You can have an infinite number of layers, but you can ONLY have 1 main layer. You are allowed to have at most 2 main layers, but whenever I have tested it I cannot get certain features to work. So I stick with just 1 main layer, because that is all you will really need.

1 Layer: A main layer with physics and background blocks.

Start out with a level, (here is the file: Media:Cigam Ex01.svg).
ExA 01.jpg
To display the layers you have to goto the "layers" tab and click "layers" it will bring up a side panel with all of your layers.:
ExA 02b.jpg
ExA 03.jpg
To specify your layer as the "Main Layer" goto "effects/xmoto/level/set layer properties"
ExA 04a.jpg
From the screen that appeared, click on the second check box (my text is weird, but the first check box is "use layer" and the second is specifying what "is main layer"). Once you make a layer the main layer, that layer is the only one that can contain solid blocks, physics, and dynamic. Background blocks are in any (but will be explained more further in this tutorial).

From this:

ExA 11.jpg

To this:

ExA 12.jpg
To edit block properties and make them a background or physics block, first select the block you want to edit then goto "effects/xmoto/blocks/change block properties" it will bring up a screen with a variety of adjustments:
ExA 05a.jpg
There are two background posts on the ramps, and a physics board with a background physics block. The background post has these settings, all I did was to check the "background" check box to make it a background block. These are the settings:
ExA 06.jpg
The long physics board is just a physics block. It has these settings:
ExA 08.jpg
The background metal physics block has these settings: (background physics blocks CANNOT interact with the player or other background physics block, but they CAN interact with normal physics blocks, so position them accordingly)
ExA 07.jpg

Here are pictures of what we have so far in the level:

ExA 09.jpg
ExA 10.jpg

2 Layers: The same main layer, but now with a stationary background layer.

Now we are going to add a background layer. (here is the file: Media:Cigam Ex02.svg)
ExB 01.jpg
But first we need to add a new layer. To add a new layer click on "layer/add layer"
ExA 02a.jpg
A new window will pop up and ask you for the name and if you want it above or below the currently selected layer

Above:

ExC 05.jpg

Below:

ExC 04.jpg
After you specify your new layer, you can now add blocks to it. (but make sure that you have that layer selected before you add stuff. Whatever layer is selected is the layer that will get newly created objects/blocks) When you create a new layer it will automatically have that layer selected so, you can now add a block, the properties for the block I added is:
ExB 02.jpg
Notice that I did not select it to be a background block. I do this because since we specified our main layer we do not need to make all the other blocks background, because any other layer will automatically be background. The only layer you have to check the "background block" option is for the main layer, any other is automatic. so if we look at our layers again, there is only one main layer and our new layer is just a background layer, because we do not have it checked as a main layer:
ExB 03.jpg

So here is what we have so far, everything will be the same, but now we will have a background block layer.

ExB 04.jpg

3 Layers: the same two layers, but now with a drifting background layer.

Now we are going to add a drifting layer. (here is the file: Media:Cigam Ex03.svg)
ExC 01.jpg
Start by adding a new layer to be for the layer you want drifted. Then add your block, or blocks, that you want drifted. Again, notice that I did not specify the new block as a background block.
ExC 02.jpg
And the new layer is still just a background layer, but now we are going to adjust the first slide bar for our new layer. The two slide bars adjust the X and Y drifting speed. I only adjusted the X because I only wanted it to go left and right in direction. (I changed it from being 1.00 to be 1.61):
ExC 03.jpg
When you "tab" to view the level notice that the background drift layer does not scale/zoom like the rest of the level. That is normal for the drifting layers. So adjust the size and shape of your drift layer to make it be viewed like you want.

Here is what it looks like:

ExC 06.jpg

Here is the "tabbed" view:

ExC 07.jpg

4 layers: the same three layers. This is to show how physics objects do not work in more than one layer.

When you add physics blocks in a new layer it will act like other non-main layers, and just be a stationary background blocks. (here is the file: Media:Cigam Ex04.svg)
ExD 01.jpg
Physics blocks ONLY work in the main layer, and there can only be 1 working main layer. If you try and specify 2 main layers, the program will associate the last specified main layer as the only main layer. So if you want physics blocks put them in your 1 main layer. I added a sphere to the level with these settings:
ExD 02.jpg
But since it is not a main layer it just makes the sphere a stationary background object when you play the level:
ExD 03.jpg

Here is what it looks like:

ExD 04.jpg

Layers: this shows that sprites do not drift, in a drifting layer.

Sprites do not drift at all. (here is the file: Media:Cigam Ex05.svg)
ExE 01.jpg
If you add a sprite to a drifting layer it is just a stationary sprite entity, and will not drift at all. I tried various things, like adjusting the Z, but nothing will make it drift. These were the settings I had on the sprite:
ExE 02.jpg

Here is what is looks like:

ExE 03.jpg

Here is where you can see that the background drifted but not the sprite:

ExE 04.jpg

Final Notes on Layers:

To move layers up/above and down/below other layers, just click the arrows in the layers side panel. The "eye" next to the name of the layer changes whether it is visible in the program, but that button does not change whether it is visible in game. The "lock" specifies whether you can edit the layer or not, it basically locks everything in place.
That is the gist of how to do layers. As mentioned above you can have an infinite number of layers, there can be 2 main layers, but there can ONLY be 1 main physics layer. Also remember you only have to specify "background" blocks in your main layer, everything else will be background blocks automatically. Enjoy making layered levels.