Tag Archives: HTML5

The year gone by, the year that is!

I’m writing after a really long time. Approximately after a year.

Do people still read blogs? Not sure, but I’ll still write one!

It’s been a long year, lots of reasons to celebrate, and lots to think and ponder over.

The year began with a visit to the Game Developer’s Conference in San Francisco last year. This was my first time at GDC and it was a great experience being around creative talent from the gaming industry and learning from them. I came back to India feeling a lot more motivated to start working on good ideas.

One of my games won a Brandon Hall Gold Award for the ‘Best Use of Games and Simulations for Learning‘. Brandon Hall Awards are one the most prestigious awards in the field of learning, so winning a GOLD was quite exhilarating. The game that won an award is called ‘Develop Your Drug’ and it takes the player through an end to end development cycle of a new drug.

I became part of the NASSCOM Special Interest Group for Applied Games and got an opportunity to learn about some very interesting serious games and their best practices, specifically those from the Dutch Applied gaming industry.  My shift from the commercial gaming industry to applied games enabled me to speak about my projects at the first NASSCOM SIG Applied Games meet-up at TCS.

I started developing games with Unity. It was long overdue since my focus till recently had be the Adobe Flash and AS3 platform. But the web just made Flash the bad guy, so Unity and HTML5 is what naturally came next!

Jordan was a destination I had been planning to visit since a long time. But the plans never transpired because I had my apprehensions about visiting a country whose geographic location is in the center of the Arab Spring chaos in the Middle East. But then in an instinctive moment, I went ahead and booked myself a trip last November, and thought I’d take each day as it comes. Turns out, it was one of my best decisions and the time spent in Jordan was indeed fantastic and memorable.

I spent lesser time online and sometimes never got online. But a digital detox always does good, right?

As the New Year is running in full swing now (a month has already gone by), I have no plans set for the rest of the year. But I do intend to write more, travel some more and build some great games.

Cheers and keep reading my posts!!

Mariam

Number Guessing Game using CreateJS

I’ve created a simple “Guess the Number” game in which the objective of the player is to guess the random number selected by the computer within the least possible moves. I’ve used the CreateJS libraries to create the game.

The advantage of using the CreateJS library for game development is that it helps manage graphics on the Canvas in a way that is similar to the Adobe Flash display list. It helps maintain a cleaner work-flow and gradually introduces you to building complex games. This does not mean the other libraries are any lesser in performance or capabilities. I chose CreateJS because I’ve been working with it recently for app development.

The game has been created using CreateJS has been uploaded so that you can play it before attempting to code it. (Refresh the page incase the game doesn’t open)

The game code below primarily covers the most essential features required to learn basic game development using Canvas, HTML5 and CreateJS. This includes –

  • Drawing shapes on the canvas with a fill and outline
  • Creating text and changing the value of the text at runtime
  • Working with Mouse Events
  • Working with Containers (grouping graphics into one object).

To see the complete code including the HTML file, you can download it from this game link.

Mariam

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

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

Flash vs Unity vs HTML5 at Nasscom GDC

The Nasscom GDC 2011 ended in Pune yesterday making it one of the well attended events in India. Since we don’t have many conferences like these happening here, it was great seeing this one unfold connecting the Indian gaming community on a single platform. It was also encouraging to see gaming now being accepted as an industry with students taking it up as a career option – something which did not exist some years back.

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.

Flash vs Unity vs HTML5 Panel at Nasscom GDC

Mariam

Adobe Edge and Flash – the coexistence!

“Flash is at the risk of being dethroned by the all new emerging HTML5 revolution!”

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!

FITC Mobile 2010

I’ve been reading about the FITC Mobile Conference recently, and am glad to know that it is back in it’s second year in Toronto, Canada. The event is scheduled to be held between 16th-18th September this year.

FITC is slated as one of the only events covering all aspects of mobile content development, such as iPhone/iPad, Android, Flash 10.1, Windows Mobile, HTML5, Unity, Marketing, Usability, and other relevant topics in the mobile world.

The event will have a good mix of technical and non-technical topics as well related to marketing, funding, and other business aspects of mobile development. Besides presentations, the event will have pre-conference workshops, demonstrations, and panel discussions for those attending.

You can go and check the event link to know more about the speakers and the companies presenting. It’s quite an impressive list.

Currently FITC has an Early Bird offer on the conference and pre-conference workshop ticket prices.

They have also offered a further discount of $50 on any event ticket. Please message me if you want to attend this event and avail the discount, and I will send across the code.

Mariam