phaser.io 如何绘制路径

Question

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

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

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

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>

运气好的话： 在构建此解决方案时，我不得不“谷歌”获取一些文档详细信息，并在 Phaser forum 中找到了它，它指向带有工作 CodePen 的 interesting solution，以及更复杂的完整工作示例（只需添加 @987654324 @如果论坛条目被删除）。