Question

I’ve been working for a month on a flash game, which should be manageable to play in a browser (light computation). This being said, I’ve noticed that in some browsers the game runs at what looks like 15 fps (the game should run in 80fps). This has been known to happen in IE9, and the quick fix was to add this line to the top of the html:

<meta http-equiv="X-UA-Compatible" value="IE=9">

This was a quick-fix that forces IE into compatibility mode and greatly improved the fps (to about… 60, let’s say).

Still, I believe that the game is running slower than it should in every browser, which is evident when the html version is compared to the swf.

It’s also fairly noticeable that the movement in the game (html) “lurches”: these lurches injure the aesthetics of the game, and therefore the playability!

All of this leads me to believe that browsers limit access to computers’ graphics card;

1) It’s slow in html, and fast in swf

2) Sounds play at normal speed, yet graphics lag

EDIT

3) All the graphics in the game are fairly low resolution (i.e., graphics that are displayed ingame as width1xheight1 are movieclips of width1xheight1 png’s) + as minimal as possible

4) I’ve made very (computationally) simple flash projects and seen the same graphic-movement problems.

Can anyone give me some advice as to how I can increase the smoothness of my game in browsers?

Answer 1

This could be a symptom of how the SWF is embedded in the HTML page. Flash supports a number of “window modes” which determine how the content is rendered into the browser window. This is set via the wmode parameter when the SWF is embedded in the HTML page.

According to Adobe’s documentation, this should be set to “direct” for best performance:

direct – Use direct to path rendering. This bypasses compositing in
the screen buffer and renders the SWF content directly to the screen.
This wmode value is recommended to provide the best performance for
content playback and enables hardware accelerated presentation of SWF
content that uses Stage Video or Stage 3D.

In practice, the wmode can act erratically so it may help to try the alternatives mentioned in the documentation.

Other options which may help improve performance are:

• Use stage.scaleMode = StageScaleMode.NO_SCALE. This will prevent content from being scaled should the embedded size not match the original size. Scaling contributes to CPU usage so disabling it should increase the frame-rate (see StageScaleMode#NO_SCALE).
• Set opaqueBackground on non-transparent MovieClips (such as the root MovieClip). Transparency requires extra calculations to multiply the foreground color with the background color. Setting an opaque background bypasses these additional calculations and may result in a performance boost. (see DisplayObject#opaqueBackground)