Руководство по новому драйверу CreateJS

JavaScript игра внешний фреймворк
Руководство по новому драйверу CreateJS

TL,TR

В последнее время я изучаю и изучаю фронтенд интерактивную игровую технологию.Так случилось, что в последней маленькой игре использовалась технология CreateJS.В этой статье будет сделана пометка о ее использовании, а заодно и студенты, которые хотят использовать CreateJS для написания небольших игр может быстро приступить к работе.

Заметки основаны на последней версии 1.0.Есть много мест, которые несовместимы со старыми онлайн-учебниками.В то же время также используется последняя версия.Основное содержание следующее:

Обзор

Введение

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

История восходит к эпохе, когда использование флэш-памяти постепенно уменьшалось 7 лет назад. Gskinner разработал ее как богатую интерактивную библиотеку инструментов «нового поколения», проект, официально финансируемый Adobe, Microsoft и Firefox. API очень похож к Flash во многих местах.В то же время вы можете напрямую экспортировать Canvas для использования в Интернете через Adobe Animate CC (замена flash).

В 2018 году наконец вышла версия 1.0, а официальная версия 2.0 находилась в разработке, думаю, что разработчикам будет представлен более современный Createjs.

Модульный состав

  • CreateJS предоставляет 4 модуля, которые помогают выполнять стандартные операции при разработке игр:
    • EaselJS: для растровых изображений, графики, спрайтов, рисования текста, также включает таймер тикера.
    • TweenJS: используется для создания эффектов анимации движения.
    • PreloadJS: предварительная загрузка и управление игровыми ресурсами, включая изображения, аудио, json и другие ресурсы.
    • SoundJS: воспроизведение и обработка звука

лучше использовать

Текущая официальная версия createjs не поддерживает использование npm, поэтому при разработке ES6 необходимо вручную вводить<script>Можно использовать только теги, что неудобно для модульной разработки.

createjs-npmВ официальную библиотеку через imports-loader и exports-loader добавляется связующий слой, так что каждый может использовать так же, как и при использовании пакетов npm, а именно:

// 安装后和官方 createjs 1.0 使用一致
npm install createjs-npm -S

// 引入全部模块
import createjs from 'createjs-npm';

// 只引入单个模块（xx 可以是 easel、preload、tween、sound）
import createjs from 'createjs-npm/lib/xx';

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

EaselJS предполагает в CreatejsКартинаНапример, если вы хотите рисовать изображения, графику, анимацию кадров и текст, вы можете использовать для этого его API.

шаг

Например, если вам нужно нарисовать красный круг, необходимо выполнить следующие шаги:Создать сцену -> создать объект -> установить свойства объекта -> добавить объект на сцену -> обновить сцену для рендеринга следующего кадра:

//创建一个舞台，得到一个参考的画布
  const stage = new createjs.Stage("myCanvas");
  //创建一个形状的显示对象
  const circle = new createjs.Shape();
  circle.graphics.beginFill("red").drawCircle(0, 0, 40);
  //形状实例的设置位置
  circle.x = circle.y = 50;
  //添加形状实例到舞台显示列表
  stage.addChild(circle);
  //更新舞台将呈现下一帧
  stage.update();

Эффект приведенного выше кода:

Графический класс

В приведенной выше демонстрации мы создали Shape, который фактически создает холст, в то же время, если вам нужно что-то нарисовать на холсте, вам нужно использовать класс Graphics.

Вы можете задать множество стилей для Graphics или вызвать методы рисования для рисования другой графики.В то же время все методы рисования в классе Graphics будут возвращать экземпляр графики.Здесь очень удобно использовать цепные операции.【EaselJS API】.

Элемент EaselJS

Как упоминалось выше, EaselJS можно использовать для рисования таких элементов, как изображения, графика, кадры анимации и текст, соответствующие растровому изображению, фигуре, спрайту и тексту. Конкретное использование:

// 使用 Bitmap 来表示图片
const bitmap = new createjs.Bitmap("imagePath.jpg");

// 使用 Shape 结合 Graphics 来表示图形
 const shape = new createjs.Shape();
 shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);

