Manipulating Graphics converted to a Sprite

[ra_ag_]

Hi all,

 

I am new to game development and have been experimenting with Phaser for the last couple of days. I am trying to develop a very basic game using Phaser,

 

I would like to draw some shape to the canvas which I would like to drag around. I came across this post which said that the Graphics objects don't have an InputHandler and so I used the resolution suggested which works totally fine.

sprite = game.add.sprite(100, 100, graphics.generateTexture());

My issue is that if I would like to manipulate the graphics object (i.e. change the shape) with each frame then what would be the best possible option. Since this case forces me to create a new sprite every frame.

 

Any suggestion would be helpful,

 

Thanks

[lewster32]

The best way to do this is to simply add the graphics object as a child of the sprite:

sprite = game.add.sprite(100, 100);sprite.addChild(graphics);

Now graphics will be positioned relative to the sprite, and can still be manipulated as normal.

[Rendo]

just what i needed

[mironcaius]

I tried to do what you said above, but the graphics move without my control.

I created a player class where I want to store info about the player and add the name of the player and draw a circle for the player using graphics

var Player = function (game, team) {
    if (team == RED_TEAM) {
        Phaser.Sprite.call(this, game, 50, 250);
    } else {
        Phaser.Sprite.call(this, game, 850, 250);
    }

    var graphics = new Phaser.Graphics(game, 0, 0);
    // var graphics = game.add.graphics(50, 250);
    // graphics.boundsPadding = 0;
    graphics.lineStyle(2, 0x000000);
    // if (team == RED_TEAM) {
    //     graphics.beginFill(RED_TEAM_COLOR, 1);
    // } else if (team == BLUE_TEAM) {
    graphics.beginFill(BLUE_TEAM_COLOR, 1);
    // }
    graphics.drawCircle(0, 0, PLAYER_RADIUS * 2);
    graphics.endFill();
    this.addChild(graphics);

    // enable physics for player
    game.physics.p2.enable(this);
    this.anchor.setTo(0.5, 0.5);

    this.body.damping = PLAYER_DAMPING;
    this.body.setCircle(this.width / 2);
    this.body.debug = DEBUG;
}


// Specific JavaScript object/construcor stuff going on here(?)

// Player is a type of Phaser.Sprite

Player.prototype = Object.create(Phaser.Sprite.prototype);

Player.prototype.constructor = Player;

If I add the graphics after i call p2.enable physics like this, it works

if (team == RED_TEAM) {
        Phaser.Sprite.call(this, game, 50, 250);
    } else {
        Phaser.Sprite.call(this, game, 850, 250);
    }

    // enable physics for player
    game.physics.p2.enable(this);
    this.anchor.setTo(0.5, 0.5);

    this.body.damping = PLAYER_DAMPING;
    this.body.setCircle(this.width / 2);
    this.body.debug = DEBUG;

    var graphics = new Phaser.Graphics(game, 0, 0);
    // graphics.boundsPadding = 0;
    graphics.lineStyle(2, 0x000000);
    if (team == RED_TEAM) {
        graphics.beginFill(RED_TEAM_COLOR, 1);
    } else if (team == BLUE_TEAM) {
        graphics.beginFill(BLUE_TEAM_COLOR, 1);
    }
    graphics.drawCircle(0, 0, PLAYER_RADIUS * 2);
    graphics.endFill();
    this.addChild(graphics);

It seems the enabling physics with the graphics added, also applies some physics to the graphics, right ?

How could I overcome this problem and change the graphics of a sprite depending on some conditions?