Thursday, January 24, 2013

Incoming event: Global Game Jam 2013

Global Game Jam?

Global Game Jam (GGJ) is an event that happens in multiples locations all around the globe. The first edition was back in 2009 and it has been repeated yearly every since.


The objective: Make a game in less than 48 hours.

Here is an awesome trailer from last year's GGJ. You can get a pretty accurate picture on how the event goes. Plus, its super fun video to watch.



You can access the Wikipedia page for more information and details.

My experience with GGJ

I first found about the event last year. I was unsure about my participation. Finally, I decided not to go. Not the brightest of my decisions. The event was a huge success, congratulations to everyone who participated. Everyone did an outstanding work! Here is a picture of the uruguayan heroes:

An awesome group!

This year I will make up for that; I'll be participating at the site A+ Escuela de Artes Visuales here in Montevideo, Uruguay. Actually, there is another site for the event: Universidad ORT/Antel.

Going back to last year's GGJ, I got great feedback from my good friend Sebastián who participated along with other friends. The game his group did is called ParaParaParanoid, a platform game about a girl that is chased by ghosts of her past. The objective of the game is to collect memories that will help her overcome her paranoia.

ParaParaParanoid in action!

There is an awesome gameplay video created by IdealSoft. Check it out here! I think that the person playing there did not get the mechanics right away. Each of the shadow-chasing-characters travel through the very same path that you, the player, take. In that sense, their movements are 100% predictable and the gameplay evolves around this concept. Level design and item map distribution play a very important role. Really great stuff.

Another great game, and the only 3D game at our site was created by another friend: Federico Rocha and his group. The game is called Wuji GO! and its about a little snake-like-fella that travels through what it seems to be the perimeter of a doughnut (hehe) and has to collect opposite entities to keep its energy from depleting in a never ending journey. Each time a full round-trip around the doughnut is done, the snake-thing increases its speed. Check the gameplay video! It is a really fun experience.

They did an awesome job with the camera.

There were other great games created, this post only showcases the ones from the people I know more. Maybe this year I'll get to know all the other great minds behind the games :)

One thing that is missing here is that all games created in the jam have a common theme to follow. Last year's theme was the image of Ouroboros, a snake eating its own tail. Now go back and think about the games created. You'll get much more sense out of them.

Ouroboros!

It will be interesting to see what they have us prepared for this year.

Community and Social Networks

During the days of the event, Global Game Jam has a very big presence in Twitter. Participants are encourage to create twits with hashtags such as #GGJ, #GGJ2013. Here in Montevideo, Uruguay, we will be using #GGJUY.

If you have Twitter, don't forget to follow @globalgamejam!

I've also seen Global Game Jam on Facebook. I really like what they did with their timeline image.



Closure 

Here in Uruguay in these very same dates there is also another popular event being celebrated: Carnival. To be honest, I'm not very fond of it, though I do appreciate and understand it. Sort of.


Images like this might hint you into why the event appreciated all around the world.

Decisions, decisions: stay inside with a bunch of guys to create a videogame... or go outside and listen to some tambores while watching some girls shake it? Decisions, decisions...

Until next time!

Saturday, January 19, 2013

Conway's Game of Life - AS3 Project

Becoming God's pupil

A few months back I had this idea: What would it take to program life? This question has been raised many times by lots of people all over the world. In my case, I got the idea on my way back home while listening to the audiobook A Short History of Nearly Everything by Bill Bryson. As soon as I arrived, went online and raised this question to my good ol' friend Sebastián.


Interestingly enough, Sebastián had something to say about it: "What you are talking about already exists... have you heard of the Game of Life?"

Clearly, I did not know about it. So I did a little research about it.

The first Google results nailed it. Sebastián was talking about Conway's Game of Life. This wasn't exactly what I was aiming for, but I though it could be a good exercise to begin with.


I first read the Wikipedia article, then opened FlashDevelop and began coding. I got a first workable version very fast. I improved it a bit and added a bunch of maps. You can check this first version here. Click or drag to make the simulation advance one tick.

Some of these maps will come to an end even although they are supposed to be never-ending growing patterns. This happens because the map size is fixed and the patterns need more room than the one available.


Some technical details


Maps were defined by drawing points into white png images, like the ones above. Then from the code I would load them as BitmapData elements and process them pixel-by-pixel. White pixels represent dead cells while black ones represent cells with life.


Improving the solution

Now this time I did take my time to improve the implementation. Mostly because I felt that the logic of the solution was super easy to achieve.

I decided to improve the user experience.


  1. The background has now changed to a color that clearly differentiates from the maps. 
  2. Map borders are now all from the same width.
  3. Each map can be advanced separately.
  4. Rollover behavior has been added to each map, displaying the current tick count and a name for the map.
  5. Red map border changes into green when rollovered to indicate that it can be interacted with.
  6. Added a title and author text. Just because.

I can honestly say that these changes took as long (or even more) than programming the first implementation. The reason is that I did not have a clear idea on how to improve the solution UI-wise. So I tackled this problem by iterating through ideas, one by one.

Though it was not hard work, it did take quite some time.

I can even state that most of the creative stuff takes time, simply because one does not know exactly what one wants to achieve. Personally, I always have a hunch that guides me, but its feels like walking in a foggy terrain. I will know I've reached my destination once I arrive there. Not before, though I get a sense that I'm going in the right direction. Kinda hard to explain, actually.

