Статьи

Использование CreateJs: PreloadJS, SoundJS и TweenJS

Декабрь 5, 2018

В первой части этой серии статей об использовании CreateJ мы рассмотрели EaselJ. Во второй и последней части мы рассмотрим PreloadJ, SoundJ и TweenJ.

PreloadJS

PreloadJS — это библиотека, которая позволяет управлять загрузкой ресурсов и координировать ее. PreloadJS упрощает предварительную загрузку ваших ресурсов, таких как изображения, звуки, JS, данные и другие. Он использует XHR2 для предоставления реальной информации о прогрессе, когда она доступна, или возврата к загрузке тегов, и облегчает прогресс, когда ее нет. Это позволяет создавать несколько очередей, несколько соединений, приостанавливать очереди и многое другое.

В PreloadJS класс LoadQueue является основным API для предварительной загрузки контента. LoadQueue — менеджер загрузки, который может предварительно загружать либо один файл, либо очередь файлов. var queue = new createjs.LoadQueue(true); передача false приведет к загрузке тега, где это возможно. LoadQueue имеет несколько событий, на которые вы можете подписаться:

  • complete: срабатывает, когда очередь завершает загрузку всех файлов
  • error: срабатывает, когда в очереди возникает ошибка с любым файлом.
  • progress: прогресс, когда вся очередь изменилась.
  • fileload: когда один файл завершил загрузку.
  • fileprogress: прогресс, когда один файл имеет изменения. Обратите внимание, что только файлы, загруженные с помощью XHR (или, возможно, плагинами), будут генерировать события прогресса, отличные от нуля или 100%.

Вы можете загрузить отдельные файлы, вызвав loadfile("path to file") или загрузить несколько файлов, вызвав loadManifest() и передав массив файлов, которые вы хотите загрузить.

Поддерживаемые типы файлов LoadQueue включают следующие.

  • BINARY: необработанные двоичные данные через XHR
  • CSS: CSS файлы
  • ИЗОБРАЖЕНИЕ: Общие форматы изображений
  • JAVASCRIPT: файлы JavaScript
  • JSON: данные JSON
  • JSONP: междоменные файлы JSON
  • MANIFEST: список файлов для загрузки в формате JSON, см. LoadManifest
  • ЗВУК: форматы аудио файлов
  • SVG: файлы SVG
  • Текст: текстовые файлы — только XHR
  • XML: данные XML

