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

From X-Moto
Jump to: navigation, search
(Required softwares)
(Inksmoto Level Editor versions)
 
(46 intermediate revisions by 10 users not shown)
Line 1: Line 1:
=Caution: this software is still in early development stage. =
+
[[Ca:Inkscape|Català]] - [[Es:Inkscape|Español]] - [[Das Erstellen eines Levels mit Inkskape|Deutsch]]
=It's more a proof of concept for the time. =
 
=Please report bugs on the irc=
 
  
 +
==svg2lvl changes its name, it's now called: '''Inksmoto Level Editor'''==
  
== Required softwares ==
+
=Inksmoto Level Editor versions=
  
* [http://www.inkscape.org/ Inkscape] (>= 0.44)
+
Use the documentation appropriate to your version of Inksmoto Level Editor
* [http://www.python.org/ 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 ==
+
* [[Inksmoto-0.6.0| Old version (0.6.0)]]
 +
* [[Inksmoto-0.7.0| Actual version (0.7.0)]]
 +
* [[Inkscape-dev|Developpement version]]
  
You have to install the svg2lvl inkscape extension.
+
=Short description about the new Inksmoto Level Editor=
  
=== GNU/Linux ===
+
Inksmoto Level Editor is the new xmoto level editor. It uses [http://www.inkscape.org Inkscape] to draw levels, then it allows you to save your drawing as a xmoto level (.lvl file). It also allow you to edit xmoto level properties from within [http://www.inkscape.org Inkscape] such as make background block, strawberries, wreckers, end of level, checkpoints, etc.
  
$ cd the_rep_where_you_ve_done_the_cvs_checkout
+
Inksmoto Level Editor is written in [http://www.python.org/ Python], it's an [http://www.inkscape.org Inkscape] extension.
$ cd xmoto/tools/svg2lvl/
 
$ mkdir -p ~/.inkscape/extensions/svg2lvl/
 
$ cp svg2lvl.inx ~/.inkscape/extensions/
 
$ cp *.py ~/.inkscape/extensions/svg2lvl/
 
 
 
Then, you can launch inkscape.
 
 
 
=== Windows ===
 
 
 
Go to the share/extensions/ directory inside your inkscape installation. Create a directory called ''svg2lvl''. Copy the .py files inside that new directory. Then copy the .inx file to share/extensions/
 
 
 
Then, launch inkscape.
 
 
 
== Draw the level ==
 
 
 
Open Inkscape.
 
 
 
[[Image:inkscape-empty.png]]
 
 
 
----
 
 
 
You're ready to draw your level using Inskcape. See Inskcape howto's from the help menu.
 
 
 
[[Image: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,
 
[[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. 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.
 
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
 
 
 
====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
 
 
 
===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 ==
 
 
 
Inkscape works with bezier curves, but the converter only use vertex, so you have to smooth objects.
 
Press F2 to select the appropriate tool then select an object. It's not having much vertex. Press Ctrl+A to select every vertex. Then press the '+' button (see screenshot)
 
 
 
[[Image:inskcape-add.png]]
 
 
 
----
 
 
 
Press the '+' button until you got enough vertex for the object to be smooth.
 
 
 
[[Image:inskcape-smooth.png]]
 
 
 
Repeat that for EVERY objects that have to be smooth blocks in the game (no need to do that for objects which'll be entities or zones)
 
 
 
Feel free to add plenty of vertex because the converter will remove unnecessary vertex. For example, here are the remaining vertex in the sample level:
 
 
 
[[Image:Sample-level-editor.png|level in the editor]]
 
 
 
 
 
===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''.
 
 
 
[[Image: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)
 
 
 
Then your level file will be save in the place you choose in the ''Save as...'' window.
 
 
 
[[Image:Script-params.png]]
 
 
 
 
 
You can also use the command line.
 
 
 
$ python svg2lvl.py --width=100.0 --smooth=95.0 --lua= --name=myLevelId svgfile > levelfile.lvl
 
 
 
Params are:
 
* level width in xmoto unit
 
* smooth percent (play with it)
 
* absolute path to lua script file (optional)
 
* level id
 
* absolute path to the svg file
 
 
 
Then, put your lvl generated file into your xmoto Levels directory, and you can play it:
 
 
 
[[Image:sample-level.jpg|thumb|Our level in X-Moto]]
 
 
 
=== Files used in this howto===
 
 
 
*svg file: [[Media:sample.svg]]
 
*lvl file: [[Media:sample.lvl]]
 

Latest revision as of 22:47, 22 May 2013

Català - Español - Deutsch

svg2lvl changes its name, it's now called: Inksmoto Level Editor

Inksmoto Level Editor versions

Use the documentation appropriate to your version of Inksmoto Level Editor

Short description about the new Inksmoto Level Editor

Inksmoto Level Editor is the new xmoto level editor. It uses Inkscape to draw levels, then it allows you to save your drawing as a xmoto level (.lvl file). It also allow you to edit xmoto level properties from within Inkscape such as make background block, strawberries, wreckers, end of level, checkpoints, etc.

Inksmoto Level Editor is written in Python, it's an Inkscape extension.