phaser-framework - Phaser.io 如何绘制路径

Question

我需要编写一个游戏，例如:https://robowhale.com/html5/drawing-letters/与 Phaser.io 库。我的意思是用户必须遵循一条路径并绘制例如字母“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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02726a6371677042312c37372c30" rel="noreferrer noopener nofollow">[email protected]</a>/dist/phaser.min.js"></script>
<h1>Click to calculate path</H1>
 <div id="phaser-example"></div>

如果运气好的话: 在构建此解决方案时，我必须“谷歌”查找一些文档详细信息，并在 Phaser forum 中找到了它。 ，指向 interesting solution使用有效的 CodePen，以及更复杂的完整工作示例(如果论坛条目被删除，只需添加 codepen link)。