Flash vs HTML5 game development for web & mobile [closed] - javascript

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.

Related

What caused Flash and Actionscript to become irrelevant? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
At first glance this question may seem like I'm looking for opinions or a discussion, but hear me out. While I'm sure everyone has their own opinion of which tools are best to use, there have got to be some factual reasons why Flash's popularity faded away. I'm sure there were certain events and inventions that caused people to prefer other tools, and I'm dying to know what those events are. So I am looking for answers that are based on facts and events. All I can gather from the research I've done and the projects I've seen is that Flash used to be really popular for creating interactive media or cartoon-like movies, but now it's not.
The background story to this question is that over the past few months I've been creating a project with Adobe Animate and Actionscript for a college class. It's been fun and I find that Animate is extremely useful. I would like to think that the skills I've learned will be useful in the future, but I've heard from several different people that Flash is pretty much irrelevant now and I can't figure out why.
I know that front end developers are using Javascript and HTML/CSS for most things, and I do understand some of the advantages. Javascript programs seem to have more open-source availability, and of course no one wants to pay a subscription for Adobe products forever. But what I don't get is what replaced the visual aspect of the "stage". Something as simple as drawing a circle could become hard really quick, or tedious at the least, if you're just using code alone. And if you draw two or more objects, you have to worry about their relative positions. Flash makes that super simple by allowing you to just drag them to where they need to be. But once again I imagine it would be really boring to have to use trial and error to position things solely with code.
So are the Javascript coders using something similar to Flash for their animations that I'm just not aware of, or are they really just using code alone? If they are just using code, WHY would they give up the stage aspect of design?
Politics, sadly. Flash was/is superior to HTML5 in almost every way (explained below), but there were a number of non-technological factors that ushered in its demise. Below are a few that come to mind:
1) Ads. This was the way most people grew to recognize Flash content; if it was flashy and annoying, it was probably Flash. This was unfortunate as it was not the technology itself that was the problem, but the use of it. (the fact that Flash was used so much for this type of content says something about how effective Flash was at creating this type of content).
2) Full Flash websites/games. Again, this was not so much a problem with Flash, but those who used it to create the content. Often devs will produce content on machines that are significantly faster than the average user's, and do most, if not all, testing locally.
3) The 1st iPhone was quite slow compared to those that exist today, and it was slow compared to a majority of computers as well. It is no surprise then that a technology that specializes in multimedia, running in a virtual machine, may have problems running on such a device; however, to say this would be to say something negative about the device, and rather than do that a 100% of the blame was put on the technology. The average consumer's experience with my previous points made this tactic easy to pull off.
4) Adobe gave up after losing the PR battle. There were many things they could have done to save Flash, such as: not dropping Android support, not dropping Flex support, not dropping Flash Builder support, and not ignoring the dwindling Flash engineer community. There is no reason why the iPhone could not run Flash today (and run it well), and there is no reason why Adobe couldn't create a transcompiler to convert content; I already did this (flash api, full as3 language support, e4x, etc.), but it's not open source as of yet. If one engineer could do this, they certainly could have!
5) Overblown publicity of Flash vulnerabilities. Critical vulnerabilities are found in programs all the time, browsers, operating systems (yes, even OS X), etc. But due to the growing discontent for Flash in the general public, issues found in Flash were covered as if Flash was the only program that was exposing people to vulnerabilities.
Technology: Is/was Flash tech superior? Absolutely, HTML5 was actually a huge step back, and here is why:
1) Flash was stable. If you got your app to work, it would almost be guaranteed not only to function exactly the same in all browsers and operating systems, but also to look identical as well. Want to develop an HTML5 app? Either use a javascript library to fix all/most browser inconsistencies, or welcome yourself to a debugging nightmare. So, of course, you add that abstraction layer, but now what happens when you still have an issue? Well, now you have to dig through that layer..
2) Flash/AS3 does it better. Want to have pixel perfect text across all devices? Flash, yes. HTML5, nope. Want REAL classes, typing, Vectors, weak references, interfaces, objects as keys, namespaces, private variables, asset embedding, etc. ? Flash, yes. HTML5.. while it's possible to create a compile-to-JavaScript language to pull most of this off, now you have to deal with that output when you're debugging. How about complex, nested, animations? How easy/fast is that to do in Flash... Sure, editors can be made to output the equivalent in HTML5, but most will not stream like Flash did, and will have severe limitations compared to what Flash can do.
3) The Flash API. The Flash API was well documented, powerful, and pretty simple to use. Compare this to the joy of searching online looking at compatibility lists and vendor prefixes for HTML5.
4) todo... there is quite a bit more.
HTML5 is better only in the fact that it is 100% open (and it's not a plugin, which people tend to dislike). The SWF specification is open, and there was an open-source Flash player (the Tamarin project); so, it is not as if Flash was completely closed like some would suggest; personally, I would trade the openness of HTML5 for stability and consistency any day.
However, if openness is one's primary concern, then one would probably view the step backwards in capability and efficiency as worth it.
BTW: I actually write all my HTML5 and NodeJS code in Flash/AS3 and compile to HTML5/JS. I can still use Flash for debugging (and as my gold standard if you will), which is fantastic..

Comparison between HTML5/js and flash-like

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.

Switch from Flash to HTML5 for a new version of a large project?

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.

Cross platform paint program for web browsers and Mac devices

I need to implement a paint type program that will run on all major browsers as well as can be packaged as an app on the iPad/iPhone. After some investigation I have learned the following facts (correct me if any are wrong):
Javascript is entirely too slow to handle an app of this type by itself
HTML5 seems like a good solution, it has a canvas tag and everything and can easily be packaged into a UIWebView for a Cocoa app. However, I need to be able to reach the majority market for web users, which unfortunately includes most IE users who aren't using the public beta for IE 9.
Flash vs. Apple
Right now I'm debating just making two completely separate apps, one in OpenGL ES for iPad/iPhone and another in something like Flash for web browsers. I was just wondering if anyone had an immediate solutions in mind to make one app instead?
I'd question the accuracy of your first point (Javascript is too slow). Since it's possible to run Quake II in pure Javascript, it's likely that your paint application is less resource-intensive and thus could also run. Of course, one could ask how much optimisation effort and/or experience is required to write performant Javascript of this standard - I can't give you an answer there.
But I'm certainly sure that it's possible to get enough performance out of Javascript to implement such a paint tool, in any modern browser. That doesn't preclude the other options, though; using JS along with HTML 5 sounds like the ideal solution here for "out of the box" cross-platform compatibility.

What can webkit do?

Since there are more and more apps going the web way (like Phonegap, Appcelerator over the mobile and desktop apps development and the ones that I don't know yet), I am wondering what kind of role the web engine (seems the famous engine is webkit) is playing now and in the future?
A web engine is capable of rendering HTML and CSS(for interface), interpreting Javascript(for programming logic), and combining hardware features (like the geo-location, Accelerometer in iPhone web). It seems the web engine has become an extremely powerful "language" and also makes the "coding" much more easier(just writing "web code"). Will it be "ubiquitous all around the apps"?
It's just my point of view and correct me if I am wrong.
My question is:
Where can I find some good examples using webkit engine? I am really new to this and hope the examples are fair easy to learn and use. Thank you~
WebKit has implemented a lot of cool standards-based features:
HTML5 web sockets
HTML5 video and audio
HTML5 web workers
HTML5 geolocation
Client-side database storage
Application cache
CSS 3 animations
CSS 3 Gradients
CSS 3 3d Transforms
Chrome OS is Google's project to basically make a browser engine into a whole OS
http://www.youtube.com/watch?v=0QRO3gKj3qw
Sounds like your train of thought tho not quite sure what your question is sorry

Categories

Resources