These are chat archives for pixijs/pixi.js

16th
Oct 2017
@R_Talon_twitter
Oct 16 2017 13:35
hello!! I'm looking for a example about particle. I have a Sprite and I want to explode it with particle. Any example? Anything? thanks!
Thomas Persson
@thomaspersson
Oct 16 2017 13:50
Hi, I have a good basic understanding of PixiJS. I can render out some stuff etc. The text looked really crappy on my retina display, so I passed in resolution: 2 in the autoDetectRender. But now everything is twice the size. Do I seriously need to do eg / 2 on everything like fontSize, width, positions and so on?!
Thomas Persson
@thomaspersson
Oct 16 2017 14:19
is this the correct way of handling resolution? to divide everything by the resolution?
@R_Talon_twitter
Oct 16 2017 14:22
No is the best way. In my situation I have 2 resolutions ( low and high ). Low for mobile ( < 1024 width for example ) and high for > 1024. Texture in mobile in 2048 is the "limit" for olders devices.
Thomas Persson
@thomaspersson
Oct 16 2017 14:29
Ru: I did not quite understand your first sentance. Is it the best way? Divide eg width with resolution and fontSize etc?
@R_Talon_twitter
Oct 16 2017 14:29
nop
Thomas Persson
@thomaspersson
Oct 16 2017 14:29
so what is the best way?
the text is crappy in resolution 1.
@R_Talon_twitter
Oct 16 2017 14:30
BitmapText?
Thomas Persson
@thomaspersson
Oct 16 2017 14:30
I use PIXI.Text
@R_Talon_twitter
Oct 16 2017 14:30
ok
then, fontsize in resolution 1 is a shit, no?
Thomas Persson
@thomaspersson
Oct 16 2017 14:31
but I mean.. say I want resolution 2 for retina displays. Should I not use resolution 2? thought it was the purpose of it. But then everything get's 2x bigger. How do I handle this without dividing by 2 (if resolution is 2).
I want to use high resolution for displays that can handle it of course.
@R_Talon_twitter
Oct 16 2017 14:34
I dont understand what is "resolution 1" "resolution 2" in your case
resolution in the options table.
resolution number 1 optional
The resolution / device pixel ratio of the renderer, retina would be 2
@R_Talon_twitter
Oct 16 2017 14:36
The resolution is window.devicePixelRatio
Thomas Persson
@thomaspersson
Oct 16 2017 14:37
yes.. and in my case it's 2.
@R_Talon_twitter
Oct 16 2017 14:37
is for divices with high resolution
Thomas Persson
@thomaspersson
Oct 16 2017 14:37
meaning everything get's 2x the size.
yes.
@R_Talon_twitter
Oct 16 2017 14:37
ok
Thomas Persson
@thomaspersson
Oct 16 2017 14:37
but then eg the font-size get's double the size as well, so I divice fontsize and widths with the resolution to get it to look "normal".
but seems tedious so I am wondering what is the best way todo this?
@R_Talon_twitter
Oct 16 2017 14:38
Your main problem is the text?
only de text?
what happend with de images, bitmap, etc?
Thomas Persson
@thomaspersson
Oct 16 2017 14:40
everything get 2x the size.
@R_Talon_twitter
Oct 16 2017 14:40
get?
Thomas Persson
@thomaspersson
Oct 16 2017 14:40
everything becomes 2x the size if using resolution 2 rather then 1.
@R_Talon_twitter
Oct 16 2017 14:40
scaled
scaled to 2
Thomas Persson
@thomaspersson
Oct 16 2017 14:41
yes.
I know all this :D
@R_Talon_twitter
Oct 16 2017 14:41
oooooooook
Thomas Persson
@thomaspersson
Oct 16 2017 14:41
I am wondering of best practice to render it the same.
@R_Talon_twitter
Oct 16 2017 14:42
the best practice for several resolutions is to use differents textures / images / spritesheets
if you have one unique texture ( 256 x 256 ) in normal resolution is 256 x 256 but in high reolution ( res 2 ) is scaled
lost quality
Thomas Persson
@thomaspersson
Oct 16 2017 14:42
this I do.
@R_Talon_twitter
Oct 16 2017 14:42
the text
Thomas Persson
@thomaspersson
Oct 16 2017 14:42
but what about the width for the renderer? fontSize?
@R_Talon_twitter
Oct 16 2017 14:43
fontSize scaled too
a simple solution is ( low res -> fontSize 12 and high res -> fontSize 24 )
or, the best way is use BitmapText
Leonardo Silveira
@sombriks
Oct 16 2017 14:47
hi everyone,
does have out there a pixi v4 example on how to load an atlas which also contains animations?
@R_Talon_twitter
Oct 16 2017 14:48
You have DragonBones, Spine examples in the web
AnimatedSprite for atlas without animations
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 14:52
@thomaspersson did you forget autoResize? please check that canvas width/height is in pixels, while css is 0.5 times, for resolution 2.
you also have to understand difference between renderer.width and renderer.screen.width
first one in pixels and better not to use it
while second one is independent from resolution, like innerWidth innerHeight of window
Thomas Persson
@thomaspersson
Oct 16 2017 14:53
Ru: okey, then I need to keep divide by resolution then.
@thomaspersson if you are changing anythign in the stage for resolution:2, then you're doing it wrong
Thomas Persson
@thomaspersson
Oct 16 2017 14:54
@ivanpopelyshev: oh sounds like what I want yes! could not be this weird to work with resolution :)
@ivanpopelyshev good news! :) thanks
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 14:54
you have to differentiate "screen" and "view", also look at autoResize and css stuff
also images can be @1x @2x ...
if you add suffix like "aaa@1x.png" and "bbb@2x.png" pixi will differentiate which texture has which resolution
256x256 x1 is the same as 512x512 x2
and sprite of both will have the same size - 256x256 in screen coords
@R_Talon_twitter
Oct 16 2017 14:55
exactly!
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 14:55
all stage manipulation must be done in screen coords, "renderer.screen" aka "app.screen"
also that's the screen width/height you are passing into the renderer and "resize" method
Thomas Persson
@thomaspersson
Oct 16 2017 14:56
I had autoResize, this.renderer.autoResize = true
I am currently doing this
this.renderer = autoDetectRenderer(
  (this.domContainer.offsetWidth / RESOLUTION), (this.domContainer.offsetHeight / RESOLUTION),
  {antialias: false, transparent: false, resolution: RESOLUTION}
);

