Everyone have their own top ten things that they want to do in their life. For me, one of these “things” is to develop a single player game mod which focuses on story telling rather than blasting off enemies with shiny rocket launcher. I had been looking into Valve Source SDK recently and decide to use it for my project.

Early screenshots

Before starting a project blindly, I need to refresh my memory on Source mapping. When I was using Hammer ages ago, it is known as Worldcraft. So, I decide to develop a short campaign for L4D2 as my exercise. Below are some early WIP screenshots. Click to them to enlarge images.

Currently, I had done a bit on the starting area. I know I should have plan out the whole map before putting details in it, but I just like detailing and can’t resist. Maybe the flow and game play of this map will end up like crap because of that.

Commands to hide HUD and Viewmodel

Anyway, to take screenshots without HUD and viewmodel for Source game. Type the following command in the console. (This is just a reminder for myself)

sv_cheats 1
cl_drawhud 0
r_drawviewmodel 0
r_drawvgui 0

LG Malaysia is hosting a web based casual game development contest two months ago. I was thinking to participate but was always hold back by office works. I never did anything major until one of my friend message me.

Ben, a game designer asked me about the progress on my game. I told him my situation and we decide to join forces for this project. We also manage to grab another friend, Adrian (game designer) to the team.

Everything seems to be good after the team is build but there is only one minor problem. We start late and just have like two weeks to work on the game before deadline. So, we meet up on one Sunday afternoon to brainstorm about game design, art styles and lock down all major decisions. After that, all communications were done online via messenger, and emails.

Game Introduction

Our game is known as “Life’s a Game: Live Borderless”, which is designed based on LG’s “Life’s Good” tagline. It is a mash-up of quick & whimsical mini-games depicting everyday life. On a side note, we only have this game title on the last day before submission.

Pixel Art

One of the issues while developing this game is deciding the art direction . Three of us in the team have different art style. If I forced both of my friends to follow my art style, I think the final work would not look good, as different people have different drawing stroke. So, we decide to go for pixel art since it is easier to imitate each other work in pixel art. More over, pixel art give a nostalgia feel of old console games.

Game Play

When I first read about this competition, the first idea that came into my mind is to develop a game base on LG’s “Life’s Good” tagline. And the most obvious way is to develop a game base on everyday life. Ideally, we want to have lots of mini games base on daily life activities. But due to time constraint, we lock the number down to 17 mini games/levels in this Flash game. Most of level is quite straight forward and simple in game play. For example, you need to shave your facial hair by clicking left mouse button for the level show in the image below.

Popular References

We also include some popular references in certain levels such as Revoltech, Danboard, classic batman & robin. For the level show in the image below, there are Mario and Luigi poster at the wall.

Easter Eggs

During final hour of development, we decide to include “easter egg” in some of the levels. In our game, “easter egg” are just hidden easter eggs. You can collect these eggs by clicking on them and it would trigger a slightly different ending if certain amount of eggs is collected.

A virtual Easter egg is an intentional hidden message, in-joke or feature in an object such as a movie, book, CD, DVD, computer program, web page or video game. – wiki

Wisdom Quotes

Another thing we decide to put into game during the last minute is the wisdom quotes scene. When the game ends, a wise old owl will tell the player some wisdom quotes from famous people base on their grades. Initially, we were only using quotes from famous real life peoples such as world leaders and politicians. But we found out certain quotes from cartoon characters is quite good as well, so we decide included them too.

Play The Game

You can play the game by visiting the link below. If you love the game, please vote for us. Click on “Launch Game” button on that site will open a pop up containing the game. If you didn’t see anything after clicking the button. It is most likely the browser is blocking the pop up.

Life’s a Game: Live Borderless – 612KB

I didn’t go to office today and I was staying at home to have some rest. But I don’t really like to spend my whole day by just sleeping and did nothing. So, I dig up an old Flash project that I had long neglected and continue to work on it.

This Flash project is actually a conversion of my “Lost” Flash from AS2 to AS3. Originally, the AS2 “Lost” Flash was based on a wallpaper design that I did for an art event during 2007. One of my friends saw the wallpaper design and told me that the idea could be implement into a simple website. So, I took up the challenge and make it into a simple yet interesting website (at least in my opinion).

Not long after I complete the AS2 version of this Flash, I go through the scripting again and saw how ugly the script was. Although the ugly code is not “visible” to the end user/visitors of my site, but the extensibility is very bad. It was quite hard to add in new features later on.

Being a person that obsessed with “clean” code, I start refactoring the code during 2008. Half way through the process, I realize I might as well completely re-write the script in AS3 OOP. But my AS3 OOP was quite bad back then, so the progress is snail pace and the project got stuck after a while.

Time flies and today is 2010. I finally finish converting this damn thing from AS2 to AS3 after sitting in front of my PC one whole day. Most of the half baked script had been dump and re-written. I also manage to add in a few new features along the way.

Multiple Objects

The AS2 version was just one single character. But now I could spawn multiple objects into this “Lost” Flash by just changing a parameter, thanks to good use of OOP object class. I could even take this class file and reuse it in another project. I never understand that OOP “reusability until recently. That’s the problem with the education system here, the lecturer ask you memorize “The benefits of OOP programming”, instead of teaching you how to code in OOP.

Updated Guestbook

I also manage to update the guestbook system. Visitor can now make star constellation when they leave their comments.

Visit this page to view the updated version and sign my guestbook. I hope there is no serious bug in this version. =)

Download

View the Flash!
Lost Wallpaper 1 Deviant page
Lost Wallpaper 2 Deviant page

Back then, most JavaScript usage I saw was just for something simple such as bookmark or pop up window. There weren’t many fancy examples but this is not true nowadays. Two years had pass since I heard about Ajax from a friend, I finally decide to spend some time on JavaScript.

JavaScript and ActionScript

Both JavaScript and ActionScript are based on ECMAScript which means they share identical syntax. So, I don’t really have a hard time to understand the basic of JavaScript.

JavaScript Game

For me, the best way to learn is to get my hands dirty instead of reading tons of text and did nothing. I manage did a simple Pong game even though my knowledge on JavaScript is limited.The game can be view at this page.

Pong (marketed as PONG) is one of the earliest arcade video games, and is a tennis sports game featuring simple two-dimensional graphics – wiki

Flash game is usually loop with an onEnterFrame event. But there aren’t any “frames” in JavaScript, so we will need to construct the game loop by using a setInterval() method. Both JavaScript and ActionScript’s setInterval is similar, which execute code periodically.

Of course this little game experiment I did doesn’t really show the power of what JavaScript could do. So, navigate to Google’s Chrome Experiments and have a look at some great experiments did by other PROgrammers.

Download

View JavaScript Pong Game
pong.js 2.69KB

JavaScript Framework

Besides writing your script from scratch, you could also utilize JavaScript framework which will ease your development process. Below are some of the many JavaScript frameworks available.
JQuery
MooTools
YUI
Prototype