SP-Studio Remake: Preparations

The SP-Studio remake is making progress, but unfortunately there is nothing new to show you yet. I mainly do things in the background which are very time consuming but boring to look at. So I thought about what I could show you in a blog post… and came up with this “little” text about how to convert an old SP-Studio item into a new one. Perhaps some of you are interested in “behind the scene” stuff like this.

I apologize in advance for boring you. :)

For every SP-Studio item I follow these steps…

1. I open the old file, remove the coding and copy the plain image into a specific frame of a new file.

A more detailed explaination: In the old SP-Studio every item (and its corresponding code) was stored in its own Flash file (fla). When I wanted to publish them I had to create a swf file from it and upload it. In the new SP-Studio the whole coding will be redone, not using Flash’s Action Sctript Language anymore. So the old code can be deleted. I just copy the plain drawings to a new file and later they will be exported as svg files instead of swf files. I still use Flash because I prefer working with it, but now there is just one of these files per category. One for all the hats… one for all the long hair… and so on. Every category uses a three character short code, like “bod” for the “bodyparts” category and “bod_nos” for the “noses” subcategory. So I know the file bod_nos.fla contains all drawings fort he noses category.

If you are used to working with Adobe Animate / Flash you might know a.fla file is divided into layers and frames. Layers work like in Photoshop or similar picture editing software: You can put one part of an image on top of another without deleting parts of the first picture. Frames are usually used for animations, but since I only keep my fla files for storage now, I use them to organize the items. Think of it as a word document with different pages. For example the horse which will later be the file “pet003.svg” is placed in frame 3 of the pet.fla file. For renumbering all my items I used their current order. New items will come after that from now on. Those numbers are important, because the items don’t have names.

This is one of my old files with the ActionScript code.

2. I correct the position of the drawing because the symmetry was off.

You might not have noticed this, but the characters of the old SP-Studio are not located in the exact center of the picture. Why? I have no idea! But it annoys me now, and so I fixed it for the new SP-Studio. I also made the body shape perfectly symmetric. But those small changes lead to the following: Whenever I paste an old item (except for backgrounds) I have to move it to its new position. This position has to be exactly the right one. If I add a hairstyle and it’s only 1 pixel off this will cause a visual bug. I also have to make sure the items still look good when you flip them or change their colors. Sometimes you only notice a small gap when you try different colors. I always keep a dummy character in the lowest level so I can check if the item’s position fits it perfectly.

Everything moved a little bit to the right to center the body perfectly.

3. I correct the shape to fix small errors or make it better fit the body.

About 90% of the drawings need corrections. There are two main reasons for this:

Many drawings are more than 10 years old, and back then I did not draw with high resolution in mind. Then I added the full screen mode and different export sizes to the SP-Studio and it was embarrising to see how my old drawings looked like compared to my newer ones. You notice errors you did not notice in the small original size. With the new SP-Studio I want to improve this.

The second reasons is a new features that’s planned to be added to the new SP-Studio: You will be able to change the order of the items freely, like layers. For example every shirt can be worn on top or under any other shirt. But this means I have to make sure they all are exactly the same size. Again 1 single pixel off can cause to make it look ugly. In the old SP-Studio only the freestyle collection had these strict rules.

4. I improve some drawings which I think look ugly.

Here comes the artistic and most fun part, but also the most time consuming one. Since many SP-Studio drawings are very old I don’t actually like them anymore. Today I would draw them differently because I have improved my drawing skills over the years and prefer a slightly different style. Since I don’t have time to redraw all of them I just pick some and add more details to make them better fit the newer items. Or I use effects I did not use in the past. For exaple now all glasses might have transparent colors or I add optional shadows and highlights. I draw everything with an ordinary mouse in Adobe Animate because I am really bad at using tablets.

Let’s give the Santa hat a nicer look.

5. I make the colors of the item fit the new color palette.

As you might already know the new SP-Studio will offer custom colors for way more items than the old one. But every item comes with original colors I select. To make sure you can change them back to the way they were before I pick them from the same palette you will be using to selct the custom colors. So I controll and change the colors of most items to fit with the palette.

6. I have to make sure different colored areas always overlap.