this.renderer.autoResize = true;
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 14:56
you dont have to divide here
Thomas Persson
@thomaspersson
Oct 16 2017 14:57
domContainer is the div that holds pixi.
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 14:57
also , add autoResize into options
because pixi wont detect "hey, he changed autoReisze, now i have to resize the renderer"
that's just boolean variable, and you have either ask to resize independently either pass it to renderer options with resolution and stuff
Thomas Persson
@thomaspersson
Oct 16 2017 14:58
okey, got this now.
this.renderer = autoDetectRenderer(
  this.domContainer.offsetWidth, this.domContainer.offsetHeight,
  {antialias: false, transparent: false, resolution: RESOLUTION, autoResize: true}
);
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 14:58
ok, test it
Thomas Persson
@thomaspersson
Oct 16 2017 14:58
but now the viewport is 2x the size. eg horizontal scroll in browser.
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 14:58
also i dont know what offsetWidth offsetHeight is ;)
ok, now you need to understand how CSS works there
autoResize just changes CSS and nothing more
it's the container div that should draw the pixi that is domContainer.
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 14:59
so what you need is "my canvas width/height is 1280x760 while CSS width/height is 640x480"
got it ?
Thomas Persson
@thomaspersson
Oct 16 2017 14:59
that div has width 100% etc.
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 15:00
i dont know how to explain it, i'm not web-designer (
anyway, the canvaswidth/height is in pixels, the CSS ones are in screen units
you need to "compress" canvas somehow
Thomas Persson
@thomaspersson
Oct 16 2017 15:01
okey, I removed the things I render, and now the width is "ok"
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 15:02
???
Thomas Persson
@thomaspersson
Oct 16 2017 15:02
maybe it was something I did that got it to render double the width.
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 15:02
what do you mean render?
pixi render doesnt affect size of element
Thomas Persson
@thomaspersson
Oct 16 2017 15:02
if I render elements off the pixi viewport with resize true, it will expand the view/screen right?
think that is what happend?
how should I handle fontSize, need to divide that by resolution or have 2 sets of sizes for 1 or 2 in res?
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 15:03
ok, one more time
  1. if you do it right, you dont have to change any coordinates or font sizes
  1. autoResize only changes widht/height CSS of canvas, its different from width/height of canvas which is in real pixels that we dont want to work with
you can set autoResize to false and deal with it yourself, because I really dont know what configuration of HTML elements do you want there
read pixi source-code may be
every time someone is struggling with it i dont know what to say, and that problem appears in ANY engine
Chad Engler
@englercj
Oct 16 2017 15:06

if I render elements off the pixi viewport with resize true, it will expand the view/screen right?

No, resize true means that when you call .resize() on the renderer we will set the canvas size to match. Otherwise we resize the GL viewport but not the element itself.

Thomas Persson
@thomaspersson
Oct 16 2017 15:06
ah get it.. everything was the auto resize that I set as a propert.y
when passed into props at creation, it works fine. :)
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 15:06
:)
Thomas Persson
@thomaspersson
Oct 16 2017 15:06
thank you! :)
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 15:07
so people actually are spending some time before it "clicks" for them :)
cant do anything about it
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 15:13
and yeah, I'm ready to help if you give me the link to page that doesnt work properly
Thomas Persson
@thomaspersson
Oct 16 2017 15:19
@ivanpopelyshev fantastic :) got it to work now :) building a swimlane chart component that is very custom.
Leonardo Silveira
@sombriks
Oct 16 2017 15:27

@R_Talon_twitter i mean, on this example: http://pixijs.github.io/examples/#/demos/cacheAsBitmap.js

it loads monsters.json, and this file has the frames attribute.

is there any way to put inside the atlas animation info?

Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 15:39
no, only through names
@sombriks just enumerate files somehow, and on js side take all those textures into array
@R_Talon_twitter
Oct 16 2017 18:16
@sombriks For animation atlas use AnimatedSprite.
Ivan Popelyshev
@ivanpopelyshev
Oct 16 2017 21:59
you have to convert it to array of textures, though
PIXI doesnt have utility functions for that, because there are just so many ways for it and I dont see other engines are doing it
if you point me to flash-like engine that can convert part of atlas into array of textures - show me that method, I'll try to add the same signature in pixi