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!

score 7 · Accepted Answer · answered Dec 09 '13 at 17:20

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

This is exactly what I needed, it works! I don't understand why a second ticker (for the stage) is needed though? — trainoasis, Dec 10 '13 at 08:25
Adding the stage as a listener to the Ticker is the "built-in" way to call **stage.update();**, thus refreshing the stage. Alternatively you could manually add the stage.update() line to your own tick function. — Andrew, Dec 10 '13 at 14:15
whoops, i missed that you lack that line in your tick function - Yes, as you said, I have stage.update(event); in my tick function. Thanks again — trainoasis, Dec 11 '13 at 09:23

Lines with easelJS using Ticker

1 Answers1

Drawing a line in easeljs

Updating the stage in real time