• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!
  • Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

Question - Code large sprites become blocky when attempting to scale down

i have a large picture i am drawing into a room.

when i scale the room i use the following code

Code:
vx = 750
vy = 1334
vm = 800

var tt = vx/vy*vm;
surface_resize(application_surface,tt,vm)
window_set_size(tt,vm)
room_width  = tt/2
room_height = vm/2
view_wport  = tt   
view_hport  = vm

i am then drawing the sprite with this code

Code:
var uu = 0.100;
draw_sprite_ext(sp_logo,0,room_width/2,(sprite_get_height(sp_logo)/2)*uu,uu,uu,0,c_white,1)

the sprite is quite large and im pretty sure it is vector, i am scaling it down, and it does not have any kind of alpha fading around the edges or mid colours between pixels.

the result looks quite blocky, when the scale is closer to 1 it looks fine, but i dont understand how to make it so i can make it smaller and still have it look as nice as when its in full size, havnt had any luck changing the settings, turning on and off interpolate colours between pixels has no effect, so im not sure why a large image looks worse when its scale down then when a small object is scaled up).

please note i only have one sprite in the project, im just doing tests so i dont think the texture maps are a question but i have made sure the entire sprite does fit on one texture map.

one thing i can do is increase the surface_resize to be larger but in proportion to the size of the room, doubling it for instance, and although it does work it is also doubling the amount of drawing that needs to be done on screen, which might be the best option, but this doesnt feel practical.

does anyone one know of this problem and possibly an alternative to resolve this issue with scaling down large sprites and having them turn blocky as a result?

thank you.
 
This following approach may be different with vector, —which I don't work with— but it's worth a try:

Let's say that your big sprite is in the 700 pixel neighborhood (relatively "big")... For the sake of making this easier "math-wise," adjust the canvas to 800 x 800 in the sprite editor. Then go into the image editor and choose the blur tool... Use "Gaussian" and blur the whole image with an intensity of about 10. Then shrink the actual sprite in the sprite editor to 200 x 200. Put that aside, and do the entire process again, but without blurring. Put those results next to each other. If your blurred test sprite looks too blurry after the shrink, go back and do it over with an intensity of about 6, 7, or 8. And if it looks to "blocky," —after the first test— up the blurring from 10. Shrinking via draw code should get the same results, but you'll want to do this manually first so that you know what the quality will be.

This has everything to do with the idea of "nearest neighbor..."

Again, Vector is very different, so I don't know.

Just for the sake of effing with these means, Draw yourself a massive, perfect circle on a 2000 x 2000 canvas... Do the same kind of blurring and shrinking vs drawing a circle at the targeted size —wow factor! Notice how those pixels on the edge of the blurred circle will have arranged themselves to form a crisp, clean appearance ( zoomed out of course ).

The bigger you can go in the beginning, the more you can shrink down thus allowing that process to settle everything down "pixel-wise."
 
So I took a pic of my used chili pot, cut out the background, etc... I needed a sprite canvas of 2400 x 2400 to fit it in. The first image was shrunk to 150 x 150 (16 times) with no blurring. Then I shrunk 1/2 more time to 75 pixels.
I blurred the other image a total of 60 intensity (Gaussian). I blurred it 3 times x 20 so that I could sort of evaluate. Then I shrunk it to 150 x 150. Then I blurred it intensity 2 Gaussian and shrunk to 75 pixels. So you have 2 close-ups and 2 actual size. Now yes, the blurred pot is a touch too blurry at its actual size... So what I would do is work backwards to the last shrink and only blur 1 intensity... And I did just that, so look at the 5th image. It's very crispy, but not narley. So there you go. You can't blur after shrink because it throws everything off. It has to be this way.
NOTBLURRRRED.pngYESSBLUURRRED.pngsprNOTGOOD.pngsprGOOD.pngsprite41.png
 
Top