Week 6 & 7 - Slider & Jigsaw

Slider is a a sliding puzzle game. You can play it here


Jigsaw is a jigsaw puzzle game. You can play it here


why puzzle games...

On vacation I noticed a lot of people were playing this jigsaw puzzle game and it got me wondering if I would be able to make a game in Phaser that could take any picture and turn it into a puzzle.

what I learned...

For Slider I used Phaser.Rectangle to grab a section of an image to use in bitmapData.

  var img = this.game.make.bitmapData(width, height);
  area = new Phaser.Rectangle(j*width, i*height, width, height);
  img.copyRect(pic, area, 0, 0);

  var tile_sprite = game.add.sprite(x, y, img);

It was a similar process for Jigsaw except I had to add a shape mask to make the jigsaw puzzle pieces.

  var img = this.game.make.bitmapData(w, h);
  area = new Phaser.Rectangle(j*width-(Math.abs(padX- width*0.15)), i*height-(Math.abs(padY - height*0.15)), w, h);
  img.copyRect(pic, area, padX,padY);

  var mask = this.game.make.bitmapData(bmdwidth, bmdheight);
  mask.copyRect(this.piecebmd, area, bmdwidth, bmdheight);

  var bmd = this.game.make.bitmapData(bmdwidth, bmdheight);
  bmd.alphaMask(img, this.piecebmd);

  Phaser.Sprite.call(this, this.game, x-offsetX, y-offsetY, bmd);

This was done in 3 parts, which can be broken up into the var names.

img grabs the section of the image to build the piece off of

mask is the puzzle piece shape which is another bitmap image that gets drawn at runtime.

bmd is where it's all pulled together using alphaMask.

other stuff

The source code is available on github
Slider source Jigsaw source

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