Вот пример использования PreloadJS для загрузки в файл JavaScript, некоторые PNG и MP3.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var canvas = document.getElementById(«Canvas»);
var stage = new createjs.Stage(canvas);
var manifest;
var preload;
var progressText = new createjs.Text(«», «20px Arial», «#000000»);
progressText.x = 300 — progressText.getMeasuredWidth() / 2;
progressText.y = 20;
stage.addChild(progressText);
stage.update();
 
function setupManifest() {
    manifest = [{
        src: «collision.js»,
        id: «myjsfile»
    }, {
        src: «logo.png»,
        id: «logo»
    }, {
        src: «ForkedDeer.mp3»,
        id: «mp3file»
    }
 
    ];
    for(var i=1;i<=13;i++)
        manifest.push({src:»c»+i+».png»})
}
 
function startPreload() {
    preload = new createjs.LoadQueue(true);
    preload.installPlugin(createjs.Sound);
    preload.on(«fileload», handleFileLoad);
    preload.on(«progress», handleFileProgress);
    preload.on(«complete», loadComplete);
    preload.on(«error», loadError);
    preload.loadManifest(manifest);
 
}
 
function handleFileLoad(event) {
    console.log(«A file has loaded of type: » + event.item.type);
    if(event.item.id == «logo»){
        console.log(«Logo is loaded»);
        //create bitmap here
    }
}
 
 
function loadError(evt) {
    console.log(«Error!»,evt.text);
}
 
 
function handleFileProgress(event) {
    progressText.text = (preload.progress*100|0) + » % Loaded»;
    stage.update();
}
 
function loadComplete(event) {
    console.log(«Finished Loading Assets»);
}
setupManifest();
startPreload();

В функции setupManifest() мы добавляем файл JavaScript, MP3 и файл PNG. Мы передаем объект с ключами «src» и «id». Используя «id», мы сможем идентифицировать актив после его загрузки. Наконец, мы перебираем и добавляем еще 13 изображений в массив. Вам не всегда нужен идентификатор, если вы просто хотите, чтобы некоторые ресурсы были загружены.

Мы слушаем события «fileload», «progress» и «complete». Событие fileload срабатывает, когда загружен один файл, прогресс предназначен для получения прогресса loadQueue, и завершается, когда загружаются все файлы. В функции handleFileLoad() мы регистрируем тип файлов, что может оказаться очень удобным. Мы также проверяем id элемента, это то, как вы можете отслеживать предварительные загрузки и делать что-то соответствующее с активами.

Обратите внимание, что для загрузки звука вы должны вызвать installPlugin(createjs.Sound) что мы и сделали в функции startPreload .

TweenJS

Библиотека TweenJS предназначена для анимации и анимации свойств HTML5 и JavaScript. Он обеспечивает простой, но мощный интерфейс анимации. Он поддерживает анимацию как числовых свойств объекта, так и свойств стиля CSS, и позволяет объединять анимацию и действия вместе для создания сложных последовательностей.

Чтобы настроить Tween, вы вызываете конструктор Tween(target, [props], [pluginData]) со следующими параметрами.

  • target — целевой объект, свойства которого будут обработаны
  • props — свойства конфигурации, применяемые к этому экземпляру анимации (например, {loop: true, paused: true}). Все свойства по умолчанию имеют значение false. Поддерживаемые реквизиты:
    • loop: устанавливает свойство цикла для этой анимации.
    • useTicks: использует тики для всех длительностей вместо миллисекунд.
    • ignoreGlobalPause: устанавливает свойство ignoreGlobalPause для этой анимации.
    • override: если true, Tween.removeTweens (target) будет вызываться для удаления любых других анимаций с той же целью.
    • paused: указывает, стоит ли начинать анимацию с паузы.
    • позиция: указывает начальную позицию для этой анимации.
    • onChange: указывает прослушиватель для события «change».
  • pluginData — объект, содержащий данные для использования установленными плагинами

Свойства анимации класса Tween для одной цели. Методы экземпляра могут быть объединены в цепочку для облегчения построения и последовательности. Это не очень большой класс и имеет только несколько методов, но он очень мощный.

Метод to(props,duration,ease) помещает анимацию в очередь из текущих значений в целевые свойства. Установите длительность 0 чтобы сразу перейти к значению. Числовые свойства будут анимированы от их текущего значения в анимации до целевого значения. Нечисловые свойства будут установлены в конце указанной продолжительности.

wait(duration,passive) ставит в очередь ожидание (по сути, пустую анимацию движения).

Метод call(callback,params,scope) помещает в очередь действие для вызова указанной функции

TweenJS поддерживает большое количество облегчений, предоставляемых классом Ease .

В следующем демо вы можете нажать на сцену, чтобы увидеть демо.

В этой демонстрации мы создаем объекты Bitmap и Text . Мы помещаем логотип с верхней части сцены, и когда пользователь нажимает на сцену, мы поворачиваем его к середине сцены, изменяя его шкалу X и Y. Мы используем метод wait() чтобы дать задержку в одну секунду, затем мы используем метод call() для анимации текста. В текстовой анимации мы меняем альфу, делаем вращение на 360 градусов, а анимация — слева от сцены.

TweenJS очень весело, попробуйте использовать некоторые другие свойства экранных объектов

SoundJS

SoundJS — это библиотека, которая предоставляет простой API и мощные функции, чтобы сделать работу со звуком легкой. Большая часть этой библиотеки используется статическим способом (вам не нужно создавать экземпляр). Он работает через плагины, которые абстрагируют реальную аудио реализацию, поэтому воспроизведение возможно на любой платформе без специальных знаний о том, какие механизмы необходимы для воспроизведения звуков.

Чтобы использовать SoundJS, используйте публичный API в классе Sound. Этот API для:

  • Установка плагинов для воспроизведения аудио
  • Регистрация (и предварительная загрузка) звуков
  • Создание и воспроизведение звуков
  • Мастер регулировки громкости, отключения звука и остановки для всех звуков одновременно

Воспроизведение звуков создает экземпляры SoundInstance , которыми можно управлять индивидуально. Вы можете:

  • Пауза, возобновление, поиск и остановка звуков
  • Контролировать громкость звука, отключение звука и панорамирование
  • Прослушивайте события в звуковых экземплярах, чтобы получать уведомления об их завершении, цикле или сбое

Ниже приведен минимальный код, необходимый для воспроизведения аудиофайла.

1
2
3
createjs.Sound.initializeDefaultPlugins();
createjs.Sound.alternateExtensions = [«ogg»];
var myInstance = createjs.Sound.play(«IntoxicatedRat.mp3»);

Однако я не мог заставить это работать на моей машине в Firefox и Chrome, хотя вышеупомянутое работало в IE. Плагин по умолчанию был WebAudio по умолчанию, я должен был зарегистрировать его, чтобы использовать HTMLAudio, как показано ниже.

1
2
3
4
createjs.Sound.registerPlugins([ createjs.HTMLAudioPlugin]);
console.log(createjs.Sound.activePlugin.toString());
createjs.Sound.alternateExtensions = [«ogg»];
var mySound = createjs.Sound.play(«IntoxicatedRat.mp3»);

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

С самого начала мы будем создавать MP3-плеер. Смотрите демо и скриншот ниже.

мп3-плеер

Сначала мы вызываем registerPlugins() чтобы использовать HTMLAudio и установить альтернативное расширение, чтобы он попытался загрузить OGG, если браузер не поддерживает MP3.

1
2
createjs.Sound.registerPlugins([ createjs.HTMLAudioPlugin]);
createjs.Sound.alternateExtensions = [«ogg»];

В функции playSound() мы вызываем метод play() который воспроизводит один из звуковых файлов из массива tracks . Мы устанавливаем громкость звука с помощью setVolume() , мы используем «завершенный» слушатель, который будет предупрежден, когда закончится воспроизведение текущего звука.

1
2
3
theMP3 = createjs.Sound.play(«./sounds/»+tracks[currentSong]+».mp3″);
theMP3.setVolume(vol);
theMP3.on(«complete»,songFinishedPlaying,null,false);

В оставшейся части кода мы используем методы play() , stop() , pause() и resume() .

1
2
3
4
theMP3.play();
theMP3.stop();
theMP3.pause();
theMP3.resume();

Я не дал построчное описание MP3-плеера, но если у вас есть какие-либо вопросы, не стесняйтесь спрашивать в комментариях.

Игра Space Invader

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

Вывод

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

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

Я надеюсь, что вы нашли этот учебник полезным, и что вы взволнованы использованием CreateJS. Они только что объявили в своем блоге, что теперь доступна и бета-версия поддержки WebGL. Спасибо за прочтение!

62
Share: