The following tutorial is for creating SVG files of in-game items. The tutorial consists of several stages- each one contains a few sub stages- but certain stages can be skipped as their final result is available in the wiki.
The entire tutorial may take a while in the beginning, but after a couple of tries you can end it in less than 2-3 minutes.
Before starting, make sure that you have:
- A SVG editor (Inkscape is good if you want some free program]. Some information in the tutorial refers to Inkscape, though everything can also be done with other programs like Illustrator). A basic experience with the editor is all that would be needed.
- SwfModify or Trixllix
Getting the in-game penguin spriteEdit
- Download this file and search for the penguin sprite that matches the size of your item sprite.
Adding extra penguin spritesEdit
- Download a special dance SWF file (example), that was first released at around the time of the item that you'd like to match a penguin sprite SVG iamge to (or just want to include an extra version that doesn't exist in the file).
- If you want to match it to a certain item, take the date on which this item was first released, and search in the action frames JSON file for an item that was released at around that time. Take the secret frame ID and use it for the special action SWF file.
- Export the blue circle Movie Clip/Sprite from the action SWF file.
- Load it in SWF2SVG and save the SVG output to your computer.
- Open it with Inkscape, and also open the in game penguin sprites file.
- Select the front penguin sprite from the file (or another one if you find it more comfortable), and press it another time (not in a double click; wait until it's selected, and then click again). You will then see a rotation option, and in addition, a small crosshair image in the center. This crosshair marks the point from which any shape/group are rotated and scaled.
- On the right (or left if you flipped the menu direction via your perferences), make sure that the "Snap nodes or handles" button is checked. Uncheck all the buttons below it (until the small horizontal line above a few icons at the bottom) but the "Snap to cusp nodes" button.
- Drag the crosshair icon to the tip of the green triangle drawn on the image.
- Duplicate the image (Ctrl+D). Take the width of the entire sprite, the width of its blue circle, and also of the second blue circle that you exported from the action SWF file.
- According to the following equation, calculate the new widht of the shape:
$ w = a * b / c $
- w is the new penguin sprite width.
- a is the old penguin sprite width.
- b is the new blue circle's width.
- c is the old circle's width.
- Apply the new width while the lock icon (near the width and height inputs) is checked, to keep the proportions of the image.
- Uncheck the "Snap to cusp nodes" button, and then check the "Snap from and to an item's rotation center" button.
- Position the new sprite above the sprite that you duplicated earlier so that the beak of the top penguin is above the bottom penguin's. They should be aligned automatically. This is because the rotation center is also the scaling center.
- It's recommended that you stack the penguins from the biggest to the smallest to allow others to see them all, in case you're updating the penguin sprites file.
Getting the item in-gameEdit
- Download the item sprites file and open it with SwfModify.
- Export Movie Clip 2.
- It should be the item in a front look. If Movie Clip 2 is something else, search for the correct one and export it instead.
- Load the file that you exported using SWF2SVG, and save its vectorized version on your desktop (for an easier access).
- Open the file with your SVG editor, and open the penguin in-game file from the previous stage as well.
- If you used the downloadable prepared link, remove the penguin sprite that doesn't match the size of the item sprite.
- Copy and paste the item in-game image to the penguin file. Take the X and Y values of the item sprite from its SVG file, and apply them on the item sprite that you pasted in the penguin file.
- In Inkscape, the X and Y values (as well as the Width and Height, which will be used later in the tutorial), are located on the top bar of Inkscape.
- Now the penguin and the item sprites should be aligned in the correct way (this positioning is determined by the source SWF of the item sprite to begin with, so you don't have to bother with trying and figure out how to position them properly.
- Press Ctrl+A to select all the sprites in the file. Set the X and Y values to 0, in order to position them in the bottom-left corner of the image.
- Go to File and select the Document Properties option (Shift+Ctrl+D).
- While still all the sprites in the document are selected (using Ctrl+A), see the width and height of the total sprites together. Take the width of the sprites, and apply it on the document's width, via the Custom Size field in the Document Properties popup wndow, under the Page tab (this tab is selected by default).
- As a shape's width in Inkscape can have 3 decimal digits after the point, whereas the document width can only have 2, round the value if needed.
- Do the same with the height.
- Press the "File" tab and select "Save as".
- Set a file name and a folder on which you'd like to save it (desktop recommended for an easier access).
- In the "Save as type" dropdown, select "Plain SVG (*.svg)" (in Inkscape it should be the 2nd from top).
- This is because saving as the default "Inkscape SVG (*.svg)" adds unneeded extra properties, like how much you zoomed in when saving, what part of the document you were viewing, etc.. Saving as the Plain SVG would make sure that the file that you end up with doesn't contain irrelevant information.
- Hit "Save".