phaser | fast 2D game framework for making HTML5 games | Game Engine library

by photonstorm JavaScript Version: v3.55.2 License: MIT

Download this library from

kandi X-RAY | phaser Summary

phaser is a JavaScript library typically used in Telecommunications, Media, Media, Entertainment, Gaming, Game Engine, Three.js, WebGL applications. phaser has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i @jwhite0042/phaser-ce' or download it from GitHub, npm.

Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development. Along with the fantastic open source community, Phaser is actively developed and maintained by Photon Storm. As a result of rapid support, and a developer friendly API, Phaser is currently one of the most starred game frameworks on GitHub. Thousands of developers from indie and multi-national digital agencies, and universities worldwide use Phaser. Take a look at their incredible games. Visit: The Phaser website and follow on Phaser Twitter Play: Some of the amazing games #madewithphaser Learn: API Docs, Support Forum and StackOverflow Code: 1770+ Examples (source available in this repo) Read: The Phaser World Newsletter Discord: Join us on Discord Extend: With Phaser Plugins Be awesome: Support the future of Phaser.

Support

Quality

Security

License

Reuse

kandi-support Support

phaser has a medium active ecosystem.
It has 30320 star(s) with 6527 fork(s). There are 1246 watchers for this library.
It had no major release in the last 12 months.
There are 167 open issues and 3571 have been closed. On average issues are closed in 75 days. There are 32 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of phaser is v3.55.2

phaser Support

Best in #Game Engine

Average in #Game Engine

phaser Support

Best in #Game Engine

Average in #Game Engine

quality kandi Quality

phaser has 0 bugs and 0 code smells.

phaser Quality

Best in #Game Engine

Average in #Game Engine

phaser Quality

Best in #Game Engine

Average in #Game Engine

security Security

phaser has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
phaser code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

phaser Security

Best in #Game Engine

Average in #Game Engine

phaser Security

Best in #Game Engine

Average in #Game Engine

license License

phaser is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

phaser License

Best in #Game Engine

Average in #Game Engine

phaser License

Best in #Game Engine

Average in #Game Engine

build Reuse

phaser releases are available to install and integrate.
Deployable package is available in npm.
Installation instructions are not available. Examples and code snippets are available.

phaser Reuse

Best in #Game Engine

Average in #Game Engine

phaser Reuse

Best in #Game Engine

Average in #Game Engine

Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

phaser Key Features

Cerebral Fix

MoPub

Facebook

Game Distribution

GameCommerce

Mozilla

Texture Packer

TwilioQuest

Poki

CrazyGames

Lagged

Nakama

Clone the git repository via https, ssh or with the GitHub Windows or Mac clients.

Download as zip

Download the build files: phaser.js and phaser.min.js

phaser Examples and Code Snippets

See all related Code Snippets

NPM

Copy

Download

npm install phaser

CDN

Copy

Download

&lt;script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"&gt;&lt;/script&gt;

TypeScript Definitions

Copy

Download

"typeRoots": [
    "./node_modules/phaser/types"
],
"types": [
    "Phaser"
]

Create Your First Phaser 3 Example

Copy

Download

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser-arcade-physics.min.js"&gt;&lt;/script&gt; 
&lt;/head&gt;
&lt;body&gt;

    &lt;script&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

How to read position x of Shape Object when during tween

Copy

Download

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";    

class Circle extends Phaser.GameObjects.Shape {
    constructor(scene, x, y) {
        super(scene, x, y);
        this.circle = scene.add.circle(x, y, 20);           
        this.circle.setStrokeStyle(3, 0x05F9FB);
    
        this.tween = scene.tweens.add({
            targets: this.circle,
            x: 400,
            y: 120,
            duration: 3000,
            yoyo: true,
            repeat: 3
        });
    }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 163,
    scene: {
        create,
        update
    }
}; 

function update(){
    this.info.setText(`x: ${this.enemy.circle.x.toFixed(0)}\ny: ${this.enemy.circle.y.toFixed(0)}  `);
}

function create () {
    this.enemy =  new Circle(this, 100, 100);
    this.info = this.add.text(20,20, '', 0xffffff);
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

 class Circle extends Phaser.GameObjects.Shape {
     ...
     getPosition(){
         let { x, y } = this.circle;
         return { x, y };
     }
 }

-----------------------

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";    

class Circle extends Phaser.GameObjects.Shape {
    constructor(scene, x, y) {
        super(scene, x, y);
        this.circle = scene.add.circle(x, y, 20);           
        this.circle.setStrokeStyle(3, 0x05F9FB);
    
        this.tween = scene.tweens.add({
            targets: this.circle,
            x: 400,
            y: 120,
            duration: 3000,
            yoyo: true,
            repeat: 3
        });
    }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 163,
    scene: {
        create,
        update
    }
}; 

function update(){
    this.info.setText(`x: ${this.enemy.circle.x.toFixed(0)}\ny: ${this.enemy.circle.y.toFixed(0)}  `);
}

function create () {
    this.enemy =  new Circle(this, 100, 100);
    this.info = this.add.text(20,20, '', 0xffffff);
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

 class Circle extends Phaser.GameObjects.Shape {
     ...
     getPosition(){
         let { x, y } = this.circle;
         return { x, y };
     }
 }

-----------------------

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";    

class Circle extends Phaser.GameObjects.Shape {
    constructor(scene, x, y) {
        super(scene, x, y);
        this.circle = scene.add.circle(x, y, 20);           
        this.circle.setStrokeStyle(3, 0x05F9FB);
    
        this.tween = scene.tweens.add({
            targets: this.circle,
            x: 400,
            y: 120,
            duration: 3000,
            yoyo: true,
            repeat: 3
        });
    }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 163,
    scene: {
        create,
        update
    }
}; 

function update(){
    this.info.setText(`x: ${this.enemy.circle.x.toFixed(0)}\ny: ${this.enemy.circle.y.toFixed(0)}  `);
}

function create () {
    this.enemy =  new Circle(this, 100, 100);
    this.info = this.add.text(20,20, '', 0xffffff);
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

 class Circle extends Phaser.GameObjects.Shape {
     ...
     getPosition(){
         let { x, y } = this.circle;
         return { x, y };
     }
 }

adding a property in a class inside d.ts file inside node_modules typescript

Copy

Download

// global.d.ts
declare module 'phaser' {
    interface Game {
       GLOBAL: any;
    }
}

How can I properly scale Phaser sprites?

Copy

Download

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: '100%',
    height: '100%',
    mode: Phaser.Scale.RESIZE,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true,
        },
    },
    pixelArt: false,
    render: {
        antialias: false,
    }
    ...
};

