Back

Guides

Community created guides, helpful strategies, and more.
TOPIC | RESKIN: Linkable skin preview tool
1 2 3 4 5 6 7 8
[center][url=https://reskin.vendrus.teamfrag.net/][img]https://i.imgur.com/pekj5Sy.png[/img][/url] About | [URL=https://www1.flightrising.com/forums/gde/3157825/1#post_51887539]Skin Creators[/URL] | [URL=https://www1.flightrising.com/forums/gde/3157825/1#post_51887565]Skin Previewers[/URL] | [URL=https://www1.flightrising.com/forums/gde/3157825/1#post_51887688]Planned Features[/URL] [center][size=5][b]About[/b][/size] RESKIN is a no-scrape, no-hotlink skin previewing and percentage coverage checking tool written in React and C#. All dragon and apparel images must be manually uploaded; all scene and mannequin images have been rehosted. Nothing is pulled from FR. The initial version has been reviewed by staff and okayed for linking: https://www1.flightrising.com/forums/gde/3157825/2#post_51918519 I've been wanting to make this for a few years now, but finally had the time, energy and web dev experience to do it. [color=transparent]skin skins tool percentage % coverage accent skin preview[/color] [size=5][b]Links[/b][/size] [b]Site:[/b] https://reskin.vendrus.teamfrag.net/ [b]Repo:[/b] https://github.com/VendrusSci/Reskin [b]Preview example:[/b] https://reskin.vendrus.teamfrag.net/skins/675aeff8 [/center]
pekj5Sy.png

About | Skin Creators | Skin Previewers | Planned Features

About
RESKIN is a no-scrape, no-hotlink skin previewing and percentage coverage checking tool written in React and C#. All dragon and apparel images must be manually uploaded; all scene and mannequin images have been rehosted. Nothing is pulled from FR. The initial version has been reviewed by staff and okayed for linking: https://www1.flightrising.com/forums/gde/3157825/2#post_51918519

I've been wanting to make this for a few years now, but finally had the time, energy and web dev experience to do it.

skin skins tool percentage % coverage accent skin preview

Links
Site: https://reskin.vendrus.teamfrag.net/
Repo: https://github.com/VendrusSci/Reskin
Preview example: https://reskin.vendrus.teamfrag.net/skins/675aeff8
jYPBXj5.png4RsuN8b.pngMXNV32c.pngS7EiNKy.png
[center][URL=https://www1.flightrising.com/forums/gde/3157825/1#post_3157825]About[/url] | Skin Creators | [URL=https://www1.flightrising.com/forums/gde/3157825/1#post_51887565]Skin Previewers[/URL] | [URL=https://www1.flightrising.com/forums/gde/3157825/1#post_51887688]Planned Features[/url] [size=5][b]Skin Creators[/b][/size][/center] By default, the skin submit screen looks like this: [img]https://i.imgur.com/00NsMws.png[/img] In any order: - Select your skin file with the Choose File button (must be a 350x350 png) - Select the Breed and Pose appropriate for your skin Optional: - Set a name for your skin It will now look something like this: [img]https://i.imgur.com/KX723eg.png[/img] Selecting the skin file automatically updates the coverage and overflow values underneath the image, no upload required. Coverage indicates how much of a dragon will be covered by the skin, and determines whether the final result will be an accent or a skin. Overflow indicates how much of the skin is outside the dragon area, and is proportional to the size of the dragon. Small values can be safely ignored, but to be on the safe side... [img]https://i.imgur.com/8zY7wq2.png[/img] Toggling the 'Show overflow pixels' switch will highlight any pixels of the skin that are outside the dragon mannequin image. It's worth noting here that the overflow % calculation takes transparency into account, the pixel highlighting does not. Clicking upload at this point will upload your skin to my server, and redirect you to the admin page for the skin: [img]https://i.imgur.com/EwXYwiX.png[/img] This page is pretty similar to the previous one, but has a few key differences: - The 'Share Url' is what you post to allow people to preview your skin. - The 'Admin Url' is what you keep private, and allows you to update the skin or fix any other settings. If you can, please use the admin screen rather than re-uploading - I don't have infinite storage! - The 'DELETE' option will remove the skin image and all associated data from the RESKIN server. This will not prevent you from uploading it again, but will break all existing preview links.
About | Skin Creators | Skin Previewers | Planned Features

Skin Creators

By default, the skin submit screen looks like this:
00NsMws.png

In any order:
- Select your skin file with the Choose File button (must be a 350x350 png)
- Select the Breed and Pose appropriate for your skin
Optional:
- Set a name for your skin

It will now look something like this:
KX723eg.png

Selecting the skin file automatically updates the coverage and overflow values underneath the image, no upload required. Coverage indicates how much of a dragon will be covered by the skin, and determines whether the final result will be an accent or a skin. Overflow indicates how much of the skin is outside the dragon area, and is proportional to the size of the dragon. Small values can be safely ignored, but to be on the safe side...

8zY7wq2.png

Toggling the 'Show overflow pixels' switch will highlight any pixels of the skin that are outside the dragon mannequin image. It's worth noting here that the overflow % calculation takes transparency into account, the pixel highlighting does not.

Clicking upload at this point will upload your skin to my server, and redirect you to the admin page for the skin:

EwXYwiX.png

This page is pretty similar to the previous one, but has a few key differences:
- The 'Share Url' is what you post to allow people to preview your skin.
- The 'Admin Url' is what you keep private, and allows you to update the skin or fix any other settings. If you can, please use the admin screen rather than re-uploading - I don't have infinite storage!
- The 'DELETE' option will remove the skin image and all associated data from the RESKIN server. This will not prevent you from uploading it again, but will break all existing preview links.
jYPBXj5.png4RsuN8b.pngMXNV32c.pngS7EiNKy.png
[center][URL=https://www1.flightrising.com/forums/gde/3157825/1#post_3157825]About[/url] | [URL=https://www1.flightrising.com/forums/gde/3157825/1#post_51887539]Skin Creators[/URL] | Skin Previewers | [URL=https://www1.flightrising.com/forums/gde/3157825/1#post_51887688]Planned Features[/url] [size=5][b]Skin Previewers[/b][/size][/center] Here's what to expect from a RESKIN preview link: [img]https://i.imgur.com/kaVuOUp.png[/img] The top two fields are immutable - the name of the skin and whether it's likely to be a skin or an accent when printed. Don't take this as gospel - there's no guarantee the image will be exactly the same! [size=4][b]Select Dragon[/b][/size] Clicking the Choose File button for 'Select dragon' lets you pick the dragon image you want to preview on. This should have no skins or apparel - if yours does, click the button on the dragon's profile to go to the scrying workshop and save the image from there. [size=4][b]Select Apparel[/b][/size] Clicking the Choose File button for 'Select apparel' lets you pick the apparel you want to preview with. This must be just apparel, no skin or dragon. The easiest way to do this is to: - Load your dragon into the dressing room - Import their apparel - Add a [gamedb item=22046] - Right click on the 'dragon' image and open in new tab* - Save the image from the new tab *There's a bug on FR that means saving images direct from the dressing room doesn't work [size=4][b]Select Scene[/b][/size] All the scenes currently available (at time of writing) can be selected via the 'Select scene' dropdown. By default they load as if in scenic mode, but this can be changed with the 'Scenic mode' toggle [img]https://i.imgur.com/xrfHvCc.png[/img]
About | Skin Creators | Skin Previewers | Planned Features

Skin Previewers

Here's what to expect from a RESKIN preview link:

kaVuOUp.png

The top two fields are immutable - the name of the skin and whether it's likely to be a skin or an accent when printed. Don't take this as gospel - there's no guarantee the image will be exactly the same!

Select Dragon
Clicking the Choose File button for 'Select dragon' lets you pick the dragon image you want to preview on. This should have no skins or apparel - if yours does, click the button on the dragon's profile to go to the scrying workshop and save the image from there.

Select Apparel
Clicking the Choose File button for 'Select apparel' lets you pick the apparel you want to preview with. This must be just apparel, no skin or dragon. The easiest way to do this is to:
- Load your dragon into the dressing room
- Import their apparel
- Add a Marva's Invisibility Cloak
- Right click on the 'dragon' image and open in new tab*
- Save the image from the new tab

*There's a bug on FR that means saving images direct from the dressing room doesn't work

Select Scene
All the scenes currently available (at time of writing) can be selected via the 'Select scene' dropdown. By default they load as if in scenic mode, but this can be changed with the 'Scenic mode' toggle

xrfHvCc.png
jYPBXj5.png4RsuN8b.pngMXNV32c.pngS7EiNKy.png
About | Skin Creators | Skin Previewers | Planned Features

Planned Features

Select Eye Element/Type
This is something I know is needed, but is going to take a chunk of work to implement. For now, if a skin goes over the eyes, that's just how it's going to display.
The longer term plan is to have a dropdown to select the element, then another to select the eye type.

Self-service preview
Preview your dragon with a skin you select from a file dialogue - no upload required. Identical to the current preview page but with a file select instead of a preselected skin. Will include auto resizing if I can.

Scene preview
Preview your dragon against scenes at full size, both scenic and standard mode


Completed Features

Auto-delete
I have a fair chunk of storage space, but it's still limited. To manage that, I'm going to be adding a routing to auto-delete uploaded skins over {n} months old, n to be decided. I expect it to be at least 3, but will tweak once I see how things go.

Manual delete
Delete your skin from the skin admin page

Auto-delete
Increased mobile compatibility (vertical stacking at low screen widths, menu converts to hamburger)

Pinglist

For updates or something? Idk yet.
About | Skin Creators | Skin Previewers | Planned Features

Planned Features

Select Eye Element/Type
This is something I know is needed, but is going to take a chunk of work to implement. For now, if a skin goes over the eyes, that's just how it's going to display.
The longer term plan is to have a dropdown to select the element, then another to select the eye type.

Self-service preview
Preview your dragon with a skin you select from a file dialogue - no upload required. Identical to the current preview page but with a file select instead of a preselected skin. Will include auto resizing if I can.

Scene preview
Preview your dragon against scenes at full size, both scenic and standard mode


Completed Features

Auto-delete
I have a fair chunk of storage space, but it's still limited. To manage that, I'm going to be adding a routing to auto-delete uploaded skins over {n} months old, n to be decided. I expect it to be at least 3, but will tweak once I see how things go.

Manual delete
Delete your skin from the skin admin page

Auto-delete
Increased mobile compatibility (vertical stacking at low screen widths, menu converts to hamburger)

Pinglist

For updates or something? Idk yet.
jYPBXj5.png4RsuN8b.pngMXNV32c.pngS7EiNKy.png
I'd say flushing skins around 1-2 months old should be good enough. Maybe an option to immediately delete skins if you have the admin URL. Examples of that are someone who is previewing someone else's skin on their dragons and doesn't have any use for keeping the link long term once they decide if it looks good or not, or skins being shelved/retired.


Usually, for stuff like this, I'd suggest a Kofi for donations but I don't think tos permits something like that. In any case, thank you so much for this tool!

I'd say flushing skins around 1-2 months old should be good enough. Maybe an option to immediately delete skins if you have the admin URL. Examples of that are someone who is previewing someone else's skin on their dragons and doesn't have any use for keeping the link long term once they decide if it looks good or not, or skins being shelved/retired.


Usually, for stuff like this, I'd suggest a Kofi for donations but I don't think tos permits something like that. In any case, thank you so much for this tool!

21059.png Lemmy or Baku, but feel free to make up new nicknames for me.

Any pronouns | Japanese
Ping me when replying, I love to chat with people.
-- kMi3VrI.png
@bakugames
Riffing off the excellent idea, I'm adding a 'self-service preview' page to the to do list - exactly like the current one, but with no preset skin and a Choose File for the skin!

Thank you X)
@bakugames
Riffing off the excellent idea, I'm adding a 'self-service preview' page to the to do list - exactly like the current one, but with no preset skin and a Choose File for the skin!

Thank you X)
jYPBXj5.png4RsuN8b.pngMXNV32c.pngS7EiNKy.png
holy cow. you're an absolute legend and an absolute lifesaver. bookmarking the website for future reference, thank you so much for creating this.
holy cow. you're an absolute legend and an absolute lifesaver. bookmarking the website for future reference, thank you so much for creating this.
kMxWaq5.png LOL > Formerly BORKBEAN
> FRT +0 | He/Him
> Buying FEST CURRENCY | ACCENTS | WISHLIST
ohh saving this for later!
ohh saving this for later!
52248330644_ea876ff4a5_o.gif vesper - he / his or dae / daemon.
your local evil wizard
baphomet.gif
This is amazing :0
This is amazing :0
Uf8EgNV.png ‎ ‎ ‎‎ ‎ ‎ 91704197.png 91923362.png ‎ ‎‎ ‎ ‎ ‎ ‎ rSvYfKQ.png


Whoaaa there's even a select scene option??? :OOOO My goodness you're incredible! Thank you for taking the time to code this!!! As a side note, about how long did this project take you?
Whoaaa there's even a select scene option??? :OOOO My goodness you're incredible! Thank you for taking the time to code this!!! As a side note, about how long did this project take you?
BVCmGQj.png
1 2 3 4 5 6 7 8