// 使用 Sprite 来表示精灵动画（后面详细介绍）
const instance = new createjs.Sprite(spriteSheet);
instance.gotoAndStop("frameName"); 

// 使用 Text 来表示文字
const text = new createjs.Text("How are you", "20px Arial", "#000000");

спрайт анимация

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

[Подробную реализацию можно найти в codepen], где логика spriteSheet следующая:

const spriteSheet = new createjs.SpriteSheet({
    images: ["https://img.alicdn.com/tfs/TB1vMy8EeuSBuNjy1XcXXcYjFXa-2048-512.png"],
    frames: {
        height: 256,
        width: 128,
        regX: 0,
        regY: 0,
        count: 26
    },
    animations: {
        walk: [0, 25],
    },
});
const sprite = new createjs.Sprite(spriteSheet);
sprite.gotoAndPlay("walk");

[Навык] Генерация карты Sprite здесь может быть выполнена с помощьюTexturePacker, есть возможность экспортировать как EaselJS, просто замените значение непосредственно на SpriteSheet.

Приведенный выше код должен очень хорошо выражать смысл. Вы можете попробовать добавить еще несколько действий в анимацию, чтобы сделать ее более интересной. Более подробное использование см.SpriteSheet Class

Обновление бегущей строки

основная функция

Движение вышеупомянутых персонажей зависит от Ticker для обновления сцены в реальном времени, в то же время addEventListener можно использовать для отслеживания обновления тика и «что-то делать» в нем.

