How To: Get Sharper Images

Archived Page This article has outdated information. It is now archived, only kept for historical purposes. Generally, outdated articles write about how to use or interact with the Roblox website. The services and features as written at the time have been changed or removed by Roblox Corporation. External links may be substituted with a Wayback Machine or Roblox Forum Archive link.

When you upload images on Roblox, and place them in your game, are they really as sharp as you made them to be? Doesn't seem like it, does it? Follow these steps if you want to make your images sharper in game:

1.Make your image

In order to make an image sharper, you have to start out with an image first, don't you? When you make your image, make sure that it is 256x256 EXACTLY, or Roblox will downsize it (and make it grainy) or upsize it (and make it blurry). When your image is made, and it is 256x256, you are ready to upload it to Roblox! You can upload an image by going to the Decals section in your Stuff, and clicking the Create link. After it's uploaded and reviewed by moderators, you are ready for step 2.

2.Put it in your game

Now, you must use GUIs to put the image in your game. If you don't know how to use GUI objects in Roblox, consider checking the Tutorials section and looking for GUI related tutorials. If you do know how to use GUIs, then make a ScreenGui, and put an ImageLabel in it. After that, get your image's "asset url" and type it into your ImageLabel's Image property. Make sure your ImageLabel is 256x256 in exact size. Your image looks a little blurry doesn't it? Look at the next step to see how to fix that.

3.Sharpen it

Roblox's GUI System positions boxes half-pixels greater than their AbsolutePositions, while borders are not translated by half-pixels. To see what I'm talking about, set the BorderSizePixel for any GUI object to 0. See how the edges are now blurry? This happens because half of the pixel is in one space and half is in another, which means that they essentially get divided among the space. To fix this, you have to use some logic. Since offset cannot use anything but integral values, we must use scale. When we use scale, we must note that one pixel is one divided by the total pixels of the container (in a specific axis). This means that half of one pixel would be one-half divided by the total pixels of the container (again, in a specific axis). Now that we know how this works, we just have to offset our ImageLabel by one-half of a pixel. So, get the container's size on the X-axis and divide it by one-half. Then, put that value in the scale part of the ImageLabel's Position. Now, do the same for the Y-axis and set the BorderSizePixel to 0. After this, your image should be sharpened.