Html5 for iOS game development - ios

I have been hearing of the advent of html5 for iOS development. I know nothing about web dev technologies and am wondering, can this really be used for iOS game development? Just hearing html makes me think this will be used for web related apps, not things like graphically dynamic 2d games, but being unfamiliar, I'm hoping to get some insight from the experts here. Is html5 going to be useful at all for games, or should I basically expect to be sticking with the likes of cocos2d for iphone?

The short answer is "Yes, you can develop full speed, interactive games with HTML5". Check out "Private Joe", "Biolab Disaster" and "FUBAR" in the Apple app store. All were created with HTML5, Javascript, and a few javascript libraries (ImpactJS and Box2D).
One thing you'll see as you explore this is the repeated caveat that "web games aren't fast enough", also "Web games can't use the device's goodies - like GPS, vibration, etc."
These statements represent "common thought" and are not really true anymore. Companies like PhoneGap and appMobi have tools that make it possible to do anything in HTML/JS that can be done in native apps. Browsers keep getting faster, and smartphone processors also keep getting faster. Qualcomm's new chipset even has GPU acceleration for future smartphones.
As an added bonus from coding your app in HTML5, you will have the choice of whether to compile it app into a native app and post to one of the app stores (using appmobi or phonegap), or to offer it yourself as a web app (saving the Apple censorship and 30% tax).
Viva HTML5!

The real benefit to using HTML 5 for game development is that it's a write once, deploy everywhere strategy, meaning you can write the same code and have it work on iOS, Android, Windows, MacOS, Linux, etc, as long as it has a browser.
The HTML5 canvas element supports both 2d and 3d (on some platforms), so you can use it for complex games as well.
This will, however, run in a browser, so the only way to sell it in an app store is to wrap it in a UIWebView container or the like.
Also, there are games written in Canvas (just google it, also google 'chrome experiments' to find cool 3d stuff in HTML5).

I wrote this HTML5 Tetris implementation: http://htmltetris.com
It is designed to be equally playable on a PC and on touch devices supporting Javascript touch events.
One of the important things to get right in a mobile game is the control scheme and it took some thinking to come up with the swipe/tap control scheme used for Tetris here. But it turns out quite playable (in fact, just as playable if not more so than all of the tetris like iOS apps I have tried, and there are... quite a few of them) and is proof that it is possible to build a perfectly playable game with HTML5 technology.

Check out HTML5 Canvas. Lots of Web games are based on this tag. Here are some samples :- http://www.canvasdemos.com/type/games/

There are two great things about investing your time in learning HTML5 and its counterparts:
For one, every application that you write will theoretically be able to run on many platforms. iOS, Android, Windows, Mac, Linux, etc, all have HTML5 capabilities. You'll also be investing your time in a language that is still being developed, so you'll already know the ins-and-outs of it as more features are added, and you'll have mastered it when the final product finally goes mainstream.
The capabilities and power of HTML5 are only expanding, so the experience with the language should only improve with time ;)

Related

Could I rewrite the attached AS1 Flash game and create a HTML5/JavaScript/CSS3/PhoneGap iPad app with the same performance?

I have a successful kids educational maths game made in Adobe Flash ActionScript 1, its a fairly simple game but there is animations for example a plane crashing into our logo and breaking it apart.
Could I use HTML5 and tools such as PhoneGap and get it to work like it does now in an iPad App and get Apple to accept it on there App Store? I'm drawn towards HTML5 because its non-propriety and has a promising future but will it be able to replicate the game. I've noticed the featured games on the PhoneGap website aren't very interactive/game like compared to Adobe AIR app examples.
Thanks
You could definitely recreate the game in HTML5 and use PhoneGap to package it for iOS. As long as you follow the app store guidelines, there's no reason why the game wouldn't be accepted by Apple.
The game logic seems straightforward enough and should, therefore, be relatively easy to translate to JavaScript. However, I think there may be significant effort involved in reproducing the animations you have, to an acceptable level of performance, using standards-based web technologies.
There are a few avenues I can think of which it might be worth your while exploring:
Google's swiffy will convert SWF files to HTML5 so you can use them on devices which don't support Flash. I have used it successfully to convert a reasonably complex Flash animation, however the performance of the animation on the device, when it was packaged as a native app for iOS using PhoneGap, was significantly worse than the Flash version. I'm not sure whether the tool would be capable of converting the whole game (definitely not if it's pulling in dynamic data), but you could certainly use it to translate the individual animations of the game.
Adobe Edge is an animation tool similar to Flash for creating animations in HTML. I've not used it so I don't know whether it's any good. However, it is still a relatively new product and a quick search for character animations using Adobe Edge wasn't particularly encouraging.
The CreateJS toolkit for Flash Professional is a free extension which will convert Flash animations to JavaScript using the open source CreateJS framework (which looks superb and may be a good starting point for rebuilding the game should you decide to convert it).
Convert the game logic from ActionScript 1 to ActionScript 3.0, reuse all your existing animations as is, and package the game for iOS using the Adobe AIR packager. Inevitably the performance won't be comparable to native, but I think it should be acceptable for this type of game.
I think in your case I would probably go for option 4, primarily because you'll save yourself the effort of recreating / converting existing animations in another technology. I would definitely encourage you to embrace HTML5 and associated technologies but would suggest you use them on a new project which will allow you to plan around its particular strengths and weaknesses.

