UndertowTruck
Content Creator
- Joined
- Apr 20, 2021
This tutorial will cover how to create fidget spinner earrings with vector art. We will be covering the art process, including making mods RGB adjustable and special techniques I use. We will cover how to use Konashian's modding template to create the mod. We will begin now. We will be using Windows in this tutorial, but tutorial can easily be followed on Mac I think.
Software needed:
Adobe Animate (costs money but can be pirated easily on subreddit r/GenP or on Internet Archive) or equivalent software that can modify .fla files
Inkscape (free), or other vector art software. We will use Inkscape in tutorial
Materials needed:
A good fidget spinner reference (one will be provided in tutorial, but you can bring your own)
A reference of something to connect our fidget spinner to her ear. Can be anything like rope, or a hook, but we will use a ring. Reference provided in tutorial
Vanilla modding template found here: https://www.undertow.club/downloads/konashions-vanilla-mod-template.7935/
Background knowledge:
Vector art tracing from references and creating paths with bezier tool. This video can help
The video also covers how to import references into Inkscape, which you also need to know
Adobe Animate (costs money but can be pirated easily on subreddit r/GenP or on Internet Archive) or equivalent software that can modify .fla files
Inkscape (free), or other vector art software. We will use Inkscape in tutorial
Materials needed:
A good fidget spinner reference (one will be provided in tutorial, but you can bring your own)
A reference of something to connect our fidget spinner to her ear. Can be anything like rope, or a hook, but we will use a ring. Reference provided in tutorial
Vanilla modding template found here: https://www.undertow.club/downloads/konashions-vanilla-mod-template.7935/
Background knowledge:
Vector art tracing from references and creating paths with bezier tool. This video can help
The video also covers how to import references into Inkscape, which you also need to know
1. Make a new empty folder for our workspace
2. Open Inkscape and create a new document. Your screen should look like this now
3. Now, we are going to bring in some references. Download the references below, which we will put into our Inkscape document
4. Place these references in the folder we created. Your folder contents should look like this now
5. Now you can import these images into Inkscape. The default image import options are good, but if you want to make your mod pixel perfect, you should select the Smooth (optimize Quality) option to make sure your reference stays high quality when imported. Otherwise, it will become lower quality which is fine for this tutorial.
This is what our Inkscape document looks like now:
6. Now, you can save this document to the folder we set up. Give it a good name like fidget.svg or something. We will get ready to draw our mod now
2. Open Inkscape and create a new document. Your screen should look like this now
3. Now, we are going to bring in some references. Download the references below, which we will put into our Inkscape document
4. Place these references in the folder we created. Your folder contents should look like this now
5. Now you can import these images into Inkscape. The default image import options are good, but if you want to make your mod pixel perfect, you should select the Smooth (optimize Quality) option to make sure your reference stays high quality when imported. Otherwise, it will become lower quality which is fine for this tutorial.
This is what our Inkscape document looks like now:
6. Now, you can save this document to the folder we set up. Give it a good name like fidget.svg or something. We will get ready to draw our mod now
1. Open up the Inkscape document we were previously working on. Select the ring reference and hide it. Now, select the fidget spinner reference and set the opacity to 50% . Your screen should look like this now:
2. Now you can trace over the reference using the circle shape tool and the bezier pen tool. I used a red fill here, with a black stroke with a width of 3 pixels. My screen looks like this now. I created a new layer called "Drawing" above the reference layer to put my art on.
3. Now, select all the paths and shapes that make up your fidget spinner
4. Then, with all the paths selected, go to the Path tab, and select path union
5. You should get the resulting shape:
6. We are going to add holes in our fidget spinner now. Set this new shape's opacity to 50% so we can see the reference. Then, cover the holes in the reference with circles, but make sure they are smaller than the surrounding black part. I'm using blue circles here, but the color doesn't matter. This is the result:
7. Now, select all the blue circles and make a path union out of them like I showed you before. You should have two paths now: A path containing the red fidget spinner body, and a path containing the 3 circles. Make sure that the path containing the circles is ABOVE the path containing the red fidget spinner body. Your screen should look similar to this:
8. Now we are going to poke the holes using the Path difference operation. Make sure you have both paths selected, then perform a Path difference. See the screenshot for a guide
9. This is the result of the path difference:
10. Now, you can create the black parts surrounding the holes of the fidget spinner. I won't show you how to do this, but you can use the tools we learned here, like using path difference to make holes to help with this part. This is the final product (reference images hidden). I'm not doing the shading in the middle part, but if you want, then you should research radial gradients in Inkscape.
2. Now you can trace over the reference using the circle shape tool and the bezier pen tool. I used a red fill here, with a black stroke with a width of 3 pixels. My screen looks like this now. I created a new layer called "Drawing" above the reference layer to put my art on.
3. Now, select all the paths and shapes that make up your fidget spinner
4. Then, with all the paths selected, go to the Path tab, and select path union
5. You should get the resulting shape:
6. We are going to add holes in our fidget spinner now. Set this new shape's opacity to 50% so we can see the reference. Then, cover the holes in the reference with circles, but make sure they are smaller than the surrounding black part. I'm using blue circles here, but the color doesn't matter. This is the result:
7. Now, select all the blue circles and make a path union out of them like I showed you before. You should have two paths now: A path containing the red fidget spinner body, and a path containing the 3 circles. Make sure that the path containing the circles is ABOVE the path containing the red fidget spinner body. Your screen should look similar to this:
8. Now we are going to poke the holes using the Path difference operation. Make sure you have both paths selected, then perform a Path difference. See the screenshot for a guide
9. This is the result of the path difference:
10. Now, you can create the black parts surrounding the holes of the fidget spinner. I won't show you how to do this, but you can use the tools we learned here, like using path difference to make holes to help with this part. This is the final product (reference images hidden). I'm not doing the shading in the middle part, but if you want, then you should research radial gradients in Inkscape.
1. You should be able to do this part by yourself after drawing the fidget spinner body. You can probably do a better job. This is what you should have now:
1. Right now, our outlines are pure black and don't change with the color of the fidget spinner. We are going to make it so that if the fidget spinner is red, the outlines will be dark red, and if the spinner is green, then the outlines will be dark green.
2. Select the fidget spinner body and go to the fill and stroke settings and select stroke paint:
3. Now, set the stroke color to 0 red, 16 green, 36 blue, and 40 alpha. This is a Konashion standard, but you can choose other settings as long as the stroke color is semitransparent. This is what the stroke color settings look like:
4. Look at the fidget spinner outline. Notice that it's half a darker color, and half transparent black? We will fix this in the next step
5. Make sure you are happy with your art at this point, because the following steps are difficult to reverse. Save a copy of you art at this point if you are worried. Select the fidget spinner body, then go to Path, and select Stroke to path. This will separate the outline from the fidget body and turn it into a separate editable path.
6. Notice now that the fidget body path (path 1) has been split into two paths. One path is the inside red filling, and the other path is the dark red outline.
7. Select the outline path. It should be the one on the top (path4 in my case). With the path selected, do Ctrl + D, to create an exact copy of the outline in the exact same place. Select one of the outline copies, and select the fill too. My screen looks like this now:
8. Now, perform a path union with one of the stroke copies and fill selected. Make sure the outline is above the fill when performing a path union, otherwise the union will be colored a semitransparent black like the stroke color instead of red. This is the result. Notice how the stroke is a solid dark red now?
9. Now try changing the color of the fill and see how the stroke color also changes
10. This step is optional and can be done later in the process. You need to make all the colored parts that you want to be able to change color completely pitch black. You can perform this step in Adobe Animate as well. Select the fill and set the color to 0 red, 0 green and 0 blue. Notice that we didn't make the ring pitch black? That's because we don't want its color to change.
11. Now, delete or hide any references. This is the end result
This finishes the Inkscape art portion of modding
2. Select the fidget spinner body and go to the fill and stroke settings and select stroke paint:
3. Now, set the stroke color to 0 red, 16 green, 36 blue, and 40 alpha. This is a Konashion standard, but you can choose other settings as long as the stroke color is semitransparent. This is what the stroke color settings look like:
4. Look at the fidget spinner outline. Notice that it's half a darker color, and half transparent black? We will fix this in the next step
5. Make sure you are happy with your art at this point, because the following steps are difficult to reverse. Save a copy of you art at this point if you are worried. Select the fidget spinner body, then go to Path, and select Stroke to path. This will separate the outline from the fidget body and turn it into a separate editable path.
6. Notice now that the fidget body path (path 1) has been split into two paths. One path is the inside red filling, and the other path is the dark red outline.
7. Select the outline path. It should be the one on the top (path4 in my case). With the path selected, do Ctrl + D, to create an exact copy of the outline in the exact same place. Select one of the outline copies, and select the fill too. My screen looks like this now:
8. Now, perform a path union with one of the stroke copies and fill selected. Make sure the outline is above the fill when performing a path union, otherwise the union will be colored a semitransparent black like the stroke color instead of red. This is the result. Notice how the stroke is a solid dark red now?
9. Now try changing the color of the fill and see how the stroke color also changes
10. This step is optional and can be done later in the process. You need to make all the colored parts that you want to be able to change color completely pitch black. You can perform this step in Adobe Animate as well. Select the fill and set the color to 0 red, 0 green and 0 blue. Notice that we didn't make the ring pitch black? That's because we don't want its color to change.
11. Now, delete or hide any references. This is the end result
This finishes the Inkscape art portion of modding
1. You should have downloaded the modding template and placed it in your folder. This is what your folder should look like now:
2. Now, right click on the modding template zip file, and extract the contents. Go into the newly created folder. This is what its contents look like:
Windows users should use the SDTModdingCS5 folder. Mac users should use the other folder. We will be using the Windows folder. Let's open it.
3. The contents of the folder look like this. SDTMods folder contains libraries we need to make our mod. ExampleMod files are an example mod. SDTMod.fla the file we edit to create our mod. You need to make sure that SDTMods and SDTMod.fla are in the same location because SDTMods contains files we need to publish our mod.
4. Open SDTMod.fla in Adobe Animate. This is what your screen should look like
5. On the right side of the screen, select the library tab, then select the ear piercing template. Double click the ear piercing template to bring it onto the screen. Then, select the Piercing layer, which we will draw our mod on. This is what you should have now:
2. Now, right click on the modding template zip file, and extract the contents. Go into the newly created folder. This is what its contents look like:
Windows users should use the SDTModdingCS5 folder. Mac users should use the other folder. We will be using the Windows folder. Let's open it.
3. The contents of the folder look like this. SDTMods folder contains libraries we need to make our mod. ExampleMod files are an example mod. SDTMod.fla the file we edit to create our mod. You need to make sure that SDTMods and SDTMod.fla are in the same location because SDTMods contains files we need to publish our mod.
4. Open SDTMod.fla in Adobe Animate. This is what your screen should look like
5. On the right side of the screen, select the library tab, then select the ear piercing template. Double click the ear piercing template to bring it onto the screen. Then, select the Piercing layer, which we will draw our mod on. This is what you should have now:
1. Now that we are inside the Piercing layer of the Ear piercing template, we can bring our art in. Go to File > Import > Import to Stage.
2. Now, select the Inkscape file you drew your art on. When asked how you want to import, choose either the "Import each path to a different layer" option or "Import each path to same layer and keyframe" option. It is a matter of personal preference. This is what you should get (note the Piercing layer was automatically renamed to svg1 after importing. do not worry about this):
3. Now, select the Free transform tool and resize and move the fidget spinner into place. Hold shift while scaling to make sure the fidget spinner keeps its shape. The hole in her ear is where the earring will dangle from and rotate around.
You can also double click on the ring, or the fidget spinner to move and scale parts separately. So, you can make the ring smaller and make the fidget spinner bigger if you want.
Now that we have our artwork imported, we can get to scripting our mod
2. Now, select the Inkscape file you drew your art on. When asked how you want to import, choose either the "Import each path to a different layer" option or "Import each path to same layer and keyframe" option. It is a matter of personal preference. This is what you should get (note the Piercing layer was automatically renamed to svg1 after importing. do not worry about this):
3. Now, select the Free transform tool and resize and move the fidget spinner into place. Hold shift while scaling to make sure the fidget spinner keeps its shape. The hole in her ear is where the earring will dangle from and rotate around.
You can also double click on the ring, or the fidget spinner to move and scale parts separately. So, you can make the ring smaller and make the fidget spinner bigger if you want.
Now that we have our artwork imported, we can get to scripting our mod
1. First, we will add RGB adjustability to our mod. Keep clicking the fidget spinner until you have the interior filling of the spinner selected. This is the part that will change color. This is what your selection should look like:
2. If you didn't do this before, make sure that the selected filling is pitch black. Go to the right side, select the color tab, and set the color to Red 0, Green 0, Blue 0
3. With the pitch black fill still selected, go to the top tabs, select the Modify tab, then select Convert to Symbol
4. Keep the default settings. You may change the name if you want
5. Your newly created symbol will now appear at the bottom of the library list. Use count 1 means that this symbol is being used 1 time. It is being used in the ear piercing template we are working on
6. With your symbol in the template still selected, go to the Properties tab on the right, then select Object properties, then name this symbol instance "rgbFill". Steps outlined below:
7. Now, in the Ear piercing template, select the Settings layer. Go to the right side, then select the Properties tab. In the properties tab, select the frame tab. Then select the arrow pointing up and to the right. It should open up an ActionScript panel to script in. Steps outlined in screenshot below:
8. The only this you need to change here is the overwrite value. overwrite = true is normal behavior. This means that when you load in this earring, any previous earring will be removed. If overwrite = false is set, that means that any previous earring she is wearing will stay, which allows you to stack earrings.
9. We are finished working on the Earring template now. Go back to the main stage
10. Once you are in the main stage, select the Mods layer, open the library tab, then drag the Ear Piercing template onto the main stage. Steps outlined below:
11. Select the earring template that you brought onto the main stage. Select the properties tab on the right side. In properties, select the object tab. Put down a descriptive instance name for this instance of the template imported to the main stage. I will name it fidget_spinner_earring. Steps outlined below"
12. Select the Settings layer of the Main stage and open the ActionScript like we did before for the Settings layer of the Earring template. Steps outlined below:
13. First, we will register our mod. Remember when we named our earring template instance "fidget_spinner_earring" ? This is the name we need to register our mod with. Put down "registerMod(fidget_spinner_earring);" without quotes. See the screenshot below:
14. Scroll down to see the rest. We are ignoring the dialogue portion, you will likely never use this part. For the charData, do charData = "earring:none,255,0,0,1;";. This will set the earring color to RGBA(255,0,0, 100%) or pure red color. You can also add a mod name and your creator name here, too.
15. You should be almost done with your mod at this point. Go to the top of the screen and do Control > Test Movie > In Animate. Any errors with your mod will show up in the output. Otherwise, you are good to go. See screenshot below for steps:
16. The results of the tests will show up in the Output tab by the Timeline tab. This is the result of a successful no errors test shown below:
2. If you didn't do this before, make sure that the selected filling is pitch black. Go to the right side, select the color tab, and set the color to Red 0, Green 0, Blue 0
3. With the pitch black fill still selected, go to the top tabs, select the Modify tab, then select Convert to Symbol
4. Keep the default settings. You may change the name if you want
5. Your newly created symbol will now appear at the bottom of the library list. Use count 1 means that this symbol is being used 1 time. It is being used in the ear piercing template we are working on
6. With your symbol in the template still selected, go to the Properties tab on the right, then select Object properties, then name this symbol instance "rgbFill". Steps outlined below:
7. Now, in the Ear piercing template, select the Settings layer. Go to the right side, then select the Properties tab. In the properties tab, select the frame tab. Then select the arrow pointing up and to the right. It should open up an ActionScript panel to script in. Steps outlined in screenshot below:
8. The only this you need to change here is the overwrite value. overwrite = true is normal behavior. This means that when you load in this earring, any previous earring will be removed. If overwrite = false is set, that means that any previous earring she is wearing will stay, which allows you to stack earrings.
9. We are finished working on the Earring template now. Go back to the main stage
10. Once you are in the main stage, select the Mods layer, open the library tab, then drag the Ear Piercing template onto the main stage. Steps outlined below:
11. Select the earring template that you brought onto the main stage. Select the properties tab on the right side. In properties, select the object tab. Put down a descriptive instance name for this instance of the template imported to the main stage. I will name it fidget_spinner_earring. Steps outlined below"
12. Select the Settings layer of the Main stage and open the ActionScript like we did before for the Settings layer of the Earring template. Steps outlined below:
13. First, we will register our mod. Remember when we named our earring template instance "fidget_spinner_earring" ? This is the name we need to register our mod with. Put down "registerMod(fidget_spinner_earring);" without quotes. See the screenshot below:
14. Scroll down to see the rest. We are ignoring the dialogue portion, you will likely never use this part. For the charData, do charData = "earring:none,255,0,0,1;";. This will set the earring color to RGBA(255,0,0, 100%) or pure red color. You can also add a mod name and your creator name here, too.
15. You should be almost done with your mod at this point. Go to the top of the screen and do Control > Test Movie > In Animate. Any errors with your mod will show up in the output. Otherwise, you are good to go. See screenshot below for steps:
16. The results of the tests will show up in the Output tab by the Timeline tab. This is the result of a successful no errors test shown below:
1. Publish your mod now. At the top, select the File tab, then select Publish
2. Your folder should look like this now, where SDTMod.swf is your published mod. You may rename this file and publish it on the Resource manager on Undertow
3. Now, you can load your mod in game
That completes our tutorial
2. Your folder should look like this now, where SDTMod.swf is your published mod. You may rename this file and publish it on the Resource manager on Undertow
3. Now, you can load your mod in game
That completes our tutorial
Attachments
Last edited:
