Difference between revisions of "How to create smooth levels using Inkscape"

From X-Moto
Jump to: navigation, search
(Generate level file)
Line 8: Line 8:
 
----
 
----
  
== Required softwares ==
+
=Required softwares =
  
 
* [http://www.inkscape.org/ Inkscape] (>= 0.44)
 
* [http://www.inkscape.org/ Inkscape] (>= 0.44)
Line 15: Line 15:
 
  $ cvs -z3 -d:pserver:anonymous@xmoto.cvs.sourceforge.net:/cvsroot/xmoto co -P xmoto/tools/svg2lvl/
 
  $ cvs -z3 -d:pserver:anonymous@xmoto.cvs.sourceforge.net:/cvsroot/xmoto co -P xmoto/tools/svg2lvl/
  
== Pre-requesites ==
+
= Pre-requesites =
  
 
You have to install the svg2lvl inkscape extension.
 
You have to install the svg2lvl inkscape extension.
  
=== GNU/Linux ===
+
== GNU/Linux ==
  
 
  $ cd the_rep_where_you_ve_done_the_cvs_checkout
 
  $ cd the_rep_where_you_ve_done_the_cvs_checkout
Line 29: Line 29:
 
Then, you can launch inkscape.
 
Then, you can launch inkscape.
  
=== Windows ===
+
== Windows ==
  
 
Go to the share/extensions/ directory inside your inkscape installation. Copy the .py and .inx files inside that  directory.
 
Go to the share/extensions/ directory inside your inkscape installation. Copy the .py and .inx files inside that  directory.
Line 35: Line 35:
 
Then, launch inkscape.
 
Then, launch inkscape.
  
== Draw the level ==
+
= Draw the level =
  
 
Open Inkscape.
 
Open Inkscape.
Line 47: Line 47:
 
[[Image:inskcape-drawn.png]]
 
[[Image:inskcape-drawn.png]]
  
== Transform all objects into paths ==
+
You no longer have to transform all objects into paths. The svg2lvl script handles that itself.
  
Inskcape deals with its own shapes like stars, circles, ... so you have to convert them to path of vertex.
+
= Put level objects properties =
 
Disclaimer: don't put objects properties before transforming them to paths !
 
Else properties will be lost... Inkscape remove them.
 
 
 
First, select the object,
 
[[Image:inskcape-obj.png]]
 
 
 
----
 
 
 
Then, Shift+Ctrl+C (or use the menu)
 
 
 
[[Image:inskcape-obj2path.png]]
 
 
 
----
 
 
 
And you got a path of vertex
 
 
 
[[Image:inskcape-path.png]]
 
 
 
Repeat this process for every inskcape shape (rectangle, circle, star, ...)
 
 
 
== Level objects properties ==
 
  
 
Once your level is drawn, you have to put entities, blocks and sprites properties.  
 
Once your level is drawn, you have to put entities, blocks and sprites properties.  
Line 77: Line 55:
 
There is two ways of doing it. Manually or using inkscape ''effects''.
 
There is two ways of doing it. Manually or using inkscape ''effects''.
  
===Using inkscape Effects===
+
==Using inkscape Effects==
  
 
The easiest way to change objects properties.
 
The easiest way to change objects properties.
Line 101: Line 79:
 
[[Image:Effect-result.png]]
 
[[Image:Effect-result.png]]
  
===Edit Manually===
+
==Edit Manually==
  
 
The other way to change objects properties.
 
The other way to change objects properties.
Line 181: Line 159:
 
;The only possible value for a zone: typeid=Zone
 
;The only possible value for a zone: typeid=Zone
  
== Generate level file ==
+
= Generate level file =
  
  You no longer have to add many vertex, the script handle that itself !
+
  You no longer have to add many vertex, the script handles that itself !
  
 
  DISCLAIMER : Save you level in svg format too.  
 
  DISCLAIMER : Save you level in svg format too.  
  .lvl is a loosy format, you lost informations about bezier curves,
+
  .lvl is a loosy format, you'll loose informations about bezier curves,
  there are remplaced with many vertex.  
+
  because there are remplaced with many vertex.  
  Furthermore, inkscape can't open .lvl files (feel free to send a patch).
+
  Furthermore, inkscape can't open .lvl files (feel free to send a patch to correct this).
  
===launch the converter===
+
==Launch the converter==
  
 
In order to save your level in the .lvl file format, use the menu ''File -> Save as...'' (or use Shift-Ctrl-S) and choose the ''X-Moto Level'' file extension, put the level file name then press ''Save''.
 
In order to save your level in the .lvl file format, use the menu ''File -> Save as...'' (or use Shift-Ctrl-S) and choose the ''X-Moto Level'' file extension, put the level file name then press ''Save''.
Line 223: Line 201:
 
The script add a log file svg2lvl.log into your home directory.
 
The script add a log file svg2lvl.log into your home directory.
  
=== Files used in this howto===
+
== Files used in this howto==
  
 
*svg file: [[Media:sample.svg]]
 
*svg file: [[Media:sample.svg]]
 
*lvl file: [[Media:sample.lvl]]
 
*lvl file: [[Media:sample.lvl]]

Revision as of 22:44, 14 September 2006

Català


Caution: this software is still in early development stage. Please report bugs on the irc


Required softwares

  • Inkscape (>= 0.44)
  • Python (>= 2.4)
  • Svg2lvl converter and inkscape extension (available in xmoto cvs)
$ cvs -z3 -d:pserver:anonymous@xmoto.cvs.sourceforge.net:/cvsroot/xmoto co -P xmoto/tools/svg2lvl/

Pre-requesites

You have to install the svg2lvl inkscape extension.

GNU/Linux

$ cd the_rep_where_you_ve_done_the_cvs_checkout
$ cd xmoto/tools/svg2lvl/
$ mkdir -p ~/.inkscape/extensions/
$ cp *.inx *.py ~/.inkscape/extensions/
$ ln -s /usr/share/inkscape/extensions/bezmisc.py ~/.inkscape/extensions/bezmisc.py
$ ln -s /usr/share/inkscape/extensions/inkex.py ~/.inkscape/extensions/inkex.py

Then, you can launch inkscape.

Windows

Go to the share/extensions/ directory inside your inkscape installation. Copy the .py and .inx files inside that directory.

Then, launch inkscape.

Draw the level

Open Inkscape.

Inkscape-empty.png


You're ready to draw your level using Inskcape. See Inskcape howto's from the help menu.

Inskcape-drawn.png

You no longer have to transform all objects into paths. The svg2lvl script handles that itself.

Put level objects properties

Once your level is drawn, you have to put entities, blocks and sprites properties.

There is two ways of doing it. Manually or using inkscape effects.

Using inkscape Effects

The easiest way to change objects properties.

Select the objets whose you want to change their properties. Then go to the Effect menu and choose the X-moto sub-menu. From there you got other sub-menus to transform your objects into the desired type (Zones, Blocks and Entities).

Depending on the object type, its color changes. Colors are pretty ugly for the moment... but feel free to give idea about which colors could suit better. Adding a texture edge to a block adds an ugly green edge to the block in inkscape.

It updates the object label (see next section for a better description).


For example, we want to change the circle into a dynamic block using the texture Texture1 (it's a fake one, it doesn't exists). (Note that you can select more than one object at a time). First, we select the right entry in the X-moto submenu.

Effect-inkscape.png

Then we put the texture name

Effect-param.png

And here is the result. To see it, right click on an object then select object properties.

Effect-result.png

Edit Manually

The other way to change objects properties.

Select an object, right click on it, then select 'object properties'.

Inskcape-properties.png


Properties are put inside the 'label' box. They are seperate with a '|'. If no properties are set, then the object is put as a block with default texture. You can also fill the 'id' box, it's useful if you write a lua script for the level, because you got the blocks, zones and entities names to use in your script.

WARNING : properties are case sensitive ! Write them with the exact case as show below.

Block properties

  • background
  • dynamic
  • usetexture=texture_name
  • edgeTexture=edge_texture_name

Examples

A background block (it's a block in the background and the player can't interact with it) using the Dark Dirt texture:

background|usetexture=DarkDirt

A dynamic block using the default texture:

dynamic

A block using the default texture:

(you have nothing to put in, let it blank (or let what inkscape puts in it))

A block using the Dark Dirt texture:

usetexture=DarkDirt

A dynamic block with grass on it and the Bricks texture

usetexture=Bricks|dynamic|edgeTexture=Grass


Entity properties

  • typeid=[PlayerStart|EndOfLevel|Strawberry|Wrecker|ParticleSource|Sprite]
  • size=float_number (the entity colision radius)
  • param_name=param_value available params name are (there's more of them):
    • z (for Sprite)
    • name (for Sprite)
    • style (for every entity)
    • type (for ParticleSource)

For example

A particle source throwing smoke:

typeid=ParticleSource|type=Smoke

A strawberry:

typeid=Strawberry

A tree sprite put under foreground blocks

typeid=Sprite|name=Tree1|z=-1

Player start:

typeid=PlayerStart

End of level:

typeid=EndOfLevel

Zone properties

  • typeid=Zone
The only possible value for a zone
typeid=Zone

Generate level file

You no longer have to add many vertex, the script handles that itself !
DISCLAIMER : Save you level in svg format too. 
.lvl is a loosy format, you'll loose informations about bezier curves,
because there are remplaced with many vertex. 
Furthermore, inkscape can't open .lvl files (feel free to send a patch to correct this).

Launch the converter

In order to save your level in the .lvl file format, use the menu File -> Save as... (or use Shift-Ctrl-S) and choose the X-Moto Level file extension, put the level file name then press Save.

Save-as.png

A new window pops, you have to put:

  • level width : the level width in xmoto unit. play with it until you find the right value for your level
  • smoothitude : the higher the value, the smoothest the level. But don't add to much vertex, because xmoto doesn't scale very well with big levels made with thousands of vertex... and became quite slow...
  • lua script  : the absolute path to your lua script (leave blank if your level doesn't have a lua script)
  • level id  : the level id (each level got a unique one)
  • level name: the name of the level in the level list
  • author: your name/pseudo
  • description: short description of the level
  • sky: the sky you want to use with your level

Then your level file will be save in the place you choose in the Save as... window.

Disclaimer: on GNU/Linux, it seems that saving the level directly inside ~/.xmoto/Levels/ doesn't work...
Disclaimer2: There's a bug in Inkscape. The very first time you save a level in lvl, put something into the lua script box (default: None). Else Inkscape will abort...

Script-params.png

Then, put your lvl generated file into your xmoto Levels directory, and you can play it (see how the grass is only added on the upper side of the block):

level in the editor

Our level in X-Moto

The script add a log file svg2lvl.log into your home directory.

Files used in this howto