The Ups and Downs of HTML5

I’ve been off writing for a while mostly because most my time had been taken up with work. If I did get any time off, I preferred spending that time away from the desk. But lately I’ve been missing writing, so thought of starting off with a short article on how I view the platform I’m investing my time in – HTML5.

Rewinding back by four years

It all began in April 2010 when the then CEO of Apple, Steve Jobs issued a public letter titled “Thoughts on Flash” dismissing it as platform no longer relevant for web based content. All of a sudden it sparked debates in the media and developer circles with HTML5 by being pitted against Flash, threatening to topple it down. The general opinion was that HTML5 is King and will change the way people look at content on mobile, as Flash will languish in oblivion.

As time passed, the glory of HTML5 starting fading a bit. In 2012 Mark Zuckerberg was quoted saying at the Disrupt conference that his biggest mistake was “betting too much on HTML5 as opposed to native”.

In 2013 LinkedIn too switched from mobile web-based apps to native because of performance issues and crashes.

In 2012 at the Intel Developer Forum, Intel admitted that HTML5 was over hyped, while continuing to be a strong developer supporter for HTML5 development even today.

HTML5 games was a small, almost non-existent market.

Back to recent times

Times are better today. There is still a constant conflicting debate on whether HTML5 is sustainable in comparison to native or platforms like Unity.

Native and web based apps can never be compared because they both work differently. While a native app runs on a mobile’s OS and machine firmware, HTML5 apps run within a browser. It is upto project stakeholders to decide whether their product is best designed for native or web.

SpilGames and SoftGames have the largest catalogue of casual HTML5 games. They have built this catalogue to target their casual game audiences that play games on the web. They along with FGL are encouraging developers with an ecosystem that includes monetization across platforms. Amazon too has started excepting HTML5 web apps.

GREE, a Japanese social games company recently announced a shift of focus from HTML5 to native apps. I don’t see this as a news that will damage the current HTML5 ecosystem. It is known that HTML5 can never compete with console quality games, especially on mobiles. What HTML5 can provide though, is quick access to games when a user visits a website without having the pains of connecting to app stores, downloading content or paying for it. HTML5 is best suited for quick game-plays and easy discovery through web browsers.

What I also loving about the platform is its community. The community is responsive and constantly building and improving frameworks to make the process of HTML5 development easier.

So to sum it up, the adaption of HTML5 has been like a wave curve. It’s seen adaption and  abandonment. The platform is yet evolving, and it’s only going to get better, while mobile phones will get more powerful.

If you have thoughts on the HTML5 ecosystem please feel free to share it. I to hope continue sharing more articles on developing games and apps using HTML5.

Also check out

Chrome experiments; they have some fantastic work but never tested them on mobiles

Mozilla Developer Network

Mariam

Adobe Playpanel shows the best in online gaming

Playpanel from Adobe is a desktop application that automatically bookmarks all the Flash games played in your browser. It is a perfect tool for online and social game players because it helps to discover new games and also see what others are playing.

image2

What’s convenient about the app is that it silently runs in the background capturing your gaming behaviour without you having to manually do anything. The app captures information such as the games you’ve played, the game links, publisher information, the date you last played the games, number of times you played them etc.

The app is also browser independant, so you could be playing a game in any browser and it will automatically make it available in your Playpanel game list. I tried it with Google Chrome, Firefox and IE and it worked fine.

Playpanel requires you to login with either your Facebook login or Adobe login. I think this login compulsion could have been avoided because not everyone is comfortable inputting their login details. But then looking at it from a product perspective, it also needs to reach out to a wide audience through Facebook invites and virality through game sharing, so it can’t be avoided.

image1

The feature I like most is the discovery of new games from the “Discover Games” tab. This list contains high quality games from well-known publishers. The games are divided into Featured games and Popular games. The featured games are hand picked by the game editors while the Popular games are chosen based on their ratings by other players. You too can rate/comment on these games or see what others have commented about it before you start playing it.

image4

A feature called “Pinning” games helps to pin games which are then made available to your Facebook friends. You can also see what games your friends have pinned, thus collaborating with them on a multiplayer or social game mission.

It almost feels like Playpanel is like a mobile app store, the only difference being, the games are free and played in a desktop browser. Also, with so much gaming content out there it is almost impossible to know what to play or not to play. An app like Playpanel just makes it easier to identify good content.

However, it’ll be interesting to know how much further this product will evolve. One feature that I can think of is arranging games according to genres. Another is showing “similar games” thumbnails on a particular game details page. Also, it will be nice to have the game details page show whether the game is cross-platform.

With Adobe focusing heaviliy on HTML5, will it also serve as a future platform for those games? Just a food for thought!

Mariam

At the NASSCOM Game Developers Conference

ngdc stage