player object undefined only in update()ƒ

Copy

Download

update(){
    if(this.player){
      this.cameras.main.centerOn(this.player.x, this.player.y);
      // ...
    }
}

update(){
    if(!this.player){
        return ;
    }
    this.cameras.main.centerOn(this.player.x, this.player.y);
    // ...
 }

-----------------------

update(){
    if(this.player){
      this.cameras.main.centerOn(this.player.x, this.player.y);
      // ...
    }
}

update(){
    if(!this.player){
        return ;
    }
    this.cameras.main.centerOn(this.player.x, this.player.y);
    // ...
 }

Getting last element on click every time in Javascript loop with Phaser JS

Copy

Download

// Minor formating for stackoverflow
    document.body.style = "display: flex;flex-direction: column;";    

    var config = {
        type: Phaser.AUTO,
        width: 536,
        height: 183,
        scene: {
            create
        },
        banner: false
    }; 

    function create () {
        let items = this.add.container(10, 10);
        items.add(this.add.sprite(20, 20, 'sprite'));
        items.add(this.add.sprite(20, 60, 'sprite'));
        items.add(this.add.sprite(20, 100, 'sprite'));
        items.list.forEach(function(obj, index) {
            obj.setInteractive();
            obj.on('pointerdown', function(){
                console.log(`You clicked: sprite with index ${index}`);
            }, this); // although I don't know why you would want do bind this "this"
       });
    }

    var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

-----------------------

// Minor formating for stackoverflow
    document.body.style = "display: flex;flex-direction: column;";    

    var config = {
        type: Phaser.AUTO,
        width: 536,
        height: 183,
        scene: {
            create
        },
        banner: false
    }; 

    function create () {
        let items = this.add.container(10, 10);
        items.add(this.add.sprite(20, 20, 'sprite'));
        items.add(this.add.sprite(20, 60, 'sprite'));
        items.add(this.add.sprite(20, 100, 'sprite'));
        items.list.forEach(function(obj, index) {
            obj.setInteractive();
            obj.on('pointerdown', function(){
                console.log(`You clicked: sprite with index ${index}`);
            }, this); // although I don't know why you would want do bind this "this"
       });
    }

    var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

Integrate Phaser Game with React as component

Copy

Download

componentDidMount() {
    this.game = new Phaser.Game(this.config);
 }

Phaser 3 increase drag click area size of sprite

Copy

Download

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";    

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create
    }
}; 

function create () {
    // Padding for the drag Area, just for the demo
    let padding = 50;
    let button = this.add.sprite(50, 50, 'button').setOrigin(0);
    
    button.setInteractive({
        draggable: true,
        // SETUP hitarea
        hitArea: new Phaser.Geom.Rectangle(
            - padding,
            - padding,
            button.width + padding * 2,
            button.height + padding * 2 ),
        //Check hitarea
        hitAreaCallback: function(hitArea, x, y){
            return Phaser.Geom.Rectangle.Contains(hitArea, x, y);
        }
    });

    // The following line, is not needed since this option is set in "setInteractive"
    // this.input.setDraggable(button);
    this.input.on('drag', function (pointer, obj, dragX, dragY) {
       obj.x = dragX;
       obj.y = dragY;
    });
}

var game = new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js">
</script>

-----------------------

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";    

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create
    }
}; 

function create () {
    // Padding for the drag Area, just for the demo
    let padding = 50;
    let button = this.add.sprite(50, 50, 'button').setOrigin(0);
    
    button.setInteractive({
        draggable: true,
        // SETUP hitarea
        hitArea: new Phaser.Geom.Rectangle(
            - padding,
            - padding,
            button.width + padding * 2,
            button.height + padding * 2 ),
        //Check hitarea
        hitAreaCallback: function(hitArea, x, y){
            return Phaser.Geom.Rectangle.Contains(hitArea, x, y);
        }
    });

    // The following line, is not needed since this option is set in "setInteractive"
    // this.input.setDraggable(button);
    this.input.on('drag', function (pointer, obj, dragX, dragY) {
       obj.x = dragX;
       obj.y = dragY;
    });
}

var game = new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js">
</script>

Phaser 3 How to Access and Affect Player in Collision between 2 Objects Not Involving Player

Copy

Download

interface GrapplingHookContructor {
    // refactor the constructor to accept a player as well
    new (scene: GameScene, player: Player, x: number, y: number): GrapplingHook;
}

export class GrapplingHook extends Phaser.Physics.Arcade.Sprite {
    declare body: Phaser.Physics.Arcade.Body;

    private player: Player; // add this

