kandi background
Explore Kits

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

 by   photonstorm JavaScript Version: v3.55.2 License: MIT

 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
Support
Quality
Quality
Security
Security
License
License
Reuse
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

securitySecurity

  • 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

buildReuse

  • 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

NPM

copy iconCopydownload iconDownload
npm install phaser

CDN

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

TypeScript Definitions

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

Create Your First Phaser 3 Example

copy iconCopydownload iconDownload
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser-arcade-physics.min.js"></script> 
</head>
<body>

    <script></script>

</body>
</html>

How to read position x of Shape Object when during tween

copy iconCopydownload iconDownload
// 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 iconCopydownload iconDownload
// global.d.ts
declare module 'phaser' {
    interface Game {
       GLOBAL: any;
    }
}

How can I properly scale Phaser sprites?

copy iconCopydownload iconDownload
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 iconCopydownload iconDownload
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 iconCopydownload iconDownload
// 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 iconCopydownload iconDownload
componentDidMount() {
    this.game = new Phaser.Game(this.config);
 }

Phaser 3 increase drag click area size of sprite

copy iconCopydownload iconDownload
// 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 iconCopydownload iconDownload
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 iconCopydownload iconDownload
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 iconCopydownload iconDownload
 ...
 character.sprite.anims.stopAfterRepeat(0);
 ...

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

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.

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Share this Page

share link
Reuse Pre-built Kits with phaser
Compare Game Engine Libraries with Highest Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.