How to render canvas circle with fixed to camera position?

[weratius]

Hi!

 

I have a circle and create it via create() method:

radarCircleMiniMap = game.add.graphics(0, 0);radarCircleMiniMap.lineStyle(1, 0xffd900);radarCircleMiniMap.arc(myPoint.x, myPoint.y, playerInfoObject.radar.locate / 10, game.math.degToRad(-22), game.math.degToRad(110), false);radarCircleMiniMap.cameraOffset.x = myPoint.x;radarCircleMiniMap.cameraOffset.y = myPoint.y;radarCircleMiniMap.fixedToCamera = true;

Then I update it:

radarCircleMiniMap.arc(myPoint.x, myPoint.y, playerInfoObject.radar.locate / 10, game.math.degToRad(-22), game.math.degToRad(110), false);

There is a screenshot in attach file

 

How can I render it?

 

 

I have already tried to use bitmap in such a way:

var bmd = game.add.bitmapData(800,600);bmd.ctx.fillStyle = '#ffffff';bmd.ctx.beginPath();bmd.ctx.arc(sun1.x, sun1.y, 100, 0, Math.PI*2, true); bmd.ctx.closePath();bmd.ctx.fill();bmd.fixedToCamera = true;

But that didn't help me at all =(

 

Thank you for your answer in advance)

good luck!

 

[AzraelTycka]

Hello there ;-),

 

I don't get anything out of that picture, what exactly is on the picture, what is missing or what should be there? :-)

 

Are you using your bitmapData as texture for some sprite/image or just like this, if this way then I think you need to add bitmap into your world, so your code is missing bmd.addToWorl(x, y); where x and y are coordinates in your world where to add the bitmap. If you are changing the bitmap in the meantime and you want to render the change as well this way then I think you need to add bmd.update(); into your update function after you chagne the bitmap.

 

Example on graphics object is here.

 

Was it helpful I kinda don't get where exactly is the problem with this description, so correct me if I'm wrong -.^

[weratius]

Hello there ;-),

 

I don't get anything out of that picture, what exactly is on the picture, what is missing or what should be there? :-)

 

Are you using your bitmapData as texture for some sprite/image or just like this, if this way then I think you need to add bitmap into your world, so your code is missing bmd.addToWorl(x, y); where x and y are coordinates in your world where to add the bitmap. If you are changing the bitmap in the meantime and you want to render the change as well this way then I think you need to add bmd.update(); into your update function after you chagne the bitmap.

 

Example on graphics object is here.

 

Was it helpful I kinda don't get where exactly is the problem with this description, so correct me if I'm wrong -.^

There is an circle that is created again and again in update method but is not deleted

 

how can I render a canvas circle?

 

Thank you =)

 

[AzraelTycka]

Well you want to have a single circle moving around the minimap, correct?

 

Currently you are just adding more arcs in your update function with this line:

radarCircleMiniMap.arc(myPoint.x, myPoint.y, playerInfoObject.radar.locate / 10, game.math.degToRad(-22), game.math.degToRad(110), false);

Well if you need graphics circle which moves you can do it this way - fiddle:

// circle moving along the x axis in fixed distancevar mainstate = {    preload: function() {        game.time.advancedTiming = true;    },        create: function() {                this.tt = this.add.graphics(100, 100);        this.tt.lineStyle(1, 0xffd900);        this.tt.drawCircle(0, 0, 10 * 2 * Math.PI);        this.ttt = 5;    },    update: function() {        this.tt.position.x = 100 + this.ttt++;    },        render: function() {        game.debug.text(game.time.fps || '--', 2, 14, "#00ff00");      }    };var game = new Phaser.Game(400, 300, Phaser.AUTO, 'gameDiv');game.state.add('main', mainstate);game.state.start('main');

Otherwise you need to add clear() to your function during update to clear graphics object and then draw new arc (don't forget to set new lineStyle too, check the docs what clear() clears!)

[weratius]

Well you want to have a single circle moving around the minimap, correct?

 

Currently you are just adding more arcs in your update function with this line:

radarCircleMiniMap.arc(myPoint.x, myPoint.y, playerInfoObject.radar.locate / 10, game.math.degToRad(-22), game.math.degToRad(110), false);

Well if you need graphics circle which moves you can do it this way - fiddle:

// circle moving along the x axis in fixed distancevar mainstate = {    preload: function() {        game.time.advancedTiming = true;    },        create: function() {                this.tt = this.add.graphics(100, 100);        this.tt.lineStyle(1, 0xffd900);        this.tt.drawCircle(0, 0, 10 * 2 * Math.PI);        this.ttt = 5;    },    update: function() {        this.tt.position.x = 100 + this.ttt++;    },        render: function() {        game.debug.text(game.time.fps || '--', 2, 14, "#00ff00");      }    };var game = new Phaser.Game(400, 300, Phaser.AUTO, 'gameDiv');game.state.add('main', mainstate);game.state.start('main');

Otherwise you need to add clear() to your function during update to clear graphics object and then draw new arc (don't forget to set new lineStyle too, check the docs what clear() clears!)

Yes, but that doesn't work with fixedToCamera element.... The attribute cameraOffset doesn't help here too =(

[AzraelTycka]

Well, I don't know what exactly you mean, but I set fixed camera and offset and it works as before, check here.

[weratius]

Well, I don't know what exactly you mean, but I set fixed camera and offset and it works as before, check here.

I wonder why it doesn't work for me)

[AzraelTycka]

You mean that fiddle doesn't work? Or some part of your code doesn't work the same way?

Well in any case I tried to expand the world bounds and move the camera to make sure there isn't a problem while the camera is moving and as you can see everything works just fine.

 

Can you please set up your own fiddle with the minimum functionality to see what you are doing so we can see what you do, this way we can easier identify the problem?

(just set something similar as I did but with your logic just strip it off everything that is unrelated - well unrelated is almost your whole game code so just pick that one tiny piece which is giving you problems)

 

Also check your version of phaser, try downloading the newer one (even if yoru version is ok, try the latest one) maybe your version doesn't support part of the code I typed above yet.