[Help]Unable to render/display sprite or texture while it exist

[Teckniel]

Hello Everyone,
I'm primarly a .Net Developer(c# backend), and not so long ago i started a new project.
I choise as rendering engine technology pixijs v6.0 (latest version)

I'm quite new to pixijs and typescript and stubled upon a stange error.
This error is that a sprite/texture not gets loaded/displayed to the screen..
Why this occuers i have no clue...
If i create a simple unstructed project i can load textures fine,but in my structerd program nothing gets displated..

If i add a text object for example i have no issues...  nor with drawing rectangles.

I Really really hope someone can help me, scavanged  the internet for a while now to find a sollution.

Regards Me

#Index Typescript File ->

import * as PIXI from 'pixi.js';
import { Engine } from './Engine/Engine';

//Gobal Variale
//declare const window: any;
declare global {
    interface Window {
        app: any;
        Display: any;
    }
}

export class Game extends Engine {
    static instance: Game;
    //private _currentScene?: IScene;
    public lang: string;
    //public games: { [key: string]: IScene };

    _init: boolean;
    constructor(parent: HTMLElement) {
        if (!parent)
            throw new Error("aprent element must be div!");

        const aspect = window.innerWidth / window.innerHeight;
        //l size = { ...Config.ReferenceSize };

        //fallback
        PIXI.settings.PREFER_ENV = PIXI.ENV.WEBGL;

        super({
            autoStart: true,
            backgroundColor: 0xFF00FF,
            width: 1200,
            height: 1200

            //...size
        });
        parent.appendChild(this.view);
        this.render(); // renders the world

        //@ts-ignore
        Game.instance = this;
        PIXI.utils.sayHello;
    }
}
//Hooks..
window.Display = () => {
    const app = (window.app = new Game(document.querySelector("#gameid")));
};

#Engine TypeScript File ->

import * as PIXI from "pixi.js";
import { IEngineOptions } from './Classes/Interfaces/IEngineOptions';
import { IEngine } from './Classes/Interfaces/IEngine';

export class Engine extends PIXI.utils.EventEmitter implements IEngine {
    public renderer: PIXI.Renderer;
    public ticker: PIXI.Ticker = new PIXI.Ticker();
    public loader: PIXI.Loader = PIXI.Loader.shared
    public world: PIXI.Container = new PIXI.Container();
    public init: Function;
    constructor(options: IEngineOptions) {
        super();
        this.renderer = new PIXI.Renderer(options); // good
        this.init = () => { };
    }

    get view(): HTMLCanvasElement {
        return this.renderer.view;
    }

    render() {
        const testGraphic = new PIXI.Graphics();
        testGraphic.beginFill(0xFFFF00);
        testGraphic.lineStyle(5, 0xFF0000);
        testGraphic.drawRect(0, 0, 300, 200);

        let x = new PIXI.Text('This is a PixiJS text', { fontFamily: 'Arial', fontSize: 24, fill: 0xFFFFFF, align: 'center' });
        x.position.x = 5;
        x.position.y = 250;

<b>// Not Working and asset exist..</b>
        let background = PIXI.Sprite.from('./Assets/UIElements/ribbonBackground.JPG')
        background.position.x = 0;
        background.position.y = 0;

        this.world.addChild(testGraphic, x, background);
        this.renderer.render(this.world);

    }

    destory(params = { children: false }) {
        this.world.destroy(params);
        this.ticker.destroy();
        this.renderer.destroy(true);
    }
}
//} // Engine

 

[ivan.popelyshev]

"Sprite.from", aka "Texture.from" is sync function and it does load texture at that right moment, only if texture was already in browser cache. So if you call render() only one time, just after you used from() - no guarantees that it will be rendered, after all, how to render something that is not loaded yet? Welcome to javascript.

How to solve it:

1. use pixi loader, like in all examples

2. the usual

 

const tex = Texture.from("my.png");

function ready() {
  //do render
}

if (tex.baseTexture.valid) {
  ready();
} else {
  tex.baseTexture.on('loaded', ready);
}

 

[Teckniel]

On 5/3/2021 at 1:46 PM, ivan.popelyshev said:

"Sprite.from", aka "Texture.from" is sync function and it does load texture at that right moment, only if texture was already in browser cache. So if you call render() only one time, just after you used from() - no guarantees that it will be rendered, after all, how to render something that is not loaded yet? Welcome to javascript.

How to solve it:

1. use pixi loader, like in all examples

2. the usual

 

const tex = Texture.from("my.png");

function ready() {
  //do render
}

if (tex.baseTexture.valid) {
  ready();
} else {
  tex.baseTexture.on('loaded', ready);
}

 

Thanks, I Solved it thanks to your tip
I'm looking to create a ribbon menu for my cad program.
Im looking into hitarea but having a strange problem where the sprite.on do's not exist.
but will create a new topic.