Flash running at 60 fps, html5 at 50 fps, but html5 is smoother?

[Chosen Character]

Hello,

I'm exporting to Flash but I have a problem, it seems that 60 fps on Flash is "choppy" with occasional 30 fps dips, however, when running on HTML5 my fps is capped at 50 fps but is significantly smoother. My game is not particularly complicated, and I'm wondering why this is.

(Left/Right to move, S to shoot, D to switch weapons, \ to open up the debugger, R to reset the game)

Here is the flash version: http://www.filedropper.com/octo

Here is the html5 version: http://octohtml5test4a.bitballoon.com/

The problem is at 60 the game looks choppy.

Details:

The actual game is on a 144x256 grid with 4x zoom on the camera for a 1024x576 resolution.

The game is split into 'layers' of tilemaps: the image layer, the collision layer, and the wall layer (collision and wall handle two different types of collisions), there are currently 4 levels and so 4 sets of these layers, for 12 tilemaps in total.

There aren't any trace statements.

[SruloArt]

Looks the same to me. And by that I mean Flash (.swf) will run differently on different configurations, including OS, CPU, RAM, Browsers, Flash Plugin type (standalone, activex...), Version...and that's before we even think of the backend, game library or your actual code. It's very messy. This is why most Flash games use only 30FPS (it gives twice more time per frame, kinda, which should make it look/feel a bit better). I currently am / am not working on what I think is a good solution for the problem for Flixel, but that's obviously very complicated.

On the other hand, HTML5 is not such a big miracle for gamedev either, for example, your game only works on Chrome (probably a Lime/OpenFL font issue, try removing the "Ariel" font) :)

https://boallen.com/fps-compare.html
https://boallen.com/fps-compare-html5.html

[Chosen Character]

So you're saying that HTML5 is also running at 60 fps? And Flash is running at the same 'smoothness'? That's very strange.

 Also, I'm not using the Ariel font. Is this what you see?

[SruloArt]

Yes. It's strange, but since I have a behemoth of a PC that's reasonable. In most cases such as yours, on top of setting your FPS on Flash to 30, people would tell you to set:

FlxG.fixedTimestep = false;

Personally I don't think that's a solution, but oh well. And the rest is super complicated and is largely based on pseudo-science, but you can read more about it on one of the many issues over Github.

And you are, I can see that in the .js script (Flixel has an include.xml so some default assets are added automagically). Also, there are indeed some traces: up, down, right, down, right, left :) 

[Chosen Character]

Well setting to 30 fps wouldn't change much, right? It's keeping a stable 60 fps. Turning fixedtimestamp to false messes up the display and levels for some reason, so I'll leave that off. Is there something HTML5 is doing to smooth the frames that is turned off in the flash build?

[SruloArt]

* It does matter because part of choppiness is related to how much time does it take for your entire game to be updated + drawn: if it takes more than the frame time (1/60 with 60FPS 1/30 with 30FPS) then expect bad things to happen (and 1/30 > 1/60). If you want proof just try debugging your Flash game with Adobe Scout.

* The fixed time step is meant to keep everything nice and consistent in case your game doesn't manage to finish its logic and update in time for the next frame. The problem is that it creates small inconsistencies between the update and the draw, again causing some potential choppiness (out-of-sync). Canceling it causes sporadic behavior with every slow-down, so, again, potential choppiness.

* Nope. The main differences are between the renderers (browser vs a plugin), not the code base.

[Chosen Character]

*At 30 fps the entire game feels choppy, could this be due to zooming into what's essentially pixel by pixel movements? The entire game uses 16x16 tiles and is zoomed in.

*Wow, you're right, turning off FixedTimestamp does make the game feel smoother, but that might just be placebo.

*I doubt HTML5's rendered is better than Flash, but maybe?

[SruloArt]

* Yes, kind of: it's possible that what you are describing is not directly related to the game loop but to the tiny movements caused by sub-pixel rendering.

The problem is HaxeFlixel defaults to the best values to solve this particular problem, so unless you have done some unneeded antialiasing/pixelPerfectRender/Position stuff with the cameras and / or the FlxObjects / Tilemap you should be fine.

If all else fails you can try playing with these values: FlxG.camera.antialiasing (scaled bitmap smoothing), FlxG.camera.pixelPerfectRender (rounds the position before rendering, which is also available on FlxObject individually, along side with pixelPerfectPosition), and the FlxG.stage.quality = flash.display.StageQuality.BEST; (full antialiasing, .LOW = no antialiasing), and also vsync, hardware values and the FLX_NO_GAMEPAD haxedef on your project.xml might have some effect.

I'm sorry about the complete lack of details, but it's a really long and complicated, and most of it is already in some form on the repo's issues.

* Could be. It's a dumb loop: your game is just chasing after its tail, so I personally don't like it.

* It's just different (even per browser, e.g Chrome is fairly different than IE11 / Firefox in the way it handles sub-pixel position rounding), not necessarily better.

[Chosen Character]

* Thanks for the help, I've experimented with these values and things like PixelPerfectRendering make everything look 'blurry' so I'll turn it off. Antialiasing just drags the game down fps-wise (as always ._.) I think the game runs nicely now, and if all else fails I'll include quality options for the user to mess around with (even if at 16 pixel sproites there isn't much to decrease.)

* Oh, this isn't the game. This is just me testing out the absolute worst case scenario for performance and seeing how it goes. The actual game looks more like this:

* That makes sense. Once I get Neko or Windows running I'll see if things run smoother there. As is, Flash is a bit iffy, I don't know if it's using GPU acceleration or not, and doing things like bringing it fullscreen are FPS killers for whatever reason (could just be my computer, though I run full 3D games just fine.)

[SruloArt]

* "Blurry" is actually the main solution to sub-pixel rendering :) (that, and rounding).

* Cool. I hope it's not a side-scroller (runner) because screen tearing is possibly next on your choppiness list :| You can have thousands of sprites on Flash (running on software), and tens of thousands+ on GPU supported targets.

* The GPU helps a lot with sub-pixel rendering (again, mostly by "blurring" stuff up in different ways), so Neko and Windows should run a lot smoother. There are other issues though, issues which I won't get into.

There is currently a lot of great work being made to enable a GPU supported Flash target (with the Stage3d branch) and that alone can crush many of the choppiness culprits on Flash. However, curiously enough, blowing-up your game to full-screen is one of the few things Flash should do with your GPU (it's magic, don't ask), so maybe you are setting hardware to false, or maybe it's the vsync's fault...proper debugging is in order for this one.