Изучите PixiJS — анимированные спрайты

JavaScript

иллюстрировать

прочитай этоОфициальный учебникКнига, упомянутая в —Learn Pixi.js, готовый писать и читать,Официальный учебникСодержание, упомянутое в книге, в основном относится к первым 4 главам книги, поэтому я начну писать с главы 5.

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

То есть с этой картинкой

在这里插入图片描述

сделать что-то вроде этогоЭффект

在这里插入图片描述

Чтобы сделать анимированный спрайт, нам нужно использоватьPixiJSизAnimatedSpriteметод.

PIXI.extras.AnimatedSprite

определение:

Создайте анимированные способы спрайтов для использования текстурных массивов.

Применение:

new PIXI.extras.AnimatedSprite(textures,autoUpdate)

Параметры:

имя Типы По умолчанию описывать
textures array Массив текстур, сделанный из серии немного отличающихся друг от друга изображений.
autoUpdate boolean true используется, чтобы определить, следует ли использоватьPIXI.ticker.sharedАвтоматически обновлять время анимации.

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

Свойства объекта возвращаемого значения:

имя Типы описывать
animationSpeed number Скорость воспроизведения анимированного спрайта. Чем выше, тем быстрее, чем ниже, тем медленнее, значение по умолчанию равно 1.
currentFrame Номер (только чтение) Отображаемый номер текущего кадра
onComplete function когдаloopсобственностьfalseВызывается после завершения воспроизведения спрайта анимации.
playing Boolean Определить, воспроизводится ли текущий спрайт анимации
onFrameChange function Вызывается, когда спрайт анимации меняет текстуру для рендеринга.
loop boolean Повторяется ли анимированный спрайт после воспроизведения
onLoop function когдаloopсобственностьtrueфункция вызывается, когда
textures array массив текстур для этого анимированного спрайта
totalFrames номер (только чтение) Общее количество кадров в анимации

Методы, возвращающие объекты-значения:

имя параметр описывать
play Воспроизведение анимированных спрайтов
gotoAndPlay frameNumber, числовой тип, индекс начального кадра Перейдите к определенному кадру и начните воспроизведение анимированного спрайта.
stop Остановить воспроизведение анимированного спрайта
gotoAndStop frameNumber, числовой тип, индекс стоп-кадра Перейти к определенному кадру и остановить анимацию спрайта

Используя эти свойства и методы в возвращаемом значении, мы можем управлять анимационным спрайтом, например, проигрывать анимационный спрайт, устанавливать скорость анимации, задавать цикличность воспроизведения и т. д. Кроме того, нам также необходимо знать, чтоPIXI.extras.AnimatedSpriteметод, унаследованный отPIXI.Spriteметод, поэтому спрайты анимации также могут использовать свойства и методы обычных спрайтов, напримерx,y,width,height,scale,rotation.

