HTML5 App Frameworks

HTML5 allows for great in-browser app development. Recently, I wrote a few Great HTML5 games and on the Pros and Cons of HTML5 for gaming. Overall, the potential is high, but issues with browser compatibility, immature tools, and lack of elegant OOP and architecture will slow the progress of HTML5 for gaming.

For HTML5, I’ve found many frameworks to support application development in the browser. Many also have IDEs to help development and other (non-browser) publishing paths such as iOS/Android.

Fundamentals of HTML5

We probably all forget that HTML5 means “Hyper Text Markup Language”. Its a formatting language that allows for linking (hyper). Version 5 is here, but will not be finalized for a few years (2014?). So what is version 5 and why are people so excited?

Well, ‘HTML5’ technology is really a combination of 3 key technologies. All are free to use, standardized, and far more powerful than previous versions. So people are excited. Also many people are using mobile to access the web. And mobile web usage is increasing really fast. *AND* because mobile browser was created more recently (and thus not limited by historic limitations in computers and the related bureaucracy, *much* mobile web browsing TODAY is compatible with HTML5. All good things.

The Challenges of the New Platform

Software Developer Jesse Warden points out the following; The issue, however, is that it’s not that straightforward. There are 5 main issues that the HTML/JS/CSS stack (which I’ll here after refer to as the HTML stack), have when coming from the Flex platform in a consulting context (there are more, but these are the ones that matter with regards to the context of this post). They are:

  1. DOM as a dynamic display technology
  2. JavaScript lacking mature language constructs (Most frameworks have built-in workarounds)
  3. There are larger problems for multiple Browser Vendors to solve
  4. the industry’s libraries & frameworks are young from an Enterprise context (yet not!?)
  5. The Video Codec Issues
  6. Tooling

HTML5 ‘Frameworks’

Above HTML5+JS+CSS, a framework adds a consistent library of actions, events, and UI. We generally hope that a framework can be powerful to meet our needs, fast to meet our development deadlines, and flexible to allow us to customize and extend the framework to meet our particular needs and fringe cases.
Types of frameworks (sometimes they overlap

  • HTML5 Framework– Low-level, flexible, but not specific for app, game, or mobile development. Runs in an HTML5-enabled browser
  • HTML5 Game Framework– High-level and game specific. This is ONLY good for game development. Runs in an HTML5-enabled browser. See this awesome post Flyer Game for HTMl5.
  • HTML5 App Framework– High-level and app specific. This is ONLY good for game development. Runs in an HTML5-enabled browser
  • HTML5 Mobile Framework– This is generally an ‘app’ framework PLUS it may allow you to publish to ‘native’ device languages and handle finger ‘touch’ events, accelerometer and other mobiles-specific features.

Table of ‘HTML5 App Frameworks’

Framework IDE? Video Site API Docs
SproutCore No Site Video API Docs
PhoneGap XCode Site Video API Docs
KendoUI No Site Video N/A Docs
Axure Yes Site Video N/A Docs
JoApp No Site Video API Docs
Sencha Yes Site Video API Docs
M Project Yes Site N/A N/A Docs

Resources

Deep Dive Into Each Framework



Hello World for Sencha’s Ext JS 4 HTML5 Framework
– Full Source Code and HD Video Screencast

Next Steps

  • I wanted to test out a few frameworks for HTML5 to learn more. Check back soon for a review of the best frameworks.
  • Please add any comments or suggestions below…

RMC Is Recording “AS3 Tutorials with Cocktails”

AS3 Tutorials with Cocktails

I am planning some new videos. See the mindmap. The goal will be a code-only (no slides) screencast I as I code and talk improvisationally. Each bullet point will be addressed quickly with a working example and without much context or background. The tutorial videos and code samples will be cocktail themed (beer, wine, Gin & Tonics) in terminology and graphics. Why? Why not.

Watch!

Suggestions

  • What would you suggest I add to the EXISTING topics? What NEW topics would you like to see? Please comment below this post.

Suggestions for topics to add to these tutorials?

1. AS3 Language Basics
2. AS3 OOP With Cocktails
3. AS3 Flash API With Cocktails
4. AS3 3rd Party API’s
5. AS3 Language Advanced With Cocktails

MindMap of Topic Ideas

[mindmeister id=”137010594″ height=”600″ width=”600″]

Want More Video Tutorials?

[polldaddy poll=5983808]

FlyerGame for HTML5

HTML5’s canvas tag allows for great in-browser gaming. Recently, I’ve posted a few Great HTML5 games and on the Pros and Cons of HTML5 for gaming. Overall, the potential is high, but issues with browser compatibility, immature tools, and lack of elegant OOP and architecture will slow the progress of HTML5 for gaming.

For HTML5, I’ve found many frameworks to support graphics and video games. Some of of them are;

I haven’t recoded all of those (yet), but many are ready for you. Check them out!

Next Steps

Polls

[polldaddy poll=5983851]

Mobile Game Development Profit & ROI

In 2011, I wrote an opus for Adobe’s online Inspire magazine called “How To Make Money With Online Games“. Reading that is really at the crux of this blog article. I recommend reading that before proceeding below.

I am considering my strategy for my next game. I would like to self-finance a game. My goals are to learn more about the business and marketing side of things. I have the technical know-how to develop for computer desktop, computer browser, iOS (iPads, iTouches, iPhones), Android, and Blackberry tablet. I want to assume more risk and ‘own’ more of the profits (or ‘eeek’…, the losses too). Here I complete some research on mobile gaming and plot some strategies.

Where’s The Money? (Click To Enlarge)


Fig 1. (Thanks to TechCrunch)

My Research

I read many articles online and chatted with (just a few) game developers who have proven experience (positive and negative) with game development for mobile. Here are some provoking articles.

GAME MONETIZATION

MOBILE GAME CASE STUDIES

Base Costs & Sharing

A solo worker who creates his own game can expect these base costs.

  • Laptop Computer – 2k
  • Software – 0.5k to 2k
  • Revenue Share – The major marketplaces (Apple, Android, Blackberry) each take 30% of your game’s price tag. So you take home 0.70$ per download of a 1$ app.
For a solo worker, this really is… it. However its possible to get much more complicated and spend much more on subcontractors, outsourcing, and marketing.

My Next Philosophy

I am an expert at game design and development. However worrying about the profitability has historically been my clients concern. I’m learning how to monetize my own internal projects, to take higher risks, in the pursuit of professional challenge and higher profits.

Game players will respond to a really well polished (loosely speaking) game. However knowing exactly what response is significant, knowing how the game will respond in the marketplace, and how word of mouth will help, are not possible to calculate with certainty.

As of today I think that success with a mobile game takes a lot of luck. Larger game companies can use existing resources to facilitate success (big marketing budgets and cross promotion). Just like a critically horrible, predictable, boring, movie can make 300% profit because of big-name directors and 50% marketing budget, so can a game. The idea of a game that is created by one guy ‘over a weekend’ that makes hundreds of thousands of dollars too.

However the blockbuster game model and the indie crap shoot are not viable for me. No one indie developer sits down with the vision to make such returns. But his success must be compared to the myriad developers who work for a weekend, launch crap, and DO NOT make any profit. The blockbuster game model takes large resources to succeed and the indie crap shoot takes dumb luck or tons of trial and error.

My Dream Team

For ‘a typical iPhone game’ (whatever that is), the team size and set of skills will vary. I’d say at least you need these roles (some can be the same person); game concept designer, artist, animator, lead programmer / integrator, programmer, marketer, project manager, business developer / accountant.  With a BA in art, my own software consulting company, and 12 years experience as a game developer, I can wear all these hats myself. However, subcontracting some things will play off my strengths, downplay my weaknesses, decrease time-to-market, and hopefully yield a better product.

Each mobile platform works on certain devices (such as iPhone), a development path of programming language and tools to create the game, and has a marketplace where the developer showcases the game (for free but with a share of revenue going to the marketplace).  Traditionally a game must be created INDIVIDUALLY for each platform – for instance created first for iPhone, the recreated at additional time/cost for Android. I am expertly familiar with the Adobe Flash Platform. With these tools I can deploy to both iOS and Android from the same development path. This saves some development expenses, but offers the additional challenge of making a game work on a variety of screen sizes and devices.

I do not have one game concept in mind. I have several and must choose. I will lead every aspect of concept, design, development, launch, marketing. I can self-fund, but am open to investors. I will subcontract and pay a fair wage to all. I’ll hire at least one artist. Depending on the concept I may hire more artists, more programmers, play testers, and a marketing consultant.

My Next Game

After preliminary research and reflection, I have several possible strategies to creating my next game. It really depends on the outcome I want. These strategies are NOT a wishlist. I don’t say ‘make a cheap game that is really popular and makes tons of money forever’ and I don’t say ‘make a blockbuster like Angry Birds’.

STRATEGY #1 – Minimized Financial Risk

  • Reduce production costs – Shoot for a simple, fast, predictably appealing, & addictive game mechanic. Perhaps that means each user enjoys it then abandons it forever – that’s ok.
  • Monetize with in-game adsSell the game for 0$ and integrate a 3rd party ad-network. There are no licensors to impress with flashygraphics/gameplay and no marketing budget to overcome the barrier to entry of a $1 or 5$ price tag.
  • Target high volume of game-plays – Short repetitive gameplay will increase ad viewing. Deploy to both Android and iPhone to capture a wide market. The game’s marketplace profile (icon, screenshots, title, description, reviews) are very important as is a 0$ price tag to drive high volume of downloads.
  • Ideal for – learning the ropes, controlling our losses, setting ourselves up for a follow-up title.

STRATEGY #2 – Build a (Game Development Company) Brand

Here, if we want to make many games under the same label, and potentially offer 1st party ads in one game to ‘sell’ our other titles, we want to emphasize a quality product.

  • Moderate production costs – Keep the idea simple to moderate in scope, but use a more expensive process to shape it. Start with several ideas. Develop each conceptual and keep the winning idea. Use iterative development (develop, play, revise, repeat) to put your best game forward.
  • Monetization is a longer term goal Our goal here is not to have a game that makes money. Its to build a brand.
  • Target critical acclaim – Our goal is to have a portfolio that LOOKS good and receives GOOD REVIEWS.  Ideal critique could be “This game is incredible fun and polished, however the appeal is too niche for mass popularity.
  • Ideal for – Shopping for licensees with a follow-up title. A follow-up that looks sexy, seems massively popular (perhaps unoriginal), coupled with a good brand behind us will attract licensors or sponsors.

What other strategies can we think of?

My Bottom Line

There is much more analysis to be done. Most importantly will be the game concept and target devices. Those factors predicate the costs. Assuming strategy #1 above, a non-scientific estimation would be;

INVESTMENT

  • 3 Months from initial concept, through development, to submission to marketplace. Assuming the game concept lends itself to this calendar. Its very possible.
  • 5k to 20k per month in total costs. This includes the amount of and opportunity cost of my own time (vs doing paid client work) and depends largely on exactly what staff is needed.

REVENUE

  • We’ll go with an ad-based revenue on a game with a 0$ price tag.
  • Does anyone know how to calculate # of ads viewed = # of dollars made for an iOS / Android game? Pleaes leave a comment if you do.

PROFIT

  • TBD

 

 

Pros and Cons of HTML5 for Gaming

I think in the short term and the long term, Flash and HTML5 will be viable options for software development. They have things in common, and are quite different in others.

As a game developer with 12+ years experience (almost exclusively Flash Platform and supporting technologies), I was able to hit the ground running with my first HTML5 demos.

My interest in HTML5 is theoretical, practical, and academic.

Theoretical – I am always interested to see how subtleties in each gaming platform suggest specific solutions to game development challenges (graphical display list, 2D vs 3D capabilities, general performance of pushing pixels, mouse/keyboard/gesture input support, game loop (frame loop vs time loop), etc…).

Practical – As a working consultant, it helps me assets new projects and meet the needs of my clients, to stay ahead of the trends. HTML5 is a prominent alternative to the Flash Platform. To offer my clients a competitively thorough assessment of the technologies at hand, its best to learn HTML5.

Academic – As an corporate trainer, school instructor and thought-leader, keeping on the cutting-edge is a welcome and rewarding challenge. When I learned Java, it raised the bar for what I wanted in ActionScript. As I learn HTML5, I find myself wishing it could do things that ActionScript can do. Comparing languages and platforms is a though provoking give-and-take.

Recently, I sat down to research HTML5, do some demos, and address the pros and cons of using HTML5 for gaming.

PROS

  • Great performance – Add graphics, animation, sound, video and maintain good frame rates. It is not as strong as WebGL or native development (iOS for iPhone for example), but it is great.
  • No plugin-required -A potential game player does not have to download any plugin to play your technology. However not all browsers support HTML5, and others support only some of the features. With time more % of the world will have HTML5 enabled browsers.

CONS

  • JavaScript – JS, ‘THE’ scripting language of HTML5, is very capable, but, it lacks many features which are ideal for gaming; strong-typing and OOP (elegant inheritance, interfaces, member access via public, private, protected, and custom namespaces). Obviously for legacy reasons, JS is what we have to use here. However, if I could choose a language for gaming, JS would not be it.
  • Asset-Integration – Integrating assets (video, audio, animation, etc…) is not straightforward.
  • No IDE – There are not yet good IDE’s for HTML5 game development, nor good processes for integrating assets

PRO OR CON (Depending on your point of view)

  • Browser-dependent – Mobile browsers support HTML5 well. Computers do not yet support it widely. Each browser (theoretically and in-practice) support HTML5 uniquely. So not all features work everywhere.
  • Easily readable source code – HTML5, by default, allows users (or other developers) to easily read your source code.
  • ‘Standards-based’ – HTML5 is a ‘free’, open technology, rather than a technology owned by one company.
  • Many ‘HTML5’ Frameworks – There are MANY competing free and premium frameworks geared specifically to graphics (for games) or for gaming itself. Competition spurs advancement (good), but lack of a single standard any confuse newbies and divide the community’s effort too thin. Some of of them are ImpactJS, Akihabara, LimeJS, FlashJS, MelonJS, GameQuery, ProcessingJS, EffectGames, Aves, CraftyJS, GameClosure, MibbuPropulsionJSIsogenicEngine, and more…

SUMMARY

Overall I see that HTML5 offers a viable alternative to Flash for in-browser gaming. I am actively looking for new clients with HTML5 gaming projects. It seems there is no stand-out HTML5 editing IDE, but found a good, free IDE with Aptana Studio.

As a game developer with 12+ years experience (almost exclusively Flash Platform and supporting technologies), I was able to hit the ground running with my first HTML5 demos. The first of which I published as FlyerGame for HTML5 and also see all my other HTML5 posts.

I’m new to HTML5, but aren’t’ we all. I’d love to hear your thoughts (good, bad, ugly) posted as comments below. My goal is to learn what I can, without the distractions of politics between Adobe and the world.

What *IS* Wrong With AIR 3.0 Native Extensions!

Hallelujah – AIR 3.0

In October 2011, Adobe Announced Flash Player 11, and AIR 3.0. AIR features all the greatness of Flash Player 11, plus more features – such as improved integration and performance on Mobile Devices (Android, iOS, and Blackberry Tablet OS).

I recently wrote about some of the benefits of using Flash-To-Mobile (AIR 3.0) for iOS/Android development.

Features of AIR 3.0 + Flash Player 11

  • Stage3D – High-Performance 3D and 2D rendering using GPU
  • StageVideo – High-Performance Video
  • Improved Encryption – Higher Security
  • Native 64-bit support (Flash Player desktop) – Faster Performance
  • Native JSON support – High performance data parsing
  • Much More
  • … and Native Extensions – See Below

Native Extensions

When developing AIR, the AS3 layer comprising the bulk of the user experience and logic sits on top of a native-language layer. The native layer is written in another language (not-AS3) and is device specific (i.e. Objective-C for iOS devices). The beauty of AIR is that we can code our the familiar AS3 and run on many many devices. Historically, only some of the native-device features were possible using AS3… until now.

Native extensions, new in AIR 3.0 allow the AS3-layer to communicate with the native-language layer. Essentially, *ANY* code written in the native language is accessible.

There are two flavors of Native Extensions – those that access existing built-in native features (i.e. iOS’s iAD Advertising API created an provided by Apple) and those that access custom native-language features which a developer creates for his own use (such as a feature I may create that only I need for a game).

The Good
In the latter case, for custom work, the AS3 Native Extensions is fantastic. You can link together any custom native-language code with any custom AS3 code. Nice. The flexibility Adobe provided to unlock *ALL* of the native-API is commendable.

The Good, yet Tedious
In the former case, when an AS3 developer wants to use an EXISTING built-in native-language feature, he/she essentially ‘wraps’ the related native-language classes, each with the Native Extension shell – Creating a setter/getter/function-caller to parallel the native-language’s API. The process is very straight-forward, but time consuming and tedious. In general the AS3 signature (classes, methods, arguments, properties) matches 1-for-1 the native-language signature.

The Ugly
I’m unsure why Adobe did not create the AS3-api to access all the features for us. Demanding that the community create, share (sell?) such solutions is a gross duplication of effort by the community.

My Problem: Why didn’t Adobe include strong-typed AS3 classes to access the native-language API’s at time of shipping AIR 3.0? Capturing the top 10-20 features the community wants (iADs, in-app-purchase, notifications, etc…) is a no-brainer.

LINKS

More About Native Extensions

Available Native Extensions & Tutorials

Flash-To-Mobile Dev: Flash vs. Flex

Since Flash Professional CS5.5.1 and Flash Builder 4.5.1, its easier than ever to create great cross-platform / cross-mobile content. Flash-To-Mobile (as I generically call this solution) is a compelling choice when targeting iOS/Android and others.

However within ‘Flash’-To-Mobile to mobile development we have a choice in tools (Flash Pro, Flash Builder, FDT, More…), component frameworks (Flex 4.5.x vs Non-Flex), and application frameworks (none, custom, Robotlegs, PureMVC, others…).

Let’s assume we have a Flash-To-Mobile project to be created with Flash Builder. Flash Builder features many types of projects. Some are relevant to mobile development and some are not. For now, let’s consider two. How do we decide between using ‘ActionScript Only’ (Flash) vs ‘Flex Mobile’ (Flex) for the project setup?

THE CHOICES

The Flash vs Flex development paths are possible in both browser and desktop development. But here let’s consider the implications on mobile.

There was a time when the extra k-size of the classes required by the Flex framework and slower run-time performance of Flex components shaped were dramatic factors. Today these are insignificant/marginal factors for many of us with today’s faster internet connections and faster processors. The decision for flex or non-flex depends on other factors as we will see.

When creating a mobile-focused Flash Builder project we have these choices. Let’s take a look at each.

Flash Builder Mobile Project Types

  • 1. ActionScript Mobile Project – DocumentClass extends Sprite
  • 2. Flex Mobile Project – Main class extends ViewNavigatorApplication
    • Blank – This is the most vanilla setup. Its the most ‘raw’ of the Flex Mobile options.
    • View Based Application – Allows for View-Based architecture, but includes no navigation between the views. You must code that yourself.
    • Tab Based Application – Allows for View-Based architecture, and includes button-style navigation between the views automatically.

Flash Builder Mobile Project Options

  • Automatically Reorient – If this is checked then the application will automatically reorient itself between landscape and portrait when the user rotates the mobile device.
  • Full screen – If this is check then the app will launch in full screen mode and hide the status bar at the top of the mobile device.
  • Automatically Scale App By Screen Density (FlexMobile Only) – Selecting this option automatically scales the application and handles density changes when targeting your application across multiple device types with varying screen densities.

1. ActionScript-Only Projects

ActionScript-Only projects extend Sprite and do not include the Flex Framework. You can think of this as the most ‘raw’ starting point for your project.

This is the ideal choice if you don’t need the Flex framework in your project. But how do you know if you need it? If your application uses nontraditional User Interface (UI), for example a game which features oddly shaped menu buttons and key-input for gameplay, it may be best for Action-Script only. Also if your project is not data-intensive (loading, parsing, handling, filtering, binding, etc…) large data sets, it may be best for Action-Script only. Your team’s skills are important to consider too. If you have talented Flash developers with strong AS3 skills, but without Flex experience, it may make sense to use ActionScript only.

2. FlexMobile Projects

Mobile-Only Components?

During the Flex 4.x development cycle Adobe worked on a simplified, more performant set of ‘mobile only’ flex components. This included some, but not all of the standard Flex components. However that project was ended and all mobile-only components removed. Adobe trusted that the run-time would become more efficient, and devices would become faster, so they continued to work on exactly one set of Flex components. So today all of the components work for mobile and non-mobile projects. Advanced developers will notice that there are however different support classes and ‘modes’ for some components to address the unique nature of mobile vs non-mobile projects.

FlexMobile Screens

Mobile devices (phones and tablets) are small compared to our desktop and laptop computers. So designing with less real-estate takes some care. The “screen” metaphor is a solution that divides your application content into ‘screens’ or pages. By uncluttering your app and dividing your content into logical units your users can focus on one screen at a time.

Some Screen Considerations

  • Memory Management – Pushing dozens of screens can eat up all the memory available on the device
  • Transitions – Between screens. Those nice effects that help you create an application like a professional UX Designer
  • Passing data – From one screen to another
  • Preserving State – Of the app when the OS choose to close it
  • Integration with hardware buttons – For example using the Back button of the phone to navigate to the previous screen

ActionScript-Only vs Flex Mobile? – Checklist

Feature/Aspect ActionScript-Only FlexMobile
App’s Mood Game/Creative Business-App
Data Needs None/Few Heavy
UI Style Non-Traditional Traditional
Components None/Custom Many Available/Custom
CSS Capability Text Text, Components, Layout, DPI-,Device-,Platform-Respective

LINKS

More About FlexMobile

Flex Mobile Development Tips and Tricks

Flex Mobile Skinning

RMC Offers Flash-To-Mobile Development

Rivello Multimedia Consulting (RMC) extends its Flash Platform & Flex development services to the mobile. We design applications for your mobile devices. The same code base can be published to many platforms.

Flash-To-Mobile publishes to;

There are many considerations when planning such a project. Here are a few new & updated RMC articles which highlight the major issues;

And there are challenges as well;

We are confident that the Flash Platform presents compelling benefits for mobile development; especially games and apps for multiple-devices (write once and publish everywhere).

Contact Us today with any questions, comments, and project quotes.

Great HTML5 Games!

The ‘Flash Killer’ HTML has some impressive demos. I see a long future for both technologies. More on my 2-cents later. For now checkout some cool demos.

REQUIREMENTS

You need a HTML5-supporting browser. Most of the worlds browsers do NOT support this. The new FireFox 4+, Opera, and I.E. will work well. Test your browser here. http://html5test.com/

GAMES

Biolab Disaster

Biolab Disaster

While I’m far too young to remember 8-bit gaming in the 1980s, Biolab is a homage to those simpler but addictive titles from 20-30 years ago. The game is a space-themed platformer with colorful chunky sprites, great animation and sound effects. The developer, Dominic Szablewski, has also released the canvas-based library at ImpactJS.com.

Biolab is a fine game. In fact, it’s better than many released in the 80s so I’ve heard.

Crystal Galaxy

Crystal Galaxy

Crystal Galaxy is a sideways scrolling space shooter reminiscent of R-Type. However, the game’s unique in that the mouse controls the direction of the ship as well as its location.

Unusually, Crystal Galaxy doesn’t use the HTML5 canvas element. Every sprite is an individual HTML div moved around the screen. It works quickly in all browsers and is even playable in IE6! The authors at EffectGames.com also provide free tools and libraries to help you write your own titles.

Crystal Galaxy is fun, and you won’t be able to resist another go.

Canvas Rider

Canvas Rider

As you might expect, Canvas Rider is a version of Line Rider implemented using the HTML5 canvas element. The game is simple: you ride a bicycle over a series of obstacles to reach a goal – but the realistic gravity and physics make it a serious challenge.

What makes Canvas Rider more special is the online track editor and the thousands of tracks submitted by fans of the game.

Agent 008 Ball

Agent 008 Ball

Agent 008 Ball is a glorious-looking game of pool for one player. The objective is to pot as many balls as possible before the timer runs out.

Again, Agent 008 Ball uses the HTML5 canvas element, but it’s the photo-realistic graphics and real-world physics make the game stand out.

Pirates Love Daisies

Pirates Love Daisies

Pirate Love Daisies is a Tower-Defense-like game which pushes the boundaries of what’s possible with HTML5 and JavaScript. It was written by Flash developer Grant Skinner who was commissioned by Microsoft to create a game which showed off the new technologies in IE9.

Thanks to the original poster here. http://blogs.sitepoint.com/5-awesome-html5-games/