来自 PNG 图像的 CreateJS/EaselJS 碰撞触发器答案

【问题标题】：CreateJS/EaselJS Collision trigger from PNG image来自 PNG 图像的 CreateJS/EaselJS 碰撞触发器
【发布时间】：2020-08-14 12:18:10
【问题描述】：

我是 CreateJS 的新手，我正在使用它来尝试制作一个简单的画布游戏。

用户点击屏幕上的一个点，精灵移动和停止。我按此顺序有不同的显示容器（舞台子级：路径网格、背景、精灵容器）。理想情况下，用户单击画布上的任意位置，精灵将尽可能移动，直到到达路径网格 png 的边缘。

我只是不知道如何实现这一点。如果有人能指出我解决这个问题的正确方向，那就太好了。非常感谢。

Path Mesh png

当前使用的代码的 sn-p。

client.walkmesh.addEventListener("click", function(evt) {
    let pc = player.container
        
    let timeline = new createjs.Timeline();
    timeline.addTween(
        // Bounce
        createjs.Tween.get(playerChild, {loop:true})
        .wait(1).to({
            y:0,
        }).wait(1).to({
            y: -4,
        }).wait(1).to({
            y: -6,
        }).wait(1).to({
            y:  -4,
        }).wait(1).to({
            y: 0,
        }),
        // Move
        createjs.Tween.get(pc).to({x:evt.localX, y:evt.localY}, 
        calculateSpeed(evt.localX, evt.localY, pc.x, pc.y), 
        createjs.Ease.linear)
    );
});

【问题讨论】：

请用您已有的代码更新问题。
更新了问题以提供我尝试过的当前代码。

标签： javascript createjs easeljs

【解决方案1】：

如果您是这方面的新手，正如您所说的，您可以获得框架的帮助。例如，https://zimjs.com 的 ZIM 有一个 MotionController() ，您可以在其中传递要移动的对象和动作类型 - 例如移动到按下，或跟随鼠标，或按键或游戏手柄。然后您也可以添加一个边界，这将使您尝试做的事情变得非常简单。

var sprite = new Sprite().center();
var boundary = new Boundary(mesh.x, mesh.y, mesh.width-sprite.width, mesh.height-sprite.height);
new MotionController({target:sprite, boundary:boundary});

否则，您可以在 Ticker 函数中手动对其进行编码。将 x 和 y 移向鼠标位置。如果 x 和 y 超出边界的一侧，则将其设置为边界。基本上，这就是 MotionController 类正在为您做的事情。不要对 Tween 这样做。而且因为您没有使用补间，您可能想要添加阻尼......同样，MotionController 会为您执行此操作。否则，ZIM 也有一个 Damp 类来为您进行阻尼计算。

如果您需要帮助 - 欢迎您通过 https://zimjs.com/slack 加入我们 - 干杯。

【讨论】：