    // refactor the constructor to accept a player as well
    constructor(scene: Phaser.Scene, player: Player, x: number, y: number) {
        super(scene, x, y, Assets[Assets.Projectiles], 1);
        
        this.player = player; // add this

spawnGrapplingHook<T extends GrapplingHookContructor>(
        type: T,
        player: Player, // add this
        x: number,
        y: number,
        xVelocity = 0,
        yVelocity = 0
    ): void {
        // pass the player as a parameter
        const grapplinghook = new type(this.scene, player, x, y);
        // ...
    }

onLevelCollide(): void {
    // do the math here to move the player
    this.player.setVelocityX(100);
    this.setVelocity(0,0);
}

-----------------------

interface GrapplingHookContructor {
    // refactor the constructor to accept a player as well
    new (scene: GameScene, player: Player, x: number, y: number): GrapplingHook;
}

export class GrapplingHook extends Phaser.Physics.Arcade.Sprite {
    declare body: Phaser.Physics.Arcade.Body;

    private player: Player; // add this

    // refactor the constructor to accept a player as well
    constructor(scene: Phaser.Scene, player: Player, x: number, y: number) {
        super(scene, x, y, Assets[Assets.Projectiles], 1);
        
        this.player = player; // add this

spawnGrapplingHook<T extends GrapplingHookContructor>(
        type: T,
        player: Player, // add this
        x: number,
        y: number,
        xVelocity = 0,
        yVelocity = 0
    ): void {
        // pass the player as a parameter
        const grapplinghook = new type(this.scene, player, x, y);
        // ...
    }

onLevelCollide(): void {
    // do the math here to move the player
    this.player.setVelocityX(100);
    this.setVelocity(0,0);
}

-----------------------

interface GrapplingHookContructor {
    // refactor the constructor to accept a player as well
    new (scene: GameScene, player: Player, x: number, y: number): GrapplingHook;
}

export class GrapplingHook extends Phaser.Physics.Arcade.Sprite {
    declare body: Phaser.Physics.Arcade.Body;

    private player: Player; // add this

    // refactor the constructor to accept a player as well
    constructor(scene: Phaser.Scene, player: Player, x: number, y: number) {
        super(scene, x, y, Assets[Assets.Projectiles], 1);
        
        this.player = player; // add this

spawnGrapplingHook<T extends GrapplingHookContructor>(
        type: T,
        player: Player, // add this
        x: number,
        y: number,
        xVelocity = 0,
        yVelocity = 0
    ): void {
        // pass the player as a parameter
        const grapplinghook = new type(this.scene, player, x, y);
        // ...
    }

onLevelCollide(): void {
    // do the math here to move the player
    this.player.setVelocityX(100);
    this.setVelocity(0,0);
}

-----------------------

interface GrapplingHookContructor {
    // refactor the constructor to accept a player as well
    new (scene: GameScene, player: Player, x: number, y: number): GrapplingHook;
}

export class GrapplingHook extends Phaser.Physics.Arcade.Sprite {
    declare body: Phaser.Physics.Arcade.Body;

    private player: Player; // add this

    // refactor the constructor to accept a player as well
    constructor(scene: Phaser.Scene, player: Player, x: number, y: number) {
        super(scene, x, y, Assets[Assets.Projectiles], 1);
        
        this.player = player; // add this

spawnGrapplingHook<T extends GrapplingHookContructor>(
        type: T,
        player: Player, // add this
        x: number,
        y: number,
        xVelocity = 0,
        yVelocity = 0
    ): void {
        // pass the player as a parameter
        const grapplinghook = new type(this.scene, player, x, y);
        // ...
    }

onLevelCollide(): void {
    // do the math here to move the player
    this.player.setVelocityX(100);
    this.setVelocity(0,0);
}

-----------------------

var config = {
        type: Phaser.AUTO,
        width: 400,
        height: 300,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 150 }
            }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var player;
    var platforms;
    var cursors;

    // basic Hook Object
    var hook = {
        isPulling: false,
        isAttached: false,
        speed: 500,
        set display(value){
          this.gameObject.visible = value;
          this.ropeGameObject.visible = value;
        }
    }

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.image('ground', 'https://labs.phaser.io/src/games/firstgame/assets/platform.png');
        this.load.image('star', 'https://labs.phaser.io/src/games/firstgame/assets/star.png');
        this.load.spritesheet('dude', 'https://labs.phaser.io/src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

    function create ()
    {
    
        let txt = this.add.text(0, 20, '> click mouse to shoot hook\n\t>> press "shift" to pull');
        platforms = this.physics.add.staticGroup();
        platforms.create(200, 310, 'ground');
        platforms.create(200, -10, 'ground');
        platforms.create(400, 100, 'ground').setScale(.5).refreshBody();
        platforms.create(50, 175, 'ground').setScale(.5).refreshBody();
        
        // Setup Hook Rope
        hook.ropeGameObject = this.add.line(0,0, 0,0, 10,10, 0xff0000).setOrigin(0);
        
        // Setup Hook
        hook.gameObject = this.physics.add.sprite(100, 450, 'star').setScale(.3);
        hook.gameObject.body.allowGravity = false;
        
        // Hide Hook
        hook.display = false;
        
        // Setup Hook Collision
        this.physics.add.collider(hook.gameObject, platforms, grab);
        
        player = this.physics.add.sprite(100, 450, 'dude',4).setScale(.75);
        player.setCollideWorldBounds(true);
        player.setBounce(0.2);
        this.physics.add.collider(player, platforms);
        
        // Setup User Controls
        cursors = this.input.keyboard.createCursorKeys();
        this.input.on('pointerdown', shootHook, this);
    }

    function grab(hk, platform){
        hook.gameObject.setVelocity(0);
        hook.isAttached = true;
    }

    function shootHook(pointer){
        if(!hook.isPulling){
            let velocity = new Phaser.Math.Vector2(pointer.x - player.x, pointer.y - player.y)
                .normalize()
                .scale(hook.speed);
            hook.gameObject.x = player.x;
            hook.gameObject.y = player.y;
            hook.display = true;
            hook.isAttached = false;  
            hook.gameObject.setVelocity(velocity.x, velocity.y);
        }
    }

    function updateHookRope(){
        hook.ropeGameObject.setTo(player.x, player.y,hook.gameObject.x,hook.gameObject.y);
    }

    function update ()
    {
        updateHookRope();
        if(hook.isAttached && cursors.shift.isDown){
            hook.isPulling = true;
            let pullVelocity = new Phaser.Math.Vector2( hook.gameObject.x - player.x, hook.gameObject.y - player.y)
                .normalize()
                .scale(hook.speed / 1.5);
            player.setVelocity(pullVelocity.x, pullVelocity.y);
            
        } else if(hook.isPulling) { // Hook was released so remove it
          if(hook.isAttached){
             hook.isAttached = false;
             hook.display = false;
           }
           hook.isPulling = !player.body.touching.down;
        }

        if(hook.isPulling){
            return;
        }

        if (cursors.left.isDown) {
            player.setVelocityX(-160);
        }
        else if (cursors.right.isDown) {
            player.setVelocityX(160);
        }
        else {
            player.setVelocityX(0);
        }

    }

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>

-----------------------

var config = {
        type: Phaser.AUTO,
        width: 400,
        height: 300,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 150 }
            }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var player;
    var platforms;
    var cursors;

    // basic Hook Object
    var hook = {
        isPulling: false,
        isAttached: false,
        speed: 500,
        set display(value){
          this.gameObject.visible = value;
          this.ropeGameObject.visible = value;
        }
    }

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.image('ground', 'https://labs.phaser.io/src/games/firstgame/assets/platform.png');
        this.load.image('star', 'https://labs.phaser.io/src/games/firstgame/assets/star.png');
        this.load.spritesheet('dude', 'https://labs.phaser.io/src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

    function create ()
    {
    
        let txt = this.add.text(0, 20, '> click mouse to shoot hook\n\t>> press "shift" to pull');
        platforms = this.physics.add.staticGroup();
        platforms.create(200, 310, 'ground');
        platforms.create(200, -10, 'ground');
        platforms.create(400, 100, 'ground').setScale(.5).refreshBody();
        platforms.create(50, 175, 'ground').setScale(.5).refreshBody();
        
        // Setup Hook Rope
        hook.ropeGameObject = this.add.line(0,0, 0,0, 10,10, 0xff0000).setOrigin(0);
        
        // Setup Hook
        hook.gameObject = this.physics.add.sprite(100, 450, 'star').setScale(.3);
        hook.gameObject.body.allowGravity = false;
        
        // Hide Hook
        hook.display = false;
        
        // Setup Hook Collision
        this.physics.add.collider(hook.gameObject, platforms, grab);
        
        player = this.physics.add.sprite(100, 450, 'dude',4).setScale(.75);
        player.setCollideWorldBounds(true);
        player.setBounce(0.2);
        this.physics.add.collider(player, platforms);
        
        // Setup User Controls
        cursors = this.input.keyboard.createCursorKeys();
        this.input.on('pointerdown', shootHook, this);
    }

    function grab(hk, platform){
        hook.gameObject.setVelocity(0);
        hook.isAttached = true;
    }

    function shootHook(pointer){
        if(!hook.isPulling){
            let velocity = new Phaser.Math.Vector2(pointer.x - player.x, pointer.y - player.y)
                .normalize()
                .scale(hook.speed);
            hook.gameObject.x = player.x;
            hook.gameObject.y = player.y;
            hook.display = true;
            hook.isAttached = false;  
            hook.gameObject.setVelocity(velocity.x, velocity.y);
        }
    }

    function updateHookRope(){
        hook.ropeGameObject.setTo(player.x, player.y,hook.gameObject.x,hook.gameObject.y);
    }

    function update ()
    {
        updateHookRope();
        if(hook.isAttached && cursors.shift.isDown){
            hook.isPulling = true;
            let pullVelocity = new Phaser.Math.Vector2( hook.gameObject.x - player.x, hook.gameObject.y - player.y)
                .normalize()
                .scale(hook.speed / 1.5);
            player.setVelocity(pullVelocity.x, pullVelocity.y);
            
        } else if(hook.isPulling) { // Hook was released so remove it
          if(hook.isAttached){
             hook.isAttached = false;
             hook.display = false;
           }
           hook.isPulling = !player.body.touching.down;
        }

        if(hook.isPulling){
            return;
        }

        if (cursors.left.isDown) {
            player.setVelocityX(-160);
        }
        else if (cursors.right.isDown) {
            player.setVelocityX(160);
        }
        else {
            player.setVelocityX(0);
        }

    }

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>

Webpack Define plugin replacement is evaluated but not injected

Copy

Download

new webpack.DefinePlugin({
    "typeof CANVAS_RENDERER": JSON.stringify(false),
    "typeof WEBGL_RENDERER": JSON.stringify(true),
}),

How can I stop animation loop, but not mid-animation in Phaser 3?

Copy

Download

 ...
 character.sprite.anims.stopAfterRepeat(0);
 ...

See all related Code Snippets

Community Discussions

Trending Discussions on phaser

How to read position x of Shape Object when during tween
adding a property in a class inside d.ts file inside node_modules typescript
How can I properly scale Phaser sprites?
player object undefined only in update()ƒ
Getting last element on click every time in Javascript loop with Phaser JS
Integrate Phaser Game with React as component
Phaser 3 increase drag click area size of sprite
Moving the character a few tiles more seems to cause the whole scene (the physics world) to shake, why is that? How do I fix it?
Phaser 3 How to Access and Affect Player in Collision between 2 Objects Not Involving Player
Webpack Define plugin replacement is evaluated but not injected

Trending Discussions on phaser

QUESTION

How to read position x of Shape Object when during tween

Asked 2022-Apr-16 at 11:58

I have the Circle object that extends shape and am trying to get the value of x or position of the object in 2d plane. During animation (tween) the position does not update and remains static. How do i fix this ?

export class Circle extends Phaser.GameObjects.Shape {
    tween;
    constructor(scene:Phaser.Scene, x, y) {
        super(scene);
        let enemy = scene.add.circle(x, y, 20);
        enemy.setStrokeStyle(1, 0x05F9FB);
    
        this.tween = scene.tweens.add({
            targets: enemy,
            x: 560,
            y: 200,
            ease: 'Power1',
            duration: 3000,
            yoyo: true,
            repeat: -1
        });
    }
}

I have the below method in update method and it always returns original x value not the update one during tween.

update() {
    //Always returns  the orginal position of x and not the updated or current state of x
    console.log(enemy.x);
}

ANSWER

Answered 2022-Apr-16 at 11:58

The enemy position x and y is not the position of the circle, that is used in the tween. An easy option is, just to create a property, so that you can acess the position, from the property.

Here small example, how the access could work:

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";    

class Circle extends Phaser.GameObjects.Shape {
    constructor(scene, x, y) {
        super(scene, x, y);
        this.circle = scene.add.circle(x, y, 20);           
        this.circle.setStrokeStyle(3, 0x05F9FB);
    
        this.tween = scene.tweens.add({
            targets: this.circle,
            x: 400,
            y: 120,
            duration: 3000,
            yoyo: true,
            repeat: 3
        });
    }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 163,
    scene: {
        create,
        update
    }
}; 

function update(){
    this.info.setText(`x: ${this.enemy.circle.x.toFixed(0)}\ny: ${this.enemy.circle.y.toFixed(0)}  `);
}

function create () {
    this.enemy =  new Circle(this, 100, 100);
    this.info = this.add.text(20,20, '', 0xffffff);
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

Update:

Info: To keep the code cleaner using a getter( and setter) or method might be cleaner

Like this

 class Circle extends Phaser.GameObjects.Shape {
     ...
     getPosition(){
         let { x, y } = this.circle;
         return { x, y };
     }
 }

Source https://stackoverflow.com/questions/71885987

QUESTION

How can I properly scale Phaser sprites?

Asked 2022-Mar-31 at 19:29

I have a couple problems with sprite scaling which seem to work fine for other people. So, this is my game:
screenshot - game

As you can see there are 2 big problems: the images are really pixelated and texture bleeding.

This is my config:

var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: '100%',
height: '100%',
mode: Phaser.Scale.RESIZE,
autoCenter:Phaser.Scale.CENTER_BOTH,
physics: {
  default: 'arcade',
  arcade: { 
    debug: true,
  },
pixelArt:true,
render:{
  antialias: false,
}
},

scene: {
  preload: preload,
  create: create,
  update: update,
} 
};

This is how I preload my assets:

function preload(){
  this.load.image("tiles", "assets/turtle_wars_tiles.png");
  this.load.tilemapTiledJSON("tutorial_map", "assets/tutorial_map.json");
  //preloading player
  this.load.spritesheet("player", "assets/characters.png", {
  frameWidth: 26,
  frameHeight: 36,
  });
}

And this is how I create the tilemap:

  const map = this.make.tilemap({ key: "tutorial_map", tileWidth:48,tileHeight:48 });
  const tileset = map.addTilesetImage("turtle_wars_tiles", "tiles");

  for (let i = 0; i < map.layers.length; i++) {
    const layer = map.createStaticLayer(i, tileset,0,0)
    layer.setDepth(i);
    layer.setScale(5)
    layer.setCollisionByProperty({ collides: true });
    this.physics.add.collider(this.player.collider, layer).collideCallback = () =>{
    this.player.collide()
    };
  }

I tried extruding my tile set of 16x16 tiles but it messes up my whole map and it only solves texture bleeding.

Any idea how can I solve this?

ANSWER

Answered 2022-Mar-31 at 19:29

I just tried it on a small demo project, I think the solution is just, to edit your game - config to this (check code below).

Info: You added the correct properties, but only into the physics- Object. I belongs one level higher.

Like this it should work:

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: '100%',
    height: '100%',
    mode: Phaser.Scale.RESIZE,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true,
        },
    },
    pixelArt: false,
    render: {
        antialias: false,
    }
    ...
};

Source https://stackoverflow.com/questions/71550126

QUESTION

player object undefined only in update()ƒ

Asked 2022-Mar-31 at 15:14

not exactly sure what to call whats going on. I need to create a definition for the clients main player physics body and i can't read it or any of its properties, no matter where or how i call it, from update(). Also if this is a bit hard to understand Im a young and new JS programmer so bare with me. Im willing to change the construction of my scenes if i need to if anyone recommends something easier.


    class MainScene extends Phaser.Scene {
    constructor() {
      super({ key: 'MainScene' })
    }

    preload() {
        this.load.image('grass','./assets/map.png',);
        this.load.spritesheet('graf', './assets/wang.png', { frameWidth: 200, frameHeight: 170})
      }
    
    create() {
      this.add.image(100,400,'grass');
      this.playerMap = {};
      Client.askNewPlayer();
      window.myScene = this;
      this.body  = this.matter.bodies.circle(
          1,
          1,
          10,
          {
              isSensor: true
          }
          );
    }
    addNewPlayer(id, x, y) {
        if(id == clientID){
            this.playerMap[id] = this.matter.add.sprite(x, y, 'graf','', {'shape' : this.body['player-20-00']}).setScale(.5);
            this.player = this.playerMap[id];
            this.cameras.main.centerOn(this.player.x, this.player.y)
        }
        else{
        this.playerMap[id] = this.add.sprite(x,y,'graf').setScale(.5);
        }
    }
    removePlayer(id){
        this.playerMap[id].destroy();
    delete this.playerMap[id];
    }
    movePlayer(id, x, y) {       
        // var player = this.playerMap[id];
        // var distance = Phaser.Math.Distance.Between(player.x,player.y,x,y);
        // var duration = distance*10;
        // var tween = this.add.tween(player);
        // tween.to({x:x,y:y}, duration);
        // tween.start();
        
    }
  
    update(){
       //haven't been able to access any variables Ive called from here
       this.cameras.main.centerOn(this.player.x, this.player.y)//causes error "can't read properties of undefined"
//replacing this.player.y or y with playerMap[a].x or y doesn't work either even though its accessible from everywhere else and === (equivalent) 
    }
}

here is the client object, I'm pretty sure this doesn't affect my problem

var Client = {};
var clientID;
Client.socket = io.connect();
Client.askNewPlayer = function(){
    Client.socket.emit('newplayer');
}
Client.socket.on('newplayer',function(data){
    window.myScene.addNewPlayer(data.id,data.x,data.y);
});

Client.socket.on('allplayers',function(data){
    console.log(data);
    for(var i = 0; i < data.length; i++){
        window.myScene.addNewPlayer(data[i].id,data[i].x,data[i].y);
    }
});

Client.socket.on('remove',function(id){
    window.myScene.removePlayer(id);
});
Client.socket.on('move',function(data){
    window.myScene.movePlayer(data.id,data.x,data.y);
});
Client.socket.on('id',function(id){
    clientID = id;
})

ANSWER

Answered 2022-Mar-31 at 15:14

The issue is, that the update function is called, before a player is added (before the this.player is set).

Since the update function will fire more or less right after the create function, the property player of the scene is not set yet. So this.player is undefined, which is the cause for the the error.

The solution is to check, if the this.player property is set before accessing it, in the update function.

As soon as the this.player property is set, the other commands in the if - clause are called.

update(){
    if(this.player){
      this.cameras.main.centerOn(this.player.x, this.player.y);
      // ...
    }
}

or like this, it is a bit better to read (following the "Return Early Pattern" ):

update(){
    if(!this.player){
        return ;
    }
    this.cameras.main.centerOn(this.player.x, this.player.y);
    // ...
 }

Source https://stackoverflow.com/questions/71260467

QUESTION

Getting last element on click every time in Javascript loop with Phaser JS

Asked 2022-Mar-31 at 12:55

I am making a game in Phaser although I believe the core of this issue is a lack of my JS understanding.

I am looping through a Phaser container and wish to apply a click handler on each child sprite, but when I execute the click on any of the sprites, it always returns the last child.

I have tried various suggestions on Stack Overflow eg here: JavaScript closure inside loops – simple practical example

but can never get the click to return anything other than the last item.

An Example:

let items = //my container with 4 child sprites to click on
let i = 0;
item.list.forEach(function(obj) {
    obj.setInteractive();
    (function(i) {
        obj.on('pointerdown', function(i){
            console.log(i);
        }.bind(this, i));
    })(i);
    i++;
});

In this example, every sprite I click on outputs '3' tot he console, when it should output 0,1,2 or 3 depending on which was clicked.

ANSWER

Answered 2022-Mar-31 at 12:55

Your code is abit complicated. If you just want to add a EventHandler just, you don't need an extra closure. Just check the code below, for a leaner approach

Working example:

// Minor formating for stackoverflow
    document.body.style = "display: flex;flex-direction: column;";    

    var config = {
        type: Phaser.AUTO,
        width: 536,
        height: 183,
        scene: {
            create
        },
        banner: false
    }; 

    function create () {
        let items = this.add.container(10, 10);
        items.add(this.add.sprite(20, 20, 'sprite'));
        items.add(this.add.sprite(20, 60, 'sprite'));
        items.add(this.add.sprite(20, 100, 'sprite'));
        items.list.forEach(function(obj, index) {
            obj.setInteractive();
            obj.on('pointerdown', function(){
                console.log(`You clicked: sprite with index ${index}`);
            }, this); // although I don't know why you would want do bind this "this"
       });
    }

    var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

Here the docs to the forEach method https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach, explains the index used

Here the docs to the Phaser on listener https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Sprite.html#on__anchor, explains the passing of the context.

Source https://stackoverflow.com/questions/71626593

QUESTION

Integrate Phaser Game with React as component

Asked 2022-Mar-31 at 11:17

I'm new to React, I want to make a component for my phaser game to insert it into a react project.

My Game component:

import React, { Component } from 'react'
import Phaser from 'phaser'

class Game extends Component {

  constructor() {
    super();

    this.config = {
        type: Phaser.AUTO,
        width: 700,
        height: 600,
        parent: "game",
        pixelArt: true,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0 }
            }
        },
        scene: {
            preload: function(){
              this.load.image('tiles', process.env.PUBLIC_URL + '/assets/TILES.png');
              this.load.tilemapTiledJSON("map", process.env.PUBLIC_URL + "/assets/MAP.json");
            },
            create: function(){
              const map = this.make.tilemap({ key: "map" });
              const tileset = map.addTilesetImage("TILES", "tiles");

              const worldLayer = map.createLayer("World", tileset, 0, 0);
            },
            update: function(){

            }
        }
    };

    this.game = new Phaser.Game(this.config);


  }

  render() {
    return (<div id="game"></div>)
  }
}

export default Game;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Game from './Game';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

As you can see from this image, the image is reapeated 4 times, why? How can I fix this? I have tried setting fixed size to the div but it didnt work.

ANSWER

Answered 2022-Mar-31 at 11:17

One solution would be to move the creation of the Phaser.Game Object, "game" into the method componentDidMount (link to the documentation). Because if new Phaser.Game is called, and the parent is not in the DOM, the canvas will be added, ignoring the parent.

just add this method to the Game class:

componentDidMount() {
    this.game = new Phaser.Game(this.config);
 }

I'm not sure if it is the best way, but it works (on my demo app).

Side-Note: in my demo I didn't have 4 images/(phaser-)canvas I just had 2. On using my solution, it went down to the usual one canvas.

Source https://stackoverflow.com/questions/71458047

QUESTION

Phaser 3 increase drag click area size of sprite

Asked 2022-Mar-29 at 08:34

We have a sprite which we set as interactive

this.testSprite = this.add.sprite(100, 100, 'button')
    .setInteractive();

Now we make this object draggable by adding

this.input.dragDistanceThreshold = 20;
this.input.setDraggable(this.testSprite);

this.input.on('drag', function (pointer, obj, dragX, dragY) {
   obj.x = dragX;
   obj.y = dragY;
});

Now if we want to increase the size of the draggable area (be able to click a little further to still drag the object), I tried giving the .setInteractive() function the additional parameter for the new bounds new Phaser.Geom.Rectangle(0, 0, 1000, 1000) such as:

this.testSprite = this.add.sprite(100, 100, 'button')
    .setInteractive(new Phaser.Geom.Rectangle(0, 0, 1000, 1000));

It doesn't seem to affect this draggable property. Is this the proper way to do it or is there a separate drag size property that I can't find?

ANSWER

Answered 2022-Mar-29 at 08:34

You can use the setInteractive method of the sprite, to define a valid hitArea, that is bigger than the "button", as requested. (here a link to the docs).

Just define a hitArea and a hitAreaCallback, and it should work.
(I using the Phaser builtin function to test it the point is in the hitArea, here the docs)

Here a working demo:

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";    

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create
    }
}; 

