Использование CreateJS — EaselJS

В этом уроке мы будем изучать набор библиотек CreateJS . CreateJS — это набор библиотек JavaScript и инструментов для создания многофункциональных интерактивных приложений с HTML5. Набор CreateJS разделен на четыре библиотеки.

• EaselJS — упрощает работу с HTML5 canvas.
• TweenJS — для анимации свойств HTML5 и JavaScript
• SoundJS — позволяет вам легко работать с аудио HTML5
• PreloadJS — позволяет вам управлять и координировать загрузку активов

Первая библиотека, на которую мы посмотрим, это EaselJs. Давайте начнем!

EaselJS объяснил

EaselJS — это библиотека для работы с холстом HTML5. Он состоит из полного иерархического списка отображения, модели взаимодействия с ядром и вспомогательных классов, что значительно упрощает работу с Canvas. Начало работы с EaselJS не может быть проще. Вам нужно будет определить элемент canvas в HTML и ссылаться на него в JavaScript. EaselJS использует понятие Stage, которое является Контейнером верхнего уровня для списка отображения (stage будет вашим элементом canvas). Ниже приведен фрагмент HTML и соответствующий JavaScript, необходимый для настройки EaselJS.

Для ссылки на вышеупомянутый холст вы должны использовать следующее.

Рисование с графикой и классами формы

EaselJS поставляется с классом Graphics, который предоставляет простой в использовании API для генерации инструкций векторного рисования и отрисовки их в заданном контексте. Команды очень похожи на обычный HTML5 Canvas, в то время как EaselJs также добавляет некоторые свои новые команды. Если вы не знакомы с HTML 5 canvas и командами рисования, возможно, вы захотите посмотреть курс Canvas Essentials, который недавно был выпущен. Обычно вы не будете использовать класс Graphics самостоятельно, а получите к нему доступ с помощью класса Shape . Ниже приведен JSFiddle, который использует этот класс Shape для рисования.

