Posts Tagged ‘GBJam’

• By Rich

  Tags

  GBJam, Phaser, pixel, Retro

  Posted in

  Phaser

  20 comments

  Pixel Perfect scaling a Phaser game

  1st Aug 2014

  20

  

  With GBJam3 just started today I tend to get asked this a lot on twitter: “How do I scale my game and keep it crisp?”

  This is a perfectly valid question and is essential for games that rely on pixel art. And the answer is that there is no 100% fully cross-browser compatible solution. There are various CSS hacks and vendor prefixes you can try, but they won’t work on everything.

  However, if that was my final answer there would be no point in this blog post, right? When we created our lowrez jam game, which was a game running at a 32×32 resolution, we came up with the following approach that works much more reliably than any CSS hack. Here’s how to get it working:

  For this example I’ll assume you are making a GBJam game, so you’ve a restriction of 160 x 144 pixels. The same as the original Gameboy resolution. First create your Phaser game object:

  var game = new Phaser.Game(160, 144, Phaser.CANVAS, '', { init: init, preload: preload, create: create, render: render });

  The important things to note here are:

  1. Use the un-scaled resolution
  2. Always use Phaser.CANVAS as the render method
  3. Give an empty string as the DOM parent (the 4th parameter)

  Once the game object is created we use a new object to hold our scaled canvas:

  var pixel = { scale: 4, canvas: null, context: null, width: 0, height: 0 }

  Read More