Website URL

Twitter

Skype

Location

Interests

Hi!
So I want to make a circle with multiple colors. The colors and angles will change dynamically so sprites or images aren't a solution. But when I draw the circle by chaininc 4 calls to Graphics#arc this happens (on Firefox, Chrome and mobile versions) :
My code is basically :
class extends Graphics {
constructor() {
// ...
this.lineStyle(this.thickness, color1)
this.arc(0, 0, this.radius, start1, end1)
this.lineStyle(this.thickness, color2)
this.arc(0, 0, this.radius, start2, end2)
// etc ...
}
// ...
}
No other calls to any draw method or anything (math hidden for reading convenience 😉). Any ideas what that could be from ? My current fix is to draw all the arcs 0.1rad longer and then redrawing the first arc to overlap the last unnecessary bit but it's `// ewww`...

Hey guys, I have been trying to do this for awhile, and feel like I am almost there.
I had been using Bezier Curves but it wasn't quite doing what I needed. I need to draw an arc made with lines between 2 points on the sphere, following the curve of the sphere.
I think I am close on this playground but some of my math isn't right in the drawArcFromPoints function
Anyone think they can take a look and tell me where I am going wrong?
https://www.babylonjs-playground.com/#2I0VXX#28

i'm trying to draw pacman shapes, or slices of pie, they are basically the same
what i want is something like this:
i know it's an example i can copy and paste from the webpage
but it only works on phaser 2, i'm using phaser 3
rather than getting a pie shape i get this:
as you can see, it fills the arc with a straight line, but what i want is to complete the shape taking the center of the circle into account,
here is the code:
style = { font: "bold 14px Arial", fill: "#FFF", boundsAlignH: "center", boundsAlignV: "middle", wordWrap: true, wordWrapWidth: 80 };
graphics1 = game.add.graphics(game.width/2, game.height/2);
graphics1.beginFill(0x0000FF);
graphics1.arc(0, 0, 200, game.math.degToRad(360-90-45/2), game.math.degToRad(360-90+45/2), false);
graphics1.endFill();
text1 = game.add.text(game.width/2-40, game.height/4-40, "phaser 2.4 text bounds", style);
text1.align = 'center';
//text1.setTextBounds(game.width/3, 0, game.width/3, game.height/2);
sprite1 = game.add.sprite(game.width/2,game.height/2);
sprite1.addChild(graphics1);
sprite1.addChild(text1);
sprite1.pivot.x = game.width/2;
sprite1.pivot.y = game.height/2;
sprite1.angle += 0*45;

Can anybody explain me how can I setup
VRDeviceOrientationArcRotateCamera with gamepad controller.
Is this already done or not? How can we attach gamepad with VRDeviceOrientationArcRotateCamera?
Greetings
Ian

I'm trying to draw something like a pie-chart style with filled wedges / arcs. However when I do a filled arc it does not quite fill the entire angle-span.
E.g. These two arcs span different angles, even though the calls to graphics.arc are identical...
// Filled Arc
graphics.lineStyle(1, 0xffd900, 1);
graphics.beginFill(0xFF700B);
graphics.arc(0, 0, r, game.math.degToRad(0), game.math.degToRad(90), true);
graphics.endFill();
// Non-filled Arc
graphics.lineStyle(1, 0x00ffff, 1);
graphics.arc(0, 0, r, game.math.degToRad(0), game.math.degToRad(90), true);
See here: //phaser.io/sandbox/VouJszKL/play
The non-filled arc covers the full 270 degrees, but the filled arc is missing the last bit.
Any ideas?
Thanks!

I'm attempting to create a game where an item is launched into the air, bounces a few times on the ground, and then stops. (Points are given for distance covered) What I'm struggling with is how to make the item move in parabolas, so that it looks like it's bouncing? Is using a tween the best solution (and if so, how would I go about that?), or should I just be playing with gravity and velocity? Here's as far as I've gotten with the tweening. It should move in 3 arcs. bounceTween = this.game.add.tween(this.bounceItem).to({ x: distance }, 800, Phaser.Easing.Quadratic.InOut, this).to({ x: distance + distance / 2 }, 800, Phaser.Easing.Quadratic.InOut, this).to({ x: distance + distance / 2 + distance / 4 }, 800, Phaser.Easing.Quadratic.InOut, this);

Hello people, just got new to gamedev in general, read a lot here from babylon js forum and learned a lot of new things.
But I got stuck and wasted almost 4 hours to find out a thing here but just cant.
So my only option is to ask here
I need to make Third person camera, and i got it working. Current implementation is, that I move my "player" regarding absolute location
UP
LEFT RIGHT
DOWN
And the camera forward direction is not taken in consideration.
But what I need Is actually move the player forward regarding the camera forward vector.
Can someone please at least give me the solution how to find camera FW vector ?

Hi, just trying to work out the internals of Pixi Graphics.
It appears to me that the `arc` method plots points and draws to a canvas context, rather than just using `context.arc`. Is this correct? How come?
I ask because I can see the curve is not perfect.
Thanks!

Hi is it possible to update one of the properties of the arc, in the RequestAnimationFrame draw function. So I would like to update the endAngle of the arc, so that after each frame it looks like the arc is extending, getting longer.

Hello ! Why does the start angle of an arc is acting weird when it is set to anticlockwise ? You can see it in this example : http://phaser.io/examples/v2/display/arc-details The start angle is moving... In fact, i'm trying to make a piechart so i need it to start in the right place.

How can I add physics to a object like this :http://jsfiddle.net/f6tf8ue9/17/ ? I am trying to make a breakout game and i want to use an arc that moves and scales in a circular manner ( exactly like the progress bar in the link) , that would be my paddle that would not allow a ball to reach the center. Can this even be done?

So I been playing around with this experiment and I am starting to realize how important math is for games. =] A snipplet, I didnt include vars context.beginPath();context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);context.fillStyle = 'green';context.fill();context.lineWidth = 3;context.strokeStyle = 'yellow';context.stroke(); context.closePath(); context.beginPath();context.moveTo(centerX - radius, centerY);context.lineTo(centerX - 100, centerY);context.stroke();context.closePath(); context.beginPath();context.arc(centerX, centerY, 100, startAngle, endAngle, counterClockwise); context.lineWidth = 1; context.stroke();context.closePath();The outcome: Anyone know how if there is a built in function to get the Length of the arc and the last Point of the created Arc? If not, anyone know of a formula for such a thing =0