SetVelocity

Phaser 3
1

Hello, I am using phaser with react (not the template) I get following error

ball.setVelocity is not a function
TypeError: ball.setVelocity is not a function
at Scene.create (http://localhost:3000/static/js/bundle.js:167:16)
at SceneManager.create (http://localhost:3000/static/js/bundle.js:170338:28)
at SceneManager.loadComplete (http://localhost:3000/static/js/bundle.js:170266:18)
at LoaderPlugin.emit (http://localhost:3000/static/js/bundle.js:6182:37)
at LoaderPlugin.loadComplete (http://localhost:3000/static/js/bundle.js:105764:18)
at LoaderPlugin.fileProcessComplete (http://localhost:3000/static/js/bundle.js:105738:20)
at ImageFile.onProcessError (http://localhost:3000/static/js/bundle.js:104747:25)
at data.onerror (http://localhost:3000/static/js/bundle.js:110009:21

my code is following

import React, { useEffect } from 'react';
import Phaser from 'phaser';

const MatchIT = () => {
    useEffect(() => {
        // Initialize Phaser game
        const config = {
          type: Phaser.AUTO,
          width: 800,
          height: 600,
          scene: {
            preload() {
              // Load assets (e.g., ball sprite)
              this.load.image('ball', '/home/yasir/phaser/phaser-react-game/src/assets/ball.jpeg');
            },
            create() {
              // Create ball sprite
              const ball = this.add.sprite(400, 300, 'ball');
              console.log(ball)
              ball.setVelocity(200, 200); // Initial velocity
    
              // Add a button to increase ball velocity
              const button = this.add.text(400, 550, 'Bounce!', {
                fontSize: '24px',
                fill: '#ffffff',
              });
              button.setOrigin(0.5);
              button.setInteractive();
              button.on('pointerdown', () => {
                ball.setVelocityY(-300); // Increase vertical velocity (simulate bounce)
              });
            },
            update() {
              // Check if ball hits top or bottom
              const ball = this.children.getByName('ball');
              if (ball.y < 0 || ball.y > 600) {
                ball.setVelocityY(-ball.body.velocity.y); // Reverse velocity
              }
            },
          },
        };
    
        new Phaser.Game(config);
      }, []);

  return <div id="phaser-container" />;
};

export default MatchIT;
2

Change to

const ball = this.physics.add.sprite(400, 300, 'ball');
3

This results in Cannot read properties of undefined (reading ‘add’)

4

Add

physics: { default: 'arcade' },

to the game config.

5

Cannot read properties of null (reading ‘y’)

code looks like this now

import React, { useEffect } from 'react';
import Phaser from 'phaser';

const MatchIT = () => {
  useEffect(() => {
    // Initialize Phaser game
    const config = {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      physics: { default: 'arcade' },
      scene: {
        preload() {
          // Load assets (e.g., ball sprite)
          this.load.image(
            'ball',
            '/home/yasir/phaser/phaser-react-game/src/assets/ball.jpeg'
          );
        },
        create() {
          // Create ball sprite
          const ball = this.physics.add.sprite(400, 300, 'ball');

          console.log(ball);
          ball.setVelocity(200, 200); // Initial velocity

          // Add a button to increase ball velocity
          const button = this.add.text(400, 550, 'Bounce!', {
            fontSize: '24px',
            fill: '#ffffff'
          });
          button.setOrigin(0.5);
          button.setInteractive();
          button.on('pointerdown', () => {
            ball.setVelocityY(-300); // Increase vertical velocity (simulate bounce)
          });
        },
        update() {
          // Check if ball hits top or bottom
          const ball = this.children.getByName('ball');
          if (ball.y < 0 || ball.y > 600) {
            ball.setVelocityY(-ball.body.velocity.y); // Reverse velocity
          }
        }
      }
    };

    new Phaser.Game(config);
  }, []);

  return <div id="phaser-container" />;
};

export default MatchIT;
6

This is null, because there’s no game object named “ball”.

Probably best to change all of these to this.ball.

// Create ball sprite
this.ball = this.physics.add.sprite(400, 300, 'ball');

// Check if ball hits top or bottom
if (this.ball.y < 0 || this.ball.y > 600) {/*...*/}
1 Like