Can web app for ios run as smoothly as native?

Is there a framework that will allow to create web apps for iOS that will run as smoothly as native app?
I've checked demos of Sencha Touch http://www.sencha.com/products/touch on my iPad there's visible delay for touch events and for how precisely they are recognized. The feeling isn't the same as for native apps.
Is there other frameworks or technics that will allow to provide same experience as native apps?
It depends on your app. If your app is a hard-core heavy-duty 3D game, then no. If your app is primarily displaying static content ... like a web page or collection of photos, you might get close enough.
Think about what experience you want to achieve first. If you want a cross platform application and you want to avoid the stores (App Store, Google Play, BB App World), then by all means, consider a web app.
Other things to consider, how much data do you estimate the user will need store locally (HTML apps are more limited in this respect); how much functionality is lost when there is no network connection, and does this loss of functionality make the app unusable.
Like the answer by #RichardTurner, if you need the kind of performance you find in the higher end games (Infinity Blade or Modern Combat 3), then native is the way to go.
Figure what you want, then you will have better idea of what technology to use.
NO. Native apps will perform better every single time over web apps. If you want a smooth experience, go native. Also consider that some people have older model iOS devices and performance will be even more difficult to achieve on those devices in web apps.
Here are a few things to consider with a Sencha app vs a native application.
You were browsing a Sencha Touch application online and chances are it wasn't a "packaged" version so you would have to download each source file individually.
With Sencha, you can utilize Sencha CMD to package an application which essentially builds a single minified js file containing only the required components from the Sencha library and your application (smaller DOM). You can also look into a production version which takes advantage of appcache. You'll see some performance increases here.
A packaged native Touch application will contain the actual JS, CSS, etc. files as part of the applications source, so their is no downloading from external resources.
You have to consider that any HTML5 application is going to have a ~300ms touch delay, more on that here: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

is Adobe Air capable of converting a complex Flash game into iPad/android platform game?

I've recently heard about the converting feature of Adobe Air but how well does it work?
Does it emulate every bit of code a complex Flash game using tons of libraries outputs or should you expect a lot of work to go around if you were to convert one?
I'm thinking of making a complex cross-platform game but not sure which is better/easier, to use Flash and Adobe Air for its abundant game libraries, resources and faster development or to simply go with Java.
It Would really save lots of time if I can use Flash. Though, I can imagine it would also give me headaches to worry about all the time. Like what if adobe/apple stops supporting Flash or what if the converting feature won't work.
Any advice and any bit of information would be welcome. Thanks.
AIR works well on iOS in my experience although native apps will always perform better. I cant think of any aspects of Flash that wont work when converted to run on iOS.
Whether AIR performance is good enough really depends on the individual case - how gpu and cpu intensive the game is.
You have to consider the trade-off: use existing Flash skills to create a 'good' game quickly; or learn new skills to create a 'better' game slowly - is it worth spending weeks/months learning new skills to get a few extra percent of performance? Only you can decide that.
Regarding Adobes AIR support in the future; who knows - they dont have a great track record (think flash on mobile) - but i would suggest AIR will be around for at least the medium term, if not long-term.
My personal opinion is that "mobile" is not going anywhere and now is the best time to start learning Java for Android and/or Objective-C for iOS. Like PhoneGap, Flash mobile Apps don't give you complete access to the devices entire API/SDK options, even though what they do offer usually suffices. Flash is still a respectable tool but developing "native" gives you full control over your app's memory, device interaction, cutting edge APIs, etc ...
Depending on how optimized your action script 3 code is written, you may experience some performance issues vs utilizing native graphics libraries. I assume the latest version of AIR (I know Flash 11.2 and on included some nice graphic stuff) may address performance but haven't seen any benchmarks for AIR on mobile devices yet.
If you are hoping to go the AIR route, I'd say why not take a few days and try to port it over. If all else fails get a nice iOS or Android book and cuddle with it every night until you are confident you can recreate your App natively.

AIR SDK: performance of SWF compiled into iOS native app