function create () {
    // Padding for the drag Area, just for the demo
    let padding = 50;
    let button = this.add.sprite(50, 50, 'button').setOrigin(0);
    
    button.setInteractive({
        draggable: true,
        // SETUP hitarea
        hitArea: new Phaser.Geom.Rectangle(
            - padding,
            - padding,
            button.width + padding * 2,
            button.height + padding * 2 ),
        //Check hitarea
        hitAreaCallback: function(hitArea, x, y){
            return Phaser.Geom.Rectangle.Contains(hitArea, x, y);
        }
    });

    // The following line, is not needed since this option is set in "setInteractive"
    // this.input.setDraggable(button);
    this.input.on('drag', function (pointer, obj, dragX, dragY) {
       obj.x = dragX;
       obj.y = dragY;
    });
}

var game = new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js">
</script>

Info: This Demo doesn't load an real image, but the placeholder is draggable(with the padding), as nedede.

The hitArea is relative to the top left corner of the image, thats why the first two parameters, are negative.

Source https://stackoverflow.com/questions/71600390

QUESTION

Moving the character a few tiles more seems to cause the whole scene (the physics world) to shake, why is that? How do I fix it?

Asked 2022-Mar-17 at 19:44

Here is the example code from phaser3 tutorial.

var BootScene = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function BootScene ()
    {
        Phaser.Scene.call(this, { key: 'BootScene' });
    },

    preload: function ()
    {
        // map tiles
        this.load.image('tiles', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/map/spritesheet.png');
        
        // map in json format
        this.load.tilemapTiledJSON('map', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/map/map.json');
        
        // our two characters
        this.load.spritesheet('player', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/RPG_assets.png', { frameWidth: 16, frameHeight: 16 });
    },

    create: function ()
    {
        // start the WorldScene
        this.scene.start('WorldScene');
    }
});

var WorldScene = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function WorldScene ()
    {
        Phaser.Scene.call(this, { key: 'WorldScene' });
    },

    preload: function ()
    {
        
    },

    create: function ()
    {
        // create the map
        var map = this.make.tilemap({ key: 'map' });
        
        // first parameter is the name of the tilemap in tiled
        var tiles = map.addTilesetImage('spritesheet', 'tiles');
        
        // creating the layers
        var grass = map.createStaticLayer('Grass', tiles, 0, 0);
        var obstacles = map.createStaticLayer('Obstacles', tiles, 0, 0);
        
        // make all tiles in obstacles collidable
        obstacles.setCollisionByExclusion([-1]);
        
        //  animation with key 'left', we don't need left and right as we will use one and flip the sprite
        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('player', { frames: [1, 7, 1, 13]}),
            frameRate: 10,
            repeat: -1
        });
        
        // animation with key 'right'
        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('player', { frames: [1, 7, 1, 13] }),
            frameRate: 10,
            repeat: -1
        });
        this.anims.create({
            key: 'up',
            frames: this.anims.generateFrameNumbers('player', { frames: [2, 8, 2, 14]}),
            frameRate: 10,
            repeat: -1
        });
        this.anims.create({
            key: 'down',
            frames: this.anims.generateFrameNumbers('player', { frames: [ 0, 6, 0, 12 ] }),
            frameRate: 10,
            repeat: -1
        });        

        // our player sprite created through the phycis system
        this.player = this.physics.add.sprite(50, 100, 'player', 6);
        
        // don't go out of the map
        this.physics.world.bounds.width = map.widthInPixels;
        this.physics.world.bounds.height = map.heightInPixels;
        this.player.setCollideWorldBounds(true);
        
        // don't walk on trees
        this.physics.add.collider(this.player, obstacles);

        // limit camera to map
        this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
        this.cameras.main.startFollow(this.player);
        this.cameras.main.roundPixels = true; // avoid tile bleed
    
        // user input
        this.cursors = this.input.keyboard.createCursorKeys();
        
        // where the enemies will be
        this.spawns = this.physics.add.group({ classType: Phaser.GameObjects.Zone });
        for(var i = 0; i < 30; i++) {
            var x = Phaser.Math.RND.between(0, this.physics.world.bounds.width);
            var y = Phaser.Math.RND.between(0, this.physics.world.bounds.height);
            // parameters are x, y, width, height
            this.spawns.create(x, y, 20, 20);            
        }        
        // add collider
        this.physics.add.overlap(this.player, this.spawns, this.onMeetEnemy, false, this);
    },
    onMeetEnemy: function(player, zone) {        
        // we move the zone to some other location
        zone.x = Phaser.Math.RND.between(0, this.physics.world.bounds.width);
        zone.y = Phaser.Math.RND.between(0, this.physics.world.bounds.height);
        
        // shake the world
        this.cameras.main.shake(300);
        
        // start battle 
    },
    update: function (time, delta)
    {
    //    this.controls.update(delta);
    
        this.player.body.setVelocity(0);

        // Horizontal movement
        if (this.cursors.left.isDown)
        {
            this.player.body.setVelocityX(-80);
        }
        else if (this.cursors.right.isDown)
        {
            this.player.body.setVelocityX(80);
        }

        // Vertical movement
        if (this.cursors.up.isDown)
        {
            this.player.body.setVelocityY(-80);
        }
        else if (this.cursors.down.isDown)
        {
            this.player.body.setVelocityY(80);
        }        

        // Update the animation last and give left/right animations precedence over up/down animations
        if (this.cursors.left.isDown)
        {
            this.player.anims.play('left', true);
            this.player.flipX = true;
        }
        else if (this.cursors.right.isDown)
        {
            this.player.anims.play('right', true);
            this.player.flipX = false;
        }
        else if (this.cursors.up.isDown)
        {
            this.player.anims.play('up', true);
        }
        else if (this.cursors.down.isDown)
        {
            this.player.anims.play('down', true);
        }
        else
        {
            this.player.anims.stop();
        }
    }
    
});

