How To: Get Sharper Images: Difference between revisions
From Legacy Roblox Wiki
Jump to navigationJump to search
>Mattchewy Added decal link |
No edit summary |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{Archived}} | |||
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: | 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: | ||
{{ | {{TitledBox/start|heading=<span style{{=}}"margin-right:10px;font-weight:bold;">1.</span><b>Make your image</b>}} | ||
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 [http://www.roblox.com/My/ContentBuilder.aspx?ContentType=13 Decals] section in your [[My Stuff|Stuff]], and clicking the '''Create''' link. After it's uploaded and reviewed by moderators, you are ready for step 2. | 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 [http://www.roblox.com/My/ContentBuilder.aspx?ContentType=13 Decals] section in your [[My Stuff|Stuff]], and clicking the '''Create''' link. After it's uploaded and reviewed by moderators, you are ready for step 2. | ||
{{TitledBox/end}}<br/>{{TitledBox/start|heading=<span style{{=}}"margin-right:10px;font-weight:bold;">2.</span><b>Put it in your game</b>}} | |||
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. | 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. | ||
</ | {{TitledBox/end}}<br/>{{TitledBox/start|heading=<span style{{=}}"margin-right:10px;font-weight:bold;">3.</span><b>Sharpen it</b>}}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. | ||
{{TitledBox/end}} | |||
<!-- designing image to show for step 3 --> | <!-- designing image to show for step 3 --> | ||
Latest revision as of 03:26, 12 April 2023
|
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.
