Search the Community

Hey guys, I am glad to be a part of Game Dev community! I got some problems with finding a way to create bezier curve and align texture along it. Here is my code example https://www.pixiplayground.com/#/edit/95tGP9bRdtlv6Uvm0RaHx I need to create a cable and convert it so that the texture aligns with a curve Example code shows that path is just tiled, not aligned. How to get result like SimpleRope, but smooth like bezier curve?

I was inspired by this topic to produce a bezier surface. The surface is not a mesh but a logical object that contains the data from which you can build the mesh using a ribbon. I restricted myself to a bicubic surface. Over the next weeks I will add some other methods and who know perhaps try to write a typescript version and PR it. This PG animates the surface by changing the control points, https://www.babylonjs-playground.com/#KT9EE7#1 In this PG you can move the control points (purple spheres) in the direction of the chosen axis. Click on a control to move the axes to that control, click on a cone to set the axis along which you move the control ( done by giving mesh behaviours a go) then drag the control https://www.babylonjs-playground.com/#KT9EE7#2 Work still in progress. have fun.

Hello everyone, I'd like to make drag n drop on meshes keeping the link between meshes, like in this example (https://www.babylonjs-playground.com/#17EGSU#8). I don't know how to set the position of curve ? -> Maybe, with https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh, and the example https://www.babylonjs-playground.com/#1UZIZC#6, but I don't understand why position table is so big, and to set from mesh position ? Thank you

Hi All, I'm trying to figure out if there is any functionality in PIXI to find a point on a bezier curve. For example I want to take a spurious global point and find the closest point on a curve. Any help would be greatly appreciated.

I am using this code: var sp = new phaser.Point(frmX, frmY + halfCupboardDepth + thickness), mp = new phaser.Point(frmX, frmY), ep = new phaser.Point(leftWallShiftX, frmY); frnConstr.Utility.drawBezierCurve(graphics, sp, mp, ep, 1, borderColor, 1); ep = new phaser.Point(frmX, frmX, frmY + halfCupboardDepth + thickness * 2); mp = new phaser.Point(frmX, frmY + thickness); ep = new phaser.Point(leftWallShiftX, frmY + thickness); frnConstr.Utility.drawBezierCurve(graphics, sp, mp, ep, 1, borderColor, 1); where: drawBezierCurve() is: drawBezierCurve: function (graphics, sp, mp, ep, borderWidth, borderColor, borderAlpha) { graphics.lineStyle(borderWidth, borderColor, borderAlpha); graphics.moveTo(sp.x, sp.y); graphics.bezierCurveTo(sp.x, sp.y, mp.x, mp.y, ep.x, ep.y); } An it is drawing this drawing: Yes the green areas were drawn by other code but the above code draws just curved lines. I would like to fill the area between those two curves and the area below the second curve in-between the green area and the second curve. How can I do that? Should I draw first rectangle and then call bezierCurveTo() to make it curved. Well tried with polygon but it didn't do the trick. What do i miss?

I'm creating a mask for my sprite using a Phaser.Graphics object - the mask is a collection of rectangles and circles, and it works fine. I then tried to add a filled bezier curve with the method bezierCurveTo(). If my graphics object is not set as a the mask, I can see the filled curve appear in my graphics. But when I use it as a mask for another sprite, the filled curve does not appear to be part of the shape With mask applied - no bezier curve is seen Plain graphics object, not used as a mask. The filled bezier curve is visible on the left. Is this just a rule that bezier curves can't be used in masks? Or is there some other way to make this work...?

Hi there, First of all, thanks for this framework. You did a very good job. I'm trying to move a sprite along a defined path. Between each of movement, I don't want a linear interpolation, but a Beizer one. I saw this topic : http://www.html5gamedevs.com/topic/6569-move-a-sprite-along-a-path/ But, there is really few documentation around this feature and values are cryptic. Can you explain more with the following example ? Or maybe an other one. this.game.add.tween(sprite).to({ y: [a, b, c, d], x: [w, x, y, z]}, 5000).interpolation(Phaser.Math.bezierInterpolation).start();

It would be nice to draw SVG paths with WebGL. example M16,1.667C8.084,1.667,1.667,8.084,1.667,16S8.084,30.333,16,30.333S30.333,23.916,30.333,16S23.916,1.667,16,1.667zM25.534,8.232c1.7,2.084,2.731,4.732,2.767,7.618c-3.232-0.656-6.14-0.783-8.777-0.38c-0.362-0.825-0.738-1.631-1.125-2.412C22.43,11.542,24.497,9.781,25.534,8.232zM23.955,6.624c-0.877,1.658-3.191,3.232-6.564,4.476c-1.533-2.86-3.115-5.299-4.388-7.033c0.96-0.241,1.964-0.37,2.997-0.37C19.031,3.696,21.809,4.8,23.955,6.624zM10.846,4.831c1.09,1.441,2.751,3.91,4.415,6.967c-3.687,1.073-8.032,1.677-11.282,1.585C4.806,9.581,7.395,6.431,10.846,4.831zM3.696,16c0-0.147,0.006-0.293,0.011-0.439c0.312,0.013,0.632,0.019,0.96,0.019c3.464,0,7.754-0.646,11.484-1.765c0.048-0.015,0.093-0.029,0.14-0.044c0.354,0.704,0.697,1.431,1.033,2.175c-0.516,0.146-1.022,0.314-1.518,0.507c-3.547,1.375-6.512,3.895-9.031,7.678C4.861,21.96,3.696,19.114,3.696,16zM8.388,25.656c2.31-3.574,5.002-5.924,8.209-7.167c0.516-0.2,1.049-0.369,1.594-0.513c1.205,2.996,2.166,6.205,2.559,9.373c-1.462,0.613-3.066,0.953-4.749,0.953C13.128,28.305,10.484,27.312,8.388,25.656zM22.802,26.246c-0.446-2.939-1.321-5.895-2.413-8.686c2.316-0.279,4.881-0.117,7.742,0.485C27.557,21.46,25.574,24.398,22.802,26.246zSome of the commands are present in Pixi (like Graphics.moveTo, Graphics.lineTo), but no curves (curveto, smooth curveto, quadratic Bézier curve etc...) Are they gonna be implemented in the near future? What would be the best way to extend Pixi? Could you give me a very simple example? Could it this work: "absolute cubic Bézier curveto" © function cubicBezier(x, y, x1, y1, x2, y2) {// i solve this ef like this http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api/ ...// returns the array with the points}I pass the points to the Graphics class and now i can transform the Bezier Object, render (both way), interact etc, just as the other objects. Is there any Interface of Graphics class?