Let there be light
March 6, 2012

Just very recently, one my readers sent me a mail asking which was the most efficient way to add support for day/night cycles in tile-based games such as in Tourist Resort, the final project of my book. I promised him that I'd try to write an article about this, so here it is.

By day/night cycles, I'm guessing that he was referring to the fact that as the sun sets, the tiles should get darker, and when the sun rises the tiles should get lightened up.

Before we discuss how to achieve that effect efficienty, we first need to talk about lights.

A Different way of Monetization for WebGames
January 31, 2012

Ok sports, gather around. I want to tell you a story. A long long time ago, on a planet not so far away, the Internet wasn't as incredible as it is today. Actually, unless you wanted to keep yourself informed (by reading news, etc.) or to get in touch with other people via email or BBSs there wasn't much to do either.

I'm not going to lie to you, I'm not that old, but before the internet existed if you wanted to keep yourself entertained by playing a videogame you could either get yourself a computer such as a commodore 64, or a Sinclair ZX Spectrum, an Atari, etc. and a game or if you didn't have the means to own any of those, you could go to an arcade room.

Adventures in the 3D World using CSS and JavaScript
January 17, 2012

EDIT: Google Plus doesn't allow you to embed public videos in external sites. Added links to the posts instead.

In case you haven't heard, as i expect none of you to do, i've been keeping myself pretty busy by working on an easy-to-use, minimalistic CSS-Powered 3D Framework called "Tracy" (Three-Dee + CSS + Crazy, don't tell me it doesn't make perfect sense).

I had experimented with 3D CSS before, but i really wanted to see if i'd be able to make a Wolfestein clone using this stuff as all the elements to make one were certainly there.

Making a Bejeweled Clone using HTML, CSS 3 Animations and JavaScript
December 18, 2011

WORK IN PROGRESS, DON'T SHARE JUST YET!

In case you didn't know, last week PopCap launched a WebGL-powered version of its famous game, Bejeweled (click here to play it). The port looks and works exactly like the original game as well, which is pretty nice. However, there are two problems with using WebGL that they could have avoided by using the approach that we'll be using in this article. First, is that the game doesn't work in Internet Explorer (as IE doesn't support WebGL) and second, is that obviously the game won't work on mobile devices.

When I wrote my "Let's make a Snake Game" article I stated that many 2D games can be solved by using a two-dimensional matrix, and Bejeweled is not the exception. If you really think about it, Bejeweled is just an 8x8 matrix filled with different indexes (numbers). The objective of the game is to align 3 or more rows or columns with the same index. When a row or a column of indexes is deleted, new indexes are added to the matrix to fill the empty places as seen in this GIF, and here's a visual representation of how the matrix looks like, which will give you a better idea of how it works:

However, you will notice that the initial grid is not completely random and instead have some pecularities in the initial matrix generation algorithm that equally distributes indexes always considering that at least one or more moves are possible. which is why (if you pay attention) you'll notice the emergence of some of the following patterns:

