Tag Archives: javascript

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

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!

PhoneGap Framework for Mobiles

I recently spent some time studying the PhoneGap framework with the purpose of creating content for Android devices. PhoneGap is an Open Source Mobile Framework that allows developers to author native applications with web technologies such as HTML, JavaScript and CSS. PhoneGap currently supports 6 platforms including Android, iOS, Blackberry, Palm WebOS and Symbian WRT (including QT).

Working with the framework made me realize how easy it is for any web developer to target multiple mobile platforms without having to write the native code, and yet achieve cross platform compatibility with the same content.

In other words, the content layouting is flexible and can run across different screen sizes and platforms without having to change the any part of the core code.

The framework usage is very simple and well explained on the website. Once you are setup with the framework within your preferred development environment, the only effort goes in writing your HTML files and compiling the builds with the HTML assets to test on the actual device. PhoneGap also has its own API functions which makes use of features such as Network, Accelerometer, use of Camera, Events, Data Storage etc.

Performance wise, it is good, but animating too many objects around the screen drops the framerate. I tried running a game and got a FPS of around 7-8 on older Android devices and around 12 on the newer ones such as the Nexus One.

Perhaps the biggest challenge was integrating jquery for database interaction, where network calls constantly failed. It was later understood that PhoneGap takes a little time to load, so if the device is not ready and the API calls to the network are made, then the network calls fail.

 

From the code above it is noticed that in order to use PhoneGap we have to load the phonegap.js script into the HTML file. This is one of the 2 code bases required for calling any PhoneGap functions (the other code base is native and is compiled when building the device build).

When the HTML loads, the first function called is the onLoad() function which checks whether PhoneGap is fully loaded. This check is done using the onDeviceReady event.

When the device is ready, an onDeviceReady event is fired. The next step is to check for network. This too is done using the PhoneGap functions – NetworkStatus. If the network exists, then the network related calls using jquery are used, otherwise an alert is sent to the user informing of no network.

I’ll soon be uploading a PhoneGap Android app, and will share the link for downloading when ready.

Mariam