Forums » Help » smooth movement of entitly

Hi, I'm trying to get a white square entity (will be a musical note) to scroll down the canvas, against a dark background. The scrolling down of the entity does not look smooth. It is better in chrome, a bit jumpy in firefox/ie9, and very jumpy in safari.

I have set up a demo of this here:
http://www.ignitegallery.com/tests/impact/jumpy-movement/index.html
Please have a look in safari to get the best idea of what I mean.

The code for this is very short, the source is here:
http://www.ignitegallery.com/tests/impact/jumpy-movement/game.js

Can someone please give me hints on how to get smooth movement.

Thanks,

Matt.

More info about this here:
http://impactjs.com/forums/help/smooth-sprite-movement

Thanks for the info, I tried adding this, but it looks like I am doing something wrong, can you please have a look:

I added the link to webgl-2d.js to the index.html file:
http://www.ignitegallery.com/tests/impact/jumpy-movement/index.html

and I included the plugin in this file:
http://www.ignitegallery.com/tests/impact/jumpy-movement/game.js

The plugin seems to be called because if I put return at the top of the plugin file the entities will come down as usual. However if I remove the return, the whole canvas goes white and nothing seems to happen.

Also, I'm generally wondering, is it really the case that a webgl plugin needs implementing to just get one entity to move in a straight line smoothly. I understand if I had 20 entities things might get jumpy, but this is just moving one thing in a straight line. Does canvas really have that bad performance that this can't be achieved out of the box?

The page doesn't load for me so I can't comment - half the files that are needed are missing.

Now, if it's jerking around like you seem to suggest (rather than just being 'jerky' because everything renders to the nearest pixel), that would suggest there's a performance problem and one that is probably not likely to be solved by WebGL... but I can't comment without seeing the entities involved and possibly without the debug panel running to establish where the problem lies.

As a guide, one of the projects I've been working on lately has had over 100 entities running at the same time without any serious performance penalties, though it doesn't do much else at present, it was more to see how entities would scale, even though they have their own custom update+draw code (all entities have to have a custom routine for each due to the slightly odd behaviour required)

If it's not running with any major performance headaches, that could be a symptom of not running enough FPS through configuration.

Lastly, though, depending on circumstance it might be the fact that a canvas is inherent pixel-based, and doesn't itself handle the concept of sub-pixel rendering - being pixel based, the smallest degree of movement it does itself is a pixel. But from what you're saying this doesn't sound like the problem - and this is really the only one that WebGL can make a huge difference in, I've personally not seen that much increase out of using WebGL.

Hi Arantor:

I have put the original demo back up, this is without any webgl, it looks worst in safari and second worst in firefox:

http://www.ignitegallery.com/tests/impact/jumpy-movement/index.html

I activated the debug panel as well.

Using chrome (on a mac):

Address Bar: about:flags

I enabled these two, and performance improved dramatically.

Disable GPU VSync
Disables synchronization with the display's vertical refresh rate when GPU rendering. This allows frame rates to exceed 60 hertz. While useful for benchmarking purposes, this also results in visual tearing during rapid screen updates.

GPU Accelerated Canvas 2D
Enables higher performance of canvas tags with a 2D context by rendering using Graphics Processor Unit (GPU) hardware.

EDIT: Hrm, it may have just been coincidence. Anyway, I'd play around with some settings like these.

Seems smooth to me on Chrome/Win7 - with constant 60FPS.

This is no mystery guys. Implementation of Canvas 2D differs from browser to browser and changes from version to version. At one point Chrome did have sub-pixel rendering and the next version it was turned off... I'm not sure where it stands now. Unless its a performance issue (which this demo has none what-so-ever) you just have to "live with it" until browsers work out all the kinks.

HTML5 is still a relatively new thing and browsers are still implementing and optimizing things.

Flipping flags isn't the best idea either if you plan to deploy it to the masses. If you tweak something you'd be then working with specs that aren't typical of the standard install of a browser. You can get an idea of what is in the works for upcoming versions but you shouldn't count on it.

I've suggested WebGL in the past simple because GPU support was better for it for a good while and it seemed to handle sub-pixel rendering. But this is still the same deal with Canvas 2D. Things are changing. In the end there is no reason why Canvas 2D won't be just as smooth as WebGL as browsers continue to optimize. It's come a very long way already.

