Texture caching problem

[SamYan]

Hi,

I'm trying to load 4 images, and then generate array of random sprites, but i get In chrome console:

Debug:

GET http://localhost:8081/dist/symbol_2 404 (Not Found)
BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_1] that already had an entry
addToCache @ BaseTexture.js:795
fromLoader @ Texture.js:478
textureParser @ textureParser.js:9
(anonymous) @ Loader.js:614
(anonymous) @ async.js:35
Texture.js:508 Texture added to the cache with an id [symbol_1] that already had an entry
addToCache @ Texture.js:508
fromLoader @ Texture.js:479
textureParser @ textureParser.js:9
(anonymous) @ Loader.js:614
(anonymous) @ async.js:35
BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_2] that already had an entry
addToCache @ BaseTexture.js:795

My snippet:

import * as PIXI from 'pixi.js'

const symbols = [
    { id: 0, img: PIXI.Texture.fromImage("symbol_1") },
    { id: 1, img: PIXI.Texture.fromImage("symbol_2") },
    { id: 2, img: PIXI.Texture.fromImage("symbol_3") },
    { id: 3, img: PIXI.Texture.fromImage("symbol_4") }
];

export default class Symbol {

    /**
     * Generate random symbol tables
     *
     * @static
     * @param {number} reelsCount
     * @param {number} symbolsCount
     * @param {(symbolTables: Array<any>) => void} resolve
     * @memberof Symbol
     */
    public static generateSymbols(reelsCount: number, symbolsCount: number, resolve: (symbolTables: Array<any>) => void): void {

        
        let symbolTables: Array<any> = new Array<any>();

        for (let i = 0; i < reelsCount; i++) {
            let symbolTable: Array<any> = new Array<any>();

            for (let x = 0; x < symbolsCount; x++) {
                let randomIndex: number = Math.floor(Math.random() * symbols.length);

                let id: number = symbols[randomIndex].id;
                let sprite: PIXI.Sprite = new PIXI.Sprite(symbols[randomIndex].img);

                symbolTable.push({id: id, img: sprite});
            }

            symbolTables.push(symbolTable);
        }

        resolve(symbolTables);
    }
}

 

So, what's the wrong ? It's caching problem or?

 

Thanks in advance.

[SamYan]

The solution was moving the constant array of textures into generateSymbols()  method. But why ???

 

import * as PIXI from 'pixi.js'

export default class Symbol {

    /**
     * Generate random symbol tables
     *
     * @static
     * @param {number} reelsCount
     * @param {number} symbolsCount
     * @param {(symbolTables: Array<any>) => void} resolve
     * @memberof Symbol
     */
    public static generateSymbols(reelsCount: number, symbolsCount: number, resolve: (symbolTables: Array<any>) => void): void {
        const symbols = [
            { id: 0, img: PIXI.Texture.fromImage("symbol_1") },
            { id: 1, img: PIXI.Texture.fromImage("symbol_2") },
            { id: 2, img: PIXI.Texture.fromImage("symbol_3") },
            { id: 3, img: PIXI.Texture.fromImage("symbol_4") }
        ];
                
        let symbolTables: Array<any> = new Array<any>();

        for (let i = 0; i < reelsCount; i++) {
            let symbolTable: Array<any> = new Array<any>();

            for (let x = 0; x < symbolsCount; x++) {
                let randomIndex: number = Math.floor(Math.random() * symbols.length);

                let id: number = symbols[randomIndex].id;
                let sprite: PIXI.Sprite = new PIXI.Sprite(symbols[randomIndex].img);

                symbolTable.push({id: id, img: sprite});
            }

            symbolTables.push(symbolTable);
        }

        resolve(symbolTables);
    }
}

 

[ivan.popelyshev]

Textures appear in cache after the loading process is complete, not after you called "load". Thus, fromImage tried to load textures on its own, without loader, and duplicates appear.

Its pixi loader behaviour, I understand that its not clear  Textures passed to loader cant be used before loading process is completed, fromImage works differently.

[SamYan]

13 minutes ago, ivan.popelyshev said:

Textures appear in cache after the loading process is complete, not after you called "load". Thus, fromImage tried to load textures on its own, without loader, and duplicates appear.

Its pixi loader behaviour, I understand that its not clear  Textures passed to loader cant be used before loading process is completed, fromImage works differently.

Spasibo Ivan!