thefoundwatcher's go-to sprite editing guide

introduction

this document contains information pertaining to sprite editing in roblox. this is mainly a resource for people making morphs in a game of mine (CDRP), but it can be use for people using old morph-making systems that require manual upscaling (PMDRP).

---

the basics

images on roblox are classified as a decal. you can upload a decal by clicking the Create button at the top of the main Roblox page, then travelling to the Decals section under My Creations. you'll see something like this:

we'll be using this link as an example: https://www.roblox.com/library/11183859979/krisboy-f1. this is what the page looks like.

all roblox decal objects have a resolution of 1024x1024 in-game. you can attach the ID in the link (the big string of numbers before the name of the decal but after the library in the link) to Decal objects, Texture objects, ImageLabels, ImageButton- everything under the sun that requires the use of an image of any kind. they may receive a privacy update (in which case decal morph roleplays will probably cease to exist as we know it)

now remember that resolution! we'll be using it later

the upscaling process

first, let's open the image we want to upscale. we'll be using kris as an example:

normally, they look like this. from deltarune's sprites, they're a 19x37 sprite. upscaling it is simple: just select the Resize Image option wherever it may be in your program and change the method to Nearest Neighbor. that way, the decal stays crisp as it travels up the resolution scale!

now, remember that resolution i was talking about earlier? yeah, yeah- 1024x1024. if you were to upload this simply upscaled decal to 1000% of its previous resolution, it would look correct.. but when it arrives to roblox, it ends up looking like this.

see how kris becomes EXTRA T H I C C? that's because roblox is simply automatically correcting the resolution of the file to 1024x1024 by using a method known as bicubic scaling, which may blur the image slightly ontop of the autonomous stretching that roblox has to do.

in order to resolve this, simply change the canvas size of the image. we're looking for a square shape, so as long as the Width and Height match, you should be good to go!

now that we have our kris ready, simply save the file to your computer and upload the decal to roblox. much better!

specific upscaling cases

sometimes, sprites that you try to upscale may end up having a bit of unused space off to the side, like so:

this is a pretty minor note to make, but all you have to do is edit the image's canvas size so that it fits ONLY the sprite. there should be no white space off to the sides of the sprite before making any other canvas size edits.

oh yeah, alignment. that's also a thing.
when making canvas cuts of any kind, make sure that you're aligning the sprites to the bottom of the image. most programs have an alignment grid of sorts that you can click around to determine the position of the image, but for the most part you should always default to this alignment so that they're as close to the ground as possible.

for CDRP specifically

walksprites

now, if you were to just blindly follow the steps above and made sure that most of the shapes matched, your walksprites may come out animating something like this.

doesn't that feel weird? see how the sprite isn't offsetting? it doesn't have that.. bounce. i know that sound weird but bear with me here

now, in CDRP's case, i prefer to make it so that i don't have to individually offset each sprite in-game. it's a huge pain in my ass to have to do manually, and while i have the option to do so, i find it much easier to keep the image at the same resolution. here's how you'd go about doing that:
add a single pixel to the canvas size. or two, if you need it.

then all you do is move the idle sprite up a pixel.

after that, the sprite will start animating as it should.

change their canvas size to a square, upload the images, and make sure they still animate like that when you flip through them in an image editor. if they do, congratulations! you just upscaled your first sprites!

emotes

emotes can be a very interesting case to handle at times. their full resolution may not be immediately apparent in the first image, and AU submitters may crop each sprite to its own resolution, which is an absolute pain to deal with. under normal circumstances, though, this is what a normal emote sprite array should look like.

if they are differing resolutions, line up the sprites on different layers and make sure it plays correctly. it's easiest to manage this using a program like Aseprite (as i recommended), but as long as they animate normally then you're golden. then you just follow the upscaling steps above and upload to roblox! this makes the process of editing morphs much easier.

---

sparknotes

upscaling process

clip out excess space, change canvas size to a square (width and height have the same number of pixels), upscale to 1024x1024. upload.

cdrp stuff

walksprites' idles should be offset upwards by 1 pixel before upload. emotes should animate correctly all within the same image with proper positioning. upscale and upload.

---

end

i'm hungry.