Difference between revisions of "Inkscape-0.4.0"

From X-Moto
Jump to: navigation, search
(Installation=)
Line 1: Line 1:
 
'''Svg made with the 0.2.0 version of svg2lvl are not compatible with this version of svg2lvl.'''
 
'''Svg made with the 0.2.0 version of svg2lvl are not compatible with this version of svg2lvl.'''
  
=Installation=
+
=Windows installation=
 
 
==Windows installation==
 
  
 
To install Inksmoto level editor 0.4.0 on a Windows box, just double-click on the [http://download.tuxfamily.org/xmoto/svg2lvl/0.4.0/Inkscape-0.45.1_svg2lvl-0.4.0_win32.exe Inkscape-0.45.1_svg2lvl-0.4.0_win32.exe] installer.
 
To install Inksmoto level editor 0.4.0 on a Windows box, just double-click on the [http://download.tuxfamily.org/xmoto/svg2lvl/0.4.0/Inkscape-0.45.1_svg2lvl-0.4.0_win32.exe Inkscape-0.45.1_svg2lvl-0.4.0_win32.exe] installer.
  
==Linux & Mac OS X installation==
+
=Linux & Mac OS X installation=
  
===Required software===
+
==Required software==
  
 
* [http://www.inkscape.org/ Inkscape] (>= 0.45)
 
* [http://www.inkscape.org/ Inkscape] (>= 0.45)
Line 22: Line 20:
 
To install the required softwares on a MacOS X box, use Fink and/or get the .dmg on the Internet. (TODO: get the exact procedure)
 
To install the required softwares on a MacOS X box, use Fink and/or get the .dmg on the Internet. (TODO: get the exact procedure)
  
===Installation===
+
==Installation==
  
 
  $ wget http://download.tuxfamily.org/xmoto/svg2lvl/0.4.0/svg2lvl-0.4.0.tar.gz
 
  $ wget http://download.tuxfamily.org/xmoto/svg2lvl/0.4.0/svg2lvl-0.4.0.tar.gz
Line 30: Line 28:
 
  $ cp -f * ~/.inkscape/extensions/
 
  $ cp -f * ~/.inkscape/extensions/
  
=Tutorial=
+
=Tutorial: First steps=
 
 
==First steps==
 
  
 
This part of the tutorial learns the basics to be able to create a level.
 
This part of the tutorial learns the basics to be able to create a level.
  
===Quick look at inkscape===
+
==Quick look at inkscape==
  
 
[[Image:Inkscape0.png]]
 
[[Image:Inkscape0.png]]
Line 54: Line 50:
 
[[Image:Inkscape2.png]]
 
[[Image:Inkscape2.png]]
  
===The Xmoto extensions===
+
==The Xmoto extensions==
  
 
The Xmoto extensions from the ''Effects'' menu allows you to set Xmoto properties to Inkscape objects in the drawing.
 
The Xmoto extensions from the ''Effects'' menu allows you to set Xmoto properties to Inkscape objects in the drawing.
Line 83: Line 79:
 
**''Convert into Zone'': Convert the selected shapes into zones (currently, only rectangular zones are used).
 
**''Convert into Zone'': Convert the selected shapes into zones (currently, only rectangular zones are used).
  
===Drawing a simple level===
+
==Drawing a simple level==
  
 
Let's draw a simple level using only the Rectangle, Circle and Star tools.
 
Let's draw a simple level using only the Rectangle, Circle and Star tools.
Line 92: Line 88:
 
[[Image:Inkscape4.png]]
 
[[Image:Inkscape4.png]]
  
===Set level properties===
+
==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, ...
 
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, ...
Line 98: Line 94:
 
To do that, select the shapes we want to update, then go to the Xmoto effect menu and use the appropriate menu entry.
 
To do that, select the shapes we want to update, then go to the Xmoto effect menu and use the appropriate menu entry.
  
====Example====
+
===Example===
  
 
*For example, to put the ground of our tutorial level, select the ground blocks and convert them to xmoto blocks.
 
*For example, to put the ground of our tutorial level, select the ground blocks and convert them to xmoto blocks.
Line 112: Line 108:
 
[[Image:Inkscape8.png]]
 
[[Image:Inkscape8.png]]
  
===Save the level===
+
==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, ...
 
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, ...
Line 131: Line 127:
 
**'''border texture''': Choose the texture which be displayed around the level.
 
**'''border texture''': Choose the texture which be displayed around the level.
  
===Test it in Xmoto===
+
==Test it in Xmoto==
  
 
Now our level is ready to be tested in Xmoto.  
 
Now our level is ready to be tested in Xmoto.  
Line 147: Line 143:
 
*When you launch the level in Xmoto, the file last.svg and last.lvl are created in the Inkscape extensions directory (~/.inkscape/extensions (Linux & MacOSX) C:\Program Files\Inkscape\share\extensions (Windows)). You can get the svg and the lvl this way. You can also save the svg and the lvl separately using 'File'->'Save As...' and choosing the appropriate file format.
 
*When you launch the level in Xmoto, the file last.svg and last.lvl are created in the Inkscape extensions directory (~/.inkscape/extensions (Linux & MacOSX) C:\Program Files\Inkscape\share\extensions (Windows)). You can get the svg and the lvl this way. You can also save the svg and the lvl separately using 'File'->'Save As...' and choosing the appropriate file format.
  
===Svg file of the tutorial===
+
==Svg file of the tutorial==
  
 
Here is the corresponding svg file of the level in its current state : [[Media:Tutorial1.svg]]
 
Here is the corresponding svg file of the level in its current state : [[Media:Tutorial1.svg]]
  
==More advanced topics==
+
=Tutorial: More advanced topics=
  
 
In this part, we will see how to add more advanced stuffs to the level in order to create better levels.
 
In this part, we will see how to add more advanced stuffs to the level in order to create better levels.
  
===Other blocks properties===
+
==Other blocks properties==
  
====Different block types====
+
===Different block types===
  
 
There's four type of blocks:
 
There's four type of blocks:
Line 167: Line 163:
 
You can change the type of blocks by selected them then use the appropriate menu entry:
 
You can change the type of blocks by selected them then use the appropriate menu entry:
  
=====Example=====
+
====Example====
  
 
*For example, to convert the three background blocks into dynamic background block, select them and convert them.
 
*For example, to convert the three background blocks into dynamic background block, select them and convert them.
Line 180: Line 176:
 
Now we can add a script to this level in order to move the dynamic background blocks.
 
Now we can add a script to this level in order to move the dynamic background blocks.
  
====Block edges====
+
===Block edges===
  
 
In order to increase the visual quality of your level, you can add edges to the blocks.
 
In order to increase the visual quality of your level, you can add edges to the blocks.
Line 188: Line 184:
 
[[Image:Inkscape14.png]]
 
[[Image:Inkscape14.png]]
  
===Other entities properties===
+
==Other entities properties==
  
===Other level properties===
+
==Other level properties==
  
===Layers===
+
==Layers==
  
===Inkscape tricks===
+
==Inkscape tricks==

Revision as of 12:44, 19 July 2007

Svg made with the 0.2.0 version of svg2lvl are not compatible with this version of svg2lvl.

Windows installation

To install Inksmoto level editor 0.4.0 on a Windows box, just double-click on the Inkscape-0.45.1_svg2lvl-0.4.0_win32.exe installer.

Linux & Mac OS X installation

Required software

  • Inkscape (>= 0.45)
  • Python (>= 2.3)
  • python-tk
  • pyXML
  • Svg2lvl converter (0.4.0)

To install the required softwares on an Linux Ubuntu box (Festy Fawn):

$ sudo apt-get install inkscape python python-tk python-xml

To install the required softwares on a MacOS X box, use Fink and/or get the .dmg on the Internet. (TODO: get the exact procedure)

Installation

$ wget http://download.tuxfamily.org/xmoto/svg2lvl/0.4.0/svg2lvl-0.4.0.tar.gz
$ tar zxvf svg2lvl-0.4.0.tar.gz
$ cd ~/svg2lvl-0.4.0/
$ mkdir -p ~/.inkscape/extensions/
$ cp -f * ~/.inkscape/extensions/

Tutorial: First steps

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

Quick look at inkscape

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

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
    • Remove the edge around the block: Remove the upper and/or the down edge of the selected blocks.
    • Add an edge around the block: Add an edge on the upper and/or down edge of the selected blocks. The up and down side can have a different edge texture.
    • Change Block Texture: Change the texture of the selected blocks.
    • Change Block Type: Convert the selected shapes into Xmoto blocks (normal, background, dynamic, dynamic background). You can also assign them a texture.
    • Change block physic params: Change the physic parameters of the selected blocks (currently, only the block friction).
  • Entities
    • Convert into Strawberry: Convert the selected shapes into a strawberry.
    • Convert into End of level: Convert the selected shapes into a end of the level.
    • Convert into Particle Source: Convert the selected shapes into a particle source (fire or smoke).
    • Convert into Player Start: Convert the selected shapes into the start position of the player.
    • Convert into Sprite: Convert the selected shapes into a sprite (with many parameters for the sprite).
    • Convert into Wrecker: Convert the selected shapes into a wrecker.
  • 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.
  • Launch level in X-Moto: Launch the level in Xmoto.
  • Show the object informations: Show the Xmoto properties of the selected shapes.
  • Update X-Moto menus: Get new textures and sprites from the Internet.
  • Zones
    • Convert into Zone: Convert the selected shapes into zones (currently, only rectangular zones are used).

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 for the shapes and the Circle tool for the two little circles: Inkscape4.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, ...

To do that, select the shapes we want to update, then go to the Xmoto effect menu and use the appropriate menu entry.

Example

  • For example, to put the ground of our tutorial level, select the ground blocks and convert them to xmoto blocks.

Inkscape5.png

  • The block properties window opens in which we choose that our blocks will be normal blocks with the texture glass1:

Inkscape6.png

  • Then the level updated in Inkscape (shapes with an Xmoto properties are colored, the color depends on the property):

Inkscape7.png

Here is the level after we put the three remaining blocks as background blocks and the two circles as the start and the end of the level: Inkscape8.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 this entry of the Xmoto menu:

Inkscape9.png

  • This windows will popup:

Inkscape10.png

  • Entries in this window (bold ones are mandatory):
    • smoothitude: The higher this parameter, the smoother the level (9 by default).
    • 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 and digits, 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 it in Xmoto

Now our level is ready to be tested in Xmoto.

  • Just use this Xmoto menu entry:

Inkscape11.png

  • This window will popup:

Inkscape12.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 under Xmoto:

Inkscape13.png

  • When you launch the level in Xmoto, the file last.svg and last.lvl are created in the Inkscape extensions directory (~/.inkscape/extensions (Linux & MacOSX) C:\Program Files\Inkscape\share\extensions (Windows)). You can get the svg and the lvl this way. You can also save the svg and the lvl separately using 'File'->'Save As...' and choosing the appropriate file format.

Svg file of the tutorial

Here is the corresponding svg file of the level in its current state : Media:Tutorial1.svg

Tutorial: More advanced topics

In this part, we will see how to add more advanced stuffs to the level in order to create better levels.

Other blocks properties

Different block types

There's four type of blocks:

  • Normal: The blocks which collide with the biker.
  • Background: Blocks behind the biker.
  • Dynamic: Blocks which collide with the biker, they can be moved using scripting.
  • Dynamic background: Blocks behind the biker which can be moved using scripting.

You can change the type of blocks by selected them then use the appropriate menu entry:

Example

  • For example, to convert the three background blocks into dynamic background block, select them and convert them.

Inkscape15.png

  • The block properties window opens in which we choose that our blocks will be dynamic background blocks. Note that we don't update the blocks texture:

Inkscape16.png

  • The resulting level in Inkscape:

Inkscape17.png

Now we can add a script to this level in order to move the dynamic background blocks.

Block edges

In order to increase the visual quality of your level, you can add edges to the blocks. An edge is a texture which is draw on the border of the block.

  • See this screenshot of a level with edges on its blocks:

Inkscape14.png

Other entities properties

Other level properties

Layers

Inkscape tricks