createjs.Ticker.framerate = 60;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
sprite.addEventListener("tick", ()=>{console.log("doing something"});

точка фокусировки

createjs.Ticker.framerateУказывает частоту кадров Тикера, в идеале 60 кадров в секунду, здесь можно установить значение 60 при оптимизации игрового процесса.

createjs.Ticker.timingModeУказывает режим рендеринга Тикера (setTimeout, requestAnimationFrame), который можно выбрать следующим образом:

  • TIMEOUT: режим по умолчанию. Этот режим обновляется в следующий раз через setTimeout. Хотя он обеспечивает предсказуемую и гибкую частоту кадров, его производительность намного хуже, чем у requestAnimationFrame. Его не рекомендуется использовать.
  • RAF: используйте только RAF, частота кадров и другие значения, установленные частотой кадров, будут игнорироваться, а частота зависит от рабочей среды и производительности браузера в это время.
  • RAF_SYNCHED: Он попытается согласовать RAF и заданную частоту кадров, что эквивалентно объединению преимуществ setTimeout и RAF, то есть здесь можно установить частоту кадров=60, а CreateJS поможет с оптимизацией.Рекомендуется использовать это Режим

точка оптимизации

В то же время можноTicker.pausedВ сочетании с оптимизацией производительности, например, когда игра поставлена ​​на паузу, мы можем предотвратить непрерывное обновление, например:

createjs.Ticker.addEventListener('tick', (e) => {
      !e.paused && stage.update();
});
createjs.Ticker.paused = true;  //在任何地方调用这个，则会暂停tick里面的处理
createjs.Ticker.paused = false;  //在任何地方调用这个，则会恢复tick里面的处理

Во время настройки производительности вы можетеcreatejs.Ticker.getMeasuredFPS()Вывод частоты кадров в реальном времени на экран. Когда это значение очень близко к установленной частоте кадров, это означает, что производительность хорошая

Использование TweenJS

Как видно из вышеизложенного, EaselJS действительно может справиться со многими вещами в разработке CreateJS, а остальные три можно использовать как вспомогательные инструменты, чтобы сделать разработку более удобной.

TweenJS действует здесь как «движущаяся» способность, и его также можно использовать отдельно, поддерживая свойства цифровых объектов и свойства стиля CSS, и это очень мощная библиотека функций анимации движения.

кейс

Например, следующий очень классический пример анимации:

Подробный код реализации можно увидеть【Анимация кода】, где логика Tween такова:

createjs.Tween.get(circle, { loop: true})
    .wait(300)
    .to({ x: canvas.width - circle.r*2},speed,createjs.Ease.circOut)
    .to({ y: canvas.height - circle.r*2},speed,createjs.Ease.circOut)
    .to({ x: 0},speed,createjs.Ease.circOut)
    .to({ y: 0},speed,createjs.Ease.circOut)
    .call(()=>{console.log('handleComplete')});

использовать

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

Вышеизложенного вполне достаточно для общих сценариев, и есть следующие расширенные функции, которые можно передать через【Документация】чтобы узнать:

  • createjs.Ease: установите эффект замедления анимации, включая многие доступные эффекты замедления анимации, такие как linear/bounceIn/circInOut/getBackIn/quadInOut.
  • ColorPlugin: плагин для обработки значений цвета, который может обрабатывать любой цвет, поддерживаемый CSS.
  • CSSPlugin: требуется перед использованиемcreatejs.CSSPlugin.install();Зарегистрируйтесь, может обрабатывать стили в нескольких частях CSS
  • RotationPlugin: пройтиRotationPlugin.install(props);, используется для решения проблем с углами
  • MotionGuidePlugin: эффект анимации гида, требуется перед использованием.createjs.MotionGuidePlugin.install(createjs.Tween);, установив ряд путей для достижения эффекта анимации пути
  • Временная шкала: используется для обработки нескольких наборов анимационных эффектов, чтобы ими можно было управлять по группам.

Использование PreloadJS

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

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

кейс

На экране видно, что загружено обработанное изображение и играет фоновая музыка:

[Подробную реализацию можно найти в codepen], где логика предварительной загрузки следующая:

const canvas = document.getElementById("canvas");
const stage = new createjs.Stage(canvas);

const queue = new createjs.LoadQueue(false);
queue.installPlugin(createjs.Sound);
createjs.Sound.alternateExtensions = ["mp3"];

queue.loadManifest([
  {
    id: "bgImg",
    src: "//img.alicdn.com/tfs/TB1EENFADtYBeNjy1XdXXXXyVXa-528-691.png"
  },
  {
    id: "bgMusic",
    src: "//gw.alipayobjects.com/os/rmsportal/YwASPsDMOPusAzZVdLuS.mp3"
  }
]);

queue.on("complete", handleComplete, this);

function handleComplete() {
  const bg = new createjs.Bitmap(queue.getResult("bgImg"));
  stage.addChild(bg);
  stage.update();
  createjs.Sound.play("bgMusic");
}

использовать

Способ загрузки

const queue = new createjs.LoadQueue(false);

Передаваемое логическое значение используется для указания, следует ли использовать теги XHR или HTML для загрузки.По умолчанию установлено значение true, то есть XHR используется для загрузки, но загрузка XHR cdn часто сообщает о некоторых ошибках, то есть рекомендуется использовать false тип для загрузки через теги.

Загрузка и использование ресурсов

Через класс loadManifest можно загружать все ресурсы, используемые в наборе игр, включая картинки, аудио, json, svg и другие файлы.queue.getResult(id)Получать.

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

загрузить музыку

При загрузке музыки необходимо зарегистрировать плагин Звук, т.е.queue.installPlugin(createjs.Sound);, при указании формата музыкального файла, напримерcreatejs.Sound.alternateExtensions = ["mp3"];

Здесь тоже есть небольшая яма, для младших версий браузеров может не воспроизводиться музыка, что решается внедрением HTMLAudioPlugin:createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin])

Для воспроизведения музыки используйтеcreatejs.Sound.play(id);Вот и все, используйте введение SoundJS позже в деталях.

Использование SoundJS

Чтобы небольшая игра была более интерактивной, необходима фоновая музыка.Вы можете выбрать легкие и живые.Вы должны использовать SoundJS для "воспроизведения музыки" и в то же время иметь идеальную обработку совместимости.

Класс звука

Управление звуком в основном использует класс Sound, который имеет следующие функции:

  • Sound.registerSound: зарегистрируйте звук для воспроизведения, registerSounds поддерживает несколько звуков и должен быть зарегистрирован заранее, прежде чем звук будет воспроизводиться (здесь загрузка также может быть выполнена с предварительной загрузкой).
  • Sound.registerPlugins: Зарегистрируйте плагины для воспроизведения аудио, обычно используемые в несовместимых сценариях с низким уровнем браузера, которые можно зарегистрировать для совместимости с WebAudioPlugin или HTMLAudioPlugin.
  • Sound.play: Воспроизведение аудио, обычноcreatejs.Sound.play(id)

