Phaser

Question 1

LEARN PHASER: BASICS

Draw A Circle

Answer 1

In this exercise, we’re going to cover how to make a simple geometric shape in Phaser. A Circle! To do this, we’re going to use the method this.add.circle(). This creates a GameObject that we can use to represent a circle in the game. GameObjects can have different animations or interactions that we can add to them, but for now, we’re going to focus on drawing them. To make a circle we provide this.add.circle() with four arguments in the following order:

• The x coordinate for the center of the circle.
• The y coordinate for the center of the circle.
• The radius
• The fillColor

Question 2

Draw A Sprite

this. load.image(）
this. add.sprite()

Answer 2

Phaser gives us very similar tools to create a GameObject for sprites that we provide. A sprite is an image that is intended to represent a character, enemy, or some other object in a game. We use image files for a lot of different things in games, including backgrounds and icons, but sprites represent a person or item inside the game itself.

In order to add a sprite we can call this.add.sprite(). However, we need to load in the image we want to use as a sprite in an earlier step. preload() is the name of the function that happens before create(). Where create() is about setting up all the game objects to set the stage for our game, preload() is about loading in all asset files that we’ll be using. “Assets” could refer to lots of things but, for now, our assets will consist of sprites, background images, in-game sounds, and background music.

So the two steps to creating a sprite in your game are: Loading the image in preload() with this.load.image() which takes two arguments: a key that you’ll use to refer to it and the path to the image itself. The path can be a local file or the URL for a resource hosted elsewhere on the web.

Creating the GameObject in create() with this.add.sprite() which requires three arguments: the x value, the y value, and the key used when you loaded the image.

Question 3

Draw A Background Image

Now that we’ve covered drawing a sprite, let’s talk about drawing a background image. A background image is not a sprite — usually the player will not interact with the background at all. Because of this, we don’t need a sprite object for our background images. We still need to load in the image in our preload() function but we can use this.add.image() instead of this.add.sprite():

Answer 3

Question 5

Create A Config

Answer 5

We can do that by calling new Phaser.Game(). Phaser.Game() by itself creates a new element and appends it to your HTML document. This element allows Phaser to draw sprites and shapes to a website.

In order to make games of our own design, we call Phaser.Game() with an object that specifies some meta-information about the game. We define that object beforehand and conventionally name the variable config. Here are some of the keys we can define in a config:

• height: the height, in pixels, of the Phaser creates.
• width: the width, in pixels, of the Phaser creates.
• parent: the HTML element that Phaser will place the element inside of.
• backgroundColor: the background color of our game, usually given in hexadecimal.
• type: the Renderer Phaser will use: either Phaser.WEBGL which offers some additional features while drawing or Phaser.CANVAS which can run on more browsers. The default, Phaser.AUTO, checks if the browser supports WebGL and, if not, switches to canvas.