phaser.io如何绘制路径

Question

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

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

任何帮助，链接，源代码或教程可以帮助我找出算法和启动项目。

Answer 1

通常您将永远找不到完整的解决方案，您将不得不合并多个。

这里是我将如何处理这个任务(一个快速和肮脏的解决方案)。

步骤1)找到了一个解决部分问题的示例并从该示例中工作

(基于示例https://phaser.io/examples/v3/view/paths/curves/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“来获取一些文档细节，并在相位论坛中找到了这一点，它指向一个带有工作CodePen的有趣的解，还有一个更复杂的完整示例(如果论坛条目被删除，只需添加代码链接 )。