PixiJS. Как из одной текстуры сделать несколько спрайтов?

@zalec · Регистрация: 03.03.2019

Студворк — интернет-сервис помощи студентам

Всем Hi!;
Допустим есть текстура:https://img.craftpix.net/2023/... 8x512.webp
Как ее нарезат на спрайты?

Пробовал:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
  sprites = []
 for (let iy = 0; iy < 1024; iy += 128)
    for (let ix = 0; ix < 1024; ix += 128)
    {        
        const sprite = new PIXI.Sprite(PIXI.Texture.from('./1024.png'))
        sprite.texture.frame = new PIXI.Rectangle(ix,iy, 128,128)
            
        sprites.push(sprite);
        
        sprite.x = ix;
        sprite.y = iy;
        app.stage.addChild(sprite);
      }

Почемуто создается один и тотже спрайт?

@Usaga · 05.01.2024, 11:38

Сообщение от zalec

const sprite = new PIXI.Sprite(PIXI.Texture.from('./1024.png'))

Я не знаю касаемо одного и того же спрайта, но в данной строке ты N раз загружаешь одну и ту же картинку под видом новой текстуры, а потом через спрайт из неё кусок выделяешь. Расход памяти, конечно, будет отличный просто.

@zalec · 05.01.2024, 15:09 **[ТС]**

В итоге получилось так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        this.#sprites = [];
        this.#textures = [];
 
        var bt = Texture.from('./abc1_1024.png');
        let texture;
        for (let iy = 0; iy < 1024; iy += 128) {
            for (let ix = 0; ix < 1024; ix += 128) {
                texture = new Texture(bt);
                texture.frame = new Rectangle(ix, iy, 128, 128)
                this.#textures.push(texture);
            }
        }
 
        for (let i = 0; i < this.#textures.length; i++) {
            const sprite = new Sprite(this.#textures[i]i);
            this.#sprites .push(sprite);
        }

И важное замечание:
Чтобы это все заработало нужно закоментировать строки 7996 - 8002

Кликните здесь для просмотра всего текста

/*
if (xNotFit || yNotFit) {
const relationship = xNotFit && yNotFit ? "and" : "or";
const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`;
const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`;
throw new Error(`Texture Error: frame does not fit inside the base Texture dimensions: ${errorX} ${relationship} ${errorY}`);
}
*/

в файле pixi.mjs (версия 7.3.3).
если этого не сделать, будет ошибка : pixi.mjs:8001 Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions: X: 0 + 128 = 128 > 0 and Y: 0 + 128 = 128 > 0

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/