Inkscape-0.4.0

From X-Moto
Jump to: navigation, search

Deutsch

About

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

Installation on Windows

To install the Inksmoto 0.4.1 extensions for Inkscape on Windows, download and run Inkscape with Inksmoto 0.4.1 installer: http://download.tuxfamily.org/xmoto/svg2lvl/0.4.1/Inkscape-0.45.1_inksmoto-0.4.1_win32.exe

Linux Installation

Required software

  • Inkscape (0.45 or 0.45.1)
  • Python (>= 2.3)
  • python-tk
  • pyXML
  • Inksmoto (0.4.1)

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

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

Installation

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

To run Inkscape, simply type:

$ inkscape

Mac OS X Installation

To install the required softwares on a MacOS X box, get the .dmg on the Internet.

Put Inkscape.app into your Applications folder, to install it.

Extract the .tar.gz file with the appropriate Mac OS X tool, and copy everything from the extracted extensions directory, into the Inkscape extensions folder.

/Applcations/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


Inksmoto 0.7.0(latest release) works with Mac OS X Tiger, Leopard, Snow Leopard, Lion, and Mountain Lion. Instructions here: http://wiki.xmoto.tuxfamily.org/index.php?title=Inksmoto-0.7.0#Installation_on_Mac_OS_X

Tutorial: First steps

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

