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

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.

Mariam

Mariam

Out of the devices I use, my iOS device has more games than any other device. Next comes the Android and Symbian devices where I have some games installed, but have never played them (don’t know why!!). Out of all the current 100 iOS games, I only play around 4-5 very regularly and another 4-5 occasianally.

So what is it that gets me to download a game but not play it? I thought through some of the points and this is what I think.

1. Creative Inspiration - So we’ve played Fruit Ninja, Angry Birds and Cut the Rope on the iOS platform. Now, do we really need a game with the mechanics of Fruit Ninja, bird characters from Angry Birds and a name inspired by Cut the Rope?.
If you’ve played “Cut the Birds” and you’ll know what I am talking about (the game is now taken off the App store and has another version Cut the Birds 2). One of the primary resons why games fail to connect with users is that they lack originality and just end up being poor imitations of successful IPs.

2. Herd Mentality – Farmville created history with online social gaming, but then more games decided to follow suit with farm themes or similar “Click and Collect” mechanics. And were they successful? Probably yes, but for how long is the real question! I don’t remember the last time I played a Facebook connected game because of the “Follow the Herd” mentality used while writing concepts.

3. Game Tutor – As a casual game player, I really don’t like a casual game constantly throwing pop ups at me to teach me how to play the game. It breaks the flow and can be very obtrusive. I think a casual game should be self explanatory or atleast with minimum non-obtrusive teaching.
Help pop-ups may sometimes be necessary for games, especially strategy and time management games, which are competitive and require a learning curve to progress, so I’m not completely averse to them.

4. Forgotten Icon – Many times when I reach out for my device to play a game, I notice installed forgotten apps. And then when I recall them after looking at them, I wonder if it makes sense to ever play them again.
Forgetting to play an installed app is nothing but a result of an average game-play, designed to be non intuitive, and not great enough to get us engaged after the first couple of minutes initial play.
Prototyping and testing an idea with people trusted for feedback is the best way forward. Being open to criticisms is only getting better at designing and developing a better game.

5. User Experience – I was playing a turn based game against the computer AI recently. I won’t name the game, but the mechanics were as simple as Tic Tac Toe. However, everytime I was to play a turn or the AI was to play a turn, I would have a big popup message thrown in front of me informing me that it was my turn or the computer’s turn to play.
This is an example of a terrible User Experience design because it ends up irritating me/the player with constant reminders during every turn. A definate reason for me not to replay the game.

6. Buggy Pop-ups – What happens when I am playing a game (Chess for example), and I play my turn before the game can alert me of my turn. Now the game logic gets stuck at this point where it has my turn pop-up to display on screen but knows in the background that it is the AI who will play next. My game hangs at this point and I’m stuck staring at a game screen where I can’t progress. I have to shut down the game and restart it.
Will i play this game again? Only if it has an addictive game-play and value for time.

7. Noisy Screechy SFX – One usually plays a game when they want to take a short break in-between or after work or sometimes as a part of their learning process. Poor sound effects or background music really make me shut down the game even if I really need to play it.

8. Where’s the Entertainment – Some games just lack entertainment. And I can’t define this any further. Game development is a coordinated process and going wrong in any of the phases can lead to a non entertaining game.

9. Non accessibility of content – Today most games are sold through mobile app markets. iTunes gives the easiest access to download games irrespective of the iTunes version or the device OS. Similarly Android too offers ease of use of the Android Marketplace. For the others, it’s not been very easy at all times.

Mariam

The 2 days of the event had back-to-back sessions covering various aspects of the state of the gaming industry, gaming platforms and technologies and sessions for budding entrepreneurs.

I was invited as a part of a panel discussion covering Flash vs Unity vs HTML5 and it was a fairly well attended session (we had 2 very competitive sessions running parallelly so a well attended session is a compliment!). It was great to see that most of the audience were into Flash development at some level and keen to know what the panel had to say about the three most spoken about technologies in the recent times. The panel came with their expertise and spoke about the strengths of the platform they specialized in.

HTML5 is a platform that Zynga believes will be the future with social games. They are already looking into it; their Words with Friends being a classic example of a successful HTML5 social game going cross platform.

Cha Yo Wo on the other hand felt that HTML5 has it’s disadvantages and is better suited for enterprise applications rather than game development, especially when getting it across multiple platforms. They had some good talk to share about their engine allowing easy porting of code across different mobile platforms.

Glu Mobile belives in Unity and had some good points to share about using the platform to develop freemium games.

I spoke about my experience of working with Flash on different platforms, specifically devices. My thoughts were that Flash developers have the advantage of taking their ideas to multiple mobile platforms through the Adobe AIR runtime, but that can come with some limitations. The native platform for devices offer more polished APIs than AIR thus giving it an edge over Adobe AIR. With the introduction of native extensions, Adobe AIR can open up better development options but that will only be known in time.

