THE CHOICES

Software development has gone mobile. We see a large audience using smartphones and tablets, and as developers/marketers/entrepreneurs we want in. When planning such a project there are myriad decisions.

CHOOSE – THE PLATFORM

The choice of target platform (e.g. iOS) and target device (e.g. iPad2) is a primary consideration. Apple’s iOS hits the majority of the market but with time others will mature and may offer more competition. Moreover to hit your market you may be best served to offer your software to more than one platform and more than one device-per-platform. Quite quickly a rather conservative project can target 5-10 unique pieces of hand-held hardware.

CHOOSE – THE DEVICE

Each device offers unique features. The market-penetration, platform, processor-speed, input-capabilities, screen-size, and other factors are all important. Two major form-factor camps are ‘phone’ size and ‘tablet’ size. There is some overlap between these categories such as the Samsung Galaxy 1000.

CHOOSE – THE MONETIZATON

There are many monetization schemes possible. Here are a few of the popular ones;

• Free – To gain experience and reputation.
• Freemium – Offer a free version and market within the experience for a pay-version with more features.
• Ads – Integrate video ads, animated ads, or still ads into the experience.
• Micro-transactions – Offer bite-sized purchase opportunities which enhance the experience.

CHOOSE – THE DEVELOPMENT PATH

When the platform(s) and device(s) have been chosen, the path to develop must be chosen. In general there are two strategies

a) Native App Development – This means you use the 1st-party language (and tools) offered by the platform creators. This means using XCode tool with Cocoa framework coded with the Objective-C language when developing for iOS. Native development generally offers the very best potential performance (i.e. for high-end gaming) and tightest integration to the devices (e.g. detect battery level, etc…) and OS/marketplaces (e.g. iOS in-app-purchase).

b) Non-Native App Development – Many 3rd parties offer code libraries and tools to ‘speed up development’. Some of these are in the native language and some are not. Some of these non-native solutions offer the ability to ‘code once (so to speak) and deploy to multiple platforms’.

c) Mobile Web Development – Instead of a standalone application, an experience can be made available via web-browser and development to fit the size of the target (mobile) device(s). With HTML5 much is possible, but in general this is used for less-expressive less-device-specific experiences. It can also be a very inexpensive way to ‘break into mobile’, as you can use assets/code from your existing website..

CROSS-PLATFORM DEVELOPMENT

While the ability to develop one project for multiple platforms offers many advantages in saved development time and ease in maintenance, it also offers many challenges. Designing a compelling application that takes advantage of the unique features of each device and looks polished on the dizzying array of screen sizes out there can be daunting. For Flash-To-Mobile there are many resources on Adobe’s Mobile Devnet to help you learn the basics.

BACKEND

It is possible for an application to be self contained, including all data/assets with the original install. This is common for games. However many projects require internet connectivity. The data/assets loaded can reside on existing servers outside of your control, or can reside on your own servers. Custom backend solutions using typical backend languages (c++, Java, PHP, Python, etc…) may also be required. All of this depends on your particular project. In general any of the development-paths can contact any of these backend solutions, but some may connect more easily than others.

EXAMPLE…

Let’s assume you have a great new game and want to capture a ‘big audience’ with ‘modest investment’. If the application does not require deep-device-integration a recommended choice is to target both iOS (iPad1/iPad2, iPhone3G/iTouch3G, iPhone4G/iTouch4G) and Android (various devices). If your team has Flash expertise the Flash-To-Mobile publish path may be ideal.

FLASH-TO-MOBILE

With Flash CS6 and more-so Flash Builder 4.6, Flash/Flex developers can publish ONE codebase to MULTIPLE platforms. Using Adobe’s AIR 2.7 (latest public release) you can develop many platforms & Devices.

Compatible Target Platform/Devices: Web-Browser (Mac+Windows+Linux+Non-iOS Mobile Browsers), Desktop (Mac+Windows+Linux), iOS (Ipad1+Ipad2, iPhone+iTouch 3rd Generation, iPhone+iTouch 4rd Generation-Retina), Android (Myriad Devices), Blackberry Tablet OS (Blackberry Tablet).

Supported Flash-To-Mobile Device-Specific Features: Flash-To-Mobile does offer view-persistance, data-persistance, video playback, still-camera capture, still-camera-roll save/load, internet access, in-app web-browsing, accelerometer/gyroscope, Microphone, Geolocation, Multitouch, File-system access. Not all devices offer the same features. In the future ‘Native Extensions’ (see below) offer a solution.

