Resizing a large image to a smaller resolution

I am relatively new to graphic design for video games and I’m wondering how to scale a large image to a smaller size without it looking pixelated. I am using an i-Pad app to create assets for a game I’m making with Codea, and it only exports assets at 4096x4096 resolution. When I scale these large images down in codea (with sprite width and height parameters) it appears pixelated at a smaller size, such as 128x128. How would I go about scaling down my assets to a small size while keeping their appearance clean?

@yojimbo2000 So you’re saying it’s just my iPad causing the problem?

@captsmitty77 Since you don’t have a Retina display, the image you’re looking at isn’t as sharp as what we see on a Retina display.

No, I’m saying that inevitably something gets lost when you resize from 4096 to 128. If it were a retina iPad, you’d still be going 4096 to 256.

I think OpenGL’s built in algorithms for handling resizing are pretty good (it doesn’t just discard pixels, it averages them together, I believe). It would take a lot of effort and research to come up with a better downsizing algorithm IMO.

Your best bet is to use assets that are more or less the size you want them to be. Lots of art apps let you change canvas size.

The artefact you sometimes see when downsizing a fine, repetitive texture is called moire. But you’ll only get pixelation going the other way, upsizing.

@captsmitty77 I don’t have a 4096x4096 image to try this on, but I took a 768x1024 image and reduced it to about 128x128 and it looks OK. The white square is 128x128. I’ll try to find a larger image and try it again. Is this what you’re trying to do.

function setup()
    rectMode(CENTER)
end

function draw()
    background(40, 40, 50)
    stroke(255)
    strokeWidth(2)
    noFill()
    sprite("Cargo Bot:Startup Screen",WIDTH/2,HEIGHT/2,128) --768x1024
    rect(WIDTH/2,HEIGHT/2,128,128)
end

I copied your code and looked at it on my i-Pad, it still looks “pixelated” for lack of a better word. I want my image to look as smooth as it does with its original resolution, even when shrunk. I am using a transparent PNG by the way (I don’t know if it makes a difference). Also would the retina option do anything about this when importing sprites or not? Thanks

@captsmitty77 Which iPad are you using. I’m using an iPad Air 1 and when I look at the image with a 10x lupe, it looks a little pixelated, but OK without the lupe. I’m not sure how clear a 4096x4096 image shrunk to 128x128 is going to look.

Pixelation is something I associate with scaling up, not down. Severe scaling down can produce moire false detail. Generally, OpenGL scaling looks good I think (you haven’t added noSmooth() have you?). Could you post a screenshot, so we can see what kind of artefacts you’re seeing?

I’d recommend using an art app with better export options (procreate for raster, idraw/ graphic for vector both have canvases that you can adjust the size of), and export at the size you need.

Yes, I think it’s rather wasteful to be drawing 4096x4096 pictures at 128x128, (unless you’re working in 3D, when it’s possible to zoom in very close).

My preference would be to use a drawing program to reduce them to the correct size before including them in Codea.

You could always try a vector package like iDraw and then rasterise the image to the required size and cache it.

@TechDojo the problem there is that the only vector format that Codea supports is pdf, which doesn’t support a transparency layer, unless I’m mistaken.

Thanks for replying everyone. My iPad is an iPad 2 (which I think is old, I’m not sure). Also I’m not using noSmooth(), my code is the default code with a sprite() call in draw().

iPad 2 is non-retina, so 128 x 128 really is 128 x 128. Retina iPads use pixel coordinates that increase by 0.5, so it’d actually be 256 x 256 pixels on a Retina display.

Ok, thanks for the help. I’ll just find another graphics app to suit my needs

When you shrink an image? You will lose some details in that image. That’s inevitable.

I’ve heard that svg aka scaleable vector graphics can be scaled down and are smoother.

I think there is a tutorial in Codea for that if I recall correctly.

There is a demo app. The image needs to be a PDF