Getting crisp graphics on an Android game

Hi all, just having a bit of trouble with graphics on mobile. Sorry if this is in the wrong place, I wasn't entirely sure where to post this (please feel free to remove or move it if it's in the wrong place!).

I have developed a game in 16:9 ratio, the game runs in 1280x720 portrait, it looks great on my desktop machine in preview but when I export and compile it with Cocoon.io with Canvas+ and install it on an Android device, everything looks blurred and pixelated. I tried changing the game to various resolutions, and it seems the graphics look slightly less blurry if they are being upscaled rather than downscaled. I have tried on several different android devices with different resolutions and get the same slightly blurred graphics.

The settings I currently have for the project on export are:

Webgl: OFF (Doesn't seem to work with Canvas+ on cocoon.io? If I'm wrong about that please do tell!)

HighDPI: OFF (again seems to make the game far larger than the devices display when used with canvas+)

Downscaling: LOW (Have tried on medium and high, made no difference)

Scale Outer

Fullscreen scaling: High Quality

In Cocoon I set the project to fullscreen, portrait and use Canvas+

I have read every post about resolution and the posts about supporting multiple resolutions, but I don't seem to be able to make my game appear crisp (which is odd, because if I turn off fullscreen scaling and look at it on the desktop, in its full size it looks perfect, but on mobile its blurred)

If screenshots or anything would help let me know and I'll post some! Any advice would be much appreciated. Sorry if that isn't well explained, I don't post on the forum much and am probably quite bad at it!

Thanks

Ben

Perhaps you made a Graphics a little bit too intense for the Phone to handle so the Phone Converts it so it can make it faster or something? Can you send me a Screenshot so I can see?

I'm not entirely sure I know what you mean by intense? they aren't that big, I have tried using massive images and scaling them down in the editor but that made it worse. They are the exact size to fit on a 1280x720 layout as they appear. See screenshots below:

Here is the main menu as it appears on my galaxy s4:

Here is the how to play as it appears on my galaxy s4:

Here is a bit of the how to screen as it appears on my desktop machine:

Thanks for the reply

Did you try making it bigger for the mobile version?

Have tried exporting the vector graphics at double the size you need them and in construct 2 half their size in properties?

Hello, thank you for the replies.

I have tried exporting all the graphics at double size and half sizing them in Construct 2, it doesn't help, in fact it looks a bit more jagged if anything. I can't figure it out, I have tried every combo of different resolutions for both the game and the graphics, surely a 1280 x 720 game with graphics exported at normal size should look decent on a (for example) my galaxy s4. I have tried doing everything in multiples of 2, to make sure the scaling isn't going strange due to that and still nothing .

• Could it be an issue with high dpi? I had to turn high dpi mode off because compiling through canvas+ cocoon.io made everything bigger than the screen?

Thanks

Ben

I personally used 90 dpi with double the size. Then halved it in construct 2 and it was smooth with no jagged edges. Hope it helps.

I have tried higher size with higher PPI and then halved it in Construct 2, this made it worse. I should stress it is only on mobile that this is a problem, it looks very crisp on desktop but the Cocoon.io apk with Canvas+, fullscreen and portrait on is quite blurred and pixelated. I cannot figure it out, just to add detail I have been a graphic designer for years, I understand resolution, ratios, pixel density etc very well but I cannot get this game to look clean on a mobile build.

The game is 1280x720 portrait, the images are the exact size needed and the target device (for example) is my samsung galaxy s4, which has an output of 1080p - obviously 1280x720 needs to scale up slightly to 1080p, but even on lower resolution devices it looks the same. Has anybody got any ideas? I am releasing the game on the play store but I don't want to until I can make it look right on mobile. I have tried everything I can think of, has anybody got any ideas?

Thanks

Png or jpg

Looking at these they would be better as png

Also check https://www.scirra.com/manual/129/image-format

They are saved from photoshop as PNG and the PNG recompression in construct 2 is set to normal. It isn't due to the format. Interesting detail, with High-dpi mode on and the game built with webview+ instead of Canvas+ it looks great, but High-dpi mode seems to not work with Canvas+, but Canvas+ has the superior performance.

smallrobot heh