Project Setup: A recommended options is one bulky Flex Library with (most) all code and assets, and then one Flex Project *PER PLATFORM*. You add/edit to the library and publish each of the projects as needed. You can test with an mobile-emulator (fastest) window that appears on your computer, or on the device via USB (best to test hardware features like accelerometer. The ‘flash’ code is converted to ‘native code’ (so to speak) before deployment.

Deployment: Upon completion the platform-specific file is uploaded to the platform-specific marketplace (e.g. iTunes’ App Store for iOS). A Flash-to-Mobile project sits along-side native applications. Ostensibly users have no idea the application was developed with non-native tools. The marketplaces do not delineate this or otherwise make that info available in any way to users. The end-user experience can be indistinguishable from a native app (project type and project polish depending).

NATIVE EXTENSIONS

In light of the ‘Device-Specific’ features listed above, Flash-to-mobile currently leaves us without everything we may want to do (e.g. iOS in-app-purchase). The yet unreleased (release date is ‘early October 2011’) Adobe AIR 3.0 will include ‘Native Extensions’. In short, this allows for *ANY* Flash-to-mobile project to access *ANY* feature on *ANY* supported device (Android / iOS / Blackberry Tablet). Developer will require knowledge of both AS3 (flash) as well as the Native language(s) on the target device(s) to add new features. Or your team can find free and premium extensions which the community could share. This is not just for mobile, this technology will also allow AIR on desktop computers and AIR on TV’s to integrate with those devices too.

LINKS

Native Mobile Development

• Google Android
• Apple iOS
• Blackberry Tablet OS

Marketplaces

• iOS App Store (iTunes)
• Google’s Android Marketplace
• Amazon’s Android Marketplace

Non-Native Mobile Development – Flash-To-Mobile

• Flash-To-Mobile (Using Flash and/or Flex) for iOS/Android/Blackberry Tablet OS… also Desktop/TV/Browser
• Success Bringing Flash Games to iOS
• AIR 2.6 (Available in Full Release) – Commonly in use today.
• AIR 3.0 (Available in Public Beta Now) – Offering Native Extensions and more.
• Example of Best-Seller Flash-To-Mobile Game for iOS
• Example of Best-Seller Flash-To-Mobile App for iOS
• Flash-To-Mobile for iOS – Using SWC files to build large Flash and AIR projects with multiple SWF files

Non-Native Mobile Development – Others

• Corona for iOS/Android
• Corona vs Adobe AIR (Great Article)
• RhoMobile for iOS/Android
• Appcelerator for iOS/Android
• Mosync for iOS/Android
• Phonegap for HTML5 Mobile-Browsers

THE FUTURE

Some of what is coming in the future is listed below.. This may or may not all be included in the very-next tools. Recently Adobe has announced What’s new in Flex 4.6 SDK and Flash Builder 4.6.

I. The Second Coming (Halleluiah) – Flash-To-Mobile Native Extensions

This future feature will ostensibly allow Flash-To-Mobile projects to access *ANY* feature on *ANY* targeted device (e.g. in-app-purchase on iOS).

• Adobe AIR 3.0 Native Extension – Explained!
• Adobe AIR 3.0 Native Extension – Demo Mapview on iOS
• Adobe AIR 3.0 Native Extension – Tutorial 1
• Adobe AIR 3.0 Native Extension – Tutorial 2

Updated Febrary 23, 2012: See Here…

II. The Second Coming (Halleluiah) – Stage3D

Stage3D (Formerly codenamed ‘Molehill’) is a set of API’s available in the future that will ostensibly allow Flash Browser projects (using Flash Player 11) and Flash-To-Mobile projects (using Adobe AIR 3.0) to show high-grade hardware rendered 3D. Finally, the Flash Platform can truly compete as a 3D gaming engine. The same API (despite the name) can also be used for radically improved 2D gaming performance too.

NOTE: These API’s are low-level and challenging to understand. We expect 3rd parties will wrap this functionality with easy-to-use API’s for free/premium use.

• Stage3D – Explained!
• Stage3D – Demo!
• Stage3D – How-To! (For 3D Gaming)
• Stage3D – How-To! (For 2D Gaming)
• Unreal Releases ‘Citadel’ – The first interactive demo of UNREAL engine running in Flash Player.
• BlackSun Game for Stage3D

Update March 10, 2012: See Here…

III. The Second Coming (Halleluiah) – Air 3.2 = Stage3D for Mobile + Many Stage3D Frameworks

So with AIR 3.2  (See Adobe Press Release) we can use Stage3D for mobile. This means GPU-Accelerated graphics on iOS/Android. I think there is a marketable benefit on getting the Flash Player to compete against other 3D gaming solutions (such as Unity3D) and perhaps compete less with emerging 2D gaming solutions (such as HTML5 gaming) so I can sympathize with Adobe’s (better late than never) focus on 3D for Flash. This article “Why Starling (or any other 2D framework on top of Stage3D)?” explains some really good reasoning.

[tubepress video=”ZPHATCbnHE0″ embeddedWidth=”500″ embeddedHeight=”350″]

Mind-blowing Demo’s of AIR 3.2 on mobile

• Five AIR 3.2 Stage3D Mobile Demos That Will Knock Your Socks Off 
• Spaced Away is the first game in the iOS app store to feature Stage3D by developers Falanxia.

Regardless of why, Stage3D is here, and Starling’s power lies in how it uses the Stage3D – first available in Flash 11 and AIR 3.0. Stage3D is designed for GPU accelerated 3D. While its possible to use the Stage3D API’s directly, it is very difficult. There are 3D frameworks for AS3 , but for many game developers we can exploit its power for 2D gaming. That’s why Starling focuses purely on 2D. So an API like Starling helps developers make great content – quickly.

AS3 frameworks use Stage3D for 3D gaming;

• Flare3D,
• Alternativa3D,
• Away3D,
• Minko

AS3 frameworks use Stage3D for 2D gaming;

• Starling
• ND2D
• M2D
• AtomEngine
• Citrus Engine (Recently Upgraded To Stage3D)

Key Articles I’ve written on the subject

• Intro To the Starling Framework (Read It!)
• Angry Birds Launches on Facebook with Starling

Stage3D Games

Spaced Away

---

Falanxia brings its FWA Award –winning space physics puzzle game to both iPad and your web browser.

Play game Learn more

Angry Birds Facebook

---

Join your friends on Facebook to take out Rovio’s famous pigs with enhanced special effects.

Play game Learn more

Waste Invaders

---

Waste Creative’s tech demo lets you blast aliens at a silky smooth 60 fps, across browsers and iPad, with Stage3D.

Show demo Get the source

While researching technologies for a new Flash multiplayer gaming project, I came across Node.js as a backend techology. I’ve heard of it for a while, but have not yet used it. Its nice.

Node.js is a server software that allows you to a) run JavaScript on the server and b) talk to/from the client-side using http and socket connections. While not designed with Flash in mind, you can easily connect Flash (or Flex) to the socket connection and get real-time data flowing to/from. Very nice.

