the framework html5/js is now easily usable to make application and game http://html5games.com/ and even major online game site started using it http://www.kongregate.com/html5-games.
My question is: in term of foreseeable future is html5/js going to be developed with an eye to game development? i mean, is this being considered by the dev-team? and at present time is html5 offering support, compatibility, portability and tools comparable to long date standard like flash?
I'm not asking for the best way to develop an interactive site, browser game or animation; I am interested in the usability of HTML/javascript in game and animation development because i prefer it over flash.
You can replace your Flash development workflow with this set of tools:
Pixi: Fast WebGL 2d rendering and scene graph
Babylon: Fast WebGL 3d rendering and scene graph with integrated physics and collision
Tweenjs or Greensock: Tween algorithms
Howler: Sound using the WebAudio API
Proton: particle effects
P2 or PhysicsJS: 2d physics
PathfiningJS: A* and other pathfinding algorithms
HammerJS: Multitouch events
Or you could use a higher-level framework like Phaser, Grapefruit, Goo Engine or Playcanvas (or dozens of similar ones) that wrap all this stuff up for you.
However, In 2014, HTML5/JavaScript is just a compile target. That means you can author with any language and environment you like and just compile to HTML5.
If you like working in Flash and AS3, you can continue to do so:
http://www.openfl.org
Flash still has a lot to offer:
There's a complete set of tools to make graphics and animation
Great API to satisfy your needs to create rich and interactive content
Lots and lots of free libraries and frameworks make by the community
Overall great performance
That being said JS already can do all the advanced things and even 3d at a near native speed. You have libraries like ThreeJS and others that allow access to the GPU and that means very fast rendering!
The problem is that different browsers cannot agree on what features to include by default. For example Chrome has the most variety of canvases to render graphics, while Internet Explorer continues to be a pain for the web-developers. And that's where flash has the upper hand again, as it runs 99% equally on all platforms and all browsers. I would still choose Flash for non-mobile development, but you definitely can make content that would run great on HTML5/JS.
Then it all comes down to the actual development:
JavaScript is non-strict type language, and that quickly becomes an issue on larger projects
JavaScript does not have classes. It can fake them, but these wouldn't be real classes.
JavaScript pushes you to write deep nested/hard-to-debug code much more.
There's a lack of libraries and frameworks that would work well across multiple platforms.
The choice of tool is up to you. In the current scene I see that Flash cannot be ruled out completely because of how much it can already to; at the same time JavaScript can give you really great performance even now and it will get only stronger in the future.
Related
We have a large web product with 11 million users (widgets that are embedded into third party web sites, and now adding iOS/Android apps). Most of our core interface is written in ActionScript 2.0. We are planning to release a revamped version. We are now facing a choice of porting it to ActionScript 3.0 or rewriting it in HTML5. We already have about 30% of our code written in AS 3.0. Can you help us make this decision?
HTML5
Pros
Future proof
Works in browser in iOS
No plugin required, presumably faster loading
Native browser rich text rendering, including spell check and copy/paste
Appealing to webmasters (contemporary technology)
Cons
Product relies on WebSocket - no standard yet, not available in IE
Highly custom UI, not consistent across all browsers
No video/audio hardware interaction for stream capture
Harder to convert into iOS apps (e.g. need hybrid apps, UIWebView cannot easily call functions in the native wrapper)
JavaScript is like AS 1.0, less sophisticated than AS 3.0
More work for us given our existing codebase and skills
Harder to embed JS widgets into third party sites than Flash widgets
Flash
Pros
Already have some code base, experience
Video/audio stream capture, socket connection
Good for widgets on third party websites
Consistent UI across browsers and platforms
Easier to use the same codebase for AIR apps on iOS/Android
Cons
Adobe's commitment to Flash is unclear
Adobe feels free to force developers to change technologies often, unreliable : AS1.0, AS2.0 have been phased out, Text Layout Framework is not supported on mobile and is being phased out, not clear if our AS3.0 codebase will still be relevant in 3 years)
Shoddy support of Flash on Android (e.g. text input is broken in 25% of devices)
Does not work in browser on iOS and Metro, so need a lite HTML5 version anyway
Slower in browser on Android
Public perception of Flash as obsolete?
We are in an identical situation and I truly wish that Adobe would take the lead in answering this very question; Flash or move on?
We have an AS2 Flash RIA (RIA, a phrase from the past?) that allows our clients to edit their sites from their browser, similar to Wix. Although the sites are viewable on iOS devices via ColdFusion (example: dolcedesignsonline.com - try in IE then in an iOS borwser), we are wondering what to do next. We are in the middle of an AS3 version of our RIA and although nothing in HTML5 will ever come close to the functinality we now enjoy at our fingertips in AS3, is AS3 going to there down the road?!
I do not think that Adobe would just let flash die. A more logical next step would be make the Flash IDE open source and free to the public. I am not endorsing that idea and I do not see that happening but I believe that would happen long before Adobe would just close the doors on Flash altogether.
Tick tock... at some point we are just going to have to flip a coin.
John Glynn
My thoughts on your points:
HTML5
Pros
Future proof - this is also true of Flash (you can still run an AS1 movie in FP11)
Works in browser in iOS - but webGL requires iAds, and canvas knackers the battery, in that sense support for actual HTML5 features is pretty limited
No plugin required, presumably faster loading - depends what's loading!
Native browser rich text rendering, including spell check and copy/paste - good points, not sure what/if any support these have in AIR
Appealing to webmasters (contemporary technology) - depends on the webmaster, beside Canvas/webGL it's just plain old HTML/JS
Cons
Product relies on WebSocket - not sure how you could get around this
Highly custom UI, not consistent across all browsers - this will always be the bane of web developers - look into jQuery UI if you haven't already
No video/audio hardware interaction for stream capture - correct AFAIK
Harder to convert into iOS apps (e.g. need hybrid apps, UIWebView cannot easily call functions in the native wrapper) - correct, but it is possible to do
Javascript is like AS 1.0, less sophisticated than AS 3.0
More work for us given our existing codebase and skills
Harder to embed JS widgets into third party sites than Flash widgets - JS is a very cool language but it's not really suited to building large applications which will need to be maintained by many people, debugging it can be an absolute bitch.
Flash
Pros
Already have some code base, experience - code can be organised into classes, easier to maintain and debug, AS3 also has most of the standout JS features (closures, objects, 1st-class functions) as it is derived from it.
Video/audio stream capture, socket connection - true
Good for widgets on third party websites - not sure what relevance this has to you, as not entirely sure what kind of application you're making
Consistent UI across browsers and platforms - to me, this wins by itself!
Easier to use the same codebase for AIR apps on iOS/Android - true, related to above
Cons
Adobe's commitment to Flash is unclear - this is true, but Flash player will be around for years, if not decades, yet, Stage3D has breathed a new lease of life into the platform
Adobe feels free to force developers to change technologies often, unreliable : AS1.0, AS2.0 have been phased out, Text Layout Framework is not supported on mobile and is being phased out, not clear if our AS3.0 codebase will still be relevant in 3 years) - This isn't really true as the Flash Player provides legacy support for everything ever built in Flash, it might make no sense to code in AS1 now but if you do, you can still export and run on any machine with Flash Player.
Shoddy support of Flash on Android (e.g. text input is broken in 25% of devices) - this is the major drawback, I'm not sure how well AIR addresses these problems but in my experiments with it, the only issue I've found with AIR on android is performance for intensive graphics.
Does not work in browser on iOS and Metro, so need a lite HTML5 version anyway - This may be insurmountable unless you can persuade your clients to use an app (shouldn't be too hard whilst the buzz remains around the word), then you can use AIR - and your existing codebase!
Slower in browser on Android - again, you may need to go with the AIR option, even as a Web/Flash developer I've never been over-keen on the idea of it running in mobile browser, at least with current technology
Public perception of Flash as obsolete? - This has been a real pain, but now Steve Jobs is no longer with us I think a lot of the hysteria has died down, people are looking more objectively and realise that his 'thoughts on Flash' were motivated by a desire to protect App-store revenues rather than facts, and that in terms of development speed, maintenance and cross-browser support, Flash is still miles ahead of HTML/5. Provided you can cross the mobile bridge - and that is a pain, there's really no choice but to go with AIR apps - I'd go for Flash.
I was recommended these two languages as a good option for multiplayer web game development, but I don't know what are restrictions of these languages in terms of game development. I personally like JavaScript, but I'm not sure about client-server communication and security.
Game is going to be 2D turn based strategy.
Shortest answer: Flash.
Short answer: Flash is your best option at the moment, but it's entirely possible to make a good quality game with javascript, there's libraries out there that make the drawing part really easy.
Long answer: For action heavy games, such as a fast paced platformer or a fighting game, Flash is your best option. Flash is also the only option if you want to be able to sell your game to various portals, since they have not yet opened up the ability to license HTML5/Javascript games.
However, Javascript is a viable game development language. Angry Birds on Google+ (and in the chrome store) uses Javascript, and only uses Flash for audio. In fact, audio is currently the biggest challenge, and there's slowly more solutions to that as well. Combine that with stuff like socket.io and the emerging WebGL, and you've achieved parity with most Flash and Unity games.
That said, there are drawbacks to Javascript. Namely, it is much harder to protect the code from being stolen or hacked, and depending on various factors, you're cutting out a subset of users who might be running IE8 and below. There are solutions to these problems, and there is one major drawback of Flash (doesn't work on iOS), but generally, these should be pointed out.
if to be short, it's too hard to draw via javascript. So if you game deals with graphics or animation, it better to use actionscript. IMHO, actionscript is the best if you want to design browser game, javascript will be needed to deal with browser only (if that'll be needed).
UPD: take a look at Haxe. It's multi-platform language. You can target both flash and JS on Haxe.
I would recommend Flash, unless you care about the iOS audience. Having a socket running in your multiplayer game is extremely valuable, and easy to accomplish. Meanwhile, unless you want to demand a specific browser from your users, the never ending headache of browser/platform incompatibility, especially in something as javascript intensive as a multiplayer game, makes Flash the obvious choice. And of course, performing animations is what flash is best at. Achieving similar results in HTML is in many cases impossible, but in all cases MUCH more work.
Oh, and welcome to Stack! :)
Go javascript. But you should look at http://socket.io/ if you go the javascript route
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am an experienced AS3 programmer, and I've done Flash apps and games on the browser and on mobile (via Adobe AIR, e.g., on Android).
I am about to start developing a game (basic 2D platformer with pixelart graphics. Think about Super Mario World) targeted to both web and mobile platforms. Thus I'm searching for easy deployment to these two kinds of platforms, having basically the same source code.
I'm divided between choosing ActionScript 3.0 (Flash) or HTML5/JavaScript for developing this game.
My main question is, for those who've experienced the same situation before:
What is the safest way to go?
In other words, are there serious disadvantages with one of these frameworks that disallows me to develop multiplatform 2D games?
Or am I just dreaming and practical multiplatform (web and mobile) game development is not so possible? (does someone know how Rovio did it with Angry Birds?)
Here are some pros and cons that I already know:
Pros for AS3/Flash:
The state-of-art for web games.
I'm experienced with it.
(Almost) concealed source code.
On the web, it's browser-independent.
Can run as a "native" app on iOS and Android through Adobe AIR. It's not the best performance experience ever, but I know that you can get playable performances with it.
Cons for AS3/ Flash:
Performance on AIR for mobile is not optimal, so I might end up having to abandon a really cool but expensive feature (or even several features).
People are saying HTML5/Javascript will substitute it.
Pros for HTML5/Javascript:
It's possible to do Flash-quality games using, e.g., engines like ImpactJS or Akihabara.
Seems to be more stable and well supported on mobile in the future.
Deployment as native app is possible through PhoneGap, appMobi, etc.
Cons for HTML5/Javascript:
I have some basic knowledge of this technology.
Source code is wide open exposed.
Performance/behaviour is browser-dependent.
Lacks a solid framework or engine which is free of co$t$.
I've decided to forget about HTML5 for cross-platform game development, and specially for deployment to mobile.
The cons I've pointed out for Flash are much lighter than the cons for HTML5. Basically, for the pixelart kind of games, Flash on mobile performs really well, specially if using some nice engine like Flixel.
For example, the Flixel game Robo Run has great performance both on Android and Flash Player in a browser. I don't have an iOS example for the same game, but I believe it would perform as good as on Android.
Plus, Flash performance on mobile shouldn't be an increasing problem since the hardware on these devices just gets better and better.
After thinking about this HTML5 vs Flash issue for several months, I think there's no point adventuring in HTML5 cross-browser compatibility since Flash has proven to be a sort of Java for 2D games.
I think you have outlined the pros and cons pretty effectively. If cross platform and mobile web development is your top priority, Flash is a good choice. You will have all of the drawbacks you have identified.
If you use javascript/HTML such as the impact engine, you will have a different set of problems, and far less compatibilty on the web side.
However, if having the game be the best it can be, you will need to look elsewhere, because as of the present, there is no code once publish anywhere solution.
Unity 3D has good 3D and 2d mobile capabilities.
Appcellerator may also be your cup of tea.
http://www.appcelerator.com/
But in the final analysis, nothing will beat making different versions for different platforms. in terms of performance, and being best suited to the device. Be sure to evaluate how well your chosen solution allows you to monetize your app as well. You'll likely be building multiple versions just to accomodate differences in revenue models and ad serving capabilities.
=== Update ===
In March of 2012 Adobe updated flash for iOS and Android to include support for OpenGL graphics, 3D and 2D graphics are now possible using flash as a single code base for iOS and Android. The speed is good, and you also can deply the same game to web. Its a great tool. The one drawback is that flash relies on "extensions" to connect to native OS capabilites such as Intents on android or Game Center on iOS. If you plan on using native capabilities extensively, look out for this as an obstacle to development.
As ScanPlayGames said, html5 sound is a big issue. There are some neat WebGL ports though. Dominic at Impact has been doing some amazing stuff. He's got the best framework out there.
Rovio did a port using Google Web Toolkit for the chrome store.
I work for AppMobi. We've got a tool called DirectCanvas for iOS (Android will be coming soon) that increases the performance of games in the webview. One of our partners is developing a game that has the concept of Angry Birds (object A is propelled to destroy other objects). So Box2d support is there (the main thing holding us up from releasing). The performance is awesome, and the average joe doesn't know it's a webview game.
And trust me, you wont' be wasting your time doing development on mobile first for desktop then. We've got some stuff up our sleeves.
I'm a Flash games developer too and did some research on how to migrate to HTML5. There are a lot of obstacles if you come from the Flash/ActionScript3 world. One of those things is JavaScript itself - i know many people like JavaScript, but if you are used to AS3 it is hard. Another thing is the problem with sounds (as mentioned above). The most important thing is that i don't want to start from scratch and i want to use my skills or even migrate code from the past.
To make a long story short i ended up with Googles new programming language called Dart. This language compiles to JavaScript in therefore runs on all modern browsers. The most important thing is that Dart is very similar to ActiontScript3! Then i did an open source library which provides all the Flash API you need for games (The Display List, Bitmaps, Sounds, ...) - i tried to make the library as compatible as possible with the Flash API to simplify the process of porting the source of a game. In the end it was pretty easy because you only need to change a few things.
The game i have migrated:
An ActionScript to Dart comparison:
Some other samples and the link to the source:
I think a big disadvantage of Javascript is that it cannot detect picture's transparent regions so that it can stop reacting while mice hover or click on it.
Since HTML5 was released, any new solution has been created?
I have worked with some people who did a very graphics intensive HTML5 application and the worst thing was doing the sound I remember...every browser had to be done differently. Go look for some open source html 5 game frameworks where people have already done the grunt work of testing across browsers...there are some pretty good ones I think. You dont want to have to be the one QA-ing across environments.
As a Flash and Flex developer it is a little disheartening to see the strides in HTML5. Don't get me wrong I have nothing against progress, for me it is just that currently it is easier to write an app in Flash vs AJAX. I love writing in Flash and Flex and think ActionScript is a really great language. But, it appears the strides made in ActionScript or making their way to JavaScript and that video in HTML 5 may make Flash/Flex a thing of the past.
So when do you think (if ever) that HTML will or is a competitor to Flash/Flex for RIA or will browser incompatibility stop this from ever happening?
The reason I am asking is because I don't know if continuing in Flash/Flex is a good idea career wise if HTML 5 can do more. Just looking for some answers from other developers using the technologies.
There are four things that hold the "modern browser" back from where flash is today.
1) Tools. Animating et al with Flash is obviously much easier to do. Plus JS/SVG don't have the "direct" animation support that Flash does right now. It can be done, but it's manual.
2) Performance. JS/SVG/Canvas can not perform as fast, and certainly not as consistently across browsers, as Flash can. Not every application needs the performance, and JS et al are catching up. But at the moment, they still lag behind in total overall performance.
3) Browser adoption. Ye Olde browser wars. Different implementations, different speeds, legacy browers, etc. All the issues the afflict the portable web are in place for the modern browser technologies. So, it's more work to make a portable artifact, and even then it simply may not work, especially on older browsers.
4) Content protection. Flash is hardly the bastion of content safety in terms of IP control etc, but it's night and day over JS, HTML, SVG, etc. where it's all pretty much free for the taking. This will especially confound things like video which right now is mostly bastioned behind Flash players vs simply streaming mp4s to the client.
We've already seen some of the more clever "Javascript ads" (those annoying, floating animated panels for example). I'm waiting for more of those, just as simply animated mini ad apps vs flash. The primary reason most users who disable Flash do so, is to disable applications. JS mini ads won't have that problem.
However, the primary creator of those ads are the creative folks specifically targeted by Flash. It's easy to use for them without being "real technical". Until you can do that with Javascript and the rest, Flash will have a large market for it.
I think the original poster is asking where do cutting edge open web technologies (draft standards) stand versus Flash/Flex. Ignoring questions of browser support and developer tools, look just at features (as you'll see, I know the web side much better):
Vector Graphics
Flash: Yep.
Web: SVG.
Raster Graphics
Flash: Yep.
Web: Canvas.
Audio
Flash: Yep, with ADPCM, MP3, HE-AAC (MPEG-4 Part 3).
Web: HTML5 audio tag with MP3, Ogg Theora, Ogg Vorbis, WAV.
Video
Flash: Yep, with On2 VP6, Sorenson Spark, Screen video, Screen video 2, H.264. The Windows version of Flash 10.1 has hardware-accelerated H.264 decoding.
Web: HTML video tag with Ogg Theora, H.264.
Animation
Flash: Yep.
Web: Yep, via some Javascript DOM commands and via CSS3 properties for animations, 2D transforms, 3D transforms. Some browsers (e.g. Mobile Safari) hardware accelerate some of properties.
I think the big differences currently (given the caveats mentioned above) are performance and implementing all these features. While Javascript is very good in many ways, the programming experience isn't nearly as integrated as in Flash/Flex's ActionScript (note that many of the animation features that are done in CSS). If you want to learn more about where open web standards are going, check out HTML5 Doctor.
HTML/CSS/Javascript together solve a different problem than Flash does.
HTML and CSS are about the appearance of your page, and are the 'universal' language of the internet. Really it's the only language the browser natively understands. Javascript is natively supported in most browsers, but was a glue language never intended to allow the flexibility of Flash.
Flash/Flex are about creating a portable (albeit proprietary) application framework. However, without HTML, Flash and Flex don't exist.
A developer can never stop learning. If it's not HTML5, it'll be something else. I would continue programming what you love, but start playing with HTML5 and see what it can do. It will expand your horizons and help you to think about things in a new way. But you don't have to give up what you're doing now, especially as HTML5 still isn't ready for the mass market yet.
I've got a HTML/JS (YUI framework) photo-organizer that needs access to the local FS. Should I move HTML/JS to AIR, or bite the bullet and "port" it to Flex AIR?
I know what the marketing says, but I want the real answer -- what an I "giving up" by going HTML/JS AIR? I'd like to get some feedback from people with deep experience building HTML-based AIR apps.
I don't think you'll see many issues in using the HTML AIR mode, AIR uses the Webkit engine under the covers iirc, which can work well enough, and has most of the same native features of the Flash/Flex built applications. You'll also see most of the HTML5 features you'd find in Safari. I would say if you need animations that Flash will generally run better than Canvas at this point... There's plenty of examples of ExtJS and other frameworks running on AIR.
As to what you are giving up, I don't think you'd lose anything from an HTML to HTML/AIR standpoint. You could gain a lot of what you gain in having an application in general based in Flash over straight HTML. In flex specifically controls and other features can be more readily tweaked than standard HTML controls. The animation tools in Flash are much nicer. ActionScript doesn't line up to JS on a one to one basis, so there may be issues with code. Dealing with remote content/data is actually a little nicer imho in AS over XHR, though only when dealing with XML.
From an administrative standpoint, going to AIR with HTML from an already written application is probably the shortest path. If you REALLY needed to, you could convert later, and a lot of the underlying logic would be worked out. Time to market would be shorter with whatever is closest to what you are already using more often than not.
Not really, since FS access is available with the HTML/JS version. However, the other route does open up some more native support for application development -- Animation for example, richer controls etc which you will have to live without otherwise. You will greatly miss the debugger and the profiler as also the design view when you move to complex applications. Also, note that if you are worried about sharing your source you probably shouldn't use the HTML/JS way.