For benchmarking and seeing what is possible you should check out:

http://www.phoboslab.org/crap/notjsgamebench/
http://html5-benchmark.com/

Xander, Thanks for the ideas, but I want the game to be deployed widely, so I need to have it work for people with a standard browser set up in chrome/firefox/ie/safari. I can't ask them to adjust these things.

__

Arantor, did you try the demo in safari and firefox? It is these 2 where the demo is shaky/jumpy, chrome is not that bad.

__

Graphikos, Can you please give me some brief instructions on how to enable web gl, I think I am missing something, I went to this page:

http://blog.hiive.com/2011/07/accelerating-impactjs-with-webgl.html

and downloaded the ImpactJS-WebGL.zip file. I made a link to the webgl-2d.js file in my html head, and included the plugin by putting it into lib/plugins/webgl-2d.js and doing 'plugins.webgl-2d' in impacts require. The plugin was imported, but the canvas just goes all pink or disappears when it runs.

That should be all you need to do. I threw together an example project using it. If your console says "webGL enabled" it's up and running.

http://pointofimpactjs.com/snippets/view/20/webgl-plugin-example

I think you are still looking for a magic bullet that just doesn't exist... best of luck to you though.

It's just as smooth in the latest FF for me as it is on Chrome. Did I mention I do my performance testing on a PC with a 5 year old CPU? (Yup, I bought the motherboard in 2007, with the CPU, and neither have been upgraded since then.)

What versions of these things are you using? What plugins are cluttering them up?

Graphikos, Thanks, I will set this up and report the results...

Arantor, I have uploaded a video of my safari viewing the page:

http://www.ignitegallery.com/tests/impact/jumpy-movement/videos/safari.avi

The video looks the same to me as it does in safari, so I don't think any of the effects are due to the recording process itself.

I am using Safari 5.1.2 on Windows 7. My laptop is a probook 6540b (2 years old with an i7 dual core processor). I have tested on 4 other machines ('average' xp or 'average' win 7) computers, and I find my machine performs better at canvas rendering than other ones, so I want to try and get things great on my machine, and hopefully things will be good on other ones.

I have have the standard adobe plugins etc, I doubt it is these though, as the movement looks jumpy to me on 4 other computers.

I see similar results. Looks best in Chrome but closely followed by FF and IE9 and Safari being the worse. Browser inconsistencies at it's best.

I downloaded the webgl example plugin
http://pointofimpactjs.com/snippets/view/20/webgl-plugin-example
and tried changing the graphics to the same as my demo. I couldn't recognise much difference in firefox and chrome, and it doesn't look like webgl is supported for safari on windows yet.

However in IE9 the plugin seems to have javascript errors and break, this seems to happen with the plugin out of the box. Is this something I am doing, or is the plugin still more beta and not IE ready?

Also, I have had a little play round with browser performance in general, and tried some tests outside canvas:

http://www.ignitegallery.com/tests/tween-test-jquery/
http://www.ignitegallery.com/tests/tween-test-raw/

Interestingly, the same pattern seems to occur, chrome reasonably smooth, firefox/ie9 a bit jumpy, safari for win bad jumpy.

I understand that html gaming is new, and this will improve over time, but I am wondering, in the meantime, whether flash gaming has any better performance. In the long run, I don't like the principal of a closed source plugin (vs open standard) but I would be interested to know if currently it performs better than canvas.

Here is the flash equivalent
http://www.ignitegallery.com/tests/flash-test/

It seems to work reasonably smooth on all browsers, even on my ie8 virtual machine with 500mhz of cpu allocated.

I think my game is a bit unique, in that I have black/white musical note entities coming at a constant speed, and these tend to make any imperfections stand out, where colored characters moving in different directions seem to mix in with the little jumps better.

Given that it's had a decade to mature and consumes vastly more of your computer's CPU than Canvas usage does, I should hope Flash can provide better performance...

Yea, granted HTML5 is well on its way to replace Flash, Silverlight, et al. in a lot of situations but its still got a ways to go. It's simply not fair to compare the two... yet. Bottom line is use what works best for the application. Pros and Cons either way you go.