Lines with easelJS using Ticker

Question

I started learning html5 and easelJS two days ago, and I'm working on a game. Now I ran into some problems of course :)

I know I can draw a line with the code:

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

But as far as I know, you shouldn't mix context with easelJS's Ticker/Stage! I use Ticker to update the stage on certain FPS (update would erase the line in this case anyway right?).

Now what I want is to draw a line in tick method on certain occasions (key press) - BUT i need to draw a line slowly, so the user can see it moving towards the end. When a key gets pressed, some functions are called, and I could set some global variable according to which I would perform line drawing in the tick function …

I figured I could use moveTo/lineTo in a loop and increase coordinates accordingly.

What is the best way to approach this, am I missing something or maybe thinking about it totally wrong?

I checked Drawing a Line in a html5 canvas using EaselJS but he has static coordinates and he doesn't need to see the line moving as well.

I'm looking forward to any suggestions/corrections, thanks!

Answer 1

Drawing a line in easeljs

Check out this rudimentary snake game I made in jsfiddle. Note: you'll need to click into the bottom right window to gain focus and use the arrow keys to control the snake. With easeljs, you'll need to subscribe to the model of using DisplayObjects to construct your game environment. The DisplayObject is the building block for all UI content. In this case, I am using a Shape object which is a child class of DisplayObject, and is used to draw vector content. You'll also want to familiarize yourself with the Graphics class in easeljs. Each shape has a graphics property on which you will make all your drawing api calls.

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();

Updating the stage in real time

In order to achieve the line movement, you will need listen to the "tick" event of Ticker object. In the jsfiddle example, I've added the both the stage as a listener, and a window scoped function where the line drawing will occur.

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

You will also notice I've added a onkeydown listener to the window to set our key modifiers which control the direction of the snake.

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;
    }
}

Finally, in the tick function, you will make your drawing calls and update the x/y position based on the current direction. Remember the tick function gets called every frame, based on your current frames per second which is set using this static function.

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();
    }
}