phaser.io how to draw over a path

user_3400838 0
Viewed 217

I need to write a game like: https://robowhale.com/html5/drawing-letters/ with phaser.io library. I mean user must follow a path and draw for example letter "A".

basically, need to draw over a path, I checked almost all examples and tutorials, But couldn't find any proper tutorial or algorithm.

any help, link, source code or tutorial can helps me to figure out algorithm and start project.

phaser-framework
1 Answers

Usually you will never find the full solution, you will have to merge multiple.

Here ist how I would approach this task (a quick and dirty solution):

Step 1) Find an Example that solves a part of the problem and work from there
(Based on the example Quadratic Bezier Curve)

Then I :...

  • I removed the tween
  • added Mouse Input
  • split the path in segments
  • calculate until where the path should be draw
  • draw path segments
  • ... And slowly adding missing features:
    • just update path when close enough
    • just allow move forwards
    • ...

var config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            backgroundColor: '#2d2d2d',
            parent: 'phaser-example',
            scene: {
                create: create,
                update: update
            }
        };

        var path;
        var curve;
        var graphics;
        var game = new Phaser.Game(config);

        var _myMaxPointIndex = 6;

        function create() {
            graphics = this.add.graphics();

            path = { t: 0, vec: new Phaser.Math.Vector2() };

            var startPoint = new Phaser.Math.Vector2(100, 500);
            var controlPoint1 = new Phaser.Math.Vector2(50, 100);
            var endPoint = new Phaser.Math.Vector2(700, 500);

            curve = new Phaser.Curves.QuadraticBezier(startPoint, controlPoint1, endPoint);

        }

        function _myDrawPath(g, points) {
            let startPoint = points.shift();
            graphics.lineStyle(30, 0x0000ff, 1);
            g.beginPath();
            g.moveTo(startPoint.x, startPoint.y);
            let maxPointsToDraw = _myMaxPointIndex == -1 ? points.length : _myMaxPointIndex + 1;

            for (let index = 0; index < maxPointsToDraw; index++) {
                const point = points[index];
                g.lineTo(point.x, point.y);
            }
            g.strokePath();
        }

        function update() {
            graphics.clear();
            graphics.lineStyle(2, 0x00ff00, 1);
            curve.draw(graphics);

            // get 20 Point from the Curve (can be more if to jaggy)
            let _myPoints = curve.getPoints(20);
            _myDrawPath(graphics, _myPoints)

            if (this.input.activePointer.isDown) {
                // Here I update the Max point that should be draw
                let _myMouse = this.input.activePointer.position;
                let _myNearestPoint = _myPoints.reduce((p, c, i) => {
                        let distance = Phaser.Math.Distance.BetweenPoints(_myMouse, c)
                        if (p.distance == -1 || p.distance > distance) {
                            p.distance = distance
                            p.idx = i
                        }
                        return p
                    }, { distance: -1 })
                _myMaxPointIndex = _myNearestPoint.idx
            }
        }
h1 {
font-family:arial
}
#phaser-example{
transform: translate(-20%, -20%) scale(.5);
}
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
<h1>Click to calculate path</H1>
 <div id="phaser-example"></div>

And with a bit of luck: While building this solution, I had to "google" for some documentation details, and found this in a Phaser forum, that points to a interesting solution with a working CodePen, with a more complex full working example (Just adding the codepen link if the forum entry gets deleted).

user_16792860
Related