Problems converting a phaser2 game to phaser3

Phaser 3
1

Greetings,
I am starting with phaser. I just found a old game in phaser 2. I was trying to find some of the equivalent functions in phaser 3, but couldn’t find it. Here is what my initial setup is looking like:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.min.js"></script>
    <style media="screen">
      canvas {   display : block;   margin : auto;}
    </style>
  </head>
  <body>

    <script>
    var config = {
        type: Phaser.CANVAS,
        scale: {
            mode: Phaser.Scale.ScaleModes.FIT,
            parent: 'phaser-example',
            autoCenter: Phaser.Scale.CENTER_BOTH,
            width: 400,
            height: 640
        },
        // width: 400,
        // height: 640,
        physics: {
            default: 'arcade',
            arcade: {
               gravity: { y: 0 }
            }
        },
        scene: {
            preload: preload,
            create: create,
            //update: update
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        console.log(game);
        
        this.load.setBaseURL('http://localhost:3000');


        this.load.image('ball', 'assets/images/ball.png');
        this.load.image('hoop', 'assets/images/hoop.png');
    		this.load.image('side rim', 'assets/images/side_rim.png');
    		this.load.image('front rim', 'assets/images/front_rim.png');

    		this.load.image('win0', 'assets/images/win0.png');
    		this.load.image('win1', 'assets/images/win1.png');
    		this.load.image('win2', 'assets/images/win2.png');
    		this.load.image('win3', 'assets/images/win3.png');
    		this.load.image('win4', 'assets/images/win4.png');
    		this.load.image('lose0', 'assets/images/lose0.png');
    		this.load.image('lose1', 'assets/images/lose1.png');
    		this.load.image('lose2', 'assets/images/lose2.png');
    		this.load.image('lose3', 'assets/images/lose3.png');
    		this.load.image('lose4', 'assets/images/lose4.png');
    }


    var hoop,
 		left_rim,
 		right_rim,
 		ball,
 		front_rim,
 		current_score = 0,
 		current_score_text,
 		high_score = 0,
 		high_score_text,
 		current_best_text;


function create() {

	game.physics.startSystem(Phaser.Physics.P2JS);

	game.physics.p2.setImpactEvents(true);

  game.physics.p2.restitution = 0.63;
  game.physics.p2.gravity.y = 0;

	collisionGroup = game.physics.p2.createCollisionGroup();

	score_sound = game.add.audio('score');
	backboard = game.add.audio('backboard');
	backboard.volume = 0.5;
	whoosh = game.add.audio('whoosh');
	fail = game.add.audio('fail');
	fail.volume = 0.1;
	spawn = game.add.audio('spawn');

	game.stage.backgroundColor = "#ffffff";

	// high_score_text = game.add.text(450, 25, 'High Score\n' + high_score, { font: 'Arial', fontSize: '32px', fill: '#000', align: 'center' });
	current_score_text = game.add.text(187, 312, '', { font: 'Arial', fontSize: '40px', fill: '#000', align: 'center' }); // 300, 500
	current_best_text = game.add.text(143, 281, '', { font: 'Arial', fontSize: '20px', fill: '#000', align: 'center' });// 230, 450
	current_best_score_text = game.add.text(187, 312, '', { font: 'Arial', fontSize: '40px', fill: '#00e6e6', align: 'center' }); // 300, 500

	hoop = game.add.sprite(88, 62, 'hoop'); // 141, 100
	left_rim = game.add.sprite(150, 184, 'side rim'); // 241, 296
	right_rim = game.add.sprite(249, 184, 'side rim'); // 398, 296

	game.physics.p2.enable([ left_rim, right_rim], false);

	left_rim.body.setCircle(2.5);
	left_rim.body.static = true;
	left_rim.body.setCollisionGroup(collisionGroup);
	left_rim.body.collides([collisionGroup]);

	right_rim.body.setCircle(2.5);
	right_rim.body.static = true;
	right_rim.body.setCollisionGroup(collisionGroup);
	right_rim.body.collides([collisionGroup]);

	

	cursors = game.input.keyboard.createCursorKeys();

	game.input.onDown.add(click, this);
	game.input.onUp.add(release, this);


	var instructions = document.createElement("span");
	instructions.innerHTML = "Instructions: Quickly drag the ball to shoot the ball into the hoop!";
	document.body.appendChild(instructions);
}



</script>

  </body>
</html>

But the problem here is that game.physics is undefined. And I can’t find equivalent functions of startSystem(), setImpactEvents(), p2.createCollisionGroup,game.add etc.
can anyone help me out here?

2

:wave:

There’s no p2 physics in Phaser 3. :frowning: