Uncaught TypeError: this.add.rectangle is not a function

Phaser 3
1

This error message display when I am trying to create a rectangular.
i have followed this link and it works.
http://labs.phaser.io/edit.html?src=src/game%20objects/shapes/rectangle.js

This also happens when I am trying to add a grid.(Uncaught TypeError: this.add.grid is not a function)

 var g1 = this.add.grid(100, 100, 128, 96, 32, 32, 0x057605);

this is my code please help me to identify the problem,

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
     <title>Making your first Phaser 3 Game - Part 1</title>
     <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
     <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser-arcade-physics.js"></script>
     <style type="text/css">
         body {
             margin: 0;
         }
     </style>
 </head>
 
 <body>
     <script type="text/javascript">
 
         var config = {
             type: Phaser.AUTO,
             width: 720,
             height: 1280,
             physics: {
                 default: 'arcade',
                 arcade: {
                     gravity: { y: 300 },
                     debug: false
                 }
             },
             scene: {
                 preload: preload,
                 create: create,
                 update: update
             }
         };
 
         var player;
         var platforms;
         var cursors;
         var score = 0;
         var gameOver = false;
         var scoreText;
 
         var game = new Phaser.Game(config);
 
         function preload() {
             this.load.image('background', 'assets/mockup 2 - screen 2/bg-with-white-grid.png');
             this.load.spritesheet('dude', 'assets/mockup 2 - screen 2/moving-object-1.png', { frameWidth: 180, frameHeight: 50 });
             this.load.image('ground', 'assets/mockup 2 - screen 2/moving-object-9.png');
             this.load.image('block', 'assets/mockup 2 - screen 2/moving-object-3.png');
 
         }
 
         function create() {
 
 
             var r1 = this.add.rectangle(200, 200, 148, 148, 0x6666ff);
 
             var r2 = this.add.rectangle(400, 200, 148, 148, 0x9966ff);
 
             r2.setStrokeStyle(4, 0xefc53f);
 
             var r3 = this.add.rectangle(600, 200, 148, 148);
 
             r3.setStrokeStyle(2, 0x1a65ac);
 
             var r4 = this.add.rectangle(200, 400, 148, 148, 0xff6699);
 
             var r5 = this.add.rectangle(400, 400, 148, 148, 0xff33cc);
 
             var r6 = this.add.rectangle(600, 400, 148, 148, 0xff66ff);
 
             this.tweens.add({
 
                 targets: r4,
                 scaleX: 0.25,
                 scaleY: 0.5,
                 yoyo: true,
                 repeat: -1,
                 ease: 'Sine.easeInOut'
 
             });
 
             this.tweens.add({
 
                 targets: r5,
                 alpha: 0.2,
                 yoyo: true,
                 repeat: -1,
                 ease: 'Sine.easeInOut'
 
             });
 
             this.tweens.add({
 
                 targets: r6,
                 angle: 90,
                 yoyo: true,
                 repeat: -1,
                 ease: 'Sine.easeInOut'
 
             });
 
         }
 
         function update() {
 
         }
 
     </script>
 </body>
 </html>
2

The problem is in your Phaser version - if you look at the script's URL, you’ll see that you’re including 3.11, which is old and doesn’t have Shapes. Change it to 3.16.2, the latest version as of the time of writing. By the way, the first script tag is unnecessary - phaser_arcade_physics.js contains Phaser with Arcade Physics, so you don’t need to duplicate the code by including phaser.js as well.

To tackle your other question, I’m not aware of a grid game object in Phaser 3. Which documentation of tutorial did you get that from?

3

Thank you for the help.

This is the link that include grid game object
http://labs.phaser.io/view.html?src=src/game%20objects/shapes/grid.js

4

…Of course, I keep forgetting that grids exist as a type of Shape. Sorry for the confusion.