Uses for Node.js with Flash

What I think is immediately attractive is that you can easily setup a backend for your games. Its running in JavaScript which is easy to use and learn and the write-compile-test cycle couldn’t be faster. You could feed dynamic data to your game such as levels in a level based game. You could feed configuration information in so that you can easily edit it without editing your Flash project. You can create real-time data feeds or multiplayer gaming.

Note: Node.js is light-weight. You’ll have to code pretty much anything (multiplayer gaming) you want to add to it. It is a great starting point though.

Tutorial

I created the following example, and this post within an hour. Within 5 minutes you can setup your own running version of the demo shown in the post. Follow along here or simply download the full source code (See ‘Member Resources’ below) and check it out.

Note: I’m running the node.js server and the Flash swf on my local computer. I imagine this is where I would develop the full game. Its fast and easy to run/edit/run. Then I’d migrate the project to a server. I *think* its trivial to get this running up on a webserver for your users to enjoy, but I have not done that yet.

A. Installing Node.js (on Mac)

1. Download Node.js
2. Run the installer
3. You now use the Mac OSX Terminal program on Mac (or Find any ssh terminal emulator program for Windows) to run Node. We’ll do that farther below.
4. Done!

B. Running the server on Node.js (via Socket)

1. Create a new text file HelloWorldNodeJS.js and save (anywhere?) on your local machine
2. Edit the file in your favorite text editor. For now, just enter the code below this list into that file and save.
3. Open Terminal and run one line –  ‘node /path/to/your/dir/HelloWorldNodeJS.js’
4. Done!

[actionscript3]

// ————————————–
// Imports
// ————————————–
var net = require(‘net’);
var mySocket;

// ————————————–
// Construct The Socket
// ————————————–
// create the server and register event listeners
var server = net.createServer(function(socket) {
mySocket = socket;
mySocket.on("connect", onConnect);
mySocket.on("data", onData);
});

// ————————————–
// Events
// ————————————–
/**
* Handles the Event: <code>"connect"</code>.
*
*/
function onConnect()
{
console.log("Connected to Flash");
}

/**
* Handles the Event: <code>"data"</code>.
*
* When flash sends us data, this method will handle it
*
*/
function onData(d)
{
if(d == "exit\0")
{
console.log("exit");
mySocket.end();
server.close();
}
else
{
console.log("From Flash = " + d);
mySocket.write(d, ‘utf8’);
}
}

// ————————————–
// Start the Socket
// ————————————–
server.listen(9001, "127.0.0.1");

[/actionscript3]

C. Stopping the server on Node.js (via Socket)

Once you run B.3 above, the server runs and stays running unless you program your client or server to kill the connection. If you try to run B.3 without killing the connection you’ll see an error in Terminal (on Mac) containing “Error: listen EADDRINUSE”. To manually kill the connection (this is required if you want to edit and run B.3 again) then run the following sequence.

1. Open Terminal (on Mac) and run ‘ps aux | grep node’
2. This will show a series of lines like this ‘srivello       PID   0.0  0.1  3064476   7152 s002  T     4:41PM   0:00.12 node HelloWorldNodeJS.js’.
3. Where you see ‘PID’ that is the PID. Your PID will be different it will be a #.
4. Then run ‘kill -9 PID’. Replace PID with your #.

D. Running the client in AS3 (via Socket)

1. Create a new Flash project using your favorite IDE. My example uses Flash Builder 4.6.x.
2. Edit your main document class. For now simply replace the class with the code below this list and save.
3. Compile and run the code. See your output window for the exciting details.
4. Done!