Warning: If you use the 0.4.0 release, this tutorial do not apply (but there's some similarities).

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

You can also get tutorials on youtube, like this one for example:

<youtube>Pd02Q-54wuQ</youtube>

<youtube>MhUFCgHJ6r4</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
    • 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.
  • Other
    • 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.
    • 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 menu entry "Effects->X-moto->Blocks->Change Block Type".

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 (Using "Effects->X-moto->Entities->Convert into Player Start"): 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 the Xmoto menu entry "Effects->X-moto->Level->Set level properties":

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 the Xmoto menu entry "Effects->X-moto->Other->Launch level in X-moto":

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

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 extensions directory
    • Linux & MacOSX: ~/.inkscape/extensions
    • Windows: C:\Program Files\Inkscape\share\extensions
  • You can also save the svg and the lvl separately using 'File'->'Save As...' and choosing the appropriate file format (X-Moto Level (*.lvl)).

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 menu entry "Effects->X-moto->Blocks->Change block type":

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 using the menu entry "Effects->X-moto->Level->Set level properties"

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

You can add an edge texture to the upper side of a block and/or to the down side. You can add a different or the same texture to the upper and the down side of a block.

You can also remove an edge to a block after putting it using the menu entry "Effects->X-moto->Blocks->Remove the edge around the block".

Example

  • For example, to add some edge texture to the ground blocks, select them then use the menu entry "Effects->X-moto->Blocks->Add an edge around the block":

Inkscape18.png

  • The block's edge properties window opens in which we choose that our blocks will have the 'bluen' texture on both their upper and down sides:

Inkscape19.png

  • The resulting level in Inkscape (note that blocks with an edge texture have a green border):

Inkscape20.png

  • The resulting level in Xmoto:

Inkscape21.png

Block physic

You can change the basic behaviour of blocks' physic. For the moment the only custom parameter is the block grip which change the grip of the bike on the block. This parameter is useful to create 'ice' blocks.

To update a block physic params use the "Effects->X-moto->Blocks->Change block physic params" menu entry after selecting the blocks you want to update.

Other entities properties

There's six different type of entities:

  • Strawberry
  • End Of Level
  • Particle Source
  • Player Start
  • Sprite
  • Wrecker

Particle Source

There's two type of particle sources:

  • Fire
  • Smoke

The particles don't interact with the bike, they are only cosmetic effects.

Example

Select the objects you want to transform into particle sources then use the "Effects->X-moto->Entities->Convert into Particle Source" menu entry.

A window will popup which allow to choose between Fire and Smoke.

  • Here is the level with particle sources in it (the orange circles):

Inkscape22.png

  • Here is the level in Xmoto:

Inkscape23.png

Sprite

When you transform an object into a sprite with the menu entry "Effects->X-moto->Entities->Convert into Sprite", this window pops up. It allows you to choose the sprite texture and change some of its parameters.

Inkscape24.png


  • Sprites can improve the visual of the level by adding a mood to it. For example this level is a Sonic one, so there's plenty of sprites inspired from the Sonic universe.

Inkscape28.png


  • By changing the z value of a sprite you can put sprites in front or in back of the player.

Inkscape29.png

  • By changing the rotation angle value of a sprite, you can turn you sprite in other directions.
  • You can also reverse the sprite on its x axis with the reverse the sprite button.

Inkscape31.png

  • You can change the size of a sprite by changing the width and height of a sprite.

Inkscape27.png

  • When you change the size of a sprite, you can also change it collision radius to reflect its new size if it's a sprite which collides with the biker.

Inkscape30.png

Strawberry, End Of Level, Wrecker

You can update the dimensions of this entities (size and collision radius) with the menu entries "Effects->X-moto->Entities->Convert into Strawberry, End Of Level, Wrecker"

  • This window will popup:

Inkscape43.png

  • Here is an example:

Inkscape42.png

Player Start

Player Start have no special parameters.

Just be sure that you don't put the biker wheels inside a block in its starting position. Else your level won't be validated, because the behaviour of wheel inside of a block may change in future version of Xmoto.

Other level properties

Sky

You can change the default sky and its parameters with this menu entry: "Effects->X-moto->Level->Set sky properties"

Inkscape25.png

Sky texture

You can just change the sky texture by selecting it in the list of available textures.

Sky parameters

You can also change the sky parameters by clicking the Use parameters button.

  • Zoom: you can change how the sky texture is zoomed.
  • Offset: you can change how fast the sky scrolls.
  • Colors: you can change the texture color and alpha.

Drifted sky

You can also add a drifted sky on top of the sky. A drifted sky is a second transparent sky on top of the existing one. The drifted sky scrolls at a different speed than the existing sky.

You can add it by clicking the Drifted sky button. Then you can change its parameters:

  • Zoom: you can change how the drifted sky texture is zoomed.
  • Colors: you can change the texture color and alpha.

Examples

Inkscape37.png

Inkscape38.png

Inkscape39.png

Inkscape41.png

Theme replacement & Music

You can update the sprites of the defaults Xmoto elements like the strawberries, the flower, the wreckers and the stars shown when a strawberry is picked. This window is available from "Effects->X-moto->Level->Set other level properties".

You can also choose a music which will be played while riding the level.

Inkscape26.png

  • Here the strawberries and the stars are replaced by flowers:

Inkscape32.png

  • Here the end of level is replaced by a Sonic panel:

Inkscape33.png

  • Here the wreckers are replaced by robot fishes:

Inkscape34.png

  • Here the strawberries are replaced by rings:

Inkscape35.png

Layers

See the Others_tips_to_make_levels#Layers page for a description of layers.

  • To use layers, you just have to add layers to your svg "Layer->Add a layer"

Inkscape52.png

  • You can add it above or under the current layer (give your layer a name to find it easily)

Inkscape53.png

  • Then hide the current layer

Inkscape54.png

  • And select the new layer

Inkscape55.png

  • Now you can draw your layer blocks (and add them texture and edge texture)

Beware that you have to put your blocks as 'normal' blocks (if you put them as background and/or dynamic, they won't be displayed in Xmoto) Inkscape56.png

  • then use the layers properties window "Effects->X-moto->Level->Set layers properties".

In the layers properties window you have different properties:

  • Use layer: uncheck it to not use the layer (for example you can have a layer with an hand draw level scanned and you use it to draw your level in Inkscape).
  • Is main layer: to put the main layer (there can be up to two main layers). Layers are sorted in the same order as in Inkscape.
  • X scroll: The scroll on the X axis.
  • Y scroll: The scroll on the Y axis.

Inkscape57.png

  • Here we want the clouds layer to move in the background and slower than the main layer
  • And the level in Xmoto:

Inkscape58.png Inkscape59.png

Inkscape tricks

Hand draw blocks

When you hand draw a block, you can smooth it using 'Path->Simplify' (or Ctrl-L). You can repeat it several times to smooth more your block.

  • Hand draw a block

Inkscape49.png

  • Smooth it using 'Path->Simplify' (or Ctrl-L) several times.

Inkscape50.png

  • The block smoothed

Inkscape51.png

  • Then you can use the node editing tool (F2) to fine tune your block.

Change level dimensions

  • Zoom out to see all your level

Inkscape44.png

  • Draw a rectangle on top of your level which recovers it all and select it

Inkscape45.png

  • Go to 'File->Document Properties...' (or Shift-Ctrl-D)

Inkscape46.png

  • and click on 'Fit page to selection'

Inkscape47.png

  • Remove the rectangle

Inkscape48.png

Change level scale

The ratio between the Inkscape scale and the Xmoto scale is fixed. As a consequence, it's possible that you draw your level too big or too small.

Thanksfully, Inkscape allows you to change the scale of your level.

First possibility

  • First, select everything in Inkscape with Ctrl-A (you'll have to repeat the procedure for every layers)

Inkscape71.png

  • Then select "Object->Transform..." (or Shift-Ctrl-M)

Inkscape72.png

  • Choose the scaling percentage

Inkscape73.png

  • Apply

Inkscape74.png


Second possibility

  • First, select everything in Inkscape with Ctrl-A (you'll have to repeat the procedure for every layers)

Inkscape71.png

  • Then group them with the button in red (or Ctrl-G)

Inkscape75.png

  • Now you can change their size with the Select and transform tool (F1)

Tips: Keep Ctrl pressed and use the lower right arrow (in red) to scale the blocks proportionnaly Inkscape76.png

  • Ungroup them with the button in red (or Shift-Ctrl-G)

Inkscape77.png

Conclusion

Note that the two methods give different results, the first don't change the objects center.

Align objects

  • To align blocks, select them then go to "Object->Align and Distribute..." (or press Shift-Ctrl-A)

Inkscape60.png

  • Then you can align them in plenty of way

Inkscape61.png

  • Note that when you use the Remove overlaps to put blocks close to each others, there shall be a small gap between them in Xmoto (Because Inksmoto and Xmoto use different scales). So be careful and manually change the size of blocks to remove those gaps.

Grouping objects

If you group some objects, you won't be able to assign them Inksmoto properties. It'll be fixed in the next Inksmoto release.

So, for the moment, ungroup objects before assigning them properties.

Bezier curves tips

Online tutorial

See this youtube video which demonstrate how to use bezier curves: <youtube>WcYGTXRYmqc</youtube>

A little tutorial on bezier curves: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-Bezier-Curves.html

Smoothing a block

Here is an easy way to create smooth blocks.

  • Use the Bezier curves tool (Shift-F6), and draw your block with straight lines.

Inkscape62.png

  • Then select the Node editing tool (F2), select the nodes you want to smooth and click on the button in red on the screenshot

Inkscape63.png

  • Here you have your smoothed block.

Inkscape64.png

  • Then you can fine tune the shape with the Node editing tool (F2)

Boolean operations on paths

See this youtube video which demonstrate boolean operations: <youtube>u1nw9Bz86Po</youtube>

Beware that if you use boolean operations on blocks, their Inksmoto attributes will be lost. You'll have to put them back.

<youtube>QFVoLz88hiU</youtube>

Add an edge only to certain part of a block

In Xmoto-edit, you were able to say which vertex have an edge texture, but in Inksmoto, you can only put an edge texture on the whole upper side and/or down side. And sometimes you need to do it more precisely.

  • Here is a block where we don't want to put an edge texture on the whole down side

Inkscape65.png

  • First, we put guides to help us. (Click on the scale on the left of the drawing area, keep the mouse button pressed and move the mouse on the right, a guide will now be under the mouse cursor. (same for the upper scale)).

Inkscape66.png

  • Then we tell Inkscape that we want our drawing to snap on the guides ("File->Document Properties..." or Shift-Ctrl-D). Select Always snaping in the Guides snapping part.

Inkscape67.png

  • Select the rectangle tool (F4), and draw a rectangle in the upper right of the screen (it will automatically get snapped to the guides)

Inkscape68.png

  • Go to the Path menu and select Cut Path (Ctrl-Atl-/)

Inkscape69.png

  • Now your block is cut in three parts and you can put different edge texture to each

Inkscape70.png

Using the Text tool

You can't put Xmoto attributes to text. You have to convert them to Inkscape blocks first.

  • First, enter your text with the text tool (press F8 to select the tool)

Inkscape78.png

  • Then convert your text into Inkscape blocks (note that you won't be able to change the text after that)

Inkscape79.png

  • Now you can add Xmoto attributes to the blocks

Inkscape80.png

Scripting

TODO::add more details to the tutorial

  • First you need something to write your script in, it can be any simple text editor (do not use MS Word or OpenOffice), but I would recommand LuaEdit.
  • Then start your text-editor and write the script for your level (See Scripted_levels for some informations)
  • Let's say a simple reverse gravity script:
function OnLoad()
   Game.SetGravity(0, 9.81)
   Game.Message("Gravity changed !")
   return true
end
  • Save the file somewhere on your computer (It does not matter where). Give it the .txt or .lua extension.
  • Now open your level in Inkscape. Go to the menu entry Xmoto -> Level -> Set Level properties.
  • In the first box "Lua script" fill in the path to your script file (for example: C:\Documents and Settings\My Name\Desktop\MySuckyScript.lua). Don't forget the file extension.
  • Then launch the level, and voila! The gravity is reversed!

<youtube>OTyw6cq86kY</youtube>