0

I'm trying to create a game, and the images, both png and svg formats, seems to get pixelated, no matter how I export them, I can't get to the HD images like angry birds for example. I tried with illustrator exporting large PNG (512X512) or SVG basic 1.1 export and still nothing seems to get near the high quality I need, especially when you move to tablets, there you can see the image even in SVG being ruined, I guess the engine creates a bitmap out of the SVG and then scaling it to fit the screen resolution (!?).

is there any reference or tutorial on the right way to create images for games to get a good result and prevent images of being pixelated?

Er85
  • 194
  • 1
  • 13
  • Assign target resolution to which your scaling will be 1.If your targeting resolution is different from your images resolution then those images get scaled. – Rama Mar 24 '14 at 05:12
  • Not sure what you mean, I did 800X480 fixed resolution and even without scaling the sprites the quality is not good enough.. – Er85 Mar 24 '14 at 08:29
  • what ResolutionPolicy are you using? – jmroyalty Mar 24 '14 at 20:25
  • I used to set fixed resolution but now I read the screen measures and use ratio resolution policy with the height and width of the screen, also I figured out that when you copy from illustrator to photoshop images and export the png from photoshop it looks better, still nothing like angry birds or candy crash, I wonder how they did it... – Er85 Mar 24 '14 at 20:38
  • I did it the other way around - I picked a screen size to write for and made sure my images looked good on that - then used a RatioResolutionPolicy to adjust for other screen sizes - sure some screens with different ratios than what I wrote for have black bars - but the common way around that is to write for 2 or 3 popular screen ratios - still at a predetermined size and make the images look good at the size you are writing for - and choose the proper ratio at runtime. See this discussion - http://stackoverflow.com/questions/11399045/sprite-size-on-different-screen-size-andengine-android – jmroyalty Mar 24 '14 at 23:35

1 Answers1

0

I think you may be loading in your images incorrectly for SVGs as they should be "Pixel Perfect"

final PictureBitmapTextureAtlasSource textureSource = new SVGAssetBitmapTextureAtlasSource(activity, assetPath, width, height); 
Bitmap pBitmap = null;
try {
      pBitmap = textureSource.onLoadBitmap(Config.ARGB_8888);
    } catch (Exception e) {
e.printStackTrace();
}

Key is to pay attention to the "width" & "height" parameters, this should refer to the original size of your graphic multiplied by your screen scaling.

For example if you are using 800x480 as a default and you design a sprite with a sprite of 100x100 that works perfectly with this resolution. When your game comes to creating the SVG on a device with dimenions 800x480 your sprite will be saved with width and height of 100x100. However if the device was 1000x700 the "scaleX" would be 1000/800 which is 1.25 and scaleY would be 1.46, this would yield a sprite with dimensions 125x146 and would be pixel perfect for this device.

When creating the TextureRegion later on make sure you specify a width and height of 100x100 otherwise your sprite will change size based on the resulting SVG Bitmap

Chris
  • 1,766
  • 1
  • 21
  • 36