var config = {
    type: Phaser.AUTO,
    parent: 'content',
    width: 320,
    height: 240,
    zoom: 2,
    pixelArt: true,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false // set to true to view zones
        }
    },
    scene: [
        BootScene,
        WorldScene
    ]
};
var game = new Phaser.Game(config);

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>

Per the tutorial, there are 2 scenes, one for the world map and the other for the battle. I doubt if the code above implement the battle scene. I assume the scene in question is the world scene.

Moving (with arrow keys) the character one or two steps/tiles works well.

Keep moving the character a few tiles more toward the same direction causes the world scene to shake, why is that? How do I fix it?

ANSWER

Answered 2022-Mar-17 at 19:44

In line #126 you have a shake function this.cameras.main.shake(300); that makes the game window to shake with a duration of 300ms. To disable it, just comment it out or delete it.

Source https://stackoverflow.com/questions/70562951

QUESTION

Phaser 3 How to Access and Affect Player in Collision between 2 Objects Not Involving Player

Asked 2022-Mar-10 at 08:14

I am trying to create a grappling hook in Phaser 3. I can successfully shoot the grappling hook at an upward angle away from the player. I need to get the player to move towards the grappling hook when the grappling hook reaches its destination. The problem is that I can't access the player object in my Spawner.ts file to move the player object. If I could access the player object I could set the velocity at the moment of collision between the grappling hook and the level.

