Graphics guide
This text will shortly explain how we created vector graphics to Frets on Fire.
Here's some background on the graphics used in Frets on Fire and a short introduction
on how you can import your own images into the game.
Introduction
All graphics in the game are based on resolution independent
vector graphics stored in
SVG files. That means that you'll need to use a
vector graphics program for creating your images. Here's what we used:
- Gimp (Used for preparing images for Inkscape)
- Inkscape (Used for making the vector images)
In addition to 2D vector graphics, the game uses a few 3D models as well. They are
stored in the
Collada 3D graphics interchange format.
We used
Blender to create the 3D models.
Graphics files in Frets on Fire
- 2x.svg, 3x.svg, 4x.svg - Ingame multiplier icons
- ball1.svg - Empty ingame multiplier ball
- ball2.svg - Full ingame multiplier ball
- cassette.svg - Background for song selection dialog
- editor.svg - Background for song editor
- flame1.svg, flame2.svg - Ingame background flames
- glow.svg - Texture for note glow effect
- keyboard.svg - Background for mainmenu
- left.svg, right.svg - Left and Right arrow
- logo.svg - Game logo
- neck.svg - Tiling texture for guitar neck
- pose.svg - Elvis Costello look-a-like posing with keyboard.
- star1.svg, star2.svg - Star images
- default.ttf, title.ttf - Game fonts
Additionally, these 3D models are used:
- cassette.dae - Song selector cassette
- key.dae - Keyboard key
- note.dae - Ingame note
Modifying vector files
It's quite easy to start. Just open one of the files above, change something, save your piece of art as Plain SVG,
execute Frets on Fire and you can see the changes instantly. There is few things that might help you a little
while working with Inkscape:
- Read the Inkscape tutorial.
- Keep the center of the vector image you are working with in the upper left corner.
- Remember to save the document in Plain SVG format.
- If you want to vectorize bitmap-image, open it in Inkscape and use Trace Bitmap -tool (Shift+Alt+B).
Remember to delete the original image after vectorizing.
- When you open the svg document it's always grouped. To ungroup select all (Ctrl+A) and then ungroup (Shift+Ctrl+G). After ungrouping you can select and edit separate parts of the document.
- Convert all objects in the SVG file to paths. (Path | Object to path, Shift+Ctrl+C)
- Clean useless items from your SVG file before saving to keep the file compact. (File | Vacuum Defs)