“This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Here are some of the key concepts and issues involved in phaser development:

1. The coordinate system

One of the most important points in the game world is the coordinate system. Everything visible to the naked eye is based on the coordinate system. Since phaser2 is implemented using canvas at the bottom, its coordinate system is exactly the same as that of canvas, with the origin (0,0) located in the upper left corner of the visible region and extending indefinitely from left to right.

Of course, in some scenarios it may be necessary to move the origin of the coordinate system to the center of the visible area for ease of calculation and adaptation of different models. The movement of the origin can be done by [Phaser].anchor. Set.

2. The elves

Sprites are the most important part of the game world, and almost all of the players in the game are sprites. Sprites can be divided into several different types based on their types, but here are just some of the most common ones in daily development.

1. The picture image

It has only the most basic properties of sprites, no other properties, like atoms, and is the lowest member of the Sprite system.

2. Regular Sprite

In contrast to images, sprites have physical properties as well as basic Sprite properties (physical properties are used for physical collisions, in other words, images cannot have collision events).

Two ways and differences of elf destruction

  • destroy

  • kill

Destroy destroys sprites from memory at the same time they are destroyed. Kill simply destroys the Sprite. You can reset the Sprite to put it back into the game world.

Note that sprites can still be retrieved from the Game’s cache property after being destroyed from memory.

3. Spritesheet

The Sprite atlas is a Sprite map of n sprites of the same width and height, and the Sprite animation is achieved by switching positions (i.e. index). More common application scenarios: character actions, special animation effects, etc.

3. The event

Phasers also have events, common ones being click events, keyboard events, and draP events.

One thing to note is that you need to enable the Sprite event capability in click and drag interaction events.

[Phaser].inputEnable = ture

    const sprite = game.add.sprite(300.300.'infor');

    sprite.inputEnabled = true;

    // Drag is allowed
    sprite.input.enableDrag();

    // Vertical direction
    sprite.input.allowVerticalDrag = false;

    // Horizontal direction
    sprite.input.allowHorizontalDrag  = false;
Copy the code

4. Physical collision

To implement collision detection, you need to enable the physics system in the game world, and then add the Sprite that will perform the physics collision detection to the physics system.

    game.physics.startSystem(Phaser.Physics.ARCADE)
Copy the code

This is then done by doing collision detection in the UPDATE method

    game.physics.arcade.collide(sprite1, sprite2)
Copy the code

5. The debug debugging

In game development, the debug feature can be very useful, especially for troubleshooting problems in game scenarios that are not understood.

    // Check the basic Sprite letter
    game.debug.spriteInfo(sprite, 100.100.'#fff');

    // Check the physical volume of the Sprite
    game.debug.spriteBounds(sprite);
Copy the code

Recommended places to study:

  1. www.phaser-china.com/example-2.h… (Phaser Station)
  2. www.phaser-china.com/tutorial-de… (Must-see tutorial)