Can't render anything.

[karhu]

So it's been a while since i played with pixi.js, there has been new version etc. I have used version 4.4.0 last time. Has lots of things changed?

Anyhow, here is my jsfiddle: https://jsfiddle.net/hp4yn6kz/2/

As you can see, you cant see any text in the canvas. I also tried with texture atlas, but it renders nothing. Did i do something wrong? This worked before.

[nmiguelmoura]

Hi,

Your resize method is on a loop there.

Try this:

resize() {
        render.app.view.style.width = $('#mainRender').offsetWidth + "px";
        render.app.view.style.height = $('#mainRender').offsetHeight + "px";
        //render.app.renderer.resize($('#mainRender').offsetWidth,$('#mainRender').offsetHeight);
        render.app.renderer.resize(window.innerWidth, window.innerHeight);
    }

Don't forget to scale the stage too, if you need so...

[karhu]

5 minutes ago, nmiguelmoura said:

Hi,

Your resize method is on a loop there.

Try this:

resize() {
        render.app.view.style.width = $('#mainRender').offsetWidth + "px";
        render.app.view.style.height = $('#mainRender').offsetHeight + "px";
        //render.app.renderer.resize($('#mainRender').offsetWidth,$('#mainRender').offsetHeight);
        render.app.renderer.resize(window.innerWidth, window.innerHeight);
    }

Don't forget to scale the stage too, if you need so...

Thanks! I was looking for mistakes from the wrong place. 

[karhu]

19 minutes ago, nmiguelmoura said:

Don't forget to scale the stage too, if you need so...

Just going to ask what is the best way to scale the stage? Or is there some kind of function inside the stage object? 

[ivan.popelyshev]

14 minutes ago, karhu said:

Just going to ask what is the best way to scale the stage? Or is there some kind of function inside the stage object? 

Just change stage's scale.

stage.scale.set( app.screen.width / MY_PREFERRED_WIDTH, app.screen.height / MY_PREFERRED_HEIGHT ) 

// app.screen.width is same as innerWidth that you passed in resize

I wont explain how to preserve aspect ratio, you have to write your own logic for it.

[nmiguelmoura]

Instead of the previous code, I use something close to this:

resize() {
        let width = window.innerWidth;
				let height = window.innerHeight;
        let defaultWidth = 1024;
        let defaultHeight = 768;

        let scaleX = width / defaultWidth,
            scaleY = height / defaultHeight;

        // Choose minor scale value.
        let scale = Math.min(scaleX, scaleY);

        // Round values, or firefox and chrome render blurred images.
        let finalWidth = Math.floor(defaultWidth * scale);
        let finalHeight = Math.floor(defaultHeight * scale);

				console.log(width, height, scale, finalHeight);
        // Set render size.
        render.app.renderer.resize(finalWidth, finalHeight);

        // Scale scene stage.
        render.app.stage.scale.x = scale;
        render.app.stage.scale.y = scale;
    }

I don't know if there's a simpler or better way, this one works for me.

I also keep track of those values (width, height, scale) for later use.

[karhu]

1 hour ago, ivan.popelyshev said:

Just change stage's scale.

stage.scale.set( app.screen.width / MY_PREFERRED_WIDTH, app.screen.height / MY_PREFERRED_HEIGHT ) 

// app.screen.width is same as innerWidth that you passed in resize

I wont explain how to preserve aspect ratio, you have to write your own logic for it.

 

1 hour ago, nmiguelmoura said:

Instead of the previous code, I use something close to this:

resize() {
        let width = window.innerWidth;
				let height = window.innerHeight;
        let defaultWidth = 1024;
        let defaultHeight = 768;

        let scaleX = width / defaultWidth,
            scaleY = height / defaultHeight;

        // Choose minor scale value.
        let scale = Math.min(scaleX, scaleY);

        // Round values, or firefox and chrome render blurred images.
        let finalWidth = Math.floor(defaultWidth * scale);
        let finalHeight = Math.floor(defaultHeight * scale);

				console.log(width, height, scale, finalHeight);
        // Set render size.
        render.app.renderer.resize(finalWidth, finalHeight);

        // Scale scene stage.
        render.app.stage.scale.x = scale;
        render.app.stage.scale.y = scale;
    }

I don't know if there's a simpler or better way, this one works for me.

I also keep track of those values (width, height, scale) for later use.

Thanks! I was thinking about calculating it like this. I just gotta find the "typical aspect ratio" and if the screen doesn't fit i will add black letterbox -thingy. Just gotta find the best way to do it.