Класс экземпляра воспроизведения AbstractSoundInstance

Когда мы вызываем Sound.play API, мы фактически создаем класс AbstractSoundInstance.После создания мы можем использовать его для непосредственного управления воспроизведением аудио или другими операциями, и в то же время контролировать его статус воспроизведения:

const myInstance = createjs.Sound.play("myAssetPath/mySrcFile.mp3");

// 属性控制，实际中选择需要的属性设置就好
// 属性同时以对象方式可以加到play第二个参数
myInstance.volume = 0.5;
myInstance.paused = false; // 控制音乐暂停否
myInstance.loop = true;  // 循环播放
myInstance.duration = 30;  //播放时长

// 监听状态，常用于错误时候，重新播放
myInstance.on("complete", handleComplete);
myInstance.on("loop", handleLoop);
myInstance.on("failed", handleFailed);

Оптимизация производительности

Оптимизация изображения

  • По сравнению с обычным H5 размер изображения больше влияет на производительность, попробуйте использовать соответствующий размер и передатьtinypngсжатое изображение
  • Для спрайтов или множества миниатюрных сцен доступныTexturePackerинструмент для объединения их в изображение спрайта
  • Для сцен покадровой анимации доступноgkaИнструмент для сжатия изображений и создания анимационных файлов напрямую.

Эффективно используйте механизм рециркуляции

  • Для тех, что за кадром или не на сцене, их нужно вовремя уничтожить
  • Используйте кеш для сложных объектов для повышения производительности, старайтесь не использовать его как можно проще, это будет иметь негативные последствия.
  • SpriteSheetBuilderМетод может заменить кеш, да и эффект лучше

Больше растровых изображений, меньше векторов

  • Операции с векторами в CreateJS влияют на производительность. Странно то, что все фигуры Text являются векторами. Рекомендуется напрямую преобразовывать слова и векторную графику в растровые изображения с помощью инструментов.
  • Если некоторые элементы должны использовать векторы, фильтры, режимы наложения или иметь очень много подэлементов, их можно оптимизировать с помощью SpriteSheetBuilder для рендеринга растровых изображений.
  • Маска в animateCC эквивалентна кадрированию и векторизации всей последовательности анимации, поэтому ее следует использовать как можно реже.Если вы действительно хотите ее использовать, метод работы такой же, как и с приведенным выше вектором.

Оптимизация фильтров и анимационных сцен

  • Не используйте эффекты фильтров, такие как (теневой фильтр и фильтр свечения) для анимации, потому что это будет очень требовательно к производительности и неуправляемо на мобильных устройствах.
  • Вы можете использовать покадровые изображения вместо соответствующих эффектов фильтра для достижения анимационных эффектов.

Уменьшите вложенность и укладку

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

Оптимизация частоты кадров

  • Неиспользуемый мониторинг частоты кадров будет отменен вовремя, например, по галочке
  • использоватьcreatejs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED
  • Будуcreatejs.Ticker.framerateустановить выше ожидаемого
  • пройти черезcreatejs.Ticker.getMeasuredFPS()Вывод FPS в реальном времени на экран для оптимизации

Попробуйте артефакт StageGL

  • StageGLВ текущей сжатой версии нет введения, вам нужно дополнительное введение
  • Это похоже на использование Stage, что эквивалентно замене исходного Stage на StageGL, но эквивалентно использованию возможностей WebGl, производительность будет намного лучше, чем у оригинала, можно увидеть больше деталей.GETTING STARTED WITH STAGEGL 
 // 常规的2D场景
  const stage = new createjs.Stage("canvasId");
// 使用 WebGl
  const stage = new createjs.StageGL("canvasId");

Оптимизация мобильных кликов

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

var stage = new createjs.Stage("canvasId");
createjs.Touch.enable(stage);

конец

Возможностей CreateJS должно быть больше, чем указано выше, и их нужно использовать в реальных проектах.В различных игровых сценариях вы можете открыть для себя много интересных применений.Если у вас также есть представление о разработке интерактивных мини-игр H5, добро пожаловать в общаться.

Категории