Forums » Help » Increase image quality

I've taken over a completed impactjs project, and would like to increase the quality on the images used. Is there a simple way to do that?

The images are called into entities using AnimationSheet, and frames as a randomizer for image type. All entities are 16x16 px. The game runs full window mode, so 16px as a param works out to 50-100px ish. At 16px I can't quite tell what the object is, and I'd like to change things around so that the source image is at least 64px.

animSheet: new ig.AnimationSheet ( 'media/something.png', 16, 16), ...

The code above is from my entity class. I've tried changing the parameters around (changing all 16's to 64's, and also doing this in my entity abstract class size), but all I can get is the same pixelated image 4x as big.

I've also tried changing the main game size from 320x240 -> 640x480 (and larger), but that seems to have no change at all.

I'm using the base engine along with impact++

Any suggestions?

Did you update your images?
You need to actually change your pngs or jpgs or whatever.

Impact will not perform vector magic
(my apologies if you know this already).

If it is the pixelation that troubles you,
you might consider setting the scale to 1 if you haven't done so already.

The last thing I have to say about this is to be
careful when increasing image sizes,
particularly if you plan on an iTunes store release.

Entity images are prerendered and stored in device RAM.

While browsers can be super powerful and handle drawing lots of
huge images 60 times a second, iPhone 4 does not share this capacity,
and if you have lots of large images you will get memory pressure errors and crash.

I'm pretty sure Apple will reject any app that crashes a 4S phone
(possibly 4 too though I am not certain).

It might be best to keep image sizes smaller and let Ejecta scale it,
but there is a middle ground somewhere...

Yeah, I've done most of that already, no luck.

I've changed my source images on my sprites to 64x64 (and higher... tried 1080p for fun), scale is already at 1, and it is indeed the pixelation that's bothering me. I'm not worried about performance, as this will primarily be viewed on PCs.

If I set everything to 64px (source images, and sizes everywhere I can find them), I do get 64x64 images, but I want them to be sized correctly. The whole game is set up so that 16x16 works for sprites, colliders, etc. I can make my images @ 64, but then they're just big. I pondered how to change this, and started looking in to setting the whole canvas to 400%. The original was 320x240, so I first reset it to 640x480 in various places (plusplus/core/config.js, impact/system.js come to mind, along with the actual html canvas element). Besides resizing my browser window, it didn't seem to do anything, and the relative scale of my sprites is still the same (4x too big).

Perhaps when I resized the whole system, I just did it wrong. Regardless, this is a relatively simple project, and I think I might get things done faster to write my own engine unless there's some setting or parameter that some kind person can spot.