Rhythm Doctor Custom Character JSON Generator

📝 - File Upload 📷 - Frame Data 🔍 - Row Preview 🙂 - Expressions 🏃 - Anim. Data 💬 - Dialogue Data ✅ - Export

File Upload

Preview image:
JavaScript is not enabled!
Please use a
JavaScript-compatible
browser, or enable
JavaScript!
Upload either a .png file of a spritesheet or a pre-existing .json file here! This is optional, but will greatly assist in creating your custom character!
*Filename: This is required, and must be the same name as the spritesheet file for the character WITHOUT the file type (so don't include the .png)
When you're done here, click on the 📷 camera button at the top, next to where it says File Upload!

Frame Data

Click and drag the marker until the grid lines evenly divide your spritesheet!

Zoom: x
You can also fine tune the marker's position until it looks right!
,

Row Preview

In-Game Approximation
You can also click and drag here to move the preview!
Show a portrait of the character

Show the file's name
Frame to use:

 Offset:
,
(Note: going positive moves left and down respectively,
going negative moves right and up respectively)

Expressions

Animation Data

Dialogue Data

Expression List (show only names?)
+
Hey!
This is the one place where you can modify expression names, or add and remove expressions.
Need to manage expressions? Come back to this tab.

Click on the green plus (+) button to create an expression,
then click on an expression to select it!

To start off, you need to have four important expressions,
one of each named neutral, happy, barely, and missed.
You will not be able to generate your JSON file without these.
NAME:
Once you're done here, click on the running person 🏃 icon to move on.
Frames: Animation Speed (FPS): Loop:
Loop Start Frame:

Click to start/stop an animation preview!
You're not supposed to see this at all ;)
(Note: going positive moves left and up respectively, going negative moves right and down respectively)
Portrait Offset: ,
Portrait Size: by
Portrait Scale: x

Click to start/stop an animation preview!
(APPROXIMATION ONLY, MAY NOT BE ACCURATE)
You're also not supposed to see this! :O

Finalize + Export

Before you export, make sure you go back and make sure everything is correct.


Everything looks good, let's export!

Tool © DeadlySprinklez 2020-2021. This tool is not affiliated with 7th Beat Games.
Background, row menu preview, and dialogue box preview art are from Rhythm Doctor, property of Hafiz Azman and 7th Beat Games.
(also please consider donating to my Ko-Fi, I did a lot of work on this and would appreciate the help)

Frame Reference

Upload a spritesheet in the first tab, then visit the 📷 camera (Frame Data) tab to enable this!

Help

TODO: Pending rewrite



Getting Started

To start, you should have either a pre-existing .json file, or a .png spritesheet! Most spritesheets are vertical, but with a recent update they can be actual sheets now - with both verticality AND horizon...tality? They can go both up and down and side to side.
As an example, we'll be using MarioMak967#6308's Logun sprite, reworked by RD developer giacomo for the sake of demonstration.
To begin with, we'll upload the spritesheet. To do so, click on the Browse... button and find your spritesheet!
TIP: You can also click and drag the file from your file browser onto the Browse... button.

Next to your Browse... button should be the name of the spritesheet. It should look like this!
If all goes well, the image should go through and the tool will pick it up and analyze it a bit. Computer magic! It should grab the size of a single frame automatically. If it's not able to find either the width or the height of the frame, it'll pop up with an error message saying it wasn't able to find one or the other! Don't worry - the tool isn't broken if this happens. If you hit the OK button, you can have it autofill the image's width (X) OR height (Y) as a fallback; this helps with purely vertical and horizontal spritesheets, since those are perfectly made to fit the image's width or height respectively. If this doesn't apply to you, you can hit the cancel button and fill those values in yourself.
TIP: If you don't know what you're doing, you can always contact me or others for help! My Discord tag is DeadlySprinklez#4327.

Now the first three inputs should look like this!
Note that the frame size does not need to be the same for both X and Y - it just so happens that the logun sprite is completely square!
Also, pay attention to the red text - this will be the name of your .json file! It needs to be the same name as your spritesheet!
Now we can move on to the final part of the JSON and character creation - the expressions! Below the Frame Size input should be the Clips section, with four pre-made and non-deletable slots: neutral, happy, barely, and missed. Before we get into those, you need to know a few things.

Frames are zero-indexed, which means that the first frame on the spritesheet is actually the 0th frame. This is because computers commonly use zero as the first digit - so if you want to use your first frame, second frame, third frame, and fourth frame in that order, it would go into the frame input box as "0, 1, 2, 3".
Another thing is that there exists a such thing as 0 FPS, or 0 frames per second, in the game. This makes it so that sprites advance to the next frame on every quarter beat but this will only work with the Loop on beat option selected. If the loop on beat option isn't selected, having 0 FPS will mess up the animation.

Now that we know these things, we can get to filling in the different slots in an expression! The "neutral" expression is what plays when the character isn't reacting to a hit or a miss - it's their idle, waiting state. The "happy" expression is what plays when the player hits a beat properly on the character's row. The "barely" and "missed" expressions play when the player makes a small or big mistake, respectively.

With that out of the way, you're on the last few steps of making your first custom character! There's not much that I can do to help you here - it's all up to you now. If you want to see a preview of your sprite and your animation, click the yellow play button on the right of each expression! Other than that, once you're done click on the Export + Download JSON button, save the file in the same place as your spritesheet, and import your custom character by going into the Level Editor, going into the blue Rows tab, adding a new row, and clicking on the folder button next to the character dropdown box!
Once you've done that, you've done it! You've made a custom character! If it comes out looking glitched or messed up, don't worry - everybody messes up sometimes. Just jump to Troubleshooting or contact anyone with the RD Editor Helper role on the 7th Beat Games' official Discord server, Rhythm Doctor Lounge.


Advanced Mode

When you're just starting out with character creation, there are rules you need to follow. The minimum and default inputs of nine shows that sprites should have four pixels of transparency on all four sides of each sprite, and the first four expressions are needed for basic functionality. At the time of the tool's creation, I thought of nothing past these standards.
However, a chat with saladplainzone, one of the admins of Rhythm Doctor Lounge and a friend of mine, showed that there are circumstances where those standards don't need to be followed. So, Advanced Mode was born!
Advanced Mode, despite the name, is quite simple in nature. All it does is it allows for any number to be entered into both the frame X and frame Y input boxes, and it allows you to modify and delete the first four preset expressions as if they were just expressions you added yourself. However, this also disables the spritesheet analyzing function, and you will have to enter the size values yourself. With the new cropping preview, this will be a lot easier.
NOTE: YOU CAN STILL UPLOAD A SPRITESHEET FOR ANIMATION PREVIEWS AND FOR REFERENCE. The functions for automatically grabbing the size values are turned off, nothing else.
Also note! Disabling Advanced Mode will only restore functionality to the frame input boxes. If you deleted any of the first four expressions, they will need to be remade manually which will allow you to retain all of your progress so far, or you will have to reload the page which will mean you will lose any new expressions you created.


Troubleshooting

My sprite looks glitched/squished!

This is likely due to using a sheet format on an outdated editor/preorder build of the game! Make sure you're up to date, or if the latest stable version for the preorder is still 0.6.1, use the beta. If that's not the issue, your frame size is likely wrong! Try tweaking it and using the Play preview on the site.

My sprite constantly slides like it was tiled!

Either your frame X or your frame Y is wrong! Sometimes the frame size algorithm performs poorly - it's more there for convenience and not to be relied on. If you need help finding the actual frame X or Y, ask for help on Rhythm Doctor Lounge - 7th Beat Games' official Discord server.

I have my FPS set to 0 but my character is much slower than a frame every quarter beat!

Make sure you have Loop set to Loop on beat! If you have it set to Loop at end, your frames will go a lot slower and will not loop correctly. Be warned!

My problem isn't listed here...

That's definitely not good, then! DM me on Discord (DeadlySprinklez#4327) and I can help you out right away, or, if it's an issue with the tool itself, DM me on Discord or post an issue on the Github Issue Tracker and I'll be sure to take care of it immediately and let you know when it's fixed.


Changelog

May 16th, 2021 - up and over
~ overhauled EVERYTHING. like...
~ oh my god so much. it's not even funny.
~ okay I guess I have to actually write patch notes
~ rewrote almost every line of code by hand, only keeping a select few tidbits
~ moved legacy JSON generator to jsongenerator-old if anyone wants to still use that
~ put all the changelogs into expandable <details> elements, because they were getting out of hand
+ added a tab-based navigation system
+ added more tutorial writing with all the new screen space we gained
+ added a new frame splitting method - now you can accurately divide your spritesheet by SEEING where it gets divided at
+ added a preview for row...er, previews
+ added click'n'drag implementation to the new frame splitter and row preview...previews.
+ added a brand new expression navigation system - now you can click to select an expression. no more overwhelming the user! hopefully!
+ added a warning and error system to the export button
- TEMPORARILY removed the automatic spritesheet divider
- TEMPORARILY removed auto-fill options

If there aren't any bugs for me to squash this is probably gonna be the last major update from me. I'm planning on adding localization in a minor update, but I'm glad to have built and improved this as much as I did ^^
Thank you all so much for using my stuff. I love you all. -DS
November 7th, 2020 - unique code (minor update)
~ traded out the cogwheel in the crop preview and the copyright symbol in the copyright disclaimer for HTML entities instead of straight unicode (TL;DR - made things look better for everyone hopefully)
~ made the export button smaller (DM me if that's not a good change and I'll make it big again in the next update)
? new update soon with bugfixes galore - I have a to do list to get through hh
September 15th, 2020 - picturesque
~ optimized a few of the backend methods of doing things
~ new expressions are also saved to a hidden template in the code so uhhh...be careful when fiddling with Inspect Element please
~ improved the frame size autofinder - it should be a good 70% more accurate now!! (it verifies other slices now instead of stopping at the first slice)
~ changed the copyright blurb at the bottom of the page, because...
+ there's a dialogue portrait preview now!! just swap over to Portrait Data and click the new play buttons!
+ added Autofill Options! includes two new methods of autofill that skip the normal way of doing things, suggested by two friends. try them out!
+ there's a secret new debug mode that's not really secret at all if you ask nicely
+ added upload status output so you know exactly what went wrong with the process
+ added an optional input for the new row preview spots - if the check box is ticked you can edit them and they will be put in the resulting file. if it's not, however, it won't be present, so be aware of that!
+ added a "Set All To These Settings" button to portrait data! now if you have a standard for your sprites, you can copy it everywhere else easily!
- removed new expression names, they really did nothing but get in the way to be fair
August 6th, 2020 - snip, trim, shave, cut
~ repurposed a lot of the clutter, most of it is in tooltips now!
~ moved the animation preview to it's own detached window
~ clicking the Add Expression button now scrolls you to the bottom of the page
+ added help menu (you're here now! hi!)
+ added a cropping preview, so now you can actually see what your sprite will look like at a glance (access it by uploading a spritesheet and clicking on the frame x and y boxes!)
+ also there's an options menu for it for some extra help, like a transparency guide for where the four pixels of transparency should be, changing the color of the highlight, layout, and a lot more
+ added animation scaling so now you can see your sprites move as big or as small as you'd like them to
+ added non-looping animation for convenience, also a play button to replay non-looping or restart looping animations
+ added portrait data for custom characters! now your characters can appear in dialogue boxes - start a Show Dialogue event and put "[character name]_[expression name]: put dialogue text here!"
+ added Advanced Mode, which disables what few limits were on the tool (read up above)
+ added a "To The Top button", just in case you don't want to scroll back up manually
+ added no hidden secrets at all, whatsoever, especially not in the new help menu
+ added a warning for when you close the tab so you don't lose any data accidentally
- removed the "reload frames" button, why was that there when I could've done the same thing without it and easier
~ minor update (2020-09-30): row preview now only gets added to the generated JSON file if the box is checked and if everything is filled in correctly
* bugfix (2020-09-30): row preview was trying to fill in the element data for Y in both slots, instead of the user-inputted value for both - fixed!
June 23rd, 2020 - move it, shake it, tap your feet
+ added an animation preview - complete with looping, functional loopStart, and FPS
* bugfix (sameday): fixed a stupid mistake where I attempt to say a constant isn't a constant - it broke so I fixed it, dw
* bugfix (sameday): removed a LOT of the browser console logging, which would lag out your browser for a good while. some of it's still there just in case though
June 21st, 2020 - it's called a spritesheet for a reason
~ temporarily locked down the generator while I updated to the new standards, probably won't do that again
~ while working on the new standards I also improved the analyzing function a bit, should be more efficient
+ added analyzing for 2-dimensional spritesheets
+ minor update (2020-06-22): added in existing .json editing
* bugfix (2020-06-22): stopped the analyzer from cancelling itself early
June 18th, 2020 - automated, innovated
+ implemented the spritesheet analyzer tool (at the time just called spritesheet autofill)
+ added a title to the page (how did I FORGET that)
- deleted a blank file github decided to add to the project
June 16th, 2020 - we're live
+ added the tool to my dead shell of a website (trust me this is a MUCH better use)
- deleted everything I made in like...the 6th-10th grades

Hidden Acknowledgements

Because I want to. It's my tool, I get to choose the appreciation!
Side note, everything that's highlighted here has a tooltip! Hover over to see some blurbs from the people I thanked!

Big thanks to the entire crew of 7th Beat Games for making an incredible game!
Thanks to the entire RDL community - I made this for you guys! (Mostly Adipem)
Big thanks to a few people I know by name in the RDL community for keeping me sane while I made this tool - namely plastermaster, Morphious86, Szprycha, Nocallia, Kin, Axobotl, DPS2004, FireOcta, definitely_not_HIM, Fancybird, fartiliumstation, saladplainzone, Hex4Nova, megaminerzero, CV35W, and SpikedJackson!
(shoutouts specifically to DPS2004 and Morphious86 - RD tool gang represent)

Thanks to the RDRPG team and the events' contestants for inspiring the creation of the tool! Literally wouldn't have happened without y'all.

Also thanks to my friends who aren't a part of the Rhythm Doctor community, regardless if they left it, never talk in there, or never joined in the first place - namely pipelinks, TVtheTV (<3), MadzoGoneMad, DJ_54, aethermaster144, Civlian, my friend Kyle, MidnightMan, DirtMann, and all of my other IRL friends who I didn't mention by name! You likely won't see this but you're here anyway!

Also thank you, specifically, for using the tool and taking time out of your day to read this mess.
Anyway, that's all the filler I got. This is actually the end of the page now.