Sign in to follow this  
ra_ag_

Manipulating Graphics converted to a Sprite

Recommended Posts

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.