phaser.io 如何绘制路径

Question

我需要用 phaser.io 库编写一个游戏，例如：https://robowhale.com/html5/drawing-letters/。我的意思是用户必须遵循一条路径并绘制例如字母“A”。

基本上，需要画一条路径，我检查了几乎所有的示例和教程，但找不到任何合适的教程或算法。

任何帮助，link，源代码或教程都可以帮助我弄清楚算法并开始项目。

Answer 1

通常你永远找不到完整的解决方案，你必须合并多个。

下面是我将如何处理此任务（一个快速而肮脏的解决方案）：

步骤 1) 找到一个解决部分问题的示例并从那里开始工作
（基于示例Quadratic Bezier Curve）

然后我:...

我删除了补间
添加了鼠标输入
分段分割路径
计算到应该绘制路径的位置
绘制路径段
...并慢慢添加缺少的功能：
- 当足够接近时更新路径
- 只允许向前移动
- ...

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>

再加上一点运气： 在构建此解决方案时，我不得不“google”获取一些文档详细信息，如果论坛条目被删除，我会在 Phaser forum, that points to a interesting solution with a working CodePen, with a more complex full working example (Just adding the codepen link 中找到它。

phaser.io 如何绘制路径

phaser.io how to draw over a path

phaser-framework