This is the relevant code in the Spawner.ts file:

import { Actor } from "./Actor";
import { Level } from "./Level";
import { Layer } from "./shared";
import { Projectile } from "./Projectile/Projectile";
import { GameScene } from "../scenes/GameScene";
import { Player } from "./Player";
import { GrapplingHook } from "./GrapplingHook";

interface ActorConstructor {
    new (scene: Phaser.Scene, x: number, y: number): Actor;
}

interface GrapplingHookContructor {
    new (scene: GameScene, x: number, y: number): GrapplingHook;
}

export class Spawner {
    private projectiles: Phaser.GameObjects.Group;
    private actors: Phaser.GameObjects.Group;
    private grapplinghooks: Phaser.GameObjects.Group;

    constructor(private scene: GameScene, private level: Level) {
        this.actors = this.scene.add.group();
        this.setUpGrapplingHooks();
    }

    spawnDynamic<T extends ActorConstructor>(
        layer: Layer,
        type: T
    ): Phaser.GameObjects.Group {
        const objects = this.level.getObjects(layer);
        const instances = objects.map((e) => new type(this.scene, e.x, e.y));
        const group = this.scene.add.group(instances);
        this.level.addGroundCollision(group);
        return group;
    }

    spawnPlayer(layer: Layer): Player {
        const player = this.spawnDynamic(
            layer,
            Player
        ).getChildren()[0] as Player;

        this.actors.add(player);

        return player;
    }