[actionscript3]

package
{

// ————————————–
// Imports
// ————————————–
import flash.display.Sprite;
import flash.events.DataEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.net.XMLSocket;
import flash.text.TextField;
import flash.ui.Keyboard;

// ————————————–
// Class
// ————————————–
/**
* <p>The <code>NodeJSDemo</code> class is …</p>
*
*/
public class NodeJSDemo extends Sprite
{

// ————————————–
// Properties
// ————————————–
// PUBLIC GETTER/SETTERS
/**
* The core object which connects client to
* server for real-time communication
*/
private var _xmlSocket:XMLSocket;

/**
* The sole UI element to show some test output
*/
private var _textField:TextField;

// PUBLIC CONST

// PRIVATE

// ————————————–
// Constructor
// ————————————–
/**
* This is the constructor.
*
*/
public function NodeJSDemo()
{
// SUPER
super();

// EVENTS
addEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);

// VARIABLES

// PROPERTIES
_textField = new TextField ();
_textField.width = 300;
_textField.height = 300;
_textField.multiline = true;
_textField.htmlText = "";
addChild(_textField);

// METHODS

}

// ————————————–
// Methods
// ————————————–
// PUBLIC
/**
* Handles the Event: <code>Event.CHANGE</code>.
*
* @param aEvent <code>Event</code> The incoming aEvent payload.
*
* @return void
*
*/
private function _onAddedToStage(aEvent : Event):void
{
// CREATE THE SOCKET AND CONNECT – I’M NOT SURE WHAT PARAMETERS ARE VALID HERE
// BUT IT MUST MATCH THE SETTINGS WITHIN THE ‘HelloWorldNodeJS.js’ FILE YOU ARE USING
_xmlSocket = new XMLSocket("127.0.0.1", 9001);

// EVENTS
stage.removeEventListener(MouseEvent.CLICK, _onAddedToStage);
//
_xmlSocket.addEventListener(Event.CONNECT, _onConnected);
_xmlSocket.addEventListener(IOErrorEvent.IO_ERROR, _onIOError);

}

// PRIVATE

// ————————————–
// Event Handlers
// ————————————–
/**
* Handles the Event: <code>Event.CHANGE</code>.
*
* @param aEvent <code>Event</code> The incoming aEvent payload.
*
* @return void
*
*/
private function _onConnected(aEvent : Event):void
{
// TRACE
trace("onConnect() aEvent: " + aEvent);

// EVENTS
_xmlSocket.removeEventListener(Event.CONNECT, _onConnected);
_xmlSocket.removeEventListener(IOErrorEvent.IO_ERROR, _onIOError);
//
_xmlSocket.addEventListener(DataEvent.DATA, _onDataReceived);
_xmlSocket.addEventListener(Event.CLOSE, _onSocketClose);
//
stage.addEventListener(KeyboardEvent.KEY_UP, _onKeyUp);

}

/**
* Handles the Event: <code>Event.CHANGE</code>.
*
* @param aEvent <code>Event</code> The incoming aEvent payload.
*
* @return void
*
*/
private function _onSocketClose(aEvent : Event):void
{
// TRACE
trace("_onSocketClose aEvent : " + aEvent);

// EVENTS
stage.removeEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
_xmlSocket.removeEventListener(Event.CLOSE, _onSocketClose);
_xmlSocket.removeEventListener(DataEvent.DATA, _onDataReceived);
}

/**
* Handles the Event: <code>KeyboardEvent.KEY_UP</code>.
*
* @param aEvent <code>KeyboardEvent</code> The incoming aEvent payload.
*
* @return void
*
*/
private function _onKeyUp(evt:KeyboardEvent):void
{
// HANDLE KEYS
if (evt.keyCode == Keyboard.ESCAPE) {
//1. SEND ‘KILL THE SERVER’ TO THE SERVER
_xmlSocket.send("exit");
}
else {
//2. SEND ANY NON-ESCAPE KEY’S CODE (’38’ FOR EXAMPLE) TO SERVER
// THIS IS A SILLY EXAMPLE OF SENDING A NUMBER TO THE SERVER
// JUST SO THE SERVER CAN SEND IT BACK. SIMPLE.
_xmlSocket.send(evt.keyCode);
}
}

/**
* Handles the Event: <code>DataEvent.DATA</code>.
*
* @param aEvent <code>DataEvent</code> The incoming aEvent payload.
*
* @return void
*
*/
private function _onDataReceived(aEvent : DataEvent):void
{
try {

// Show the server data in text
_textField.htmlText += ("From Server: " + aEvent.data + "\n");

//scroll down to show latest line
_textField.scrollV = _textField.maxScrollV;

} catch (error : Error) {
// TRACE
trace("_onDataReceived error: " + error);
}
}

/**
* Handles the Event: <code>IOErrorEvent.IO_ERROR</code>.
*
* @param aEvent <code>IOErrorEvent</code> The incoming aEvent payload.
*
* @return void
*
*/
private function _onIOError(aEvent : IOErrorEvent):void
{
// TRACE
trace("_onIOError aEvent: " + aEvent);

// EVENTS
_xmlSocket.removeEventListener(Event.CONNECT, _onConnected);
_xmlSocket.removeEventListener(IOErrorEvent.IO_ERROR, _onIOError);
stage.addEventListener(MouseEvent.CLICK, _onAddedToStage);
}

}
}