Anyway, I have uploaded the source code into Github. If you are curious about it, check it out here.


Conclusion

I feel quite satisfied with the improved AS3 solution. After doing additional Googling about the Game of Life, I found that it would be really cool to explore additional visualizations for this. Maybe trying to play a bit more with the colors that are used, or make it 3D, maybe by using cubes of some other shape.

I'm still curious about the subject of programming life. Though this was a nice exercise, I feel that it was not enough to satisfy my hunger. I might continue exploring other possibilities in the future.

Finally, here's a happy panda:

Believe me, he is happy! 

Maybe if we could arrange pandas in a Conway's pattern that perpetuates their life... we could stop worrying about them going extinct!

Yeah, right...

Stay awesome!



Monday, January 7, 2013

CatTyping Challenge - AS3 Side Project

The game

CatTyping Challenge is a typing game I created back in July 2012. The game presents a list of words for the player to type. The objective of the game is to type as much of these words as you can minimizing spelling mistakes. You even have to take punctuation into account. There are even some words in Spanish. With accents.


As I always say, Try it Now! before you continue reading. Thanks.

You can also check out the source code at Github. Additional information can be found in the Technical details section bellow.

The motivation

I have very little memory where this idea came from. It do remember it was one of those surprise-gift projects of mine. I think it was born out of a conversation with Mar and Xime, about typing courses. I remember assisting to one of those when I was about 13. I really loved it!


There was also a super cool typing web application that I used a lot. I totally forgot the URL, though. But there was something missing. The missing elements were cats. And lots of them!

Of course, I could try to karma-whore the game on Reddit. Never did it, though.

The game

In this game the player has 30 seconds to type as much words presented as possible. Words are presented line by line. When all the words of a line are completed, a new line appears for the player to type.

The catch of the game is that whenever the player types a word correctly, the photo of a cute kitty is added on stage. But when a player makes a mistake then three kittens are removed at once. Life is tough.



Here's a screenshot of the playing screen. Nothing fancy:


The main elements in this game are:
  1. The list of words to type.
  2. Time remaining.
  3. Counter with words typed correctly.
  4. Counter with words typed wrong.
  5. The input area
While letters are being typed, the game will display if the current word is being typed correctly or not.
A word is considered written when the spacebar is pressed.

When time runs out you will see something like this:

Choosing green for the text above was not the greatest of the ideas.

Green words are the ones typed correctly. Red words are the ones typed incorrectly. Black words are the ones that have not been typed yet.

WPM means Words per Minute. 70% is the typing accuracy, calculated as OK words divided by OK + Not OK words, multiplied by 100.

In the lower part of the image there is a counter for the amount of kitty images onscreen and the amount of kitties that have run away (fallen). It was supposed to be something cute.

Technical details

It might look strange that the very first thing you see when launching the application is that it asks the player to "click somewhere!".

There is no real need to click it.

The reason for this is to give focus to the application. By default, the embedded Flash movie will not have focus. Every key pressed by the user will be captured by the containing page. Not by the Flash movie.

I used TweenLite for the kitten animation. Again, it's just a very simple and easy-to-use interpolation library.
For example, to make the kittens appear, the following code is used:


What is going on in the previous code is pretty self-explained. 
But because I feel like writing, here's some additional explanation:
  • A random bitmap is selected and added as a child. This class, Kitty, extends from Sprite.
  • Horizontal and Vertical positions (x & y) are set randomly, anywhere on the stage. A small margin of 100 pixels is taken off the stage to account for the bitmap's dimensions.
  • A starting transparency value is set (0.25).
  • A starting size value is set (1.4).
  • A starting rotation is randomly set. This value is in degrees!
  • An end rotation is randomly set. This value will be passed to TweenLite as a parameter.
  • TweenLite's .to() method is called. This method takes an object as its first argument (this in this case), then a Number value for the time it takes to perform the interpolation (1 second) and finally an optional "properties object".
  • In this case the properties object contains all the final values for scaleX, scaleY (value of 1), and ending rotation value, alpha value (0.5) and a function pointer for when the interpolation ends (myOnCompleteFunction).
  • Actually, after looking at the code I realized that the onComplete function was totally useless. I think it is still there because of some old code that got deprecated. Well, shit happens.

For the ending fireworks Flint particle engine was used. I'll do some dissecting some other time. Maybe. 

About the input of words, I attached an Event.CHANGE to the input TextField. In this way I do not have to be checking the keys pressed by the player. I only need to check the newly added character to the textfield. This character will be "formated". That is, it may be upper or lower cased, with or without an accent or any other strange symbol, etc.

If you are getting the game's source code from github, you will have to download both TweenLite and Flint particle engine library. Here is a screenshot of how my project folders look like with those folders included:


If you open the project's properties, class paths tab you fill find the following code sources:


Disclaimer

All of the images in the game, this post, and all my other posts have been taken from images.google.com. I do not claim to own the rights of any of these pictures. Expect for the ones I do actually own. You know, stealing other peoples kittens is no joke.

Great site, I just wish I had more experience with it

Afterthoughts

Can the game be improved? Hell yeah.
Will I improve it any time soon? Nope.
Why? Well, first of all it achieved its objective. In software development, you can always improve whatever is that you are creating. From the very beginning it is very important to set a clear objective of what you want to achieve. If not, you will be involved in a never-ending development life cycle. And that is no good for you nor your kittens.