Строки с помощьюEaslJS с использованием Ticker

Два дня назад я начал изучать HTML5 и EaselJS и сейчас работаю над игрой. Теперь я столкнулся с некоторыми проблемами, конечно :)

Я знаю, что могу нарисовать линию с помощью кода:

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

Но, насколько я знаю, вы не должны смешивать контекст с Ticker/Stage вEaselJS! Я использую Ticker для обновления сцены при определенном FPS (в этом случае обновление все равно сотрет строку, верно?).

Теперь я хочу рисовать линию методом тика в определенных случаях (нажатие клавиши) - НО мне нужно рисовать линию медленно, чтобы пользователь мог видеть, как она движется к концу. При нажатии клавиши вызываются какие-то функции, и я мог бы установить какую-то глобальную переменную, в соответствии с которой я бы выполнял отрисовку линии в функции тика…

Я подумал, что могу использовать moveTo/lineTo в цикле и соответственно увеличивать координаты.

Как лучше всего подойти к этому, я что-то упускаю или, может быть, думаю об этом совершенно неправильно?

Я проверил Рисование линии на холсте html5 с использованием EaselJS но у него статические координаты и ему не нужно видеть движущуюся линию.

Я с нетерпением жду любых предложений / исправлений, спасибо!


html html5-canvas drawing ticker easeljs
person trainoasis    schedule 08.12.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Рисование линии в мольберте

Взгляните на эту простую игру про змей, которую я сделал в jsfiddle. Примечание: вам нужно будет щелкнуть в нижнем правом окне, чтобы получить фокус, и использовать клавиши со стрелками для управления змеей. С помощьюEaseljs вам нужно подписаться на модель использования DisplayObjects для создания ваше игровое окружение. DisplayObject — это строительный блок для всего содержимого пользовательского интерфейса. В этом случае я использую объект Shape, который является дочерним классом DisplayObject и используется для рисования векторного содержимого. Вы также захотите ознакомиться с классом Graphics вEaseljs. Каждая фигура имеет графическое свойство, для которого вы будете выполнять все вызовы 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();

Обновление сцены в режиме реального времени

Чтобы добиться движения линии, вам нужно будет прослушивать событие "tick" объекта Ticker. В примере с jsfiddle я добавил как сцену в качестве слушателя, так и функцию области действия окна, где будет происходить рисование линий.

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

Наконец, в функции тика вы будете выполнять вызовы рисования и обновлять положение x/y в зависимости от текущего направления. Помните, что функция тика вызывается каждый кадр на основе ваших текущих кадров в секунду, которые устанавливаются с помощью этого статического функция.

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();
    }
}
person Andrew    schedule 09.12.2013
comment
Это именно то, что мне было нужно, это работает! Я не понимаю, зачем нужен второй бегунок (для сцены)? - person trainoasis; 10.12.2013
comment
Добавление рабочей области в качестве слушателя тикера – это встроенный способ вызова stage.update();, что приводит к обновлению рабочей области. В качестве альтернативы вы можете вручную добавить строку stage.update() в свою собственную тиковую функцию. - person Andrew; 10.12.2013
comment
упс, я пропустил, что вам не хватает этой строки в вашей функции тика - да, как вы сказали, у меня есть stage.update(event); в моей функции тика. Еще раз спасибо - person trainoasis; 11.12.2013