CODEWITHSUNDEEP
javascriptphaser-framework
codingibberish
codingibberish

Reputation: 11

Why can't I draw a rectangle in Phaser 3 JS?

Using Javascript with Phaser 3, I'm trying to draw a rectangle to the canvas. Drawing a circle using the same method isn't a problem, but rectangles won't work. How do you draw a rectangle? I've demonstrated my current attempts to do so below. The circle shows but the rectangle doesn't. 

    <!DOCTYPE html>
<html>
<head>
    <title>Colour Circles</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

<script>


function create() {
    const rect = this.add.rectangle(200, 200, 30, 30, 0x4c7df3);
    const circle = this.add.circle(200, 200, 30, 0x4c7df3);

}

const config = {
  type: Phaser.WEBGL,
  parent: 'phaser-game',
  backgroundColor: 0xffc836,
  width: 440,
  height: 550,
  scene: {
    create,
  }
};

const game = new Phaser.Game(config);

</script>

</body>
</html>

Further: a rectangle will show with those code, but only so long as the rest of the code is there. If any of those lines are missing, the 'this.add.rectangle' command fails to work.

function create ()
{
  rect1 = this.add.rectangle(200, 475, 440, 75, 0x37c3be);

  const spacing = 4 / gameState.palette.length;
  const translation = spacing / 2;

  for (let i = 0; i < gameState.palette.length; i++) {
    let color = gameState.palette[i];
    let paletteCircle = this.add.circle(translation + spacing * i, 515, 22, color);


  }
}

Upvotes: 1

Views: 1903

Answers (1)

Ehsan Nazeri
Ehsan Nazeri

Reputation: 801

this line causes a problem

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

you should add phaser.js or phaser.min.js to your page
try this one It's the latest version.

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

More details can be found on the phaser docs
You can Find many useful examples here

Upvotes: 1

Related Questions