Help with scaling and quality

[Peaverin]

Hi. I'm very new to HTML5 development. Lately I've been creating my first platformer game. As I didn't have any graphics at all and I have no skill to create some, I searched on the internet for some free graphics. The graphics resolution is very low and my game resolution is only 512x288. It looks good if you play with a mobile phone, but if you play with a tablet the resolution gets worse and even worse if you play full screen in computer. Here's a video demonstration of the game. If you see the video in your computer you'll see that there's a very bad quality. That's because youtube has scaled the video automatically.

 

 

 

I'm trying to figure out how to avoid this kind of issue. The only solution I can think about is manually resizing (pixel by pixel so the quality isn't afected) all the graphics to make them 2x and use them in tablets and computer, but this will be very time consuming. I think there's no other way of increasing the quality of the graphics, but maybe there's one. I'd be interested in some replies about this subject. Thanks! And sorry if my english isn't very good, I'm from Spain.

[ekeimaja]

Which framework do you use? If you use Phaser, have you tried scaling with EXACT_FIT setting? Always make scaling from big to small, never from small to big. Your game looks really nice

[Peaverin]

Which framework do you use? If you use Phaser, have you tried scaling with EXACT_FIT setting? Always make scaling from big to small, never from small to big. Your game looks really nice

Thanks! Actually I'm not using any framework so I can only scale it through context.scale() and getting the relation between the canvas and the user's screen but that will make the game look blurry anyways.

 

Edit: I think I found out something:

var scaleX=window.innerWidth/canvas.width;var scaleY=window.innerHeight/canvas.height;canvas.width=window.innerWidth;canvas.height=window.innerHeight;ctx.scale(scaleX,scaleY);

This way I'm scaling the canvas element and the context and it resizes it with very good quality. The only bad point is that some of the tiles are not showing correctly. That's because ctx.imageSmoothingEnable is set to true by default. When I set it to false the game is shown correctly and it works very well.