    spawnGrapplingHook<T extends GrapplingHookContructor>(
        type: T,
        x: number,
        y: number,
        xVelocity = 0,
        yVelocity = 0
    ): void {
        const grapplinghook = new type(this.scene, x, y);
        this.grapplinghooks.add(grapplinghook);
        grapplinghook.body.setVelocity(xVelocity, yVelocity);
        grapplinghook.body.setCollideWorldBounds(true, undefined, undefined, true);
    }

    destroyGrapplingHooks() {
        this.grapplinghooks.getChildren().map(child => child.destroy());
    }

    private getObjectData(
        object: Phaser.Types.Tilemaps.TiledObject
    ): Record<string, unknown> {
        const props = object.properties as unknown;
        const data: Record<string, unknown> = {};

        if (props instanceof Array) {
            props.forEach((p: { name: string; value: unknown }) => {
                data[p.name] = p.value;
            });
        }

        return data;
    }

    private setUpGrapplingHooks() {
        this.grapplinghooks = this.scene.add.group();
        this.grapplinghooks.runChildUpdate = true;
        this.level.addGroundCollision(this.grapplinghooks, (grapplinghook) =>
            (grapplinghook as GrapplingHook).onLevelCollide()
        );

        this.scene.physics.add.collider(
            this.grapplinghooks,
            this.level.getLayer(Layer.Bricks),
            (grapplinghook) => (grapplinghook as Projectile).onLevelCollide()
        );

        this.scene.physics.add.collider(
            this.grapplinghooks,
            this.actors,
            (grapplinghook, entity) => {
                (grapplinghook as Projectile).onCollide(entity as Actor);
            }
        );
    }
}

