I'm creating a game both for desktop and mobile using phaser. But when I try to test it on mobile it flashes a lot and is barely playable. Links: http://game.r4u.nl/frog/testing/testing/ and http://game.r4u.nl
How to fix this?
It really depends of your mobile model, navigator, among other things (HTC One M7, Chrome works fine for me). But as other people already said, webGL doesn't work well in some devices. Try disabling WebGL rendering in Phaser and fallback into traditional Canvas rendering modifing the game launcher in your assets/js/main.js file...
game = new Phaser.Game(800, 600, Phaser.CANVAS, '');
...And your game would run at least different. (The speed can be another factors too like physics, but that's another thing...)
Also take note of debug-rendering stuff. In case of the frog, you are rendering an square each frame in a way that makes some issues in some envoriments (that's beacuse it's just for debugging pruposes).
Related
I am working on a HTML canvas app that displays graphics to the screen. The graphics aren't important for the website, they just make things look pretty.
My problem is the app needs the cpu of the device to run at a certain speed or the frame rate becomes unacceptable.
Any modern phone/laptop can easily run the app, but of course not everyone has updated tech.
At that point I'd like to drop support for the device and stop rendering the animations because it will just do more harm than good.
This idea is pretty standard on the internet. For example if you want an image background for your site, but you don't want mobile phones to load the same large image as desktops then you just use some css queries to only serve the image to desktops.
This is how we can get new features pushed out while keeping backward compatibility.
However when it comes to detecting performance this isn't as easy of a task as it sounds. There's no way to get cpu specs with Javascript, and even if I could there's no way of telling what else the user is running on their machine.
This leaves me with 2 options, either run a small performance test before I start the canvas app. Or start the app and try to run a few frames and stop it if the frame rate is too low.
The problem is both of these options are pretty sketchy because the device may just have a "speed hiccup" at the start of the app, and so I shut down the animations for nothing.
Also if a user has a device that sits right on the border of the threshold sometimes the animations will load, and sometimes they won't which would probably be confusing.
Is there any "standard" on the internet to deal with this sort of problem? Would it be best to leave a footnote at the bottom of the site window when animations are turned off?
Or is it just something you have to accept when pushing the boundaries and dealing with performance?
I'm at the early stage of building my own game framework, based on CreateJS (especially on the feature of exporting everything from Flash IDE). And found out that framerate of CreateJS (EaselJS) is much worse in Firefox than in Chrome/IE.
Also, it seems that the framerate of app (which might be changed using Ticker.setFPS) doens't matter. It looks like Firefox has some problems with rendering (I've tried to use 60fps and 30fps, and in both cases there were problems, it looks like FF doesn't have any stable time/logic of rendering).
I've tried to play with Ticker.timingMode (set it to Ticker.RAF_SYNCHED), but it didn't help either.
And also, I've found a lot of similar topics/questions in the Internet, and no any clear answer.
So, I was wondering, if there is any way to improve framerate/rendering in FF or we should work with it as it is now?
P.S.: It looks like the problem, probably, partially might be on the CreateJS side, because I've found few nice HTML5 games (as I know they don't use CreateJS) with smooth and nice animations in FF. Here an example: https://www.netent.com/games/slots/dazzle-me/
EaselJS just facilitates Canvas drawing operations and updates. I have built a number of applications and games without FireFox-specific performance issues using the CreateJS framework, so while there might be something that is happening through CreateJS causing the issue, it is more likely related to the content and how CreateJS is used.
Different browsers have different issues and performance differences, including how they handle vectors, large images on the GPU, etc. Without seeing code or an example, it is hard to pinpoint where the performance is going.
What have you tried so far to isolate the performance?
Do you have a lot of large images, text, or vector content?
Are you using filters or Shadows?
How are you determining that the framerate is not working? RAF_SYNCHED attempts to normalize the computer's RAF framerate (usually about 60 fps, but dependent on lots of things).
Do you have a lot of children (like particles) going on?
Are you checking mouse position or hitTesting often?
If you can provide more info, code samples, working demos, etc you can likely get a better diagnosis of what is happpening.
I am developing a very game-like web application, and there is a particular requirement that is driving me nuts: I have to show an image for a very short (some hundreds of ms, sometimes even just 25ms, just enough for the user to perceive something when he/she already knows what to look for). This application has to work on Chrome, Firefox and IE9+, but also Android tablets and iPad.
The only reliable way of doing this in desktop browsers I have found is Flash. Using Javascript and html5 canvas in a lot of computers results in the items not even being rendered. On the other hand, Flash doesn't work on the iPad and some Androids, but in those devices, our tests show, the javascript way seems to work just fine. So this is the best solution I have found: grosso modo, if iPad then load_javascript_version() else load_flash_version().
Have you seen anything like this done before? Should I abandon any hope of finding a more maintainable solution?
Thanks a lot.
Haven't tried this particular use case, but a 2D library like KineticJS should be able to do what you need.
There are jQuery functions like timeout: http://www.jquery4u.com/jquery-functions/settimeout-example/ and delay: http://api.jquery.com/delay/
Are you using RequestAnimationFrame in your game loop? If not please read about it and ensure that your image is preloaded when you try to render it.
Mozilla dev RAF api
Most devices and browsers that have hardware accelerated canvas support, should be able to achive as fast as 60 fps fairly, which means you would be able to show an image for a single frame or about 16.7 ms.
I have managed to do similar things using the createjs library which can very easily be set to use the RequestAnimationFrame api.
Createjs ticker RAF
I need create a water ripple effect (client side only) that responds to touch. I have looked at various options and found an interesting water ripple using canvas. I can replicate this without issue, however, it runs very slow. I have also looked at WebGL to create a similar water ripple effect but the effect I am going after must be able to run on an iPad and according to Caniuse WebGL is not supported by iOS.
My question is this: Is there a way to create water ripple effects that are quick and smooth without using canvas or WebGL (or flash). I am not against using canvas if there is a way to speed up the rendering. Again any code I use must run client side only and must work on an iPad.
The first question that may arise, if it's going to be used on a web platform or as a separate APP. Because at the moment iOS does not support WebGL natively. However there is a hack which permits to run on mobile browser. See this: http://vimeo.com/31553850. But i think this is out of scope if this will be a commercial product.
Secondly the canvas performance on mobile platform is not too good, but i found an experiment which i tested on iOS and it's quite satisfactory: http://media.chikuyonok.ru/ripple
Other than just sniffing browsers and telling anyone not using Chrome tough luck on purpose (75%+ of the internet?), I'm looking for different options to make an executable out of a canvas game, if that's even possible.
The idea is to control the performance of my game by including v8 to users who don't have chrome installed.....is there a way to interface with it?? Something like a web "wrapper" like Flash's plugin so you could install a v8 "plugin" cross browser???
The canvas game works with safari and firefox, but at 50-60% of the performance experienced in google chrome.
Another discrepancy is with Firefox if I make the game map more than 100x100 tiles, it chokes when generating the map and gives a "stop script" popup, if you hit "continue" it throws another popup for "out of memory, close your stuff to prevent data loss".
Using the same code in Chrome or safari, I tested maps with 500x500 tiles (yes that is 250,000 tiles, where firefox choked on 10,000 tiles....) which runs smoothly/consistently in both Chrome and Safari, though safari is 60% of the frame rate chrome manages.
I haven't yet found a limit to what chrome can handle, and using culling to only draw tiles around the view it's the same frame rate with 250,000 tiles as it was with 100 tiles (more than 200fps in chrome with 250k tiles!!!!! small view though), the only thing that changes performance is the size of the canvas element/view. Meanwhile Firefox can't even calculate the zones, let alone draw all the tiles inside the proper zones. (it does work over 100fps with maps 10k tiles or less)
It's tempting to allow anyone with a browser that supports html5 to play the game, but at the same time, user's opinion of your game will be MUCH MUCH MUCH better if the PERFORMANCE IS TWICE AS GOOD as the crappiest version that "can" play your game.
I'm reading about V8, and how you can incorporate it into your own c++ applications, or run it standalone?? Has anyone developed a wrapper to make a self contained executable for html5 canvas games?? Or a web wrapper to embed an interface to V8 or something???
I just installed chrome myself this week, after trying to target as many browsers as I could in the past, and it changed the way I think, now it's just not as good once you've had over 200fps to then play the same game with under 100fps..............And as much as I've thought it was idiotic to require chrome (seen lots of html5 devs begging people to use chrome) I've come to the realization I was ignorant, and now I think the only way to enforce the full potential of my efforts is to drop coverage for all browsers except ones that can output a set level of performance.
Otherwise the only thing I can figure is to make a different version of whatever games I develop for firefox with a smaller viewable window, smaller map, etc, then on other browsers, check performance and scale the view/map size based off what browser they're using.
Another temporary idea I was thinking of, if a user has google chrome, the game window will be 700x500px on the screen, if they have safari, drop it to like 500x375px to achieve the same frame rate, and if they have firefox the window will be like 400x300px.
At the same time, if a user is playing the game with Firefox, in the 400x300px window, I would include an obvious(blinking? lol) border around the window 700x500px showing how big the game window would be if they were using chrome? Does that sound like motivation? Then they can get a taste of the game, if they like it they might find it worthwhile to install chrome to view the full size game????
For IE<9, you can do what you're after with Google Chrome Frame. This works like a Flash-style plugin, which you can prompt users to install. It isn't available for Firefox or Safari, as far as I know.
While I'm aware of several frameworks for desktop apps using HTML and Javascript, they generally seem to use WebKit, so I would expect performance to be comparable to Safari at best (Titanium Desktop from Appcelerator is another option, but also WebKit-based).