These are chat archives for pixijs/pixi.js

19th
Oct 2015
CragVFX
@CragVFX
Oct 19 2015 13:21
@all what are the best practices for resizing an entire scene for mobile? Do I need to resize the renderer AND all of the sprites? Or are the sprites built to scale to the size of the renderer?
Mathias Latournerie
@JiDW
Oct 19 2015 14:28
Resizing at the startup to get fullscreen or resizing while the app is running ?
CragVFX
@CragVFX
Oct 19 2015 14:29
both, really
I want it to size to the device correctly, and if possible, also resize when the user expands/ shrinks browser window
Mathias Latournerie
@JiDW
Oct 19 2015 14:30
when you apply a scale factor to a container, it applies to every sprites in it
CragVFX
@CragVFX
Oct 19 2015 14:30
ahhh
Mathias Latournerie
@JiDW
Oct 19 2015 14:30
so you can modify container.scale.x/y
CragVFX
@CragVFX
Oct 19 2015 14:30
I didn't know that
that sounds wayyyy easier than what I was trying to do
Mathias Latournerie
@JiDW
Oct 19 2015 14:31
It is :D
CragVFX
@CragVFX
Oct 19 2015 14:31
awesome
thanks dude
Mathias Latournerie
@JiDW
Oct 19 2015 14:31
not so sure about resizing when the app is running however, never done it
yw
CragVFX
@CragVFX
Oct 19 2015 14:31
that's not as important really
Mathias Latournerie
@JiDW
Oct 19 2015 14:32
the great thing is width/height and x/y arent affected by the scale factor
so its really easy to create a UI without having to think about it
CragVFX
@CragVFX
Oct 19 2015 14:32
that's great
yeah, I'm really liking it so far.
CragVFX
@CragVFX
Oct 19 2015 15:24
Is there an easy way to scale the container to the size of window innerWidth and innerHeight? I tried setting the Container's width and height but those don't seem to change anything
Mathias Latournerie
@JiDW
Oct 19 2015 15:26
  1. create a canvas to innerWidth/innerHeight size
  1. create your container/renderer
  1. chose a standard size that will be your scale = 1
(ex : 320 for mobile)
  1. apply a canvas.width/sdtSize on your container scales
did I put 1 at every points ?
fuck i need a coffee
CragVFX
@CragVFX
Oct 19 2015 15:28
hahah
alright, so:
  1. var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, {
             transparent: true
           });