It's a great thing that it's possible to compile an SWF into iOS native app. I think AIR is now the best option to write e.g. small games or interactive books. Of cause AIR app will be slowler than the same app written on e.g. objective C. The question is how slower AIR app will be. Can simple AIR apps be launched e.g. on iPhone 3G or iPAd 1?
And another question is, can arbitrary flash app be compiled into iOS native app?
Will be grateful for any thoughts!!!!!
Performance of AIR vs. Objective C:
For pure script execution, AIR apps perform rather slower than native, including on iOS. However, in virtually all cases the limiting factor of your app's performance will be rendering, not script, so it depends entirely on what you do visually in your content. This is why Crooksy suggested you look at Starling. Without Starling (or similar libraries that make use of the GPU), it's pretty challenging to get decent performance out of an iPad1. It can be done, but it takes expertise and incurs extra work. It will be much better to start with the huge performance boost of using Starling or similar.
Can arbitrary flash app be compiled into iOS native app?
As long as it's made with AS3, then it should compile. For whether it works, two main caveats come to mind: First, a handful of APIs don't work on mobile devices. (I think printing is one example.) Second, if you read in any SWFs at runtime, all actionscript inside them will be ignored. (Not for technical reasons, it's an Apple requirement.) So if your content is split into a bunch of SWFs you'll need to bundle them together at packaging time, and if you absolutely depend on reading in SWFs with script from the network at runtime, you're going to hit a wall.
Hope that helps!
Check out the new Starling frame work.
http://gamua.com/
Here's the start of a nice tutorial series (episodes 1 and 2)
http://www.hsharma.com/tutorials/
Lee Brimelow also has a few tutorials
http://www.gotoandlearn.com/
Regarding converting Flash apps into iOS compatible apps, yes that is possible but it depends on what the app actually does as to whether any modifications will be needed before it will perform correctly on a device.

Is Blackberry WebWorks a good development choice?

This is kind of a dumb question but I've aware of classic style JDE development for Blackberry but I've never tried using WebWorks. BB website says that it's possible to build applications for both smartphones (OS 6.0+) and tablets - sounds fantastic, but what's the price?
Is here anyone using WebWorks on a daily basis and capable of describing pros and cons?
Thanks in advance
I would suggest using it if you build webOS applications before hand. It make porting to the blackberry a breeze.
Use WebWorks if you know html5, Css3 and javascript over Java and C++.
I haven't ran into any issues with the webWorks, ported two applications without running into any issues. Its your standard html5, css3 and javascript you love with blackberry APIs
WebWorks is a good development choice, particularly as it allows easy migration from earlier BB OSes to BB10. It's mostly standard web technologies (HTML5, CSS3, etc.) and the team seems focused on making it perform well (e.g. hardware accelerated WebGL graphics) while at the same time providing BlackBerry-specific APIs to make WebWork apps capable and with good UX (e.g. you can make it look like a native app).
For native apps, you should look into Cascades. This is a modern development environment with good tooling, accelerated graphics, and APIs for building snazzy apps. It's the one that will most be a "BlackBerry app".
AIR remains an option, but I would recommend WebWorks over AIR, as even Adobe is migrating from Flash to web technologies. Likewise, you can develop Android apps on BB10, but unless you are keen on Java programming, you will get more cross-platform support from WebWorks (or even AIR) so there's no particular reason to go the Android route.
WebWorks API is limited, for example it does not have socket, so you cannot port a VNC (UltaVNC, tightVNC ..) to it but you can do it with JDE.
For UI, WebWorks allowed me to write UI of acceptable quality quickly and easily, a thing that I have never succeeded with JDE.
Still on the UI side, I can make use of multi-touch (PlayBook), I don't think this one is possible with JDE.
So depending on your needs you should go either WebWorks or Native, having heard that Java may not be supported in BB10, and Air may not be future proof (Adobe favors HTML5 instead of Flash). Android appli has some lag on start up when it is run on PlayBook, some customers are sensitive to the initial even just one time slow response time.
I'm a huge proponent of Webworks. Ever since I've started using it, it quickly became the default option for my apps going forward. Especially for someone like me who is just writing a few apps on the side, I don't have the time to do it in c++.
The apps I'm writing revolve around home automation. They are client/server based from the get go.
Here's why I like it:
First and foremost, native API support. I can very easily create my own active frames, import invocation from other apps (think camera, stuff like that). I can export portions of my webworks app as an invocation card! Which means I can write say 3 unique apps (in this case home automation, lights, thermostat, security cameras). And I can very easily pull features from each app into the other. Maybe I want to turn my lights on in the living room, I can also import the camera card from my IPcam app and view the results, without having to add that code into my lights app and maintain two separate code lines.
Rapid design. Since I've been dabbling in html since I was a kid, it's now very easy for me to whip up an appealing UI in little time. Because web engines these days offer good performance in terms of graphics capability, I also can make apps that behave very fluid.
Considering the time to make something beautiful, it's hard for me to leave webworks and go for something in c++. Also the big plus is often these apps I'm making are intended for multiple devices, namely an app on my phone and being hosted on my personal website. By maintaining two slightly different css files, most of the time I need no code changes, just load a different css depending on if it's a phone or a pc. (Exactly what you'd do if you were developing a regular old website).
For that matter, I actually don't put my code on the device, I host all of my html and javascript, images etc on my server. The webworks app is just the config.xml pointing it's source to my server, and an icon. A glorified website bookmark on the homescreen, only difference is I can use native API and there's no browser bar in the app.
Also, this way I can still continue to edit the same single codeline on my server, and instantly apply changes to the in-browser app and the on-device app.
This is especially cool if you're designing an app where all of it's data is out in the "cloud", say you work for a publication and you want to write a magazine app which pulls content from your servers on the net.

Resources