Week 3 - Super Scoopers

You can play the game here

This is the 3rd game in my #onegameaweek challenge. Where you make and sell ice cream cones.

Super Scoopers

Why Scoop Ice Cream...

I've seen a lot of these cooking games and never really got the appeal, I figured it might help me understand them if I made one myself. I underestimated how much time would actually go in to making a game like this, and subsequently it's pretty basic, and lacking much of the functionality I had originally intended to include.

So what went wrong

Time management for this one wasn't very good if I'm being honest. But mostly, I had a really hard time getting motivated to make it, and unfortunately that shows.

What I learned

More than anything technical, I think I learned, that inorder to make a game a week I really have to manage my time well. Also, I should try to stick to games I think will keep my interest.

It would be unfair to say that I didn't learn anything from this process, and although this isn't entirely new. I have found that I use bitmapData as a simple way of drawing place holder art. For exampe a triangle for the cone, circle for the ice cream scoops and rectangles for the table.

Before:
before

After:
after

Some convenience classes for making said shapes.

  makeCone: function(size, color) {
      var bmd = this.game.add.bitmapData(size, size);
      bmd.ctx.clearRect(0,0,size,size);
      bmd.ctx.strokeStyle = '#FFF';
      bmd.ctx.fillStyle = color;
      bmd.ctx.lineWidth = 2;
      bmd.ctx.beginPath();
      bmd.ctx.moveTo(0, 0);
      bmd.ctx.lineTo(size/2, size);
      bmd.ctx.lineTo(size, 0);
      bmd.ctx.fill();
      return bmd;
    },
    makeCircle: function(circSize, color) {
      var bmd = this.game.add.bitmapData(circSize, circSize);
      bmd.circle(circSize/2,circSize/2,circSize/2, color);
      return bmd;
    },
    makeBox: function(x,y) {
      var bmd = this.game.add.bitmapData(x, y);
      bmd.ctx.beginPath();
      bmd.ctx.rect(0, 0, x, y);
      bmd.ctx.fillStyle = '#fff';
      bmd.ctx.fill();
      return bmd;
    },

Once those are in place you can make a sprite or button as usual, you just substitute in the shape. For color, I'd either specify it as a parameter or just make it white and tint the sprite after.

ex:

    this.cone = this.game.add.sprite(width, height, this.makeCone(50, '#fff'));

Which would make a 50px white triangle.

Anyway, I find it a quick way to get right to coding and also to help establish scale for the final art assets.

Other Stuff

As usual, the source code is available on github here

Anyway, that's all for now. See ya in the next one :)