Another year of the NASSCOM Game Developer’s Conference, India has ended. Another year with a better turnout than the last! What a way to celebrate the gaming community of India.

The NASSCOM Game Developer’s Conference (NGDC as we call it) took place on the 15th and 16th of November 2013 at the JW Marriott at Pune. Located right in the hub of the Pune university area, the location is better connected than the earlier one in Pune city and probably encouraged more to attend the event.

The conference had 3 simultaneous tracks focused on Indies, Business and Technology. There were also workshops on Unity development, Game Design, Mentorship by industry experts, BYOG (Build Your Own Game) and Nasscom Gaming Awards.

I went to the event not just as a delegate but also as a speaker. As delegate I attended a lot of the indie talks. My favorite was the talk by one of the founders of Simogo. With just two people in their company, they have done some amazing games. Their postmortems were precise to each game but it was great to see their unique game mechanics.

A workshop for Unity got me introduced to working with 2D on the new Unity 4.3 platform.

Another good talk was by Martine Spaans from Gramble.com on Best Practices for Publishing Mobile Games in the Western Market. While some of the points were known from the best practices materials available online, the presentation was good with points from personal experience.

Interesting it was to attend the Crowdfunding and Kickstarter session by Pyrodactyl Games because they are a success story on Kickstarter from India for their game Unrest.

I spoke about Adobe AIR games on Multiple platforms. The presentation was basics of Adobe AIR but there was so much to share when talking it – Tools, Scout, Stage 3D, Starling, Native Extensions, Feathers UI, Away3D and it just goes on. I hope the audience (a lot of them non AIR developers) could understand it well.

The best the conference had to offer was meeting old friends, colleagues, twitter friends and networking with new people. Waiting for the event to repeat the success next year!

Mariam

Build a URLRequest with headers of multipart/form-data content type with ActionScript

BitmapData

 

 

 

 

 

 

 

Posting an image on a platform which requires it to be of a ‘multipart/form-data’ content type is different from posting a URL link of an image or sending an image as binary data.

For example, both Flickr and Facebook APIs require the ‘multipart/form-data’ type for uploading images and in the latter case I never realized it because there was an existing Facebook API which was doing the work behind the scenes.

Incase of Facebook, if you are using the Facebook Actionscript3 SDK for posting images to your own wall, you are required to convert your image into a ByteArray and then use the API to POST the image. The classes that handle this are the FacebookRequest.as, AbstractFacebookRequest.as and PostRequest.as, but as a developer you may never know of these classes or use them directly.

For instance the code below captures a Movieclip from the stage as a bitmap, encodes it as a PNG and then uploads it to your Facebook wall using the Facebook Actionscript3 SDK.

var bitmapD:BitmapData = new BitmapData(movieClip.width,movieClip.height);
bitmapD.draw(movieClip);  

var imageStream = PNGEncoder.encode(bitmapData);
bitmapD.dispose();

var values:Object = {message:"A test to post image" , fileName:'anyname.jpg' , image:imageStream};  
FacebookMobile.api('/me/photos', onCheckResult, values,'POST');

In my case I did not have any SDK or classes to work with this particular content type. That’s when I read about the UploadPostHelper.as class written by Jonathan Marston. It is an old class written in 2007 so it needed minor modifications to work with today, but nonetheless, it served the purpose of building a POST request with properly formatted headers required by the server to interpret the content of multipart/form-data type.
Assuming if I had to rewrite the code to post an image to Facebook without an SDK, the code below would work just as well.

var bitmapD:BitmapData = new BitmapData(movieClip.width,movieClip.height);
bitmapD.draw(movieClip);

var imageStream = PNGEncoder.encode(bitmapData);
bitmapD.dispose();
postData();

function postData():void{
    var loader:URLLoader = new URLLoader();
    var urlRequest:URLRequest = new URLRequest();	
    var variables:URLVariables = new URLVariables();

    urlRequest.url = "https://graph.facebook.com/me/photos";
    urlRequest.contentType = "multipart/form-data; boundary=" + UploadPostHelper.getBoundary();
    urlRequest.method = URLRequestMethod.POST;
    var postVariables:Object = {}
    if (this.accessToken != ""){
	postVariables.access_token = this.accessToken;
    }
    postVariables.message = "A test to post image";
    urlRequest.data = UploadPostHelper.getPostData("anyname.jpg", imageStream, postVariables);
    urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );
    loader.dataFormat = URLLoaderDataFormat.BINARY;
    loader.load(urlRequest);
}

Write to me if you want the UploadPostHelper.as class with the changes I’ve made to it or have suggestions to work with image data.

Mariam

Mobile Game Fetch gets featured in Seattle’s Museum of History and Industry (MOHAI)

Big Fish Studios’ “Fetch”, a Soon-To-Be-Released Mobile Game recently got featured at Seattle’s Museum of History & Industry (MOHAI)

