Category Archives: HTML

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

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

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

 

Need to design your mobile website – Refer to these tips

I recently read this very interesting article on designing websites for mobile phones. The article focuses on usability aspects of mobile websites with some snippets of HTML and CSS code. The good point about the article is that it does not focus on any particular mobile OS or technology making the tips are completely neutral in description.

Some more supporting links that I came across about designing mobile web experiences and thought I could share –

Mariam