• Hey! Guest! The 37th GMC Jam will take place between May 28th, 12:00 UTC and June 1st, 12:00 UTC. Why not join in! Click here to find out more!
  • Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

HTML5 Smooth sprite rotation in HTML5

JimPancakes

Member
In order to get smooth sprite rotation for my pixelated game I increased the surface size using "surface_resize" and it worked well on Windows. On a browser though "surface_resize" doesn't seem to do anything. The animation ends up looking very choppy.

Is there any solution to this?
 

Ricardo

Member
It seems like a bug. Next Beta release will probably contains the fix. In the meantime, you could try enabling views in your room (if they are disabled) and use view_set_hport/view_set_wport (to the same size of the application surface) to work around it.
 

rIKmAN

Member
It seems like a bug. Next Beta release will probably contains the fix. In the meantime, you could try enabling views in your room (if they are disabled) and use view_set_hport/view_set_wport (to the same size of the application surface) to work around it.
It may be related, but that issue you linked is fixed in 2.2.5 as it was me who filed the bug.

OP the fix is to update or you'll have to use the workaround Ricardo mentioned.
 

JimPancakes

Member
It seems like a bug. Next Beta release will probably contains the fix. In the meantime, you could try enabling views in your room (if they are disabled) and use view_set_hport/view_set_wport (to the same size of the application surface) to work around it.
It may be related, but that issue you linked is fixed in 2.2.5 as it was me who filed the bug.

OP the fix is to update or you'll have to use the workaround Ricardo mentioned.
That only seems to increase the size of the screen. I doesn't add any granularity to the pixels. Is there something I'm missing?
 

Ricardo

Member
That only seems to increase the size of the screen. I doesn't add any granularity to the pixels. Is there something I'm missing?
Maybe we can offer better advice if you share more information? How does your game looks like in Windows and how does it looks like in HTML5? What's exactly your scaling code?
 

JimPancakes

Member
Maybe we can offer better advice if you share more information? How does your game looks like in Windows and how does it looks like in HTML5? What's exactly your scaling code?
Finally managed to wrap my head around the issue and made it work. Now my HTML5 game has granularity :).

There is one BIG problem though and I think it's unsolvable at least at this point in time. I'm working on a 4k screen with Windows scaling at 300%. So what this means is that if I set the view port at 1280 x 720, which is the double of my camera giving me the minimum amount of smoothness, that will result in a 3840 x 2160 game window for me.

I might have to make a custom configuration just for this case and leave 4k users in the dust when it comes to smoothness. Is there any other solution to this?
 

Ricardo

Member
Finally managed to wrap my head around the issue and made it work. Now my HTML5 game has granularity :).

There is one BIG problem though and I think it's unsolvable at least at this point in time. I'm working on a 4k screen with Windows scaling at 300%. So what this means is that if I set the view port at 1280 x 720, which is the double of my camera giving me the minimum amount of smoothness, that will result in a 3840 x 2160 game window for me.

I might have to make a custom configuration just for this case and leave 4k users in the dust when it comes to smoothness. Is there any other solution to this?
You could edit the viewport meta tag in the index.html file and see what fits better for your project by adjusting initial-scale and maximum-scale.
This is the code I once used to ship a Full HD HTML5 game which was causing me scaling issue, by the way:
HTML:
<meta name="viewport" content="user-scalable=0">
 
Top