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

From X-Moto
Jump to: navigation, search
Line 6: Line 6:
 
* [http://www.inkscape.org/ Inkscape] (>= 0.43)
 
* [http://www.inkscape.org/ Inkscape] (>= 0.43)
 
* [http://www.python.org/ Python] (>= 2.4)
 
* [http://www.python.org/ Python] (>= 2.4)
* Svg2lvl converter (need to put converter files somewhere in a cvs before)
+
* Svg2lvl converter (available in xmoto cvs)
  
 
== Draw the level ==
 
== Draw the level ==
Line 13: Line 13:
  
 
[[Image:inkscape-empty.png]]
 
[[Image:inkscape-empty.png]]
 +
 +
----
  
 
Press Shift+Ctrl+D to open file properties and choose the file dimensions. They must be in pixel unit (px).
 
Press Shift+Ctrl+D to open file properties and choose the file dimensions. They must be in pixel unit (px).
  
 
[[Image:inskcape-preferences.png]]
 
[[Image:inskcape-preferences.png]]
 +
 +
----
  
 
You're ready to draw your level using Inskcape. See Inskcape howto's from the help menu.
 
You're ready to draw your level using Inskcape. See Inskcape howto's from the help menu.
Line 25: Line 29:
  
 
Inskcape deals with its own shapes like stars, circles, ... so you have to convert them to path of vertex.
 
Inskcape deals with its own shapes like stars, circles, ... so you have to convert them to path of vertex.
Disclaimer: don't put objects properties before transforming them to paths ! Else properties will be lost... Inkscape remove them.
+
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 ==
 
== 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. Select an object, right click on it, then select 'object properties'.
 +
 
 +
[[Image: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.
 +
 +
===Block properties===
 +
* background
 +
* dynamic
 +
* usetexture=texture_name
 +
 +
;For example: background|usetexture=DarkDirt
 +
 +
===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: typeid=ParticleSource|type=Smoke
 +
 +
===Zone properties===
 +
*typeid=Zone
 +
 +
;For example: typeid=Zone
  
 
== Generate level file ==
 
== Generate level file ==
 +
 +
You're almost done.
  
 
  $ python svg2lvl.py level.svg 100 level.lvl [level.lua]
 
  $ python svg2lvl.py level.svg 100 level.lvl [level.lua]

Revision as of 11:38, 12 August 2006

To be completed when i'll be more motivated to take screenshots...


Required softwares

  • Inkscape (>= 0.43)
  • Python (>= 2.4)
  • Svg2lvl converter (available in xmoto cvs)

Draw the level

Open Inkscape.

Inkscape-empty.png


Press Shift+Ctrl+D to open file properties and choose the file dimensions. They must be in pixel unit (px).

Inskcape-preferences.png


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

Inskcape-drawn.png

Transform all objects into paths

Inskcape deals with its own shapes like stars, circles, ... so you have to convert them to path of vertex.

Disclaimer: don't put objects properties before transforming them to paths ! Else properties will be lost... Inkscape remove them.


First, select the object, Inskcape-obj.png


Then, Shift+Ctrl+C (or use the menu)

Inskcape-obj2path.png


And you got a path of vertex

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

Block properties

  • background
  • dynamic
  • usetexture=texture_name
For example
background|usetexture=DarkDirt

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
typeid=ParticleSource|type=Smoke

Zone properties

  • typeid=Zone
For example
typeid=Zone

Generate level file

You're almost done.

$ python svg2lvl.py level.svg 100 level.lvl [level.lua]