使用Ticker的easelJS线路

Question

我两天前开始学习html5和easelJS，我正在开发一款游戏。当然，现在我遇到了一些问题:)

我知道我可以用代码划清界限：

var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();

但据我所知，你不应该把上下文和easelJS的Ticker/Stage混在一起！我使用Ticker来更新某些FPS上的stage (在这种情况下，update将擦除这条线，对吧？)

现在我想要的是在某些情况下(按键)在tick方法中画一条线-但我需要慢慢地画一条线，这样用户就可以看到它正在向末端移动。当一个键被按下时，一些函数会被调用，我可以设置一些全局变量，根据这些变量，我将在滴答函数…中执行线条绘制

我想我可以在循环中使用moveTo/lineTo并相应地增加坐标。

处理这个问题的最好方法是什么，是我遗漏了什么，还是我的想法完全错了？

我检查了Drawing a Line in a html5 canvas using EaselJS，但他有静态坐标，他不需要看到直线也在移动。

我期待着任何建议/更正，谢谢！

Answer 1

在easeljs中绘制直线

看看我用jsfiddle做的这个rudimentary snake game。注意:你需要点击右下角的窗口来获得焦点，并使用箭头键来控制蛇。使用easeljs，您需要订阅使用DisplayObjects来构建游戏环境的模型。DisplayObject是所有UI内容的构建块。在本例中，我使用了一个Shape对象，它是DisplayObject的子类，用于绘制矢量内容。您还需要熟悉easeljs中的Graphics类。每个形状都有一个图形属性，您将在该属性上进行所有绘图api调用。

var line = new createjs.Shape();
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startY++;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();

实时更新stage

为了实现线条移动，您需要监听Ticker对象的"tick“事件。在jsfiddle示例中，我添加了stage作为侦听器，以及将在其中进行线条绘制的窗口范围内的函数。

createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", tick);

您还会注意到，我已经向窗口添加了一个onkeydown侦听器来设置我们的键修饰符，这些键修饰符控制蛇的方向。

window.onkeydown = function(e){
    color = createjs.Graphics.getRGB(0xFFFFFF * Math.random(), 1);
    switch(e.which){
        case 38:
            wPressed = false;
            ePressed = false;
            sPressed = false;
            nPressed = true;
            break;
        case 39:
            nPressed = false;
            sPressed = false;
            wPressed = false;
            ePressed = true;
            break;
        case 40:
            wPressed = false;
            ePressed = false;
            nPressed = false;
            sPressed = true;
            break;
        case 37:
            nPressed = false;
            sPressed = false;
            ePressed = false;
            wPressed = true;
            break;
    }
}

最后，在tick函数中，您将调用绘图并基于当前方向更新x/y位置。请记住，基于使用this static function设置的当前每秒帧数，每帧都会调用tick函数。

function tick(){
    if(nPressed)
    {
        line.graphics.setStrokeStyle(3);
        line.graphics.beginStroke(color);
        line.graphics.moveTo(startX, startY);
        startY--;
        line.graphics.lineTo(startX, startY);
        line.graphics.endStroke();
    }

    if(ePressed)
    {
        line.graphics.setStrokeStyle(3);
        line.graphics.beginStroke(color);
        line.graphics.moveTo(startX, startY);
        startX++;
        line.graphics.lineTo(startX, startY);
        line.graphics.endStroke();
    }

    if(wPressed)
    {
        line.graphics.setStrokeStyle(3);
        line.graphics.beginStroke(color);
        line.graphics.moveTo(startX, startY);
        startX--;
        line.graphics.lineTo(startX, startY);
        line.graphics.endStroke();
    }

    if(sPressed)
    {
        line.graphics.setStrokeStyle(3);
        line.graphics.beginStroke(color);
        line.graphics.moveTo(startX, startY);
        startY++;
        line.graphics.lineTo(startX, startY);
        line.graphics.endStroke();
    }
}