Category Archives: Articles and Guidelines

Games that help medical researchers with their study

If you have played a game that communicates your responses in the game to scientists in the form of research data, then you are a citizen scientist.

Citizen science refers to the practice of participating and collaborating in scientific research to increase scientific knowledge. To participate in citizen science, you may not necessarily be a paid volunteer or be a professional at the subject being researched. All you need to do is contribute to data monitoring programs through your skills and mind.

Games have become an excellent medium to collect such information. Medical research has benefited a great deal through games because games cater to a large global audience consisting of different ethnicities and cultures.

Let me take you through some of the games used for medical research which I have played and have found quite interesting.

Sea Hero Quest

Sea Hero Quest

 

Sea Quest Hero is a mobile game specifically designed to study “spatial navigation”; one of the inital symptoms while identifying dementia. Dementia make it difficult for people to navigate in familiar places and environments.

In the game, players are expected to make their way through mazes of islands and icebergs, every second of which gets translated to scientific data. Two minutes spent playing Sea Hero Quest is equivalent to five hours of lab-based research.

The player is tested through 3 tasks – the first requires the player to remember 2D maps and navigate through 3D mazes, the second requires the player to collect flares in the maze and shoot at the buoy at the starting point, testing the players’ orientation, and the last task is to chase creatures and capture pictures of them.

The data collected from the game enables scientsists to study how thousands of people from different countries and cultures navigate through space. This also sheds light on how the players use their brain to navigate, thus aiding the future work on diagnostics and drug treatment programs in dementia research.

2.5 million people have contribute to this research which has been made in association with Alzheimer’s Research UK, University of East Anglia, University College London

Link : http://www.seaheroquest.com/en/

EteRNA

 

In EteRNA, the player assumes the role of an RNA Scientist to help invent new RNA molecules to combat infectious diseases like Tuberculosis.

What is an RNA you might want to know? RNA or Ribonucleic Acid is one of the three major biological macro-molecules that are essential to all known forms of life (the other being DNA and proteins).

Each RNA molecule is made up of 4 bases – adenine, guanine, uracil and cytosine.

In the game, the player has to connect these four bases and design complex new RNA molecules. While doing this, the player also unknowingly gives feedback on the biological function of the existing designs presented at the start of each level. Re-designing molecules, also known as folding molecules is key to combating infectious diseases, and the game does just that.

The game makes use of pattern matching skills of players. The game has no winning or losing criteria. The player either creates a design and moves to the next puzzle, or keep working on the existing design puzzle until a pattern is formed. There is a leader-board which shows the player where they stand among other players in RNA design creation.

Developed by scientists at Stanford and Carnegie Mellon universities, it is these folks who use the designs created by the players to decipher how real RNA works.

Link : http://www.eternagame.org/web/

Phylo

Phylo

 

Phylo is a game aimed at comparing genomes of various species that have existed down the centuries. Comparing genomes is known to help break down human DNA and identify new genes.

genome is any organism’s complete set of DNA, including all of its genes.  

Sequence Alignment is a way of arranging the sequences of DNA, RNA or protein to identify regions of similarity.

This game has been designed around the pattern recognizing and problem solving skills of humans. Sequences are presented to the player in the form of different colored blocks. The player has to attempt to create the highest score for each set of sequences by aligning or matching as many colors as possible and minimizing gaps between them.

All alignments in the game are said to contain sections of actual human DNA which have been speculated to be linked to various genetic disorders such as breast cancer. This alignment when rearranged by the player is received, analyzed, and stored in a database.

Phylo is supported by McGill University, Canada Foundation for Innovation, Genome Canada, CIHR.

Link : http://phylo.cs.mcgill.ca/

Foldit

Foldit

 

Foldit has been around for a long time. Infact EteRNA is a descendant of the Foldit game.

But while EteRNA revolves around designing RNA molecules, Foldit revolves around folding proteins.

Proteins exist in every cell of all living things. This includes cells in the muscle, brain, blood, and every organ. Inside those cells, proteins perform their own individual function to keep the human body running.

Proteins fold up into a very specific shapes. This shape specifies the function of the protein. For example, a protein that breaks down glucose for the cell to convert it to energy, will have a shape that recognizes only glucose. Likewise for proteins that send nutrients to your blood or signals to your brain.

For a scientist, knowing the structure of a protein is key to understanding how it functions independently or when targeted with medicine.

The game therefore uses the player’s pattern-recognition and puzzle-solving abilities to design or fold proteins in new ways.

This game is supported by UW Center for Game Science, UW Department of Computer Science and Engineering, UW Baker Lab, VU Meiler Lab, DARPA, NSF, NIH, HHMI, Microsoft, Adobe, and RosettaCommons

Link : https://fold.it/portal/

Stall Catcher
StallCatcher

 

Stall Catcher is a game designed to help researchers with their study on the Alzheimer’s disease. The goal of the game is to observe the sequence of images and decide whether the blood is flowing through the vessels or is stalled.

Alzheimer’s is known to occur when there is reduced blood flow in the brain. This is detected during imaging of the brain where blood vessels appear clogged by white blood cells that stick to the walls, blocking blood flow and causing a stall.

The game is designed to help researchers at Cornell University to search the brain for stalled blood vessels. Although the researchers are experienced enough to identify stalls, the team working on research may not be that large to analyze magnitudes of data they receive by themselves. The game therefore aims to speed up this research.

Link : http://stallcatchers.com/virtualMicroscope

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

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 Facebook Cookbook Review

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

 

Game success barometer? Does it exist?

Have we ever wondered what makes some games successful and others not. There are several bullet pointer articles that mention the dos and don’ts for game development, but none entirely guarantee game success. Actually there can never be any documented method to guarantee game success.