[/actionscript3]

E. Updating your client/server

1. Revisit steps B.2 and B.3 for server
2. Revisit steps C.2, D.2 and D.3 for client
3. Done!

Pretty awesome.

Next Steps

• Read an overview of What is Node.js?
• Checkout the official homepage for Node.js
• Download the full source code (See ‘Member Resources’ below).

Member Resources

[private_Free member]Enjoy this members-only content!

• Download the complete source code

[/private_Free member]

While reading Transitioning.to, a blog ‘Supporting the Flash Community’s Diversification into New Technologies’, I came across a good post about Flash vs. HTML5.

I shudder at the constant comparison and the partisan callousness on both sides. The article was indeed good, but I wanted to clarify something. When I hear the title question “Will HTML5 Ever Catch Up to Flash on Features?”, I rephrase it a bit. Will ‘HTML5′ (Meaning HTML5 + JavaScript + CSS) and community libraries for each, and developer-friendly IDE’s, create a cohesive replacement that runs predictably across browsers for what is offered by the technology of the Flash Player.

Well, will HTML5 do it?

I say yes, and no.

HTML5 Is Open

I’m underlining here the fractured nature of the HTML5 offering. I think HTML5 is awesome. It can do so much, it performs so well, and as a developer I love that it ‘compiles’ in 1 second instead of 5 or 10 or more with Flash. I think that the low level capabilities we see in HTML5 on Chrome (for instance) facilitated by a useable library (such as a game framework) could cherry pick most any feature offered by Flash and create compelling feature-parity. It could create competition feature per feature. However it is more correct to ask and more challenging to expect that that one feature-set to easily play with some other set of features created by some other developer for another library perhaps focused on another platform or device. HTML5 is by its nature spread more thin than the ‘closed’ Flash System. This allows for more freedom in what the community can do but also places a huge responsibility on the community.

As a game developer, there exist, today, HTML5-based game engines which present an compelling alternative Flash. Some are playable only on the hottest latest browsers, some can also be packaged to mobile ‘apps’ and offered in mobile marketplaces, and some need some time before they can be played by enough people. Depending on the target audience (and their browsers and devices) the feasibility of using a game framework may or may not be viable yet.

What I suspect is that based on early adoption, solid bug and new feature management, and good marketing several of these game frameworks will mature and become defacto choices for game development. But then the question is not – can HTML5 ‘catch up’ to Flash, the question becomes – can ‘Game Framework X’ catch up to Flash.

As a quick aside, AS3 for OOP developers, is a dream compared to JavaScript. Sure, both will mature, but I’m unsure a wholesale improvement in JavaScript is technically or politically possible.

There is news of ActionScript 4.0 though;
http://www.rivellomultimediaconsulting.com/actionscript-4-revealed/

Relevant to this issue, I have recoded one simple, complete game using many (13 as of today) different game frameworks. Check out all the source and learn from it. Its all available free and it is ideal for those who are interested in transitioning.to.

FLYER GAME, ONE GAME, MANY FRAMEWORKS
http://www.rivellomultimediaconsulting.com/flyergame-one-game-many-many-frameworks/

I wanted to test out a few game frameworks learn more about AS3, Unity, HTML5, and other platforms. Here is a complete list of many, many versions with full source code (See ‘Members Resources’ below).

UPDATE: A new contender in the HTML5/JavaScript gaming space is phaser.io. I may add a demo to this page soon. Leave a comment if you’d like to see it.

Articles

I wrote ‘Flyer Game’ for a series of articles I wrote for Adobe’s “Inspire” (formerly ‘EDGE’) online magazine. To appreciate the HTML5 versions of the game, its great to look back at the general game theory as well as the Flash theory shown in these articles.

• In “An introduction to developing games on the Adobe Flash Platform” I overview the complete AS3 source code in my article
• In “Developing Flash Platform games with the PushButtonEngine” I used a popular framework (PBE) to create the same game.

Downloads of FlyerGame

I provide full source-code to several versions of the FlyerGame. You can compare how each works, and learn more about gaming frameworks that way.

[nonmember]
FLASH VERSIONS

• 1. Flash Pro and AS3 (Very Simple) – [Download in ‘Members Resources’ below]
• 2. AS3 and PushButtonEngine (Component-Based) [PBEv1] – [Download in ‘Members Resources’ below]
• 3. AS3 and PushButtonEngine (Component-Based) [PBEv2] – [Download in ‘Members Resources’ below]
• 4. AS3 Stage3D [Starling Framework] (Very Simple) – [Download in ‘Members Resources’ below]
• 5. AS3 Stage3D [Starling Framework] (OOP Version) – [Download in ‘Members Resources’ below]
• 6. AS3 and Smash Framework – [Download in ‘Members Resources’ below]
• 7. AS3 and Flixel (Coming soon!)
• 8. AS3 and FlashPunk (Coming soon!)

