Forums » Help » Smooth Animation

Hi All

Been searching but couldn't find te answer (although i know its here somewhere!)

How do i make animation smooth? I have a spite flying across the screen buts it motion is quite jerky?

thx

This topic comes up often. Here are a couple other threads:

http://impactjs.com/forums/help/smooth-sprite-movement
http://impactjs.com/forums/help/motion-jitter

Not sure there are any real solutions though... all depends on the browser. This is all assuming your FPS remains well above 30.

Yea im at an easy 60, i tougt id remembered dominic posting about just changing a variable somewhere to change hte rending mechanism (or was that just forbackgrounds)...naturally id found those threads .. and im working towards iphone...so not sure if i can use the webgl?

Any info on why this is an issue with impact?

I wouldn't worry about using webGL to "enhance" impact anymore. It use to provide a performance boost which made a few things smoother but Canvas2d has been catching up. And you are correct, won't work for iOS.

Have you tested under different browsers/os/hardware? Is the problem across the board? I've usually credited jerkyness to garbage collection... another thing browsers have been progressively getting better at.

Changing the rendering mechanism? Perhaps using requestAnimationFrame vs setTimeout? Not sure that'll help much either. Here is a sample using RAF: http://jsfiddle.net/paul/XQpzU/2/light/

Still feels a bit jerky to me with Chrome 19. I don't think this is an impactJS specific issue...

yes its definatly not garbage collection, i think most people might think the same!

Here's the problem (http://jsdo.it/danpeddle/bj3L/fullscreen) and solution http://jsdo.it/qa/41 (press the big red play button)

But i dont understand how id implement it :-(


Probably a lot of people might not care about the jerkiness, i see scan lines in movies, can see when console games drop frames etc so this jerkiness bugs the hell out of me!

You could as suggested, in the other threads built some better antialiasing into my sprites to reduce the effect of the jerkiness but thats not really solving the problems.

The core problem i think, is the way impact renders images and moves them per pixel .. even background images scrolling looks pretty bad (just drop a picture of a mountain into a background and scroll and you cnan see it jump a pixel at a time).

I really thinks it detracts the eye of the player from the core game experience, and thats unacceptable :-(

I guess im going to have to think of static screen game conecpts, which defeats the point of purchasing impact :-(

Also you'd assume that 90 percent of games will have animation in that this would be a blocker on releasing the framework, i cant understand why a games framework cant display animations?

geez i sound like an asshole :-/

Going to leave it for tonight.. see what tomorrow brings (man on a ledge seems appropriate :-)

That link is all about CSS animation, not canvas. It's irrelevant.

You are blaming ImpactJS even though it has little to no control over the issue. It's rendering at 60 fps... easily fast enough for smooth animation. The issue is the browser doesn't support sub-pixel rendering so it snaps to the next pixel making it look jerky. Moving it per pixel is forced by the browser. Impact is most likely positioning it with a float and the browser is rounding it off.

At one point, at least with chrome, it did support sub-pixel rendering but it was later turned off because of performance issues or something to that effect. Googling it comes up with all sorts of discussions about it. As far as I know it is still disabled. It will most likely return.

You should know that HTML5 is a living, breathing spec that is changing as technology changes. It's constantly adapting and changing. There are some really cool things in the pipeline already that is going to be great for games. This comes at a cost... we are at the mercy of the browsers and platforms to implement and fully optimize these specs. They have made A LOT of progress already.

Your best solution... wait. If you can't wait then get creative to work around the problem.

* embarrassed face*

ill build for ios tomorrow and see if its the same on iphone.


Thx for your quick and informative reply!

Most browsers actually do support sub-pixel rendering now. Put this snippet in your main.js before you call ig.main() to enable it:

ig.System.inject({
	getDrawPos: function( p ) {
		return p * this.scale;
	}
});

ig.Entity.inject({
	draw: function() {
		if( this.currentAnim ) {
			this.currentAnim.draw(
				this.pos.x - this.offset.x - ig.game.screen.x,
				this.pos.y - this.offset.y - ig.game.screen.y
			);
		}
	}
});

However, there are a few reasons that Impact still rounds all drawing positions by default: Pixel art will look "washed out". In Chrome 20 you will see that tiles and sprites seem to deform when moving the camera. In Firefox 12 and IE9 you get sub-pixel borders between tiles and some edges on sprites:

1 decade ago by Graphikos