Friday, November 27, 2015

More Features for your Jade Templates

If you've seen today you might notice the Christmas lights hanging from the header. I wanted to decorate the site a little, but I was worried that I might forget to take them down at the end of December. I think I left the lights up on my house until March last year. It was really cold and I didn't want to go outside.

To prevent this from happening to my website, I decided to add some code which will check the date and automatically display the lights only during the Christmas season. Since the HTML for is generated by the Jade template system and Express, conditionally including some lights could be accomplished by putting a date check in the template for the comic page. The problem? The check for the Christmas season is a little more complicated than I cared to cram into a Jade template. And Jade/Express doesn't provide any utility libraries by default that help in this situation.

Fortunately, it's rather simple to add your own modules that can be used in your templates.

First, I made a holiday module that I can use to determine if we are currently in the Christmas season.

module.exports = function() {

    return {

         * Returns a Date object that represents Thanksgiving (US)
         * for this year. The fourth Thursday in November.
        thanksgiving: function() {

            var d = new Date();


            while (d.getDay() != 4) {


            return d;


         * This function returns true during the Christmas season.
         * I define that as Thanksgiving through the end of December.
        isChristmasSeason: function() {

            var monthToday = (new Date()).getMonth();
            var dateToday = (new Date()).getDate();

            return (monthToday == 11 || (monthToday == 10 && dateToday >= this.thanksgiving().getDate()));




This is a standard Node module that exports an object containing two functions. One returns a Date object for Thanksgiving in the current year. In the United States, Thanksgiving is the 4th Thursday in November, so the function finds the first Thursday and then adds 3 weeks. The second function returns true if the current date falls within the Christmas season. I have personally defined that as Thanksgiving (hence the need for the first function) through the end of December.

Now to enable this module in Jade templates, you just need to add it to the locals object in the Express app. Here's an example of how to do that with this particular module:

var express = require('express');

var app = express(); = require('./holiday')();

Any fields on the locals object are available in Jade templates. In my comic page template, I can now do do this:

doctype html
 include head
  include header
  if holiday.isChristmasSeason()
   include holidayHeader
   include comic
  include footer
  include js

The holiday object can be used anywhere it's legal to use JavaScript expressions in the template. I use it in the if block to see if I need to include the special holiday header.

You can use this technique to add whatever module you want to locals and then use them inside your templates. While Jade is not perfect, this capability adds a lot of flexibility to the framework.

Please continue to enjoy this Christmas season by viewing today's comic, which is, appropriately, about the Christmas season. comic for 27 November 2015

Wednesday, November 25, 2015

Small But Important Game Update

Today I took a break from adding any more serious capabilities to my Phaser platformer so that I could focus on a small but important change - the Science Frog images!

I said from the beginning that this was supposed to be a Science Frog game, but so far Science Frog has not been seen. That's because I re-used the frog spritesheet from the soccer game just so I could get stuff working in the code. Drawing the images always takes me a while and I prefer to get the coding first. At some point, though, I have to stop and fix the images.

I did sneak in a few minor code tweaks along with the new images. First of all, I am using half as many images as I was before. I only have pictures of Science Frog facing right. Instead of switching to a reverse animation sequence when he turns around, I am flipping the sprite by setting the scale.x value to be -1 or 1 depending on which direction he is facing.

frog.anchor.setTo(0.5, 0);

// normal direction for the sprites
frog.scale.x = 1;

// reverse direction for the sprites
frog.scale.x = -1;

The important thing here is that for the scale flip to work, the anchor of the sprite has to be 0.5 on the x-axis. Otherwise, the image gets drawn someplace you don't expect!

The other change is to use stop the animation and use only a certain frame when Science Frog is jumping or falling. This stops the effect of him flailing his arms and legs if you hold the arrow keys down while jumping. That just looked weird. For that, I just check to see if the y-velocity is non-zero and then set the sprite's frame accordingly.

function setAnimation(f) {

    if (f.body.velocity.y === 0) {

        // frog is on the ground

        if (f.body.velocity.x === 0) {

            // no animation, the frog is still
            f.animations.stop(null, true);

        } else {

            if (f.body.velocity.x > 0) {
                f.scale.x = 1;
            } else if (f.body.velocity.x < 0) {
                f.scale.x = -1;


    } else {  // frog is jumping up or falling down

        // no animation, use a fixed frame
        f.animations.stop(null, true);
        if (f.body.velocity.y < 0) {
            f.frame = 1;
        } else if (f.body.velocity.y > 0) {
            f.frame = 2;



That's all for today! Remember, you can play the game here, and view the complete source code on GitHub. Have a Happy Thanksgiving, and be sure to read today's comic before you prepare your turkey. comic for 25 November 2015

Monday, November 23, 2015

Attacking Enemies in my Phaser Platformer

Tossing Pencils
After adding some evil toads to my 8-bit style platformer last week, there were finally some things to avoid while jumping around in the game. Unfortunately, there was no way to defeat the toads. Typically, most enemies in these kinds of games can be killed in some way. This weekend I decided to add an attack capability to the game.

After debating an attack style for a little while, I decided that the basic attack capability should be for the frog to throw pencils. This is supposed to be Science Frog's game, but I haven't updated the frog sprite yet. As a basic attack, I think Science Frog would toss pencils.

Adding some attack pencils to the game turned out to be fairly simple. Phaser really does make game development easy!

The first step was to add a group of weapons to the game, along with a new key tracker to use for firing them off. I also added a variable called nextFire to limit how fast weapons can be thrown.

var weapons;

var FIRE_RATE = 250;
var nextFire;

function create() {

    // ... other stuff ...

    weapons =;
    weapons.createMultiple(3, 'pencil', 0, false);

    // ... other stuff ...

    fire = game.input.keyboard.addKey(Phaser.Keyboard.CONTROL);
    nextFire = + FIRE_RATE;


The createMultiple function on Phaser.Group objects takes 4 parameters. The first is the number of sprites to create. The second is the name of the sprite image to use. I added a "pencil" image to my assets for this purpose. The third parameter is the sprite frame to use, but my pencil only has one frame. The fourth parameter indicates if the sprite should exist. I set this one to false. Why would I create sprites that don't exist? How do I use them if they don't exist? Well, sprite "existence" really indicates if the sprite is currently interacting with the rest of the game. You can set a sprite's existence to false in order to temporarily disable it - and then re-use it later. That's exactly what I'll be doing.

The nextFire variable is set to a time in the future. That gets used later on, keep reading.

function update() {

    game.physics.arcade.collide(frog, layer);
    game.physics.arcade.collide(enemies, layer);
    game.physics.arcade.overlap(frog, enemies, hurtFrog, null, this);

    // see if weapons are hitting enemies
    game.physics.arcade.overlap(enemies, weapons, hurtEnemy, null, this);
    // ... other stuff ...

    if (fire.isDown) {
    // ... other stuff ...


I added another overlap check, this time between the enemies group and the weapons group. If a weapon is overlapping an enemy, the hurtEnemy function will be called.

The other new piece of the update function is the check to see if the fire key is being held down. I used the CTRL key for this. If it is down, the throwSomething function is called.

First, the hurtEnemy function:

function hurtEnemy(e, w) {
    if (!e.immune) {
        e.immune = true;
        e.alpha = 0.5;
        w.exists = false;
       , function() {
            e.immune = false;
            e.alpha = 1;
        }, this);

This function is very similar to the hurtFrog function I added last week. Here, the first parameter will be the enemy and the second will be the weapon that hit it. Just like I did for the frog, I use an immune flag to make sure the enemies can't get hurt too fast, and if they are hit there is a change to their alpha channel. After 200 milliseconds, the immune flag goes off and the enemy can get hurt again. The big difference between this and the hurtFrog function is the line that sets exists to false for the weapon. This will immediately make the weapon disappear so it can be recycled by the throwSomething function. And speaking of that function. here it is:

function throwSomething() {

    if ( > nextFire) {

        nextFire = + FIRE_RATE;
        var weapon = weapons.getFirstExists(false);
        if (weapon){
            weapon.exists = true;
            weapon.anchor.setTo(0.5, 0.5);
            weapon.lifespan = 1500;
            weapon.reset(frog.body.position.x+20, frog.body.position.y-20);
            weapon.body.velocity.y = -400;
            weapon.body.angularVelocity = 50;
            if(frog.direction == 1){
                weapon.body.velocity.x = 500;
                weapon.body.velocity.x = -500;



It seems like there's a lot going on here, but it's really very simple. First, the whole thing is wrapped in a check to see if the current game time is greater than the next fire time. If not, nothing happens. This ensures that the fire rate is constrained. If firing is allowed, the nextFire time is reset to some time in the future and then the fun happens.

The call to weapons.getFirstExists(false) gets the first weapon from the group that doesn't currently exist. Remember, the weapons will get set to not exist after they hit an enemy. If we have a weapon in that state, it gets set to exist again. It also gets a lifespan set on it, so that it will automatically set itself to not exist even if it doesn't hit an enemy after a certain amount of time. Its position gets reset to around the middle of the frog (since he's supposed to be throwing it), and it gets some velocity given to it. That's what makes it fly through the air. I set both x and y velocity so that it moves in a kind of arc motion. I may give different types of weapons different motion attributes at some point.

With those simple additions to the game, you can now throw pencils at frogs. Give it a try for yourself at or browse the complete source code on GitHub.

Also remember to check out today's comic! Science Frog doesn't throw any pencils in it. comic for 23 November 2015

Friday, November 20, 2015

Enemy Collisions in my Phaser Platformer

Earlier in the week I added some enemies to my 8-bit style Phaser platformer, but they were basically just images in the level. Bumping in to them didn't really do any damage. There was a little more work I had to do in order for them to become proper enemies.

If you read my post from Wednesday, you'd know that I created all the enemies from data in an object layer in the map. When I did that, I put all the enemy objects in a group called enemies. All of that took place in the game's create function. Checking collisions and hurting the frog takes place in the update function.

Here's what I wanted to happen. If the frog touches an enemy, he should get hurt. How much should probably vary by enemy but that's not extremely important at the moment. When the frog gets hurt, there should be some kind of visual indicator. For now, I've decided to set the frog's alpha channel to 50% for 500 milliseconds to indicate damage. For those 500 milliseconds, the frog can't be hurt again, and he should be thrown away from the enemy that inflicted the damage.

First, I added some fields to the frog object when I create it.

function createFrog() {

    // ... other stuff ...

    f.immune = false; = 3;

    // ... other stuff ...    

The immune field is just something I made up that should indicate if the frog is currently in that 500 millisecond period where he can't get hurt again. He's immune from further damage. The health field is actually provided by Phaser. You can assign a health value to a sprite, and then change it by calling damage or heal. When health reaches 0, the sprite is killed. The maximum value is arbitrary, so I set it to 3 for now.

Now in the update function, I add some more collision checks. First, I added a collision check between the enemies and the layer object. This will make the enemies sit on the ground and logs and stuff just like the frog does. Then I added an overlap check between the frog and the enemies. Why overlap instead of collision? If I checked for collision, the frog would push against the enemies and possibly even move them. I wanted encounters with enemies to only impact the frog. Checking for overlap allows me to call a function when two sprites are in collision but Phaser takes no action to remove the sprites from the collision state - I'll handle that manually. That's why I give the third parameter, hurtFrog, to the overlap function. The hurtFrog function will be called when overlap is detected. Here are the important parts of the update function:

function update() {

    game.physics.arcade.collide(frog, layer);
    game.physics.arcade.collide(enemies, layer);
    game.physics.arcade.overlap(frog, enemies, hurtFrog, null, this);

    if (!frog.immune) {
        frog.body.velocity.x = 0;

    // ... other stuff ...

    if (!frog.immune) {
        if (cursors.left.isDown) {
            frog.body.velocity.x = -150;
        } else if (cursors.right.isDown) {
            frog.body.velocity.x = 150;

    // ... other stuff ...


The other changes to update are to only set the frog's velocity if the frog is not in that immune state. This is basically to override the player's control over the frog. I'm going to essentially toss the frog out of the way regardless of what key the player might be holding down.

...Which brings us to the the hurtFrog function. This is where the action is!

function hurtFrog(f, e) {
    if (!f.immune) {
        f.immune = true;
        f.alpha = 0.5;
        if (f.body.position.x < e.body.position.x) {
            f.body.velocity.x = -300;
        } else {
            f.body.velocity.x = 300;
        }, function() {
            f.immune = false;
            f.alpha = 1;
        }, this);

Remember, this function will be called by Phaser when the frog overlaps with an enemy. The first parameter passed in will be the frog object and the second will be the enemy. This is the same order that they object are specified in when calling overlap. In this function, I first check to see if the frog is currently in that immune state. If he is, I do nothing. But if he isn't, I set the immune flag, set the alpha channel to 0.5, and do a little damage. Then comes the frog-tossing! To throw the frog out of the way of whatever enemy he just hit, I check to see where he is in relation to the enemy. If he's on the left side, I give him some velocity to toss him to the left. If he's on the right, I toss him to the right. Finally, I set that 500 millisecond timer. When time's up, the immune flag goes off and the alpha channel goes back to 100%. At this point, the frog can get hurt again.

You can give the game a try for yourself and let me know what you think. I am still playing around with the numbers for the toss velocity and such. The whole point of this sandbox level is to get the right feel for the game before I start making the real levels. The complete source code is on GitHub as well, if you want a closer look.

Also, don't forget to have a closer look at today's comic! comic for 20 November 2015

Wednesday, November 18, 2015

Adding Enemies to my Phaser Platformer

So far, my 8-bit style platformer has been nothing but a frog walking around. It was too safe. There was nothing bad for the frog to hit. To make a proper platformer, there must be some enemies. In response to this problem, I added some toads.

To accomplish this, I first added an Object Layer to my game map in Tiled. On this layer, I placed some tiles that were pictures of the toad. You don't actually have to use tiles here - the objects are only placeholders for Sprites that will be added in the game. You could just use rectangles or whatever, but I think it's nice to be able to see the enemies in the map editor.

In my example, as seen below, I called my Object Layer "others." The name will be important later.

Before changing the game code to utilize this new layer, I also had to add the toad spritesheet to my assets pack. The key name is "toad." Here is that part of the pack.json file:

        "type": "spritesheet",
        "key": "toad",
        "url": "assets/sprites/toad.png",
        "frameWidth": 64,
        "frameHeight": 64

Now it's time to make the toad appear in the game. This is made (almost) easy by Phaser's map.createFromObjects function. It takes objects from an Object Layer in your map and turns them into Sprites. I added the following lines to my game's create function:

enemies =;
enemies.enableBody = true;

map.createFromObjects('others', 6571, 'toad', 0, true, false, enemies);

You should be asking, "What do those parameters mean? Especially that 6571." The first parameter is simply the name of the object layer. Remember, I named mine "others". The second parameter is tricky - it is the gid of the objects that should be converted to Sprites. Where is the gid set, or even displayed, in Tiled? I have no idea. The only way I could find it was to look in the JSON after I saved the map. Basically, if you use a tile as your object all of them that use the same tile will have the same gid. You just have to figure out that that gid is. The following snippet from the map JSON shows the gid:


The third parameter is the name of the spritesheet from the asset pack, and the fourth parameter is the frame to use as a start. My toad sprite only has one frame right now, so I just set that one to 0. The next parameter is if the new Sprite should exist. I don't know why this would ever be set to false, so I set it to true. The sixth parameter selects for auto-culling. Auto-culled sprites are culled from the camera if not in range. The final parameter that I use is the group in which all these new sprites should be placed. I put them all in an enemies group so that it's easy to check for collisions later.

With these simple steps, I was able to add some evil toads to my game - and adding more is just as simple as editing the map. Phaser makes it very convenient for you to do stuff like this. If you want to see the game in action, it is playable at And make sure you read today's comic as well! comic for 18 November 2015

Monday, November 16, 2015

Review of my TopWebcomics Ad

Instead of doing another post about game progress today, I thought that I'd just give a quick update on my ad I ran on for the past several weeks. My run just ended on Saturday, and I'd like to review it.

To review, I put a special parameter in the link from the ad that I could use to track people who visit as a direct result of clicking the ad. Here's the stats for the past 4 weeks:

Total Comics Viewed44,121
Comics Viewed by Someone Who Clicked on the Ad15,285
Comics Viewed not related to the Ad28,836

So much like last time I checked, which was only a few days after the ad started running, about a third of the comics viewed were a direct result of the advertising. Combine this with the fact that overall site traffic has increased by around 50% since the ad started, and I would have to conclude that TopWebcomics advertising has blown away my Facebook advertising in terms of getting traffic to the site. As a bonus, 6 people added my comic to their "Favorites" list on over the past 4 weeks. While that doesn't seem like a big number, it is an increase of 50% as well.

My ad, in case you missed it.
I ended up with a cost-per-click of around $0.04. But once someone clicked through to my site, it was highly likely that they stayed and viewed several comics. Most of the increase in views was a direct result of people browsing through the complete set of comics after visiting the site for the first time. About 25% of the people who originally came from the ad came back on their own at least once.

Overall, I would say that I am highly satisfied with my experience advertising with TopWebcomics. I would do it again.

In other news, the test level for the 8-bit style platformer that I'm making with Phaser is now live at Give it a try if you have a few minutes, and feel free to send feedback. I'll try to make some significant updates this week, but I'm also working on adding some new features to the comic as well. Here's the link to today's comic, even without those new features. comic for 16 November 2015

Friday, November 13, 2015

Hit the Ground? Play a Sound!

I didn't get to add any enemies to my Phaser 8-bit style platformer this week, but I did add some sound effects. Even though I hadn't used background music before in a game before, it was very easy to add. Playing a sound when the frog jumps was also simple.

But what about playing a sound when the frog lands back on the ground? Not as easy.

First, the simple sounds. For background music, I used "Ouroboros" by Kevin MacLeod ( The jump and landing sounds were public domain from I added them all to my asset pack file. I gave the background music the key bgmusic1, the jump sound the key jump, and the landing sound the key thud.

In the create function I made the sound objects.

function create() {

    // ... other create stuff ...

    bgmusic = game.sound.add("bgmusic1");
    bgmusic.volume = 0.3;
    bgmusic.loop = true;;

    jumpSound = game.sound.add("jump");
    thudSound = game.sound.add("thud");


I start playing the background music right away, after setting it to loop and lowering the volume. I don't like the background music so loud that you can't hear the other sound effects. In Phaser, volume is set with a number between 0 (not audible) and 1 (full volume).

What do I do with the jump and thud sounds? Jump is easy.

function update() {

    // ... other stuff ...

    if (spacebar.isDown) {
        if (frog.body.onFloor() && jumpTimer === 0) {
            // jump is allowed to start
            jumpTimer = 1;
            frog.body.velocity.y = -400;
        } else if (jumpTimer > 0 && jumpTimer < 31) {
            // keep jumping higher
            frog.body.velocity.y = -400 + (jumpTimer * 7);
    } else {
        // jump button not being pressed, reset jump timer
        jumpTimer = 0;

    // ... other stuff


In the jump function I made on Wednesday, I simply add a call to there on line 10 when a jump starts. Couldn't be easier. Now for the hard part...

Playing a sound when the frog collides with the ground seemed obvious at first - just call in the optional collision function. The collide function lets you specify an optional function that is called when the sprites being checked actually hit each other. But this is not a good place to play a thud sound. The reason is that the frog and the ground are in collision for every frame in which the frog is sitting on the ground. The sound will play all the time, except when the frog is in the air because of a jump or a fall. Not exactly what I wanted.

function update() {

    game.physics.arcade.collide(frog, layer, function(f, t) {
        // -------------------------------------------
        // don't do this!
        // the sound plays almost all the time!
        // -------------------------------------------;

    // ... other stuff ...    


The trick is to set a flag when the frog is falling - that is, when the y-velocity is greater than 0. This could happen because he jumped or because he walked off a ledge. In either case, gravity pulls him down and the game engine sets the y-velocity to a value greater than 0. When this happens, I set a falling flag on the frog object. Then, I check to see if the frog's physics body is on the floor and the falling flag is true. If these two cases are both met, it means that the frog just hit the ground after a fall. It's there that I call and reset the falling flag to false. That was some alliteration.

function update() {

    game.physics.arcade.collide(frog, layer);

    if (frog.body.onFloor() && frog.falling) {
        frog.falling = false;;

    // ... other stuff ...    

    if (frog.body.velocity.y > 0) {
        frog.falling = true;

Now whenever the frog hits the ground, a thud sound is heard just once. I'm happy with these results and you'll be happy with today's comic. And remember, you can get the full source code of this game on GitHub! Okay, now for the comic: comic for 13 November 2015