OTHER VERSIONS

• Unity3D w/ C# – [Download in ‘Members Resources’ below]
• Loom w/ LoomScript – [Download in ‘Members Resources’ below]

HTML5 VERSIONS

• EaselJS Framework – [Download in ‘Members Resources’ below]
• ImpactJS Framework – [Download in ‘Members Resources’ below]
• CraftyJS Framework – [Download in ‘Members Resources’ below]
• MelonJS Framework – [Download in ‘Members Resources’ below]
• Spaceport.io Framework – [Download in ‘Members Resources’ below]
• LimeJS Framework – Github Source (Coming soon!)

[/nonmember]

Next Steps

• Wow, there is so much content here!
• Are you new to gaming? There is tons of gaming basics in this posts and code.
• Are you a veteran? Learn to compare/contrast each framework for yourself using the source code (See ‘Member Resources’ below).

Member Resources

[private_Free member]Enjoy this members-only content!
FLASH VERSIONS

• 1. Flash Pro and AS3 (Very Simple) – Great Article w/ Source Code
• 2. AS3 and PushButtonEngine (Component-Based) [PBEv1] – Great Article, Github for Flash Professional, Github for Flash Builder ActionScriptOnly
• 3. AS3 and PushButtonEngine (Component-Based) [PBEv2] – Github for Flash Builder ActionScriptOnly
• 4. AS3 Stage3D [Starling Framework] (Very Simple)- Github for Flash Builder ActionScriptOnly
• 5. AS3 Stage3D [Starling Framework] (OOP Version)- Github for Flash Builder ActionScriptOnly
• 6. AS3 and Smash Framework (Component-based)- Github for Flash Builder ActionScriptOnly
• 7. AS3 and Flixel (Coming soon!)
• 8. AS3 and FlashPunk (Coming soon!)

OTHER VERSIONS

