Tag Archives: firefox

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

Book Review – Introducing HTML5 Game Development by Jesse Freeman

HTML5 Game Development

The Introduction to HTML5 Game Development has been one of the most easygoing readings I’ve had in the recent times. Written by Jesse Freeman (@jessefreeman), the book has language which is simple and crisp, without being over-the-top technical. It comes with well written examples and steps to take you through the process of game development.

When I first read the introduction, I was curious to know more about the contents. The book was small with just over a 100 pages, so I was sure that reading it would not take me more than a day or two to complete it.

The book takes you through all the steps that are typically followed in a game development cycle. The good part is that it covers the entire cycle with a single game giving more emphasis on learning techniques rather than writing game logic. Infact I was very glad to learn about the process of creating sprite sheets in Adobe Photoshop using scripts (something I had never attempted before).

The book speaks extensively about the Impact JavaScript Engine for HTML5. The Impact engine has many pluses including running on almost all HTML5 capable desktop and mobile browsers. The only minus is, the engine is not open source and there is no trial version available. The engine is priced at $99.

Personally, I have never been a fan of any engine or framework that is not community driven, but some of the games created by Impact are very impressive. Developers who want to invest in writing high quality games across browsers should consider it. There is information in the book on setting up the development environment to get you started.

Overall, the book is well written but more suitable for developers who have some knowledge of writing games. The book can be downloaded from the link below –

Introduction to HTML5 Game Development published by O’Reilly

Some other useful links –
appMobi Game XDX
Point of Impact – Resources relating to the Impact Game Engine

Mariam

HTML5 Game with EaselJS and TweenJS

HTML5 has been a subject of interest and discussion for many developers. I was intrigued by the platform myself and decided to explore it with a simple game of Concentration to understand how easy or difficult it is to plan a project that requires these new web standards. I used the Canvas element with the EaselJS Library and the TweenJS Library for development.

http://mariamdholkawala.com/games/concentration/gameconc.html

Working with the Canvas
When developing games with HTML5, one of the most crucial elements is the Canvas. The Canvas is like a blank slate on which graphics can be drawn using Javascript. The Canvas element is always added to the HTML page with an id reference for use in Javascript. However a canvas can also be created dynamically using JQuery.

Once the canvas is ready for use, we can combine it with libraries such as EaselJS to draw graphics or text. EaselJS has object properties very similar to Actionscript thus offering a more familiar ground to Flash developers.

HTML (set the Canvas):
<canvas id="myCanvas" width="550" height="400"></canvas>

Javascript (loading an image on the Canvas):
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img=new Image();
img.src="graphics/title.png";
img.onload = function(){
ctx.drawImage(img,0,0);
}

Javascript (using EaselJS to load image on Canvas):
var canvas = document.getElementById("myCanvas");
var stage = new Stage(canvas);
var img=new Image();
img.src="graphics/title.png";
img.onload = function(e){
var title = new Bitmap(e.target);
stage.addChild(title);
stage.update();
}

<div> tag verses <img> tag verses Canvas
There was a constant decision to be made on what is the best approach for loading graphics. The choice was mostly between the <div> tag, the <img> tag and the HTML5 Image element. I personally observed that all seem efficient to use, but preferred using the HTML5 Image element for in-game graphics because they could be manipulated dynamically much easily. The <div> and <img> tags seemed suitable for the static background and other UI elements which needed design effects with CSS.

HTML (adding a div tag and loading image in the div using CSS):

<div id = "btn"></div>
<canvas id="myCanvas" width="550" height="400"></canvas>

<style>
#btn{
background:url('graphics/playbtn.jpg') no-repeat center;
}
</style>

Mouse Events
Mouse Events and Touch Events are necessary to make any game interactive. With HTML5 too, they can be applied to individual graphical elements or to the complete canvas. Some of the useful events for games are onLoad, onMouseOver, onMouseOut, onClick.

In the Concentration game, I used click events for independent HTML5 elements like button images. I also applied a click event to the complete in-game canvas. This is because, during the game-play, the card placement changes with every level. Each card has a property which is best identified by comparing the mouseclick X and Y properties with the card’s X & Y properties.

Javascript (adding a Click Event to the whole canvas):
canvas.addEventListener("mouseup", mouseUp, false);
or
canvas.onclick = mouseUp;

Javascript (adding a Click event to a graphic using EaselJS):
image.onClick = mouseUp;

Javascript (mouseUp event)
function mouseUp(e){
var mx;
var my;
if(e.layerX >= 0 || e.layerY >= 0){
mx = e.layerX;
my = e.layerY;
}else if(e.offsetX >= 0 || e.offsetY >= 0){
mx = e.offsetX;
my = e.offsetY;
}

for(i = 0; i<deck.length; i++){
var card = deck[i];
if((mx > card.xpos && mx < card.xpos + cardWidth) && (my > card.ypos && my < card.ypos + cardHeight)){
//card clicked
}}}

Working with Different Screen Sizes
Supporting different browsers and devices is touted as one of the biggest plus points of HTML5. This means we should be able to customize our content to detect different screens and render the code accordingly. However this is not as easy as it seems, especially for games. There are several challenges in supporting the game on different browsers and device screens.

I remember reading an article on Adobe Developer Connection on working with HTML5 and CSS3 with Dreamweaver but it seemed more apt for app development not suiting my purpose of fluid dynamic screens for games. I did some testing with my game code and managed to achieve a common graphic database for some in-game elements. The current game that I developed, detects the browser and resizes in-game graphics after identifying the device (although there is scope for improvement).

Using TweenJS for transitions and animations
Very good transitions and animations are easily achievable using CSS3, but the TweenJS library makes it much easier to work with animations, especially if you have used the EaselJS Library for the rest of the game. I have used the fade-in fade-out transition for the cards in the Concentration game.

The code below simply fades an image to 0 alpha within 400 milliseconds without a loop. The detailed use of the TweenJS library can be found online.

Tween.get(imageToTween,{loop:false}) .to({alpha:0},400,Ease.get(1))

There are many resources available to understand game development with HTML5. I found the development interesting and hope to discover better development techniques as I work with this code. For seasoned Flash game developers, it may feel like a little let down, but giving in to the HTML5 hype can keep the motivation up.

http://mariamdholkawala.com/games/concentration/gameconc.html

This game should load in all browsers supporting HTML5 (IE gives weird results, not tested on Safari). The game should also run on device browsers but may not give a great experience because it is not ready for devices.

I’ll share the code when it is ready.

UPDATE: The game source files can be downloaded from ConcentrationGame.zip (1.24MB)

Mariam