Хорошо, давайте начнем пробовать этот метод.

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        // 创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        // 创建一个 Pixi应用
        let app = new PIXI.Application(option);
        // 获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        // 把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);

        //设置别名
        let TextureCache = PIXI.utils.TextureCache;
        let Texture = PIXI.Texture;
        let Rectangle = PIXI.Rectangle;
        let AnimatedSprite = PIXI.extras.AnimatedSprite;

        //需要加载的雪碧图的地址（该图片服务器端已做跨域处理）
        let imgURL = "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/14/16849ce12c0e953a~tplv-t2oaga2asx-image.image";

        //加载图像，加载完成后执行setup函数 
        PIXI.loader.add(imgURL).load(setup);

        function setup() {
            //获取纹理
            let base = TextureCache[imgURL];

            //第一个纹理
            let texture0 = new Texture(base);
            texture0.frame = new Rectangle(0, 0, 80, 143);
            //第二个纹理
            let texture1 = new Texture(base);
            texture1.frame = new Rectangle(80, 0, 80, 143);
            //第三个纹理
            let texture2 = new Texture(base);
            texture2.frame = new Rectangle(160, 0, 80, 143);
            //第四个纹理
            let texture3 = new Texture(base);
            texture3.frame = new Rectangle(240, 0, 80, 143);

            //创建纹理数组
            let textures = [texture0, texture1, texture2, texture3];
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(textures);
            //设置动画精灵的速度
            pixie.animationSpeed = 0.1;

            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

Посмотреть эффект

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

Установить:

использовать напрямуюscriptэтикетка, импортjsфайл подойдет

<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>

После установки нам нужно создать новый инстанс, код такой

let su = new SpriteUtilities(PIXI);

тогда вы можете использоватьsuОбъект имеет доступ ко всем методам.

Что нам здесь нужно, так этоsuобъектfilmstripметод.

определение:

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

Применение:

su.filmstrip("anyTilesetImage.png", frameWidth, frameHeight, optionalPadding);

параметр:

имя Типы описывать
anyTilesetImage string путь карты спрайтов
frameWidth number Ширина каждого кадра (в пикселях)
frameHeight number Высота каждого кадра в пикселях
optionalPadding number количество отступов вокруг каждого кадра (необязательное значение в пикселях)

возвращаемое значение:

Возвращает массив, который можно использовать для анимированного массива текстуры спрайтов.

Теперь мы используемSpriteUtilitiesДавайте перепишем пример кода прямо сейчас.

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);

        let su = new SpriteUtilities(PIXI);
        //需要加载的雪碧图的地址（该图片服务器端已做跨域处理）
        let imgURL = "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/14/16849ce12c0e953a~tplv-t2oaga2asx-image.image";
        PIXI.loader.add(imgURL).load(setup);

        function setup() {
            //创建纹理数组
            let frames = su.filmstrip(imgURL, 80, 143);
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //设置动画精灵的速度
            pixie.animationSpeed = 0.1;

            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

Посмотреть эффект

filmstripМетод автоматически преобразует всю карту спрайтов в массив текстур, которые можно использовать для анимации спрайтов. Но что, если мы хотим использовать только часть кадров изображения спрайта? В это время необходимо использоватьframesметод.

определение:

framesМетод использует набор подкадров в карте спрайтов для создания массива текстур.

Применение:

su.frames(source, coordinates, frameWidth, frameHeight)

параметр:

имя Типы описывать
source string путь карты спрайтов
coordinates array 2D-массив, содержащий координаты x и y каждого кадра
frameWidth number Ширина каждого кадра (в пикселях)
frameHeight number Каждый кадр и высота (в пикселях)

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

Образец кода:

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);

        let su = new SpriteUtilities(PIXI);
        //需要加载的雪碧图的地址（该图片服务器端已做跨域处理）
        let imgURL = "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/14/16849ce12c0e953a~tplv-t2oaga2asx-image.image";

        PIXI.loader.add(imgURL).load(setup);
        function setup() {
            //创建纹理数组
            let frames = su.frames(imgURL, [[0, 0], [80, 0], [160, 0], [240, 0]], 80, 143);
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //设置动画精灵的速度
            pixie.animationSpeed = 0.1;

            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

Посмотреть эффект

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

использоватьТекстурированная аттранерацияЧтобы создать спрайт анимации, сначала выполнитеjsonфайл, загрузите все текстуры, затем поместите необходимые текстуры в массив и, наконец, используйте этот массив в качестве параметра и передайте вPIXI.extras.AnimatedSpriteметод для создания анимированного спрайта.

Код:

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);

        //需要加载的纹理贴图集的地址
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        //加载纹理贴图集，加载完成后执行setup函数
        PIXI.loader.add(textureURL).load(setup);

        function setup() {
            let id = PIXI.loader.resources[textureURL].textures;

            //创建纹理数组
            let frames = [
                id["dnf0.png"],
                id["dnf1.png"],
                id["dnf2.png"],
                id["dnf3.png"]
            ];
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //设置动画精灵的速度
            pixie.animationSpeed = 0.1;

            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

Посмотреть эффект

Когда приведенный выше код создает массив текстур, он помещает текстуры в массив одну за другой. А если их 100? Слишком хлопотно размещать их по одному. В настоящее время мы можем использоватьSpriteUtilitiesпредоставляется в библиотекеframeSeriesметод.

определение:

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

Применение:

su.frameSeries(startNumber, endNumber, baseName, extension)

параметр:

имя Типы описывать
startNumber number Порядковый номер начального кадра (по умолчанию 0)
endNumber number Порядковый номер конечного кадра (по умолчанию 1)
baseName string необязательное базовое имя файла
extension string необязательное расширение файла

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

Уведомление:
использоватьframeSeriesметод, убедитесь, чтоjsonВ файле имена каждого кадра указаны по порядку, напримерframe0.png frame1.png frame2.pngТакого рода. потому чтоframeSeriesИсходный код метода написан так

 frameSeries(startNumber = 0, endNumber = 1, baseName = "", extension = "") {
   //创建一个数组来存储帧名
   let frames = [];

   for (let i = startNumber; i < endNumber + 1; i++) {
     let frame = this.TextureCache[`${baseName + i + extension}`];
     frames.push(frame);
   }
   return frames;
 }

Исходный код действительно используетсяforЦикл объединяет имена кадров. Поэтому убедитесь, что имена фреймов указаны в порядке, иначе вы не сможете их получить.

Спустись и попробуемframeSeriesметод.

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);

        let su = new SpriteUtilities(PIXI);
        //需要加载的纹理贴图集的地址
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        PIXI.loader.add(textureURL).load(setup);
        function setup() {
            //创建纹理数组
            debugger;
            let frames = su.frameSeries(0, 7, "dnf", ".png");
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //设置动画精灵的速度
            pixie.animationSpeed = 0.1;

            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

Посмотреть эффект

Обратите внимание на проблему с версией:
1,PIXI.extras.AnimatedSpriteПервоначально этот метод называлсяPIXI.extras.MovieClip, в4.2.1Он был изменен во время версии и использовался в примере кода этой статьи.PixiJSВерсия4.8.2, так что нет проблем, если вы найдете звонок во время использованияPIXI.extras.AnimatedSpriteЕсть проблема с этим методом, вы можете сначала проверить, правильная ли следующая версия.

2,SpriteUtilitiesв настоящее время поддерживаетсяPixiJSВерсия3.0.11,а такжеSpriteUtilitiesПолезныйPIXI.extras.MovieClipметод, поэтому, если вы используете более высокийPixiJSверсия, которая должна бытьSpriteUtilitiesИзмените псевдоним метода в .

существуетspriteUtilities.jsфайл должен бытьrenderingEngine.extras.MovieClipизменить наrenderingEngine.extras.AnimatedSprite,ПучокrenderingEngine.ParticleContainerизменить наPIXI.particles.ParticleContainer.

этоspriteUtilities.jsЭто после доработки.

Конечно, вы также можете использовать более низкую версиюPixiJS, так что вам не нужно менятьspriteUtilities.jsКод есть.

Суммировать

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

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

Если в тексте есть ошибки, пожалуйста, укажите на мелких партнеров, большое спасибо.

Следующая запись Изучаем PixiJS — состояние спрайтов

Категории