• Unity3D w/ C# – Github Source (Component-based, like #2 above)
• Loom w/ LoomScript – Great Article & Tutorial, Github Source (Component-based, like #2 above)

HTML5 VERSIONS

• EaselJS Framework – Github Source (Simple, like #1 above)
• ImpactJS Framework – Github Source (Simple, like #1 above)
• CraftyJS Framework – Github Source (Component-based like #2 above)
• MelonJS Framework – Github Source (Simple, like #1 above)
• Spaceport.io Framework – Github Source (Simple, like #1 above)
• LimeJS Framework – Github Source (Coming soon!)

[/private_Free member]

Polls

[polldaddy poll=6052370]

Angry Birds for Mobile

Angry Birds  is a strategy puzzle mobile game developed by Finnish computer game developer Rovio Mobile. Inspired primarily by a sketch of stylized wingless birds, the game was first developed for Apple’s iOS in December 2009. The game was immediately very popular. The game is now readily available for most every tablet and smartphone.

The game play in Angry Birds (AB) is simple, physics based fun. It inspired dozens of clones – games which copy the signature control-scheme and style of the original.  It is generally considered to be the most successful mobile game to-date.

Popularity

November 2011, Rovio Entertainment announced its hit mobile game Angry Birds has been downloaded an “astounding” 500 million times since its 2009 debut. Here’s a by-the-numbers look at the milestone’s reported by The Week magazine:

• 23 -Months it took for the game to reach the 500-million-download milestone. It was first released for Apple’s iOS in December 2009.
• 79 – Number of countries in which Angry Birds is the top downloaded game
• $1 billion – Amount Rovio is estimated to be worth by Chief Marketing Officer Peter Vesterbacka
• 10 million  – Number of Angry Birds toys sold worldwide, says Chloe Albanesius at PC World

There is a feature film version of the game in development too.

Angry Birds for Browser

So when porting a popular brand from one platform/language to another typically you look at the developer community and the players communities. There are developers using a wide variety of technologies, and web browsers offer several options for gaming. Since the game is (relatively) simple in 2D graphics and physics – two major choices are HTML5 [1] and Flash[2, 3].

1. In May 2011, a pure HTML5 (or was it?) game. Actually the game reportedly uses Java, not JavaScript. The playable game is branded with the Google chrome logo, and the manner in which it encourages use of Chrome is nothing short of Google advertising. There is also a Google+ social version of the game.

• I assume (and am too lazy to research further) the Google Angry Birds version is some type of sponsored collaboration between Rovio and Google.

2. In Fall, 2011, Adobe’s MAX Conference debuted a version (See Video) of Angry Birds using Flash. Obviously a huge software tooling company and creators of a huge game have many reasons to team up.

• I assume (and am too lazy to research further) the Adobe Angry Birds version is some type of sponsored collaboration between Rovio and Adobe.

As an FYI, As of February 2012, both of these versions are still showing ‘BETA’ in their logo.

Angry Birds on Facebook

3. Now we come to the Facebook version. The tremendous audience of FB matched with the popularity of AB will surely bolster both brands and provide a valuable, social experience for users. On Valentines Day 2012, the Facebook, Flash version of AB launched and uses Flash Player 11’s “Stage3D” feature to render its fast accelerated 2D graphics. The project plays really smoothly and introduces some decent social game play.

Obviously excited, Adobe made the following press release;

Rovio launched Angry Birds for Facebook using Flash Player 11 with support for 3D graphics. The most social version of Angry Birds yet takes advantage of hardware accelerated graphics in Flash Player to bring a silky smooth gaming experience to a wider audience than ever before. More than 130 million people play Angry Birds every day – now with Flash Player, hundreds of millions of Facebook users can do the same. New, enhanced special effects like lighting, smoke and explosions running smoothly at 60 frames per second bring the game to a whole new level and allow players to have a more connected and engaging experience. Angry Birds on Facebook game makes it even more exciting to play with friends, offering amazing new power-ups like Sling Scope, Birdquake, King Sling and Super Seed to extend players’ gratifying arsenals.

Here is a video;

[tubepress video=”NUYzjgNoHAM” embeddedWidth=”600″ embeddedHeight=”400″]

Summary

Angry Birds

As a game player I think Angry Birds is good. Do I play it? Not much. Like many mainstream ideas from the perspective of a die-hard game player, I think its just good, not great. Part of this is evident when you look at the big budget titles that copy the exact gameplay and fail miserably. Angry Birds is a good game that came out at the right time and was very lucky for it. Its popularity brings it more popularity and for that its #1. I cannot argue with its success. It’s phenomenal. Any game developers would be happy to have this game in their portfolio. To now have the game on Facebook, that is great too.

Flash

As a long-term game developer, Flash has defined my career. With new platforms and devices arriving over the past 5 years, there is again much choice for independent game development teams. I compiled a great start-set of learning links and I also offer free HD video training on AS3 and other subjects. Also, here are a few recent articles;

I’ve written about the Starling Framework Used by Angry Birds

• Intro To The Starling Framework for AS3
• Starling Extension –  Dynamic Texture Atlas – Finally Vector Graphics in Starling!

I’ve written about Flash and about Flash Mobile;

• ActionScript 4.0 Revealed
• Considering Flash-To-Mobile Development
• Flash-To-Mobile: Flash Vs Flex?
• Unity3D Now Exports to Flash
• More ‘Flash’ Articles

HTML5

I’m excited for HTML5, for app development and gaming and have written a bunch about it.

• Flyer Game for HTML5 (Same game in 8 different Frameworks) Full Source-Code Included.
• More ‘HTML5’ Articles

Here at Rivello Multimedia Development, we design and program with a variety of popular platforms. Contact us today with your game and app project ideas.

In a recent article I overview the major community/commercial projects in HTML5 for HTML5 Game Frameworks as well as HTML5 App Frameworks. One of the app frameworks I listed there is the Sencha Ext JS 4 Application Development Framework. This post serves as a tutorial to get you started.

The full source code and 3 HD Screencast Video are available far below. For general questions. please comment below. For RMC’s Consulting services, please contact us today!

Before You Start

Before you follow along with this tutorial you’ll need to setup the development environment for Sencha. This includes a web browser, a web server, and a text editor (or code IDE). I’m using a Mac Computer  w/ Chrome Browser, Mac Web Server, and Komodo Edit. I’m new to Komodo Edit and cannot yet recommend it.

Follow the setup instructions here in the Sencha Getting Started docs.

1. Hello World For Application Development

Typically a Hello World program illustrates the quickest way to get anything (such as text) onto the screen and publishing (or compiling) without errors.

In this post I have also added a few things. We see a Sencha component (Viewport), Sencha classpathing (src), a custom super class, a custom subclass, and an example of a mixin class (which allows for something like multiple inheritance).

The Project Output

Here is the example running. I show it running in both Desktop browser and iOS (through an emulator I have – provided by Apple, not Sencha). Sencha also offers a ‘Sencha Touch’ library that is built specifically for mobile. I’m NOT using that here. I’m just using the mobile browser to show (not-specifically-mobile) HTML5 content. Works pretty good.

Debugging: In the chrome window, its clear that the bottom is using Chrome’s Built-In View->Developer->Developer’s Tools which Sencha outputs to very nicely.

In Chrome on Mac

In iOS (Via Emulator)

The Project File Structure

Sencha’s official getting started recommends some (optional) folder structure. I choose something I feel more comfortable with here;

The Entry Point

You can see the index.html loads 3 external files.

[gist id=”1894698″]

1. Styles

I’m using the default CSS I found in some basic tutorials. I have not yet added/edited any styles. In the future I’ll study more on what’s possible.

2. Libs

There are a few choices that ExtJS gives you out of the box, each with their own distinct advantages or disadvantages. You only need to use one.

Here is a rundown of each of the files.

• ext-all-debug-w-comments.js – Debug version of the entire framework, with comments. This is the largest file of the bunch and requires the most processing to display in browsers.
• ext-all-debug.js – Same as above, but without the comments. Still very large, but very good for debugging in most cases.
• ext-all.js – The entire framework concatenated and minified. Debugging is impossible with this file, so it should be used for production systems only.
• ext-debug.js – This file contains the Ext JS foundation and white-space. With this file, you can remote load all of Ext JS as needed, and it provides the best debugging experience. The tradeoff is that it’s the slowest.
• ext.js – The minified version of ext-debug.js.

3. App

The app.js file is the entry point for your custom code. It is where you put all your custom stuff as well as the ‘src’ folder and the ‘assets’ folder.

Within my custom code I show off a few interesting things;

Components

I have not dug deep into Senchas Component library but DAMN there are many good looking components. There are components for Accessibility, Grids, Charts, Tabs, Windows, Trees, Layout, Managers, Drawing, Drag and Drop, Toolbars, Menus, ComboBox, DataView, Forms, MVC, and more!

Here is a simple example of a ViewPort (basically a 100% 100% canvas within-which you can put panels or other things).

[gist id=”1894732″]

Classpathing

Sencha has a nice way to separate your code into classes and your classes into packages. The root of all your packages is your source folder or your ‘classpath’ in Adobe Flex parlance – if you are familiar with that. Classes/packages help greatly with both organization and debugging (breakpoints and errors show you (more) clearly where the problem is).

First we configure one (like here) or more classpaths

[gist id=”1894577″]

And to load and use a class from the main app…

[gist id=”1894638″]

I read in the documentation that the process is called ‘dynamically loading’ of classes. Coming from Flex, I thought ‘dynamically’ meant something really special. But it doesn’t. It means this ‘feels just like Flex  – Classes can import each other as needed, and then you just run the program’. Since JavaScript does not natively support OOP development just about every HTML5 framework requires the developer to use some framework-level conventions to mimic OOP. In the case of Sencha it seems to work quite nicely.

Here is the super class.

[gist id=”1894665″]

Here is a subclass which extends that super class.

[gist id=”1894679″]

Here is a mixin class which the subclass uses.

[gist id=”1894685″]

2. ExtJS MVC Template

If you enjoyed (and understood) the ‘Hello World’ example above, here is something more advanced for you.

In the spirit of the Robotlegs MVC Templates I created for AS3/Flex projects, I created an ExtJS MVC Template.

The idea of the template is to create (and later evolve slightly) a polished, simple example of an MVC app. This can serve as a starting point for all new ExtJS projects. MVC is a popular methodology to separate the model (data), view (user interface stuff), and controller (the ‘what’ that happens when you click UI and stuff).

The app features a simple ui with ‘load’ and ‘clear’ buttons. The load (See ‘Figure 1’) button from the view communicates to the controller which loads data from the model into the view. Clear works in a similar way (See ‘Figure 2’). Its very basic, but illustrates some key concepts about Sencha.

Figure 1.

Figure 2.

Checkout the full source code and 3 HD Screencast Videos (See ‘Member Resources’ below).

Conclusion

As part of my evaluation of HTML5 App Frameworks, I need to look at some other frameworks before I give an educated opinion. However, I’m happy with what I see in Sencha. The language looks good, the styling appears to be very flexible and robust, and the components (from a user’s perspective) look and feel great.

Some things I’d like to do next; I may try to make a blog reader app to load xml, parse it and populate a data grid as a future project with Sencha. I’d like to create a more complex OOP example which includes private/public members and fires events. All of which I know how to do, but have not documented yet. I’d also like to create a Sencha Touch demo or 2, which I think will be 99% identical code, but more suited for running on mobile as an app rather than the demos above which are for web browsers.

Next Steps

• Hello World – Download the full source code*
• Hello World – Watch the HD Screencast Video Tutorial*
• ExtJS MVC Template – Download the full source code*
• ExtJS MVC Template – Watch the HD Screencast Video*
• For general questions. please comment below. Thanks!
• For RMC’s Consulting services, please contact us today!

*See ‘Member Resources’ below.

Member Resources

[private_Free member]Enjoy this members-only content!

Source Code

• Download the full source code to all projects mentioned in this post.

HD Screencast Videos

[tubepress video=”39885869″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[tubepress video=”39857820″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[tubepress video=”39857830″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]
[/private_Free member]

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.

• HTML5
• JavaScript (Often via JQuery)
• CSS3

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’

Resources

• HTML5 Resource Guide of links to simple starter templates.
• Non-framework HTML5 Boilerplate template
• Short list of Best HTML5 Frameworks

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…

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;

• ImpactJS, Akihabara, LimeJS,FlashJS, MelonJS, GameQuery, ProcessingJS
• EffectGames, Aves, CraftyJS, GameClosure, Mibbu, PropulsionJS, CocoonJS
• IsogenicEngine, and more…

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

Next Steps

• Checkout all the versions with full source-code in “FlyerGame – One Game, Many Many Frameworks“

Polls

[polldaddy poll=5983851]

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, Mibbu, PropulsionJS, IsogenicEngine, 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.

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

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 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

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 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

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/