Fetch is a one-of-a-kind old school art adventure meets arcade game currently in development at Big Fish Studios. The game before its release has became a featured exhibit at the Museum of History & Industry (MOHAI) in Seattle. The reason is simple “To put history in the present! What’s more contemporary than an unreleased mobile game”

Fetch is an imaginative adventure game about a boy who goes to great lengths to save his best friend, a dog named Bear, after he’s been captured by a mysterious fire hydrant.   MOHAI’s interactive installation invites visitors to participate in a number of development activities around Fetch; from testing the game in-progress to contributing their own unique game ideas. The exhibit documents the entire game development process – from the sketch of the original idea through to the final creation of the game.

BF_Collage

Developed in-house at Big Fish Studios, Fetch redefines the adventure game genre by incorporating fun, quick-play arcade games along with brain-teasing puzzles and interactive storytelling. Set to release in the first half of 2013 on mobile platforms, Fetch was designed from ground-up to take advantage of the unique gameplay attributes of touch screen devices. The mobile platforms which will support Fetch have not been released but I’m sure it would include the widely popular platforms.

MOHAI recently reopened on December 29th in the newly refurbished Naval Reserve Armory. The interactive Fetch exhibit was spearheaded by Creative Director Ann Farrington and Executive Director Leonard Garfield, with significant contributions from the Big Fish Studios team.

BigFish_InGame

“An interactive game like Fetch is the perfect subject for a game development exhibit,” said Leonard Garfield, MOHAI Executive Director. “There are millions of people who play games but most aren’t privy to the process and details that go into actually creating a game. Along with the Pixar-like storytelling and production values in the game,  the Fetch exhibit is both inspiring and  educational. ”

The “Building a Video Game” exhibit at MOHAI will be on display through September 2013.

 

 

Mariam

Box2D for Flash Games – Book Review

Box2D For Flash Games

Box2D is a highly popular physics engine. Its popularity lies not only in it being a free open source engine, but also because it has many features to produce realistic physics effects in games. It has also been used by many popular games across the mobile and web.

Flash is one of the supported platforms, therefore this port of Box2D has become almost a priority for many game developers wanting to use realistic physics with AS3. The book “Box2D for Flash Games” written by Emanuele Feronato is therefore a great resource for understanding of the Box2D physics concepts and getting your hands dirty with actual game development.

The book dive starts with basic examples without going too deep into the engine theory. Every new line of code added to the examples thereafter is further explained in detail. Concepts such as friction, density, primitive and complex body types, shapes and collisons are all covered . The chapters then take a step by step approach towards developing actual game levels from popular games such as Totem Destroyer and Angry Birds.

I personally follow Emanuele Feronato blog and know that he comes with tremendous experience in gaming. He contributes to the community with his gaming articles and this book only lets him share more refined and in depth information with his readers.

 

Stop That Silly Chicken game for iPad

Stop That Silly Chicken

With the successful release of “Stop That Silly Chicken”, it is heartening to say that the game was developed using Adobe AIR for the iOS platform.

Stop That Silly Chicken is currently available on the iPad and iPhones. The game uses Milkman Games native extensions for social media and advertising. It also uses a native extension for in-app alerts.

Silly Chicken is a character owned by 9X Media, a brand providing entertainment on television through their various music and cartoon channels.

The game concept revolves around Silly Chicken who runs around a kitchen table in a quest to steal and break the eggs kept safely in a bowl. The player has to tap Silly Chicken before he reaches the table. The player can collect game coins from piggy banks and use them to make purchases from the game store that will make it easier to trap Silly Chicken. The game has 2 modes – Survival and Time mode and both are easy to understand and play. The game is completely free using an advertising model with Admob.

I’ve been reading the comments of the players since its release and glad to see it being liked. It seem that the idea of tapping Silly Chicken and seeing its reactions through different animations is funny for many.

Please download the game if you haven’t already and spread the word about it!

Mariam

The story of Adobe AIR and game development

Will Flash ever be able to get rid of it’s tag of being a quick prototype and animation tool? In India where we have a large developer base working on small games and animations for the web, the stereotype that a lot of people hold about Flash will probably always stay true.

Whenever the word Flash appears, people expect magic and quick turnaround times with development. At such times, the fact that “Flash” is going to be used for a more a sophisticated development on limited memory devices is completely ignored.

Whenever we begin work on a game on iOS or Android, my first suggestion is that if technology is not a restriction, we can provide game development services using the Adobe AIR platform. Most of the times there is never an argument on that because we are trusted to know our work well and deliver projects according to the brief given to us irrespective of the framework or tools.

The trouble comes when I explain what Adobe AIR really is. The fact is that Adobe AIR is a cross platform runtime using Flash and AS3 to write applications across platforms. But on hearing the word “Flash”, there is an instant expectation of quick results even for complex games.

