I'm making a simple HTML5 game and decided to enable the FPS counter in Chrome, and I noticed something odd.
When running the game normally I get around 24 FPS, but when I move the window using two fingers on my mac, enabling the bounce-back effect the frame rate shoots up to 50-70 FPS.
I've tried to find out why by using the Dev Tools in Chrome, but unfortunately I don't seem to be able to make sense of it.
I've posted pictures of the game with the FPS counter just below:
Low FPS
High FPS
Did you try Timeline with Frame mode?
Related
I'm developing an application in Adobe Air to display videos for a museum exhibit at a resolution of 2560x1440. The application works without a hitch on my machine, but when I run it on another (less powerful) computer, it does not function as intended. I've texted the application on two machines besides my own.
The problem is when one of the videos is called up, the video is called up and displays the first frame of the video and lags there for a good number of seconds (5-10), however I can still hear audio. After about 8-10 seconds, the video plays back as if it had been playing before and stutters briefly (1-2 seconds) before resuming playback normally. This is consistent behavior every time a video is launched as long as it's a fairly large video (> 50 MB as far as I can tell).
This does not happen on my development machine, which has a GTX 980 graphics card in it, but besides that and the motherboard, I can't think of any differences between the specs of the multiple machines.
The video throws an event indicating the buffer is full immediately as a video is launched, so buffering doesn't seem to be the issue.
Edit: Code (Pastebin)
Edit 2: Figured out it was the first frame, not a black screen
Still not entirely sure where the root of the problem lies, but what fixed it was adding this code right after calling the video. What it does is pause the playback and add a timer for one second, then seek 0.5 seconds into the video. I haven't run tests with this yet beyond getting past that first frame lag, but it works.
ns.pause();
var hesitate:Timer = new Timer(1000, 1);
hesitate.addEventListener(TimerEvent.TIMER_COMPLETE, function(e:TimerEvent)
{
ns.seek(0.5);
ns.resume();
});
hesitate.start();
I want to play a few sound effects with SimpleAudioEngine from cocos2d-x v3, some of them should repeat forever.
Now when i start a sound effect with:
CocosDenshion::SimpleAudioEngine::sharedEngine()->playEffect("mg.wav",true);
and play for example the following sound effect 31 times:
CocosDenshion::SimpleAudioEngine::sharedEngine()->playEffect("box.wav");
my mg.wav stops. Thats because IOS and Android only allows 32 sound effects. But why is that a problem when i play 31 times the same sound effect? I thought that only counts for different effects?
Now how can I solve that issue? Background music would work fine, but i can only play one background music at the same time.
Kurt
CocosDenshion::SimpleAudioEngine::getInstance()->playEffect("fileName.mp3",true);
So while the DOM, canvas and webgl can hit framerates of up to 60fps, video seems to be stuck at 24fps for the moment.
That framerate is more convention than anything I believe, both the codecs and video container formats don't have restrictions there (well, not all of them).
I'd love to see a <video> tag showing a clip at like 48 or 60fps. Is this possible, and if so, how can it best be done?
If the video is encoded at a high frame rate and the browser's media player implementation can keep up, then there's nothing stopping playback at a higher frame rate.
I am creating a webcam air app. This app will also have some intense sprite animations.
Without Hardware Acceleration everything works fine, but my sprite animation is too cpu intensive.
When I enable Hardware Acceleration i get a 70% speed increase, but my webcam is no longer working. Is there anyway of telling flash to ignore the webcam on hardware acceleration? Or, what is it that I have to do?
Thank you very much for your help good sirs.
try removing sprite animations from the display list and displaying them with BitmapData.draw() every frame instead
What is the most accurate way to measure framerates, i.e. FPS, in modern HTML5 browsers? I'm specifically interested in FPS for Canvas animations.
http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html will tell you that trying to measure framerate by counting how often your setTimeout runs is not accurate. The browser can run your Timeout callback multiple times between screen paints.
Turns out Mozilla has a window.mozPaintCount https://developer.mozilla.org/en/DOM/window.mozPaintCount available, which should provide an accurate FPS. However, this only works for Mozilla.
There's an open issue for Chrome for something similar: http://code.google.com/p/chromium/issues/detail?id=65348
A manual way to check for hardware accelerated FPS in Chrome is to grab the Chrome Beta channel (as of posting date) and go to about:flags and turn on FPS Counter. However, on a Mac, acceleration only turns on when using WebGL. So, no way to check FPS for Canvas on Chrome for Mac.
What are other strategies for accurately measuring HTML5 FPS?
Thanks!
Please check:
https://github.com/mrdoob/stats.js - it's the best FPS monitor I know. It also gives you some stats about mem/cpu usage (you have to run your browser with special parameter to expose that data), but may also suffer from the inaccuracy you described.
https://github.com/pcwalton/firefox-framerate-monitor
Also, in new chrome builds (probably canary stream) there should be an option for displaying FPS in about:flags.