Games like movies rely on the audience views, if there is value for money it is successful, otherwise a failure. And there can never be only one aspect of a game that can make it successful…like films it’s always a team effort that makes it or breaks it!

I was listening to a video on Ted on how great leaders can inspire action and it got me thinking about how our approach towards game development can largely affect a success or failure of a game, if the principles from the video are put into action. To give you a brief on the video, Simon Sinek talks about the Golden Circle and the 3 rings of behavior that most people follow in the order of – What, How, and Why while talking about their product or idea.

Game Development in most cases begins with a ‘what’ game concept, mostly inspired by another successful game of a similar genre or an old arcade/online game. This is then followed by a ‘how’ for development where logistics like budgets, time estimates, teams involved, discussions on the development cycles etc are finalized. The ‘why’ is never reached because nobody ever knows what inspires them to develop a particular game idea.

Now think, if we reverse the order inside out i.e Why, How and What. Would that alter our approach to game development in any way? Lets try it to see a changed perspective on how we can look at game development now..

‘Why’ do I want to work on a particular game idea?
Is it because I am confident of thinking out of the box about an addictive concept with a high replay value? Or I believe the idea is unexplored and new for the audience, so they will be drawn to it making it very successful? Or I believe we have the potential to not limit ourselves and push the edge of the ideas we discuss, making the development process fun for ourselves while coming up with a fantastic game, and so on.
If an idea cannot convince you, it should be best dropped rather than putting more logistics into it.

‘How’ do I begin my game development process?
This shouldn’t be too difficult, if I am passionate and convinced, so my team will be!
A motivated team always puts in an extra effort to meet goals thus easing the complete development process.

‘What’ do I want to achieve with my game?
I want my game to reach you, my consumers!

This theory in relation to game development may not seem completely accurate in practice, but a reality also is, all good ideas have always come from innovators; those who have had the conviction to stand out from a crowd! And the Golden Ring says just that – think Why, How & What and not the other way round.
Just my two cents.

Mariam

Article launch on the new Adobe Game Technology Center – Developing games for Nokia S60 touch devices

I’ve authored a new mobile gaming article titled Developing games for Nokia S60 Touch devices. It covers game development details for Nokia S60 5th Edition devices using Adobe Flash Lite 3.1. The article was launched last evening to coincide with Adobe’s launch of the new Adobe Game Technology Center.

The Adobe Game Technology Center is a fantastic resource for Flash game developers across platforms.  It has articles, sample files, videos, tutorials – almost everything required to learn game development and enhance skills.

I hope that the article and new Game Center will prove to be a valuable resource for game enthusiasts like myself.

Mariam

Flash Lite Services API articles for the Nokia S60 5th Edition devices

Via biskero, the Forum Nokia Flash Lite Wiki has a new list of articles explaining the working of the Flash Lite Services API (via code examples) for the Nokia S60 5th Edition devices. The list of articles include –

CS001257 – Listing installed applications in Flash Lite

CS001256 – Launching an installed application in Flash Lite
CS001255 – Controlling vibra settings in Flash Lite
CS001253 – Displaying sensor data in Flash Lite
CS001252 – Listing messages in Flash Lite
CS001251 – Deleting a message in Flash Lite
CS001250 – Listening for incoming messages in Flash Lite
CS001249 – Sending an SMS in Flash Lite
CS001221 – Importing contacts in Flash Lite
CS001224 – Listing media files in Flash Lite
CS001225 – Organising contacts in Flash Lite
CS001223 – Listing contacts in Flash Lite
CS001222 – Listing calendar entries in Flash Lite
CS001220 – Importing calendar entries in Flash Lite
CS001219 – Exporting a contact in Flash Lite
CS001218 – Exporting calendar entries to a text file in Flash Lite
CS001217 – Deleting a contact entry in Flash Lite
CS001216 – Deleting a calendar entry in Flash Lite
CS001214 – Adding a calendar entry in Flash Lite

Mariam

Adobe Developer Article – Ten tips to help you develop better Flash Lite games

There is a new article available on the Adobe Mobiles and Devices Developer Center – Ten Tips to help you develop better Flash Lite games. This article is not specific to any Flash Lite version, and talks about game development right from 1.1 through 3.0

I authored this article after interacting with a set of Flash PC developers in India wanting to try out Flash mobile gaming. While interacting with them, I realized that a lot of them were thorough with their knowledge of Flash on desktop, but were not too confident when the same had to be applied to a mobile. So in this article, I combined a set of 10 tips which I think would be of good help to developers.

To summarize the 10 tips –
#1 – Always start with a base build and then port it to for multiple devices
#2 – Follow intuitive and correct key navigation and controls
#3 – Avoid hard-coding values and use variables and logic while writing code
#4 – Use old school collision detection methods
#5 – Choose between Frame based and Time based ActionScript
#6 – Maintain game progress and scores thus adding incentives for user participation
#7 – Keep your code organized and easy to maintain with classes
#8 – Choose the right font for your games
#9 – Replace arrays with strings in Flash Lite 1.1
#10 – Testing on actual device

Of course, there are more than 10 tips to share about Flash gaming, which I hope to share in the coming months, but for the article on Devnet…10 is what you have, so let me know what you think!

Mariam

Flash Lite article – Packing Lite: A mobile media interface design primer

Launched recently on the Adobe Developer Center is a new article called Packing Lite: A mobile media interface design primer, written by David Carroll, professor of media design at Parsons The New School for Design in New York City.

The article has an indepth explaination of testing and tranferring Flash Lite content on Nokia S60 handsets. It is extensively written to cover content testing in Flash 8 and Flash CS3 for management on both the Mac and the Windows platform.

The article also explains best methods for adapting your content to the 4 way directional pad on mobiles with a quick 4-way menu example.

You can read the article here.