You'll also notice that you won't find groups of 3 or more elements with the same index anywhere on the matrix. While replicating the exact same algorithm used by PopCap in Bejeweled is outside the scope of this article, we can get a pretty decent replica by generating the matrix in three steps (the matrix is just 8x8, so performance efficiency is not a concern, really, besides... i'm trying to keep this simple).

The first pass will traverse the matrix column by column, starting on the first row (from the top left to the bottom right) generating a random index number between 0 and 6. If, while traversing the columns, we find that the current position minus 1, and the current position minus 2 are equal to the current random number, we'll assign that number to the current position plus 1, and generate a new random number to place in the current position instead (that of course, has to be different from the one we have right now).

Once we get to the bottom row and the last column, we'll start the second pass in which we'll start traversing the matrix top, down from left to right, just like we did in the first step. The objective of this pass is to avoid having groups of three or more elements aligned vertically. In case that we do find one, if we're located on a column index equal or less than 3, we'll move elements to the right. If our column index is greater than 3, we'll move elements to the left.

The last and final pass will be executing our index matching function, which we'll also use when the user makes a move.

WORK IN PROGRESS.

Using Paint/Photoshop/GIMP as a MapEditor
December 15, 2011

Many times I've seen developers go nuts to either: A) Find a map editor that can adjust to their game, B) Adjust their game to a predefined format exported by a map editor or C) Decided to make their own map editor.

Truth be told, map editors are extremely useful tools that can help us ease the development of levels for our game, but in practice, most of the time map editors are just grid editors that basically translate that a given graphic corresponds to a given tile type. While it's true that some of them also supports adding additional properties to each tile, in the most basic form that's all they do. Their sole purpose is to ease the creation of levels.

Some time ago I decided to make a small shooter game and had to pick one of those 3 options. After I carefully considered all three, I said to myself "I don't need all this mumbo-jumbo" and like most developers I convinced myself that I could get away by making my own solution, so I set to it and half an hour later I had a working sample.

Preloading Resources using resourceLoader.js
December 14, 2011

Back when i started developing the final project for my book i needed a simple but reliable way to preload assets such as images or sounds. I also intended to show a nice progress bar indicating... well, the progress of the load. I finally settled on developing a somewhat short, simple but efficient class called ResourceLoader that could handle images and sounds but can easily be extended to support other media types, such as videos, or JS scripts.

Using it is pretty simple, too. You just need to do:

var rl = new ResourceLoader(printProgressBar, function() {
    alert('Preloading complete!');
});

rl.addResource('image.png', null, ResourceType.IMAGE);
rl.addResource('music.mp3', 'audio/mp3', ResourceType.SOUND);

rl.startPreloading();

function printProgressBar() {
    var percent = Math.floor((rl.resourcesLoaded * 100) / rl.resources.length);
    // Use the percent variable somewhere in your game/app.
}

The complete code for resourceLoader.js is available on GitHub. 

Let's Make a Snake Game
December 12, 2011

Before we continue, i'll assume that you're using a modern web browser that supports HTML5, such as Chrome, Firefox, Opera, Safari or Internet Explorer 9/10. If you're not, i strongly recommend you to download any of them, otherwise you won't be able to try the examples.

I'm pretty sure we all know (and have played) this famous game about a snake that gets longer and longer as it eats small dots that show up randomnly on a map. It's fun and engaging so it makes it a fun little project to learn how to do game development using HTML5 and JavaScript.

So let's get started, shall we?

First Post
December 8, 2011

To mom: For teaching me how to read at such a young age. For teaching me how to be creative and to "live in the clouds" (AKA, being a dreamer). For all the love. For being my best friend for 21 years. For spoiling me by bringing those delicious sandwhiches to my desk on my 20-hour-long development/gaming sessions. A long time has passed, but i still miss you like i'd have lost you yesterday. May God keep you safe up there.

To dad: For teaching me how to think and view the world like an engineer. For explaining me how the world works, with luxury of details. For never getting tired of answering all my incredibly specific questions, and instead, embracing my curiousity. For being strict, and teaching me discipline. For buying my first, second and third computers and paying for the repairs when i fried the CPU back when i was learning ASM, which finally led me to meet one of my best friends. For teaching me that when life kicks you in the balls, you need to get back up and continue walking.

To my fiancee: For being my best friend, ally and partner in crime. For being patient with my extremely time-consuming endeavors and helping me keep my feet on the ground. I'd surely be on the street without your wise advices. For being there every time i needed you. For all the love you give me every day. For making me smile again every time that tragedy striked my life.

To my grandfathers and grandmothers: For teaching me that if you're willing to work hard enough, the sky is the limit. It doesn't matter where you started, both of you are proof of that. Also, for teaching me that my word is more important than any piece of paper. For teaching me to be decent, hard working and honourable.

To my friends and the rest of my family: For caring for me. For all the moments and experiences we've shared together so far.

To my former bosses and coworkers: For all the stuff we've worked on together over all these years. For making me love my profession every single day of my life. I still remember every single one of you.

To O'Reilly: For publishing my book.

To everyone at #BBG on irc.freenode.net: For being a constant source of inspiration and admiration.

And finally to you: For reading this blog.

Thank you.