HTLM5 canvas game (easeljs) slow peformance on ipad (ios7) with phonegap - html

I have developed a game with easeljs for HTML5 Canvas.
the game is a single HTML5 page with canvas and a lot of javascript.
All this time I tested the app on iOS Safari (iPad3 iOS7) with 40~50 fps via a local server.
when I packed in a xcode app with phonegap, it becomes incredible slow near to 10fps..
I noticed the same behaviour when I added the page to homescreen.
There is any way to make make a good performance with html5 canvas app games for ipad (iOS7)?

Don't use Phonegap. Try CocoonJS!

Ok, I found the solution for this.
The actual phonegap implementation uses default webViewer, which is quite slow. Ludei (www.ludei.com) has a great solution for HTML5 canvas high performance games, CocoonJS. It works great on iOS and Android, there is not for WindowsPhone. However there is no need for it on Windows Phone 8. Windows Phone 8 has the highest native HTML5 canvas performance I ever seen.
so Don't use Phonegap. Try CocoonJS!

Related

How to debug Webchat in iPhone Simulator

I was facing an issue on Audio not playing in voice bot in iPhone (Mic works) alone and was trying to debug the same in iPhone simulator in Mac (since I don't have access to a real device). However, in the simulator, the sample bot doesn't seem to be working. Here is the screengrab:
How am I supposed to debug this issue?
You'll need to test directly on an iPhone. Per the iPhone Simulator docs:
Hardware Differences
Though most of the functionality of devices can be simulated in Simulator, some hardware features must be tested directly on a device. The hardware features that are not simulated as of iOS 8.2 are:
Motion support (accelerometer and gyroscope) are unsupported.
Audio and video input (camera and microphone) are unsupported.

OpenGL usage on mobile HTML5 games

I have an HTML5 game running in desktop web browsers using WebGL. Obviously HTML5 and jscript can be built out to the mobile platform, but then what happens to the WebGL code?
I assume WebGL doesn't work very well in mobile apps.
Then how do you use OpenGL in mobile HTML5? Is there a jscript binding to OpenGL ES?
Thanks
EDIT: Just to be clear I am talking about native installed mobile apps not browsers. As in using something like PhoneGap
Nicol,
appMobi has integrated WebGL into its iOS and Android native wrappers, giving roughly 10x performance boost for HTML5 canvas drawing. appMobi is similar to PhoneGap, in building a native "wrapper" that your HTML5 lives inside, with a JS API that lets your game access all of the operating system functions. Here's a page describing the acceleration, which we call directCanvas. http://www.appmobi.com/index.php?q=content/directcanvas-accelerates-html5-game-performance
Hope this is helpful!
Roy
I assume WebGL doesn't work very well in mobile apps.
What does you make think this? WebGL has been based on OpenGL-ES 2.0, which is the OpenGL-ES profile supported by most mobile devices out there. So WebGL maps nicely to mobile devices' GPU capabilities. It's more a question of browser suppport, than performance.

What should I know to develop cross-platform HTML5 game and compile it with PhoneGap Build

I'm thinking about developing HTML5 game to compile it with PhoneGap Build. I'm interested in the Android, iOS and Blackberry platforms. What I want to know is how can I handle different device resolutions with HTML5, what engine/framework is better for this? And are there any other things I need to know about developing a cross-platform app? BTW, for my game I don't need any native things like camera, accelerometer or anything like that, only touch controls.

how to do splash page or index.html first page animation in HTML5

is there any way to do a flash-like animation for the splash screen for iPad app in HTML5.
i have searched a lot for javascript but did not get anything.
The usual alternatives to Flash animation are canvas (which has its own API) and SVG (which is subject to standard DOM manipulation), both of which are supported by iOS Mobile Safari.
Adobe is developing an HTML/Javascript/CSS based alternative to Flash Builder called Adobe Edge, you can download it for free for a limited time for Adobe Labs. It doesn't have nearly as many features as Flash(at least not yet), but it provides enough basic functionality to accomplish what you are asking.

jQuery Mobile video website, convert to PhoneGap app with videos on SD card instead of streamed

I have a jQuery Mobile website I created for a friend/client of mine. It only has 6 pages or so (2 of them are dialog windows). The site has HTML5 video with fallback for flash support via the videojs library. All videos are encoded properly in mp4, ogv (theora), and webm and so far play on every device I have used.
My problem lies bandwidth, the purpose of the program really needs to be an application because these are informational videos that may need to be viewed at any time, even with no web access (web access is required for first login to verify credentials).
I was left with 3 solutions, try writing native apps for all the platforms myself in their native languages, use Sencha Touch (which I am comfortable enough with extJS to do), or taking my existing jquery mobile app that is 100% functional including log-in and some backend package management to assign users a package of videos (there are multiple packages each with between 8-20 videos), and follow the jQuery Mobile tutorial for getting your app ready for PhoneGap, I believe its only enabling two settings, and both are to enable "cross-domain" requests, since my current web app would be running as localhost, it would see the scripts as external pages.
My main question/problem is for one, I have never used PhoneGap; aside from their Hello World android tutorial, and I know there are other all-in-one frameworks out there now: PhoneGap, Titanium, Corona, Adobe Flex (which I am installing while writing this tutorial, to see what it has to offer. If it has features like encoding videos automatically for the target device (video resolution changing), or even has local video playback features at all that may work.
Does anyone know which of the current frameworks have the ability to install a set of videos to the sdcard, (totaling around 6mb per install), and play them natively (by that i mean, in the devices native player, not inline inside of a webview). Which on android phones anyways, my current videojs based player plays the files natively in everything I have tried it on.
I just need a push in the right direction, if there is a PhoneGap plugin that I don't know about that allows videos to be played from the sd card, that would be terrific. Although I am not very happy with the speed of the android and blackberry webview controls. So something that uses 100% native controls would be great. I hope you guys can come up with some ideas, you can see the current app in action at m.yourvideobenefits.com email:abc#tool.com password: demo
You should view it from your phone if you want to see it properly, but if you do not have a smart phone; keep in mind that when viewing this page certain desktop browsers, the videos become their actual size after they are through loading. This is because i have autoload="true" in the video tag (which is ignored on most phones, but believe it or not, setting autoload="true" is what actually allowed the videos to not play inline on certain devices. A bug on the device, I am sure...but without this tag the videos played inline on iPhone 4 with the latest iOS version.
You could do it very easily with phonegap; you already have your web page, so it would be much less work, probably.
You could get the videos from inside your apps bundle in ios, and then it wouldn't be hard to select the one with the best resolution for the device being used. You could also download the videos at the perfect format and resolution the first time your app plays from your server using the file api. That convined with the storage api is nice for actualizations.
There's a plugin I use for android, because video tag is sometimes bugged or doesn't work at all in older versions, https://github.com/phonegap/phonegap-plugins/tree/master/Android/VideoPlayer.
It only plays from web or sdcard, but that's rarely too bad.
I can't help you with black berry, but I'm pretty sure there must be a way of doing it. And, anyway, appcelerator doesn't support it yet, so you would probably had to do it natively. Even if there isn't a plugin for black berry, you'd probably have to chose between native developement and html5 player inside phonegap. I won't give you my opinion about it here, for I'm not the one to give it and Stack Overflow says I shouln'd give it anyway.