javascript - There are 3 method "this.add.rectangle()", "new Phaser.GameObjects.Rectangle()"

admin管理员组

文章数量:1391968

I'm new to Phaser 3 and trying to figure out the difference between the (at least) 3 methods to create rectangles. Here is the code

var game = new Phaser.Game({
  scene: {
    create: create
  }
});

function create() {
  let rect1 = this.add.rectangle(300, 100, 100, 30, 0x00f000, .5);

  let rect2 = new Phaser.GameObjects.Rectangle(this, 300, 150, 100, 30, 0xf00000)
  this.add.existing(rect2);

  let rect3 = this.add.graphics({
    fillStyle: {
      color: 0x00f0f0
    }
  });
  let rect = new Phaser.Geom.Rectangle(300, 200, 100, 30);
  rect3.fillRectShape(rect);

}

<script src="/[email protected]/dist/phaser.js"></script>

I'm new to Phaser 3 and trying to figure out the difference between the (at least) 3 methods to create rectangles. Here is the code

var game = new Phaser.Game({
  scene: {
    create: create
  }
});

function create() {
  let rect1 = this.add.rectangle(300, 100, 100, 30, 0x00f000, .5);

  let rect2 = new Phaser.GameObjects.Rectangle(this, 300, 150, 100, 30, 0xf00000)
  this.add.existing(rect2);

  let rect3 = this.add.graphics({
    fillStyle: {
      color: 0x00f0f0
    }
  });
  let rect = new Phaser.Geom.Rectangle(300, 200, 100, 30);
  rect3.fillRectShape(rect);

}

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/phaser.js"></script>

rect1 uses the simplest one which just needs 1 line of code.

rect2 instantiates the Phaser.GameObjects.Rectangle class. I guess it's more powerful if I need a bunch of rectangle-like objects where I can create a subclass of the class, predefine some properties and methods and instantiate my customized rectangle-like object.

rect3 uses Phaser.GameObjects.Graphics which I cannot image its use case where it beats the previous two. Could someone give me a hint?

• javascript
• phaser-framework

Share Improve this question Follow asked Jan 23, 2022 at 14:38 JJJohnJJJohn 1,09911 gold badge1616 silver badges4141 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The short Answer:

• if you need a Rectangle for bounderies or other calculations or so use: new Phaser.Geom.Rectangle(...)
• if you need a simple rectangle GameObject use: this.add.rectangle(...)
  • if you don't want to add it into the scene right away use: new Phaser.GameObjects.Rectangle(...)
• if you need special rectangle GameObject with more bells and whistles use: this.add.graphics(...)

The long Answer:

It depends on the tasks at hand. Since each Object creates more or less a differnet Object with different properties/methods.

• Type Phaser.GameObjects.Graphics:
  Is a GameObject but very "lowlevel", you can paint almost anything on it. like rectanlges, circles, ... but it's more work.
  Details can be found here https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html

Here an example of a special rectangle: https://phaser.io/examples/v3/view/game-objects/graphics/fill-rounded-rectangle

• Type Phaser.GameObjects.Rectangle:
  Is a GameObject as the Phaser.GameObjects.Graphics, but is specialized for creating rectangles.
  this.add.rectangle(...) and new Phaser.GameObjects.Rectangle(...) create both a rectangle of this type. this.add.rectangle is only a more convenient way to achive this, and adds it straight to the current scene.
  Details can be found here https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Rectangle.html)

Here an example of basic rectangles: https://phaser.io/examples/v3/view/game-objects/shapes/rectangle

• Type Phaser.Geom.Rectangle:
  Is a geometric Shape, good for bounderies and/or other calculations (but you can also draw with it).
  Details can be found here https://photonstorm.github.io/phaser3-docs/Phaser.Geom.Rectangle.html

Here an example of how it is used to check if an GameObject is in a specific rectangle: https://phaser.io/examples/v3/view/geom/rectangle/contains-rect

本文标签：