If you follow our blog you've probably read some of our tutorials by now. One common request is how to polish your game. Since this is such an amorphous thing, and varies from project to project, we'll probably be doing several tutorials on how to polish various games.
So here's our first of an eventual series of polish tutorials: adding flickering hearts to our mobile browser game Onslaught! Defense.
When developing a feature for a game, it's important to first get the core functionality in place, and then to add polish later. For example, let's say we want monsters to spawn heart containers. The implementation steps might look something like this:
Here's what the code in our game looks like:
// Have the heart container "pop" in
polish.popIn(this, bind(this, function () {
// Wait a moment, then start to flicker away… then disappear
var numFlashes = 20;
this.numFlashes = 1;
// Wait 1 second
this.delayTween(1000);
// Add flashes to the queue
for (var i = 0; i < numFlashes; ++i) {
this.delayTween((30 - i) * 6, bind(this, function () {
// Toggle opacity
this.opacity = this.opacity == 1 ? 0 : 1;
// Gone through all the flashes? Then remove it
if (++this.numFlashes == numFlashes) {
this.remove();
}
}));
}
}));
Might be easier to read in this gist…
Basically it adds visibilty toggling to a tweening queue, decreasing the time between toggles as it goes through the queue. Then it removes itself when it's gone through them all. (Sorry, no, it's not open source yet.)
If you've got a really polished game, you might not stop there. You might have the most polished damn heart containers you've ever seen! That explode into tiny red birds that fly away while singing a synchronized song. While on fire.
But that's for future tutorials…
LDG © 2022 • Blog • Terms of Service • Video Policy • v2.1.2