WIP? Graphics extends Phaser.Sprite and the PIXI

[Tarion]

I took a look into PIXI.Graphics API. It seems that it is not yet implemented in phaser properly. Or something went wrong with the phaser.d.ts at that point:

 

I added the draw functions to the d.ts:

    class Graphics extends Phaser.Sprite {        constructor(game: Phaser.Game, x: number, y: number);        angle: number;        x:number;        y:number;        // Pixi drawing        lineStyle(lineWidth:number, color?:number, alpha?:number): void;        moveTo(x:number, y:number): void;        lineTo(x:number, y:number): void;        beginFill(color:number, alpha?:number): void;        endFill(): void;        drawRect( x:number, y:number, width:number, height:number ): void;        drawCircle( x:number, y:number, radius:number): void;        drawElipse( x:number, y:number, width:number, height:number): void;        clear(): void;        updateFilterBounds(): void;    }

Using the draw functions works perfectly!

 

Because due to the implementation, the Graphics does inherit from the PIXI.Graphics:

Phaser.Graphics = function (game, x, y) {    this.game = game;    PIXI.Graphics.call(this);

That might be good to use all the PIXI.Graphics drawing function but is not sufficient when it comes to Phaser.Sprite functionality so the following code will fail since we have no body defined on this "Sprite". Also fixedToCamera can't work obviously.

var bar = this.game.add.graphics(0, 0);bar.lineStyle(2, 0x0000FF, 1);bar.drawRect(50, 250, 100, 100);this.add(bar);this.energyBar = bar;this.energyBar.cropEnabled = true;this.energyBar.crop = new Phaser.Rectangle(0, 0, this.energyBar.body.width, this.energyBar.body.height);this.energyBar.fixedToCamera = true;

What to do?

 

Assuming the Javascript implementation should not change, the definition of "Graphics extends Phaser.Sprite" is wrong.

 

So how to build a proper Sprite out of a Graphics object?

 

An other issue could be, that Phaser.Sprite extends PIXI.Sprite which is actually not a PIXI.Graphics.

So wrapping a Phaser.Grapcis inside a Phaser.Sprite might still leave some functionalities open. Not sure what PIXI.Graphics.texture would be then.

 

 

--

A lot of toughs. Maybe you already have some plans with it? If we can agree on an Idea how it should look like I would like to help with the implementation.

 

 

 

[Cameron Foale]

Hi Tarion,

 

You can create a blank sprite like:

this.energyBar = this.game.add.sprite(0, 0, null); 

And then attach your graphics to it, PIXI style:

this.bar = new Phaser.Graphics(this.game, 0, 0);this.energyBar.addChild(this.bar);

This way, this.energyBar is a Phaser sprite (with a body etc), and the graphics object is just used for rendering.

[Tarion]

Very nice, I will try that.

[coloreddrums]

Hi Tarion,

 

You can create a blank sprite like:

this.energyBar = this.game.add.sprite(0, 0, null); 

And then attach your graphics to it, PIXI style:

this.bar = new Phaser.Graphics(this.game, 0, 0);this.energyBar.addChild(this.bar);

This way, this.energyBar is a Phaser sprite (with a body etc), and the graphics object is just used for rendering.

 

 

Hey,

 

I am trying to create a scalable sprite with a primitive graphics-object.

When testing your approach using TypeScript, the compiler says that the method addChild() does not exist. I looked in the github repositories of phaser and pixie and could not find the method in the Sprite class.

Am I missing something?