This is the relevant code in the Player.ts file:

import { TILE_WIDTH } from "./shared";
import type { GameScene } from "../scenes/GameScene";
import { Actor } from "./Actor";
import { Assets } from "./shared";
import { GrapplingHook } from "./GrapplingHook";

interface Controls {
    Left: Phaser.Input.Keyboard.Key;
    Right: Phaser.Input.Keyboard.Key;
    Jump: Phaser.Input.Keyboard.Key;
    ThrowGrapplingHook: Phaser.Input.Keyboard.Key;
}

export class Player extends Actor {
    protected readonly totalHitPoints = 3;
    protected readonly immunityAfterDamageTime: number = 1000;

    private controls: Controls;

    constructor(scene: GameScene, x: number, y: number) {
        super(scene, x, y, Assets[Assets.Player], 1);

        // controls
        this.controls = {
            Left: scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
            Right: scene.input.keyboard.addKey(
                Phaser.Input.Keyboard.KeyCodes.D
            ),
            Jump: scene.input.keyboard.addKey(
                Phaser.Input.Keyboard.KeyCodes.SPACE
            ),
            ThrowGrapplingHook: scene.input.keyboard.addKey(
                Phaser.Input.Keyboard.KeyCodes.H
            )
        };
    }

    /**
     * Throws a projectile at a given angle and force
     * @param time The current game time
     * @param angle The angle to throw the projectile; Should be a value between -90 (straight down) and 90 (straight up)
     * @param force What velocity to throw the projectile at
     */

    protected throwGrapplingHook(time: number, angle: number, force: number) {
        if (angle > 90 || angle < -90) {
            throw `throwProjectile(angle) must be between -90 and 90; current value: ${angle}`;
        }

        this.lastProjectileThrowTime = time;

        let x = this.body.x;
        if (this.flipX) {
            x = x + TILE_WIDTH;
        }

        // calculate the x and y force based on angle and total force
        // angle: 0 -> x velocity at 100%, y at 0%
        // angle: 90 -> x velocity at 0%, y at 100%

        const percentYForce = angle / 90;
        const yVelocity = force * percentYForce * -1;
        let xVelocity = force - Math.abs(yVelocity);

        if (this.body.velocity.x < 0) {
            xVelocity *= -1;
        }

        this.scene.spawner.spawnGrapplingHook(
            GrapplingHook,
            x,
            this.body.y,
            xVelocity,
            yVelocity
        );
    }

    protected onUpdate(): void {
        if (!this.active) {
            return;
        }
    }
}

And this is the relevant code from the GrapplingHook.ts file:

import type { Actor } from "./Actor";
import { Assets } from "./shared";

export class GrapplingHook extends Phaser.Physics.Arcade.Sprite {
    declare body: Phaser.Physics.Arcade.Body;

    constructor(scene: Phaser.Scene, x: number, y: number) {
        super(scene, x, y, Assets[Assets.Projectiles], 1);

        scene.add.existing(this);
        scene.physics.add.existing(this);
        this.body.setAllowGravity(false);

        this.body
            .setSize(this.body.width, this.body.height - 20, true)
            .updateCenter()
    }

    onCollide(target: Actor): void {
        this.destroy();
    }

    onLevelCollide(): void {
        this.setVelocity(0,0);
    }

    update(): void {
        this.flipX = this.body.velocity.x >= 0
    }
}

As it is now, the code successfully throws the grappling hook but I can't actually move the player after it collides with the level. I haven't even looked into how to move the player towards the actually collided grappling hook, as a proof of concept I just want to nudge the player forward when the collision happens. My instincts are to change the onLevelCollide function in GrapplingHook.ts to:

onLevelCollide(player: Player): void {
        player.setVelocityX(100);
        this.setVelocity(0,0);
    }

And then add a player object into onLevelCollide() when it's called in Spawner.ts but I can't seem to access the player in Spawner.ts. How would I pass the player object into onLevelCollide or possibly work around this problem another way?

Again I am trying to move the player on the grappling hook's collision with the level. If you need me to post more code or clarify let me know.

ANSWER

Answered 2022-Jan-21 at 08:16

Refactor the GrapplingHook constructor to accept the player too

In Spawner.ts

interface GrapplingHookContructor {
    // refactor the constructor to accept a player as well
    new (scene: GameScene, player: Player, x: number, y: number): GrapplingHook;
}

In GrapplingHook.ts do the same, add a player property and assign to it the player from the constructor parameter

export class GrapplingHook extends Phaser.Physics.Arcade.Sprite {
    declare body: Phaser.Physics.Arcade.Body;

    private player: Player; // add this

    // refactor the constructor to accept a player as well
    constructor(scene: Phaser.Scene, player: Player, x: number, y: number) {
        super(scene, x, y, Assets[Assets.Projectiles], 1);
        
        this.player = player; // add this

Refactor the spawnGrapplingHook call to accept the player and pass the player to the GrapplingHook constructor

spawnGrapplingHook<T extends GrapplingHookContructor>(
        type: T,
        player: Player, // add this
        x: number,
        y: number,
        xVelocity = 0,
        yVelocity = 0
    ): void {
        // pass the player as a parameter
        const grapplinghook = new type(this.scene, player, x, y);
        // ...
    }

In GrapplingHook.ts

onLevelCollide(): void {
    // do the math here to move the player
    this.player.setVelocityX(100);
    this.setVelocity(0,0);
}

Another option that might work for you is to keep a reference to the player in Spawner.ts, set it when spawnPlayer(layer: Layer): Player is called. Then use this.scene.spawner.player to access it anywhere else you need it?

Source https://stackoverflow.com/questions/70794542

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install phaser

You can install using 'npm i @jwhite0042/phaser-ce' or download it from GitHub, npm.

Support

Go to https://newdocs.phaser.io/ to read the docs online using our brand new interface. Use the links to navigate the namespaces, classes and Game Objects lists and also use the new search box. The documentation for Phaser 3 is an on-going project. Please help us by contributing improved docs and examples.