Using Classes in Phaser<\/h3>\n

Now, what does this mean for Phaser?<\/p>\n

It means that we can:<\/p>\n

\n
• write classes that extend Phaser’s classes<\/li>\n
• write much more reusable code<\/li>\n
• organize\u00a0out code more efficiently<\/li>\n<\/ul>\n

  Making a grid!<\/h3>\n

  For example, a lot of my games and projects need a grid. The grid needs to have objects added to it, and then arrange the objects in rows and columns. Now in Phaser, I would use a group for this, add each object to the group and then loop through the group using forEach. I do this so I’d like to write a class that I can just copy into my project folder whenever I need to use a grid.<\/p>\n

  So first I need to make a class named Grid.<\/p>\n

  class Grid {\r\n    constructor() {\r\n    \t\r\n    }\r\n}<\/pre>\n
  The second step is to make the Grid class extend Phaser’s group class. We can do this by using the extends keyword.<\/p>\n
  Phaser’s group class will be the parent of our Grid class.<\/p>\n
  class Grid extends Phaser.Group {\r\n    constructor() {    \t\r\n    \t\r\n    }\r\n    }<\/pre>\n
  The last step is to call the constructor of the parent(Phaser.Group) by using the super command and passing the instance of the game as a parameter. This is assuming you are running the code inside a phaser game, named “game”. Make sure that super is the first thing called inside the constructor.<\/p>\n
  class Grid extends Phaser.Group {\r\n    constructor() {\r\n    \tsuper(game);   \r\n    }\r\n    }<\/pre>\n
  Right now our grid doesn’t do anything more that a Phaser group. So why go to this trouble? Because now we can add in our own custom functions and variables!<\/p>\n
  Let’s start by passing in a parameter to the constructor named “cols” to represent the number of columns we want the grid to have and then setting that to a class variable.<\/p>\n
  class Grid extends Phaser.Group {\r\n    constructor(cols) {\r\n    \tsuper(game);   \r\n    \tthis.cols=cols;\r\n    }\r\n    }<\/pre>\n
  After adding the items, we need to arrange them in a grid so let’s make that function now. Note: This will only work well with items that are the same size.<\/p>\n
  arrange()\r\n    {\r\n    \t\/\/current row count\r\n    \tvar row=0;\r\n    \t\/\/current column count\r\n    \tvar col=0;\r\n    \t\/\/use the group's built in for each to loop\r\n    \t\/\/through all the children\r\n    \tthis.forEach(function(item)\r\n    \t{\r\n    \t\t\/\/set the position based\r\n    \t\t\/\/on the row, the column\r\n    \t\t\/\/and the height of the item\r\n    \t\titem.y=row*item.height;\r\n    \t\titem.x=col*item.width;\r\n\r\n    \t\t\/\/advance the column count\r\n    \t\tcol++;\r\n    \t\t\/\/if the column count is equal to the \r\n    \t\t\/\/number of columns set\r\n    \t\tif (col==this.cols)\r\n    \t\t{\r\n    \t\t\t\/\/go to the next row\r\n    \t\t\trow++;\r\n    \t\t\t\/\/reset the column to 0\r\n    \t\t\tcol=0;\r\n    \t\t}\r\n    \t}.bind(this));\r\n    \t\/\/use bind(this) to keep the 'this' keyword\r\n    \t\/\/to mean the class\r\n    }<\/pre>\n
  Now you can use the grid class like this:<\/p>\n
  var grid=new Grid(3);\r\n\/\/add nine sprites\r\ngrid.add(sprite1);\r\n....\r\ngrid.add(sprite9);\r\ngrid.arrange();<\/pre>\n
  What about extending a sprite?<\/p>\n
  It takes a little more work, but it can be done like this:<\/p>\n
  class LetterBox extends Phaser.Sprite {\r\n    constructor() {\r\n    \tsuper(game,0,0,\"letters\",0);\r\n\r\n    \t\/\/add to stage right away\r\n    \tgame.add.existing(this);\r\n    }\r\n    }<\/pre>\n
  In the super constructor for the sprite, the parameters are<\/p>\n
  super(game,x,y,\"library_key\",frame_number);<\/pre>\n
  The game.add.existing<\/em> will add the sprite to the stage right away after calling<\/p>\n
  var letter=new LetterBox();<\/pre>\n
  If you are planning on adding the instance of the class to a group, you can omit it.<\/p>\n
  Here is an example of using the Grid and LetterBox classes together with a few extra functions added.<\/p>\n\n\n