Stage.js — это легкая библиотека JavaScript с открытым исходным кодом, которую вы можете использовать для кроссплатформенной разработки 2D-HTML5-игр. Эта библиотека использует DOM-подобную модель для управления холстом и сама управляет циклами рендеринга вашего приложения.
В этом уроке я познакомлю вас с этой библиотекой и постараюсь охватить все, что вам может понадобиться, чтобы знать, как с легкостью начать ее использовать.
Давайте начнем!
Настройка и использование
Во-первых, вам нужно скачать библиотеку. Вы можете получить последнюю версию Stage.js из его репозитория GitHub (здесь приведено несколько примеров для начала работы). Если вы предпочитаете, вы также можете загрузить его прямо из CDN . После включения файла ядра вы должны добавить свой собственный файл JavaScript, но будьте осторожны, чтобы не включать файлы приложения перед библиотекой.
<script src="https://cdnjs.cloudflare.com/ajax/libs/stage.js/0.8.2/stage.web.min.js"></script> <script src="path/to/your/stage/application.js"></script> Приложения в Stage.js создаются путем передачи функции обратного вызова в Stage() . Затем библиотека загрузит все необходимые компоненты. Наконец, он вызовет функцию обратного вызова и отобразит все на экране. Каждое создаваемое вами приложение будет иметь дерево, а stage будет находиться в корне этого дерева. Все остальные элементы, такие как изображения или строки, будут его узлами. Дерево приложения перерисовывается, а узлы обновляются во время каждого цикла рендеринга.
Закрепление
Прикрепление определяет, как узлы прикрепляются к своим родителям. Вы можете установить много вариантов с закреплением. Вот некоторые из них: размер, расположение, выравнивание и преобразование. Ниже вы можете найти простой пример с объяснением того, что он делает.
Stage(function (stage) { stage.viewbox(700, 700); Stage.image('wheel') .appendTo(stage) .pin('handle', 0.5); }); Stage({ name: 'wheel', image: 'wheel.png' });
Начнем с указания размера окна просмотра. Мы добавили изображение wheel.png как wheel к сцене. После этого мы устанавливаем начальную позицию этого изображения или узла, используя handle . handle на любом узле размещается в указанном смещении относительно точки выравнивания на его родительском элементе. Обе handle и align указаны как относительные единицы Например, 0 вверху слева и 1 внизу справа. Приведенный выше код разместил колесо в центре окна просмотра.
Демонстрационная версия примера доступна на CodePen и показана ниже:
Чтобы расположить изображение на определенном горизонтальном расстоянии от центра, вы можете использовать ‘offsetX’, как показано ниже:
Stage.image('wheel') .appendTo(stage) .pin({ handle: 0.5, offsetX: 300 }) );
Обратите внимание, что расстояние выше не 300 пикселей, но оно в 3/14 раза больше размера окна просмотра. Вы также можете установить другие значения для узлов, такие как scale , skew и rotation . Чтобы масштабировать в определенном направлении (например, по горизонтали), вы можете использовать scaleX . Приведенный ниже фрагмент кода будет масштабировать колесо в 1,4 раза.
Stage.image('wheel') .appendTo(stage) .pin({ handle: 0.5, scaleX: 1.4 }) );
Вот демонстрация CodePen с примененным масштабированным колесом .
Поворот, масштабирование и наклон по умолчанию будут происходить с центром узла в качестве точки поворота. Вы также можете установить другую точку поворота для узлов, используя:
node.pin({ pivotX: x, pivotY: y });
Чтобы подвести итог, закрепление элементов дает вам возможность перемещать их и масштабировать или вращать их.
События мыши и касания
Для обновления узлов при взаимодействии с пользователем вы можете использовать различные события мыши и касания. Двигаясь вперед на примере нашего колеса выше, мы могли бы написать следующий код:
var wheelNode = Stage.image('wheel').appendTo(stage); wheelNode.pin({ 'handle': 0.5 }); wheelNode.on('click', function () { // Do something with the wheel here. });
Кроме того, вы можете определить эти события как Stage.Mouse.CLICK = 'click'; , Обновленный код будет:
wheelNode.on(click, function () { // Do something with the wheel here. });
Другим примером может быть Stage.Mouse.MOVE = 'touchmove mousemove'; ,
Tweening
Скручивание применяет плавные переходы к значениям закрепления. Это предотвращает резкие изменения в местоположении или размере соответствующих узлов. Например, приведенный ниже код будет резко вращать колесо с помощью радиан PI и менять его положение на 600 при каждом щелчке.
var wheelRotation = Math.PI; var wheelPosition = 300; wheelNode.on('click', function () { wheelRotation = -wheelRotation; wheelPosition = -wheelPosition; this.pin({ rotation: wheelRotation, offsetX: wheelPosition }); });
Это демо без анимации, которое также показано ниже:
Однако добавление метода анимации делает переход плавным.
wheelNode.on('click', function () { wheelRotation = -wheelRotation; wheelPosition = -wheelPosition; this.tween(3000) .pin({ rotation: wheelRotation, offsetX: wheelPosition }) .ease('bounce'); });
Здесь вы можете найти демонстрацию с применением анимации и замедления , также показанную ниже, чтобы увидеть разницу:
Есть много доступных опций, таких как метод ослабления, продолжительность и задержка. В приведенном выше коде я установил длительность 3000 мс и функцию замедления для bounce . Кроме того, вы можете использовать несколько функций замедления, таких как linear , quad , cubic и quart .
Установка задержки запустит переход после указанной задержки. Если узел не нужен после завершения анимации, вы можете вызвать tween.remove(); удалить узел. Чтобы выполнить некоторые другие операции, вы можете выполнить функцию обратного вызова после завершения анимации, используя следующий фрагмент:
tween.done(function () { //Perform your actions here. });
Текстурный Атлас
Текстуры используются узлами дерева для рисования графики на холсте. Для отображения графики на холсте вы можете использовать спрайт, также называемый «текстурный атлас». Задавать имя текстурного атласа необязательно. Лист спрайта должен иметь набор именованных текстур. Чтобы использовать их в приложении, мы можем ссылаться на них по имени. Вы можете создавать анимацию, используя массив текстур в качестве рамки. Сама анимация или анимация — это узел. Вот пример с анимированным воином:
Stage({ name: "warriorsprite", image: { src: "warriorsprite.png" }, textures: { w1: { x: 0 * 120, y: 0, width: 120, height: 320 }, w2: { x: 1 * 120, y: 0, width: 120, height: 320 }, w3: { x: 2 * 128, y: 0, width: 128, height: 320 }, w4: { x: 3 * 128, y: 0, width: 128, height: 320 }, warrior: ['w1', 'w2', 'w3', 'w4'] } });
Чтобы оживить воина, вам понадобится следующий код. Чтобы сделать это быстрее, вы можете увеличить fps . :
Stage(function (stage) { stage.viewbox(320, 320); Stage.anim('warrior') .appendTo(stage) .pin('align', 0.5) .fps(8) .on('click', function () { this.play(); }); });
Чтобы увидеть анимацию воина, взгляните на это демо или на демо ниже:
anim также есть много других методов, таких как gotoFrame(n) , которые приведут вас непосредственно к n- му кадру. В зависимости от значения n , вы также можете перемещать n кадров вперед или назад, используя moveFrame(n) .
Выводы
В этом вводном уроке мы рассмотрели все, что вам нужно знать, чтобы начать работу с Stage.js. Обсуждаемые концепции должны помочь вам создавать базовые анимации персонажей с использованием спрайтов и взаимодействовать с пользователем. Вы можете узнать больше о библиотеке с официального сайта . Я бы также предложил вам скачать файлы со страницы GitHub . Включенные демонстрационные файлы в загруженный файл еще больше прояснят ситуацию.