Как видно из приведенного выше кода, команды являются цепочечными ShapeObject.graphics.setStrokeStyle(1).beginStroke("rgba(0,0,0,1) т. ShapeObject.graphics.setStrokeStyle(1).beginStroke("rgba(0,0,0,1) . Вы также могли заметить вызов stage.addChild() внутри функций. Каждый раз, когда вы хотите поместить что-то на холст, вы должны вызывать stage.addChild() . В функции drawShapes() есть вызов stage.update() . Чтобы увидеть ваши изменения, вы должен вызывать stage.update() после каждого изменения на холсте. Существует способ не выполнять многократный вызов stage.update() то есть с помощью класса Ticker . Тикер обеспечивает централизованную передачу stage.update() в наборе Интервал. Слушатели могут подписаться на событие тика, чтобы получать уведомления об истечении заданного интервала времени. Ниже описано, как использовать класс Ticker для автоматического обновления сцены.

Класс Shape поставляется с целым рядом свойств, которые вы можете настроить, таких как x,y позиции, alpha , scaleX,scaleY и многие другие. Ниже приведена демонстрация некоторых из этих свойств.

В рамках drawTheShapes() мы генерируем 15 кругов с линией, проведенной через них, и возможность drawTheShapes() команды рисования делает эту задачу простой. Затем мы рандомизируем положение фигур, масштаб, вращение и альфа.

Вы можете прикрепить события к таким фигурам, как click , mousedown/over/out и т.д., используя метод on() . В этой демонстрации, когда вы нажимаете на одну из фигур, выдается предупреждение, и при наведении мыши мы записываем сообщение на консоль. Чтобы разрешить события мыши на этапе mousedown/over/out т. Д., Вы должны вызвать stage.enableMouseOver(frequency) где частота — это количество раз в секунду для трансляции событий мыши. Эта операция дорогая, поэтому по умолчанию она отключена.

Текстовый класс

EaselJS поставляется с классом Text, который позволяет очень легко создавать текст и изменять свойства этого текста. Вы вызываете конструктор, передающий текст, шрифт и цвет, т.е. new createjs.Text("Hello World", "20px Arial", "#ff7700") Как и класс Shape, он поставляется с различными свойствами и методами. , Ниже приведена демонстрация с использованием класса Text.

Как и в предыдущей демонстрации, мы создаем 25 текстовых полей и применяем некоторые случайные значения к их свойствам.

Демо-проект — Палач

Следующая демонстрация — игра в палач, созданная с использованием класса Shape and Text, который мы обсуждали в этом уроке.

Чтобы нарисовать палача, мы используем комбинацию для lineTo() , moveTo() , а для головы мы используем метод arc() . В функции drawCanvas() мы вызываем метод clear() для hangmanShape.graphics который очищает все предыдущие рисунки, которые мы сделали, в эту форму. Мы изменяем цвет TextFields в зависимости от того, выиграл или проиграл игрок.

Bitmaps

Вы можете использовать изображения с помощью класса Bitmap . Растровое изображение представляет изображение, холст или видео в списке отображения, его экземпляр может быть создан с использованием существующего элемента HTML или строки (Base64). Например, new createjs.Bitmap("imagePath.jpg") .

<

Очень похоже на предыдущие демонстрации, мы создаем здесь три растровых изображения и присваиваем им некоторые случайные свойства.

Мы используем класс Shadow для создания теней. Класс тени принимает в качестве параметров цвет, offsetX, offsetY, размер эффекта размытия и т. Д. myImage.shadow = new createjs.Shadow("#000000", 5, 5, 10) . Вы можете применять тени к любому экранному объекту, чтобы это работало и для текста.

Sprite и SpriteSheets

Sprite отображает кадр или последовательность кадров (например, анимацию) из экземпляра SpriteSheet . Спрайт-лист — это серия изображений (обычно это кадры анимации), объединенные в одно изображение. Например, анимация, состоящая из восьми изображений 100×100, может быть объединена в лист спрайта 400×200 (четыре кадра по два в высоту). Вы можете отображать отдельные кадры, воспроизводить кадры в виде анимации и даже создавать последовательности анимаций вместе. Чтобы инициализировать экземпляр Sprite, вы передаете SpriteSheet и необязательный номер кадра или анимацию для воспроизведения, например, new createjs.Sprite(spriteSheet,"run") . Данные, передаваемые конструктору SpriteSheet, определяют три критически важных элемента информации:

• Изображение или изображения для использования.
• Положения отдельных кадров изображения. Эти данные могут быть представлены одним из двух способов: как регулярная сетка последовательных кадров одинакового размера или как индивидуально определенные кадры переменного размера, расположенные нерегулярным (непоследовательным) образом.
• Аналогичным образом, анимации могут быть представлены двумя способами: в виде последовательности последовательных кадров, определенных начальным и конечным кадром [0,3], или в виде списка кадров [0,1,2,3].

Ниже приведен пример кода, который инициализирует «символьный» спрайт.

Вот демонстрация с использованием классов Sprite и SpriteSheet. Вам нужно нажать на сцену, а затем вы можете использовать «A» для перемещения влево и «D» для перемещения вправо. Одна вещь, которую стоит отметить в этой демонстрации, это то, что у меня есть Base64-кодированные изображения, и они включены внешним ресурсом «imagestrings.js». Поскольку мы используем SpriteSheet и взаимодействуем с мышью, полотно портится из-за политики междоменных изображений (CORS). Используя строки Base64, мы можем преодолеть это. Если бы это было размещено на вашем собственном домене, вы бы использовали класс Bitmap как обычно, передавая элемент или путь.

В функции setup() мы создаем spritesheet . Для ключа «images» я передаю characterImage строку, которая является строкой в ​​кодировке Base64. Для клавиши «frames» изображения персонажей имеют высоту 96 пикселей, ширину 75 пикселей и десять кадров (отдельные изображения). Ниже приведено изображение, которое мы используем для spritesheet чтобы вы могли визуализировать, как она выглядит.

Для клавиши «анимация» мы определяем «запустить» анимацию от «кадра» с нуля до девяти. Наконец, мы создаем character из spritesheet .

Когда вы перемещаете персонажа влево или вправо, мы вызываем character.play() . и когда вы прекращаете перемещать символ, мы вызываем character.gotoAndStop(0) . Поскольку у нас есть только одна «анимация», мы можем просто вызвать play() и gotoAndStop() если у вас было несколько анимаций, вы бы использовали комбинацию этих двух плюс gotoAndPlay() .

Контейнер

Контейнерный класс — это вложенный список отображения, который позволяет работать с составными элементами отображения. Например, вы можете сгруппировать экземпляры Bitmap для рук, ног, туловища и головы вместе в контейнер Person и трансформировать их в группу, сохраняя при этом возможность перемещать отдельные части относительно друг друга. Дочерние контейнеры имеют свои свойства transform и alpha, связанные с родительским контейнером. Ниже приведена демонстрация с использованием класса контейнеров. Нажмите на сцену, чтобы переместить контейнер на 20 пикселей.

Здесь мы создаем три растровых изображения и добавляем их в container , затем мы можем переместить их все за один раз, перемещая container , и даже если они находятся в контейнере, вы все равно можете перемещать их по отдельности.

Кэш ()

Метод cache () экранного объекта рисует экранный объект на новом холсте, который затем используется для последующих рисований. Для сложного контента, который не меняется часто (например, Контейнер с множеством дочерних элементов, которые не перемещаются, или сложный векторный Shape), это может обеспечить намного более быструю визуализацию, потому что контент не нужно перерисовывать каждый тик.

Кэшированный экранный объект можно свободно перемещать, поворачивать, выцветать и т. Д., Однако, если его содержимое изменяется, необходимо вручную обновить кэш, updateCache() вызвав updateCache() или cache() . Вы должны указать область кэша с помощью параметров x, y, w и h. Это определяет прямоугольник, который будет отображаться и кэшироваться с использованием координат этого экранного объекта. Кэширование обычно не должно использоваться в классе Bitmap как это может ухудшить производительность, однако, если вы хотите использовать фильтр для Bitmap его необходимо кэшировать.

Из-за ограничений по размеру встраивания JSFiddle я не буду предоставлять демо-версию для этого метода, но предоставлю вам ссылку на демонстрацию на веб-сайте CreateJs.

фильтры

Класс Filter — это базовый класс, от которого должны наследоваться все фильтры. Фильтры должны применяться к объектам, которые были кэшированы с использованием метода кэширования. Если объект изменяется, вам необходимо снова его кэшировать или использовать updateCache() . Обратите внимание, что фильтры должны применяться перед кэшированием. EaselJS поставляется с несколькими встроенными фильтрами. Обратите внимание, что отдельные фильтры не скомпилированы в минимизированную версию EaselJS. Чтобы использовать их, вы должны включить их вручную в HTML.

• AlphaMapFilter: сопоставление изображения в оттенках серого с альфа-каналом экранного объекта
• AlphaMaskFilter: сопоставление альфа-канала изображения с альфа-каналом экранного объекта.
• BlurFilter: применить вертикальное и горизонтальное размытие к экранному объекту
• ColorFilter: преобразование цвета экранного объекта
• ColorMatrixFilter: преобразование изображения с помощью ColorMatrix

В демонстрации ниже используется Цветовой фильтр , при нажатии на сцену он удаляет зеленый канал с изображения. Color Filter имеет следующие параметры.

Красный, зеленый, синий и альфа-множители должны быть числами от нуля до единицы, а красный, зеленый, синий и альфа-смещения — числами от 255 до 255.

Мы создаем обычный растровый объект, применяем фильтр и кешируем растровое изображение.

Финальная демонстрация

Я создал одну заключительную демонстрацию, которую мы будем развивать в следующей части этой серии, добавляя звук, предварительно загружая ресурсы и используя анимацию.

В этой демонстрации мы используем классы Bitmap , Text и Shape для создания игры типа Space Invaders. Я не буду подробно останавливаться на этом шаге, поскольку хочу показать, как связать концепции, но если у вас есть какие-либо вопросы по поводу кода, не стесняйтесь задавать их в комментариях. Обнаружение столкновений обеспечивается osln через Github .

Вывод

В этом уроке мы взглянули на EaselJS и сделали несколько демонстрационных приложений. Я надеюсь, что вы нашли эту статью полезной, и что она вдохновляет вас на использование EaselJS. Спасибо за прочтение!