var stage = new PIXI.Container();
Mathias Latournerie
@JiDW
Oct 19 2015 15:29
ch.renderer = new PIXI.WebGLRenderer(ch.canvas.width, ch.canvas.height,renderOptions);
ch.ratio = ch.canvas.width/320;
ch.stageUI = new PIXI.Container();
ch.stageUI.scale.x = ch.ratio;
ch.stageUI.scale.y = ch.ratio;
from my code
CragVFX
@CragVFX
Oct 19 2015 15:30
ahh
Mathias Latournerie
@JiDW
Oct 19 2015 15:30
and the canvas is set to innerheight/width yes
are you creating something on chrome or for an encapsulated app ? (phonegap/cocoon/etc)
CragVFX
@CragVFX
Oct 19 2015 15:32
Im creating a really simple scene for a website
and it needs to be responsive
Mathias Latournerie
@JiDW
Oct 19 2015 15:33
ok
CragVFX
@CragVFX
Oct 19 2015 15:33
not interactive or anything, just some pngs and a movieclip
Mathias Latournerie
@JiDW
Oct 19 2015 15:33
do not forget to set the TEXT_RESOLUTION constant to something related to teh scale of your container
you do not want to resize your texts
they would be blurry
CragVFX
@CragVFX
Oct 19 2015 15:34
okay
Mathias Latournerie
@JiDW
Oct 19 2015 15:34
but thx to the resolution you can cheat with the resize and make him display text at the natural size of the screen
CragVFX
@CragVFX
Oct 19 2015 15:35
for this line here ch.ratio = ch.canvas.width/320;
Mathias Latournerie
@JiDW
Oct 19 2015 15:35
PIXI.CONST.TEXT_RESOLUTION = ch.ratio; (from my memory)
CragVFX
@CragVFX
Oct 19 2015 15:35
if your ch.canvas.width is 350 or something your ratio for your scale would be greater than 1
Mathias Latournerie
@JiDW
Oct 19 2015 15:36
yes, upscale
you can set a higher base width, it's up to you. My reasoning here is that old devices without retina display are often a 320px width, and most higher width have a retina display, wehere I can use HDPI textures
so the upscale isn't bad
CragVFX
@CragVFX
Oct 19 2015 15:38
right, I'm going to have to think that through because for me, scale of 1 is good for a full browser
Mathias Latournerie
@JiDW
Oct 19 2015 15:39
yup sure
CragVFX
@CragVFX
Oct 19 2015 15:39
I feel like I need to correlate a max width of 1500px width to scale 1
Mathias Latournerie
@JiDW
Oct 19 2015 15:39
well if you try to load big textures on mobile, you may get bad perf
that's why I use multiple textures resolutions
CragVFX
@CragVFX
Oct 19 2015 15:40
oh
so I should have multiple copies of these pngs
Mathias Latournerie
@JiDW
Oct 19 2015 15:40
the easiest way to do so with pixi is to use Texture Packer (google it)
it's supported by PIXI and can generate your sprites in different sizes
but you can do it yourself when you load your asset
it depends a lot of your goals. how much the mobile compatibility is important for you or your client
you don't want to overbuild a very simple scene
however it's the best practices that im talking about
CragVFX
@CragVFX
Oct 19 2015 15:43
yea, I appreciate that
CragVFX
@CragVFX
Oct 19 2015 16:00
the docs say that setting the width and height of the container also impacts the scale... but nothing happens when I changed the width and height... that is if I was setting it correctly.
stage._bounds.width
and stage.width
Mathias Latournerie
@JiDW
Oct 19 2015 16:01
stage.width
CragVFX
@CragVFX
Oct 19 2015 16:01
neither changed
Mathias Latournerie
@JiDW
Oct 19 2015 16:01
the stage can't display something bigger than your canvas obviously, did you set your canvas width correctly ?
CragVFX
@CragVFX
Oct 19 2015 16:07
I believe so, it's just going off the window innerWidth
and the canvas has the correct width and height in the devtools, but the sprites are all way too big still
they change when I set the container scale
but that seems to be harder to set than the width and height
CragVFX
@CragVFX
Oct 19 2015 16:16
ok, this is interesting
I set width and height using stage.width and stage.height, then if I look at the width and height of the stage, it's still not set to the correct values... if I update them right in chrome's devtools the change then takes effect.
Mathias Latournerie
@JiDW
Oct 19 2015 16:18
sounds like a small mistake in your code
setting width and height in pixi just set the corresponding scalex/y
CragVFX
@CragVFX
Oct 19 2015 16:23
yeah
from what I see my changes to width and height are being applied to _bounds.width and _bounds.height even though I am going stage.width = window.innerWidth
Mathias Latournerie
@JiDW
Oct 19 2015 16:27
alternatively you can try to use a second container, as a child of the first not scaled one and scale the second
you may have some interaction between the renderer and the container that im not aware of
CragVFX
@CragVFX
Oct 19 2015 16:28
I get what I want when I manually change the values in chrome, so I know I'm close
I wonder if there is some width set function that Im not using
Mathias Latournerie
@JiDW
Oct 19 2015 16:30
no
width and height have setters and getters on pixi side
width: {
get: function ()
{
return this.scale.x * this.getLocalBounds().width;
},
set: function (value)
{
        var width = this.getLocalBounds().width;

        if (width !== 0)
        {
            this.scale.x = value / width;
        }
        else
        {
            this.scale.x = 1;
        }


        this._width = value;
    }
},
oh wait
try to set the scale like I showed you
width/height use the width bound parameter of the container
withotu any childs, its 0
or add your childs then change the width
both should work
CragVFX
@CragVFX
Oct 19 2015 16:33
i think that's whats happening
it's 0 when I'm trying to set it
Mathias Latournerie
@JiDW
Oct 19 2015 16:34
containers do not have a width/height like a DIV would have in HTML
it's an autoexpanding structure
CragVFX
@CragVFX
Oct 19 2015 16:39
ok, so, changing where I set the width and height doesn't matter.
Sorry man haha
I wish I wouldn't be taking forever on this
CragVFX
@CragVFX
Oct 19 2015 16:45
got it!
that was actually dumb of me, I put the width/height change inside my loader, but didn't put them after the addChilds().... now it works
CragVFX
@CragVFX
Oct 19 2015 17:40
@JiDW so it is really pixilated like you said with big textures going to mobile. I guess I'll have to create smaller ones?
Mathias Latournerie
@JiDW
Oct 19 2015 19:07
Yes. Or find a decent size that you can downscale on mobile and upscale on the web, like 640px. If you have photography that need to be crystal clear, you have to do different texture size, but for most assets, upscales and downscales from a 640px width image (portrait) isnt that bad
CragVFX
@CragVFX
Oct 19 2015 19:08
thanks, I'll try to create the files again at that size
Mathias Latournerie
@JiDW
Oct 19 2015 19:21
if you need it in landscape mode, it's ~960px
CragVFX
@CragVFX
Oct 19 2015 19:21
sweet
Wilson Silva
@wilsonsilva
Oct 19 2015 22:31
var stage = new PIXI.Container(); stage.on('mouseup', mouseUpHandler);
how come mouseUpHandler is never fired?
It used to work on pixi 2.x, but since I upgraded to pixi v3 I can't get it to work
there are no examples with click on the main container (stage)
Wilson Silva
@wilsonsilva
Oct 19 2015 22:39
I found a solution. I added a graphics object that filled the whole stage container.