Tag Archives: Flash

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

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

Box2D for Flash Games – Book Review

Box2D For Flash Games

Box2D is a highly popular physics engine. Its popularity lies not only in it being a free open source engine, but also because it has many features to produce realistic physics effects in games. It has also been used by many popular games across the mobile and web.

Flash is one of the supported platforms, therefore this port of Box2D has become almost a priority for many game developers wanting to use realistic physics with AS3. The book “Box2D for Flash Games” written by Emanuele Feronato is therefore a great resource for understanding of the Box2D physics concepts and getting your hands dirty with actual game development.

The book dive starts with basic examples without going too deep into the engine theory. Every new line of code added to the examples thereafter is further explained in detail. Concepts such as friction, density, primitive and complex body types, shapes and collisons are all covered . The chapters then take a step by step approach towards developing actual game levels from popular games such as Totem Destroyer and Angry Birds.

I personally follow Emanuele Feronato blog and know that he comes with tremendous experience in gaming. He contributes to the community with his gaming articles and this book only lets him share more refined and in depth information with his readers.

 

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

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

 

Running Flash (FLDH) on Television

Set-top boxes are very similar to mobile devices when it comes to developing and testing Flash content; speed, performance, memory issues, choosing between vectors and raster images; they all exists.

I had some hands on experience with an older version of Flash for set-top boxes, also known as Flash Lite for Digital Home, and also managed some testing with AIR on TVs.

Had a couple of takeaways while working with FLDH on set-top boxes and televisions –

  1. Flash content is universal. You could have a game or application that has been developed for a non-TV platform, and you could manage to run it successfully on a television set.
  2. You should not have complex code written in Flash, for instance complex 3D renderings, or extensive use of vectors can cause lag in performance.
  3. Content can be published as Flash Lite 2.1+ or Flash 8, but fscommands will not work. For instance, a command such as “Fullscreen” will be overlooked by the runtime.
  4. Most television content have something known as a “safe viewing area”. This refers to the visual with a 5-7% margin cut around the content edges during display. Most newer televisions may not have this overscan area, but it is always best to design content keeping the overscan area in mind i.e avoid placing any art or media in the corners.
  5. Mapping keys to the remote can be a challenge from the UI perspective. A good design is one where a user uses less keys and still manages to navigate without any help. In case of a TV, we have limited keys which a user may be familiar with for interactive content, i.e  the left/right/top/bottom and enter keys; ( no soft keys like mobiles). So if an application or game has a UI with several buttons, it should be visually displayed to the user.
  6. Managing memory and maintaining quality. This is a big challenge, especially when dealing with sounds, images and videos. With TV resolutions of 720p and 1080p, the quality of display can’t be compromised. Media of high quality should go through a good process of loading and unloading at frequent intervals for the platform to remain stable.
  7. While a well architectured code with OOP is a good programming practice, it can sometimes take a toll on performance and design.
  8. There is no community support for Flash Lite for digital homes. Most of it is trial based if you are developing content. Having a device connected to the television set is the best way to move forward.
Mariam

Adobe Community Champion

I’m glad to be part of the Adobe Community Champions Program starting 2011. The Champions program was launched this year in addition to the Adobe Community Professional (Expert) Program which has been around for many years. This is a great initiative by Adobe, to engage and involve the developer community and recognize their work. I am happy to be a part of it.

“Adobe Community Champions are the “megaphone” of the Adobe community, whose objective is to evangelize Adobe products beyond the existing circle of our Adobe ecosystem and helping connect people to the Adobe community.”

Mariam

Getting back to Blogging

I’ve been away from blogging for a very long time. Partially because I’ve been working on Flash based client projects, all of which fall under NDA and cannot be discussed. I was also involved in some interesting game development projects on the iPhone and Android platforms as a producer, where I learnt a lot about the platforms as well as development pros and cons of writing native code verses using engines and frameworks.

During the mid of last year, one of our applications was approved to receive a grant from the Open Screen Project Fund by Nokia and Adobe. The funded application is a gaming application that encourages awareness on global warming, and how we can contribute to the environment by being conscious in our actions. The application has 3 mini-games, a quiz, a virtual plant growing section and links where one can contribute to improving the environment. I’ll share some more details about this in one of the following posts as it is currently in the process of final QA before going live on the OVI Store.

Starting this year, I want to start writing more about technology and the many mobile platforms that support Flash. I’m very excited about the prospects of having Flash across platforms and screens and the evolution of Flash Lite on Nokia platforms. Hope to write more over the days.

Mariam

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