Search the Community

Is it possible to use a "stroke" as a mask?

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

How can we lock arc camera so we can not set camera with mouse up or down ? gretings 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!

Hello, I don't know if this is something that could be merged into github but we had some projects (and therefore customers) that were highly loaded with objects, thus a bit slow in rendering. The camera inertia was then to long lasting to control the camera if you know what I mean. This is what I've changed to handle this: // Inertia var engineDelta = Math.min(this.getEngine().deltaTime,100), inertiaFactor = Math.min(1,16.66666 / engineDelta); if (this.inertialAlphaOffset !== 0 || this.inertialBetaOffset !== 0 || this.inertialRadiusOffset !== 0) { this.alpha += (this.beta <= 0 ? -this.inertialAlphaOffset : this.inertialAlphaOffset) / inertiaFactor; this.beta += this.inertialBetaOffset / inertiaFactor; this.radius -= this.inertialRadiusOffset / inertiaFactor; this.inertialAlphaOffset *= this.inertia * inertiaFactor; this.inertialBetaOffset *= this.inertia * inertiaFactor; this.inertialRadiusOffset *= this.inertia * inertiaFactor; if (Math.abs(this.inertialAlphaOffset) < BABYLON.Engine.Epsilon) this.inertialAlphaOffset = 0; if (Math.abs(this.inertialBetaOffset) < BABYLON.Engine.Epsilon) this.inertialBetaOffset = 0; if (Math.abs(this.inertialRadiusOffset) < BABYLON.Engine.Epsilon) this.inertialRadiusOffset = 0; } // Panning inertia if (this.inertialPanningX !== 0 || this.inertialPanningY !== 0) { if (!this._localDirection) { this._localDirection = BABYLON.Vector3.Zero(); this._transformedDirection = BABYLON.Vector3.Zero(); } this.inertialPanningX *= this.inertia * inertiaFactor; this.inertialPanningY *= this.inertia * inertiaFactor; if (Math.abs(this.inertialPanningX) < BABYLON.Engine.Epsilon) this.inertialPanningX = 0; if (Math.abs(this.inertialPanningY) < BABYLON.Engine.Epsilon) this.inertialPanningY = 0; this._localDirection.copyFromFloats(this.inertialPanningX / inertiaFactor, this.inertialPanningY / inertiaFactor, 0); this._viewMatrix.invertToRef(this._cameraTransformMatrix); BABYLON.Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection); this.target.addInPlace(this._transformedDirection); } It rotates by the given inertia amount depending on the time that proceeded during the renderings. The var engineDelta = Math.min(this.getEngine().deltaTime,100) is to avoid big camera jumps on frames that last longer than 100ms. In our project the render loop doesn't run continuesly. If someone likes to test this and/or push it into babylon I would be glad to have contributed a small thing :-) If not it's also completely okay as it's only needed in our project(s)! ;-) Best regards Kevin

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.

Have a look at this example. Why does arc not work with events.onInputDown? Just curious, I can work around it.

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