So I’m sharing a list of of points that I felt kept coming up during AIR development on mobile/tablet game.

  • Development with AIR may be familiar ground because of AS3, but the development workflow is the same as with other technologies, especially with good OOPs practices.
  • There are plenty of frameworks available which provide support to Adobe AIR to enhance game development. A developer who wants to give the best to the project considers the time he/she will be spending on including those frameworks in the game.
  • Development of game logic or controls is not about copy pasting code from different places. Each game logic has its flow and limitations which cannot be solved by existing code (unless if it is a port of a game owned by the developer).
  • Mobiles have limited memory. There is a possibility of the game taking up too much runtime memory thus leading to crashes and low frame rate. Optimization of code and graphics is top priority when developing for non-web platforms.
  • Sprite sheets, no matter how much fun they may be to work with, are not easy for replacing the graphics in a game.
  • Compilation of game for devices take time. The workflow of deploying and debugging a game on devices is a time consuming process.
  • Comparison to an existing game is fine, but assuming that the game could have been developed in 2 days and wanting the same time frame for a new game development is an unheard story.
  • Any existing game code of a web game cannot be picked and pushed on Adobe AIR. If the game was developed using AS2, the process of converting the code to AS3 is tedious. What’s even more tedious is optimizing badly written code.

I’m ranting about the way game development with AIR is thought of by some people in India and it really saddens me to think they take it for granted. I know this will change over time, but till then we have to bear the brunt and keep educating people about it.

Mariam

Working with Debug Mode in Starling with Box2D – AS3

I recently started work on a Box2D game project using Starling, and one of my concerns was getting the debug mode to display correctly.

Box2D is a very popular physics engine. It has a debug mode which draws shape outlines, defines center of mass and shows joint connectivity, all very useful while debugging shapes behavior in a physics world. Debug mode is also very useful during prototyping when artistic graphics are not ready. Box2D has its own API but still uses native Flash objects and events.

Starling on the other hand is a game framework developed on top of the Stage3D APIs which helps write fast GPU accelerated games without having to access the Stage3D APIs. The Starling API is very similar to native Flash AS3.

Once a Starling stage instance is created, all display objects subsequently become part of this core Starling instance.
Since Box2D uses native Flash Sprite, the best way to work with Starling is to add a native Flash sprite on top of the Starling stage instance. I’ve given a quick example of how this will work in the example below -

The PlayGame Class is where the Starling framework is initialized. Within the PlayGame class, the Box2D debug sprite instance is defined. The Box2D debug Sprite instance is a native Flash and not a Starling class.

package{

    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;

    import starling.core.Starling;

    public class PlayGame extends Sprite{

        private var myStarling:Starling;
        public static var debugSprite:Sprite;

        public function PlayGame(){
            super();

            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

            Starling.multitouchEnabled = true;
            myStarling = new Starling(MainGame, stage);
            myStarling.antiAliasing = 1;
            myStarling.start();

            stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onContextCreated);
        }

        private function onContextCreated(e:Event):void{
            //debug mode
            debugSprite=new Sprite();
            addChild(debugSprite);
        }
    }
}

The Box2D class

package{
    import starling.display.Sprite;
    import starling.events.Event;

    import Box2D.Dynamics.b2DebugDraw;
    import Box2D.Common.Math.b2Vec2;
    import Box2D.Dynamics.b2World;

    public class BoxWorld extends Sprite{
        private var world:b2World;
        private var worldScale:int = 30;

        public function BoxWorld() {
            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }

        private function onAddedToStage (e:Event):void {

             this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
             //create Box2d world
             world = new b2World(new b2Vec2(0, 10), false);

             //set debug mode
            debugDraw(PlayGame.debugSprite);
        }

        private function debugDraw(debugSprite:flash.display.Sprite):void{
            var debugDraw:b2DebugDraw = new b2DebugDraw();
            debugDraw.SetSprite(debugSprite);
            debugDraw.SetDrawScale(worldScale);
            debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
            debugDraw.SetFillAlpha(0.5);
            world.SetDebugDraw(debugDraw);
        }
    }
}

Packt Publishing completes 1000 titles

Packt Publishing is celebrating the publication of its 1000th title. I’ve been reviewing their books so it’s great to see them grow to this milestone.

Packt also supports many Open Source projects covered by its books through Project Royalty Donation, which has contributed over £300,000 to Open Source projects up to now.

As part of the celebration, Packt is allocating $30,000 to share between projects and authors in a genuinely unique way, soon to be disclosed on their website.

Packt is also offering their existing registered members or those who register before the 30th of September, 2012, a surprise gift. This initiates their celebratory occasion as they support their authors and readers both in a productive way.

For more information about Packt, the kind of books they publish, and to sign-up for a free account, you can visit their website: www.PacktPub.com

Mariam