Jump to content

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


Recommended Posts

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

 

Link to post
Share on other sites

"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);
}

 

Link to post
Share on other sites
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.

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...