This point was not on my list at first but it sneaked in because of an annoying bug. When I used swf files my drawings looked fine, but the svg files made them look really ugly. I wondered what was happening and then I realized: There were small gaps between the different colored parts of the drawing. You could see the background between them. The only way to solve this problem is to make the different colored areas of the image overlap. So I change all the drawings now to make this work and I use groups and layers to keep everything in order. It’s the most annoying part of the whole process and very time consuming. Think of the colorful patterns of some of the clothes or background images… I really hate this svg bug. Only items with one single color are not affected by it. But there are not many of these (mostly eyebrows).

Now every shape with a different color overlaps the others.

7. I group areas of the drawing for custom colors.

The next step is to make you able to change the colors of the item and to remove shadows at will. To make this happen I assign up to 10 different groups to different areas of the drawing and name then: color 1 light, color 1 normal, color 1 dark, color 1 super dark, color 2 light, color 2 normal, color 2 dark, color 2 super dark, and up two areas for colors which shall not be changed. Most items don’t need all of these though. By naming the groups this way the svg file later recognizes: “Okay, I have to change the color of the area with this name because you clicked on this button.” Or you can remove one group to remove shadows for an object.

The custom color system for the SP-Studio is complicated compared to those usually used in characters creators because I use my own palette. The reason for this is the following: I want to pick the colors for light and dark highlights myself instead of calculating them automatically. Because when you make yellow darker the visualy effect is stronger than with a dark blue. So I feel like the end results look better if I use hand selected color combinations. But obviously this means some extra work.

The new system for groups / layers looks like this. Every column is a different item.

8. I prepare the thumbnail which will be seen in the category.

Every item needs a small image for the item selection of the SP-Studio: a thumbnail. The new SP-Studio automatically includes a small version of the svg file, but there is one problem with this: Most items are really small compared to the size of the whole picture. And the svg file of an item always has the size of the whole picture. So I prepare extra thumnail images for every single item to make them appear as bi gas possible in the thumbnail area. Luckily this is just a copy & paste process and then I resize the image. Only the background sceneries don’t need extra thumbnail files.

9. I add a mask if it’s an item for the hands.

Holding an item in the hands of the characters is a tricky problem, because it’s just 2D drawings. The hand hast to overlap some parts of the item, but the item has to overlap parts of the hand as well to make it look realistic. Since the objects appear on top of the hands I solve this by adding holes by using a procedure called masking. You might have heard of if from software like Photoshop. This way the original drawings stays complete because the hole is not really there bu just added by the mask.

Holes are needed for every object the character should be able to hold in his hands.

10. I export svg files for the item and its thumbnail.

This is the last step done within Adobe Flash / Animate: I save the prepared images as svg files. Most items need two image files: The main file and a thumbnail. This is not difficult to do, but I had to buy Adobe Animate for it, because my old Flash version did not support svg export. After trying several free tools which did not work properly I bought the new version in addition to my old one, even though this export option is the only part of it I actually need. Thanks tot he support of my Patrons I was able to use svg files which are the key element oft he SP-Studio remake.

11. I add meta tags (for rotating / recoloring / flipping / …) to the svg file.

Now I open the svg file for the item with an editor and add a couple of lines to the code. These “meta tags” hold information about wether or not the item should allow moving, flipping, rotating, recolering and all the other freatures. Since this is different for every item the information is stored directly in the svg file.

12. I add the actual code for the item.

I guess this is the easiest part because the coding of the new SP-Studio was prepared by Kai in a perfect way. I just need to copy a line and change a number according to the number of the new item. Then it appears in the SP-Studio and can be used. The category is determined by where I add this line of code. I can also add a name or desciption if I want to.

Looks slightly more impressive than my old ActionScript code.

And that’s it. With these steps the item has moved from the old SP-Studio to the SP-Studio remake and is ready for using it!
The current plans involve to keep about 1.850 items from the old SP-Studio, so this might explain why I need SO many months to get this done. :)


  1. Thank you for putting so much effort into fixing and remaking the studio! I love this website and can’t wait for the app!

  2. I am pretty excited about it as well. :)

    Regarding the South Park costumes: I am sorry, but I don’t think I will draw more South Park related costumes in the near future. Those items only work for this particular character, and then it’s easier to just use a screengrab from the show. The second problem is: If I want to upload an app to the app store in the future I am not allowed to use any copyrighted material. So it might be possible I’ll have to delete many South Park related items because of those laws.
    But certain parts of those costumes could be useful as long as they are not too special. For example the wings of Clyde’s costume look like a good idea.

Leave a Reply

Your email address will not be published. Required fields are marked *

You can set your own profile picture for the comments at Gravatar.com by connecting it to your e-mail address.