However having said that, HTML5 is an new standard for the web that developers can be excited about, especially since Apple has been talking about it for a very long time, Adobe is investing heavily in the tools, and companies like Zynga believe that they can push the envelope of online social gaming with it.

The consensus was that a developer should never be limited with an idea because a technology is known and comfortable to work with, instead choose tools and platforms that best help bring the idea to life.

Mariam

Sending a big thanks to the Nokia Developer team for the re-election, running the Champions program and working with developers who they think can contribute to the platform.

This year is especially important because of the Microsoft Nokia partnership which will be key in getting the Windows Phone platform on Nokia handsets and further building the mobile ecosystem. The Nokia Lumia smartphones announcement is already a start to the exciting things in the future, so looking forward to it.

Mariam

While both of these were non-tech events, I realized what an important role technology and social media plays in reaching out to an audience to help promote a product or television content.

Almost every blogger at the event was well connected with their latest device tweeting every moment of their experience through Twitter. There was even a moment where the hash tag #MasterChefIndia2 was trending in India due to the reach of the community present at the event.

Digital and phone cameras were working with draining batteries capturing every frame of the events so that bloggers could share them through Flickr or Facebook Albums. Everybody at the event was passionate about writing, blogging and owned personal blogs. Everyone connected, exchanged cards, twitter handles and blog addresses!

So while it was easy for me to believe that I was away from technology over the weekend, I was actually amongst real techies!

So cheers to the tech world we live in!

Mariam

Facebook IS building the social web! It has more than 800 million active users and connects more than 500 million users monthly on its Facebook Platform through devices, apps and websites (source Facebook Statistics).

With such a huge demand for content on the Facebook Platform, the requirement for developers has also grown, thus leading to more learning material being available; material especially related to tips, best practices and simple guides to help one progress with the platform.

One of the newest resources for Facebook Developers is – the Flash Facebook Cookbook by James Ford. I received a copy of this book and decided to write a short review for it while reading it.

The Flash Facebook Cookbook contains around 60+ recipes for integrating Flash applications with the Graph API and Facebook. The recipes are simple and start with the basic explanation of Facebook and Flash integration. It graduates to moderate and complex examples such as News Feeds, working with the photo albums, uploading pictures, working with events and integrating HTML5 geolocation capabilities etc.

The book does not expect the developer to know the Facebook platform, but does expect some knowledge of working with Flash Builder and the Flex framework. It uses the Facebook Actionscript 3 SDK available from Github. Apparently this version is supposed to be more community driven than the official Facebook Actionscript SDK supported by Adobe and Facebook on the Google Code repository. I’ve always worked with the official version of the SDK, so I didn’t try using the Github version with the receipes.

I think it is fair to say that the book is a good resource for Facebook development on the Flash platform for the web and desktop. It does not cover the mobile platform, although a refined developer will be able to adapt the knowledge gained from this book to multiple Flash supported platforms.

Mariam

Well, something similar to the statement above is what I have been reading a lot lately. And this probably has to do with Adobe’s latest offering for web animations – Adobe Edge. I finally got it installed after a few hiccups and this is my initial impression after trying out a couple of amateur animations.

• The Adobe Edge UI gives you a nice wide canvas to create animations. The interface has a stage, a timeline, a tool panel and a properties panel. Edge is great because it eases the production of animated web content which can be deployed and supported easily on multiple devices and platforms (iOS too!)

• Adobe Edge is still in Preview, which means the team is expecting people to test it and provide feedback.

• Adobe Edge is probably similar to what Macromedia Flash 3 was –  an animation tool still in its early phase.

• Edge does not provide any means to edit the HTML file from within the GUI, however you can generate an HTML file and edit it in another software such as Adobe Dreamweaver.

• There are very limited tools to use (only 4!) with an option to import image resources. An option to support the new HTML5 media elements such as video can be a great added feature!

• The timeline can get a little different to work with initially, especially if you are comfortable working with Flash Professional.

Adobe Edge will definitely get interesting to work with as it matures.  As for Flash, I don’t see it going anywhere soon!

Mariam

Check out the Expressive Web Beta, an initiative by Adobe to showcase the modern web features!

There are different sessions covering multi-platform development, user experience and development tools suiting the skills of all attending. The ones I look forward to participating in are the ones which will be discussing HTML5, UI Design and LifeCycle. The Demo Jam on the second day of the event will also be an interesting one hour of app presentation by different developers.

I’ll probably be hanging around in the Community Lounge when not attending sessions so looking forward to meeting a lot of people.

Mariam