These are chat archives for pixijs/pixi.js

21st
Apr 2016
Chad Hall
@chadlhall
Apr 21 2016 17:58
Hey everyone, wondering if someone can help me find some learning resources. I just threw out my custom 2d canvas rendering code for a project and switched to pixi. Great decision so far - performance is sky high and I'm really liking Pixi's clean API. However, I'm quite green when it comes to utilizing the GPU. Does anyone have recommendations for good general-purpose primers? Specific questions I'm hoping to learn answers to are: how hard should I strive to make every image dimension a power of 2? Is rendering lots of small images and lots of large images (up to 4096x4096) hurting my performance? Is a BaseTexture what gets copied to the CPU, or a Texture?
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:09
@chadlhall hey :)
1) power of 2 need only if you want to set mipmap = true for BaseTexture
2) 4096x4096 is ok , it does not hurt performance. It all depends on number of pixels (fragments) rendered on GPU.
3) BaseTexture gets copied to GPU, Texture is just a pair of Rectangles and link to BaseTexture
if there are a number of sprites with same BaseTexture and blendMode rendered in the same sequence, they'll be done in a batch
pixi.v4 can join multiple BaseTextures ( up to 8 or 16) in one batch
2* - number of fragments ON SCREEN , not on your texture
well, main resource is pixi.js source at github and its JsDocs ;)
and search that subforum too
Chad Hall
@chadlhall
Apr 21 2016 19:14
thanks :-) I did comb through the docs and the forums a little bit, found some useful info here and there
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:14
there are a couple of books
Chad Hall
@chadlhall
Apr 21 2016 19:14
was just wondering if there was maybe a "best practices" list anywhere... the wiki had as mall one
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:14
I think we'll have critical mass of things on forum soon, i'll compile it in free book :)
Chad Hall
@chadlhall
Apr 21 2016 19:15
*small one
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:15
btw, there will be 3d in next version: http://monsterisland.chimeracompanygames.com/lux-demo/index.html (QE + mouse)
Chad Hall
@chadlhall
Apr 21 2016 19:15
so about the fragments being rendered... my map is bigger then the viewport and I'm using a Sprite to render it. Should I size the sprite to the viewport every frame?
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:16
you can use TilingSprite
but I think that graphics card actually culls big objects :)
TilingSprite is exactly for that: moving the texture coords inside the object
Chad Hall
@chadlhall
Apr 21 2016 19:17
ahhhhh
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:17
what kind of map is it?
Chad Hall
@chadlhall
Apr 21 2016 19:17
I completely mistook it's purpose then. I figured it was to duplicate a texture over and over to fill up the sprite
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:17
that too
Chad Hall
@chadlhall
Apr 21 2016 19:18
it's from Tiled, but it's a little more complicated then the plug-in will help me with, unfortunately
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:18
how complicated?
Chad Hall
@chadlhall
Apr 21 2016 19:18
I'm currently rendering map data to 3 or 4 4096x4096 images, then using those as the sprites
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:18
that's good idea too
Chad Hall
@chadlhall
Apr 21 2016 19:18
not overly complicated. But I've also had my own working importer for a long time
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:19
Chad Hall
@chadlhall
Apr 21 2016 19:19
so right now I'm just tossing those sprites into the stage... and it does work pretty well
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:19
yep
it depends on whether you want to actually store texture buffers
Chad Hall
@chadlhall
Apr 21 2016 19:20
I'm doing some tricky things with one of the layers to draw it behind or in front of characters
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:20
yeah, common problem
Chad Hall
@chadlhall
Apr 21 2016 19:21
for chest high walls and such... so one of those textures I make from the map actually gets used by as many Sprites as there are characters on the screen
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:21
I have z-index for that, in pixiv4.1 , but that branch wont be integrated in master branch for a long time
people dont understand WTF i did in it :)
Chad Hall
@chadlhall
Apr 21 2016 19:21
oooo, I might take a look. No idea if I'll be able to grok it or not :-)
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:22
Im going to backport some stuff
so people wont be that afraid
Chad Hall
@chadlhall
Apr 21 2016 19:22
ok, so I don't think I'm doing anything too heinous overall then. I'm just a bit paranoid about what I don't know in this area
for my characters, we've got an interchangeable equipment system that changes their appearance. I'm doing all of that rendering (and the rendering of animations for that equipment) on off screen canvases using context2d
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:24
Chad Hall
@chadlhall
Apr 21 2016 19:24
then using those pre-rendered canvas' as BaseTextures, so they tend to change a lot
yup. this. probably exactly
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:24
you may have problems with videomemory then
dont forget t o destroy() BaseTextures you arent using anymore
or just use pixi version 4, it has GC in it
Chad Hall
@chadlhall
Apr 21 2016 19:25
just switched last week, so pretty sure I started with 4
I remember looking for the destroy() method in the doc and not finding it
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:26
i dont know if docs are updated to v4
but destroy() was always the problem
its parameters.. its pain..
Chad Hall
@chadlhall
Apr 21 2016 19:27
lol
if I were to change my equipment into textures and use pixi to pre-render those characters instead of my canvas code, would it be reasonable for me to expect a performance increase overall?
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:28
you dont do it often
and you'll have problem with PIXI.Graphics if you use primitives for characters
Chad Hall
@chadlhall
Apr 21 2016 19:28
ehhh.. it could happen a lot
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:28
context2d is better for that kind of operations
Chad Hall
@chadlhall
Apr 21 2016 19:29
there's no primitives. But one character render could be made up of 6-8 different images
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:29
then PIXI will work
use PIXI.RenderTexture
in v4:
Chad Hall
@chadlhall
Apr 21 2016 19:29
ok, I'm using that for my mini-map and it's working really nice
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:29
renderer.render(myContainer, renderTexture);
Chad Hall
@chadlhall
Apr 21 2016 19:30
the mini-map was a huge pain point before... I try not to optimize stuff unless it needs it, you know?
I'm interested to see if RenderTexture improves things though. I imagine it'll cause the character sprite to be assembled on the GPU?
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:31
yep
but you are not doing it every frame, right?
Chad Hall
@chadlhall
Apr 21 2016 19:31
every frame the animation or equipment changes
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:31
so i dont think it will be huge performance improvement
what kind of animation?
Chad Hall
@chadlhall
Apr 21 2016 19:32
right now walking, walking with gun out, shooting.... things characters do
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:32
frame-by-frame?
Chad Hall
@chadlhall
Apr 21 2016 19:32
yeah... I'm not using any sort of cache right now :-/
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:32
then it will be improvement
if its not frame-by-frame but something smooth - look at http://esotericsoftware.com
Chad Hall
@chadlhall
Apr 21 2016 19:33
alright. Maybe I'll do that sooner rather then later then. Like I said, kinda green and figured the small textures might not be worth sending to the gpu
man, spine2d does look sweet
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:34
pixi spine runtime is up to date
Chad Hall
@chadlhall
Apr 21 2016 19:34
I'm primarily working with a pixel artist right now and things are a little more retro
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:34
then you can pre-render all frames at once
Chad Hall
@chadlhall
Apr 21 2016 19:34
although I did make sure to show him spine2d and the fact that pixi supports it ;-)
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:34
dont do it in runtime
just make a spritesheet instead of just one frame
Chad Hall
@chadlhall
Apr 21 2016 19:35
well, the character can change equipment
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:35
then you'll remake that spritesheet
just updating the BaseTexture every time equipment changes
Chad Hall
@chadlhall
Apr 21 2016 19:36
alright. Sounds like it would have caused canvas to stutter but I bet you know what you're talking about
I'm going to go through that gambofbombs source... it's really close to (if not the same as) my use case
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:37
I can zip it for you
its not using pixi
Chad Hall
@chadlhall
Apr 21 2016 19:38
well thank you :-)
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:39
just add a link to gameofbombs.com somewhere
if you use some parts of it
whoa that took up a lot of space
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:39
nice
Chad Hall
@chadlhall
Apr 21 2016 19:39
that's the kind of thing we're doing
appreciate all your help. That was a very informative chat :-)
going to try out game of bombs before getting back to work ;-)
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:41
:D
its not using pixi yet
pure canvas
I have to implement multiple features in pixi before I move gameofbombs.com to it
Chad Hall
@chadlhall
Apr 21 2016 19:43
that's a pretty cool game.. using node on the backend?
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:44
Java, Scala
node.js
groovy
coffeescript
EVERYTHING
Chad Hall
@chadlhall
Apr 21 2016 19:44
lol
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:45
want to see something mind-blowing?
tell me your nickname i'll show you DEV server
Chad Hall
@chadlhall
Apr 21 2016 19:45
PsycTheWalrus
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:45
ok, refresh the page , select DEV server (selection is in top-left corner)
Chad Hall
@chadlhall
Apr 21 2016 19:48
have'nt confirmed email
can't chat in game :-)
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:48
oh, one second
ok, later
just follow me
Chad Hall
@chadlhall
Apr 21 2016 19:49
that's really cool
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:49
:)
Topology tricks
portals and stuff
that's why i cant just move it to pixi
I need advanced Camera
Chad Hall
@chadlhall
Apr 21 2016 19:50
yeah, I can believe that
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:50
that can render one object multiple times and sort its "instances" to show them correctly
Chad Hall
@chadlhall
Apr 21 2016 19:50
been working on my project for about a year, and have kind of kept everything "lo-fi". I'm pretty iterative
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:51
as for tilemap, one of best implementation i saw is in rpgmaker
but there are 3 layers in it
pixi-tilemap is just improvement for rpgmaker map
Chad Hall
@chadlhall
Apr 21 2016 19:51
when you get near portals, do you stream the next map's data in?
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:51
im helping them with conversion to pixiv4
yes
Chad Hall
@chadlhall
Apr 21 2016 19:51
can't say I've looked at the rpgmaker impl.... ever... will get on that
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:51
there's basic function that gives atlas by point
Chad Hall
@chadlhall
Apr 21 2016 19:52
are you all procedural?
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:52
maps are generated, yes
with some structures
Chad Hall
@chadlhall
Apr 21 2016 19:52
like the kind of stuff they're trying to do in Rust
Chad Hall
@chadlhall
Apr 21 2016 19:53
whoa man, characters to represent tiles
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:53
:))))
tiles are dynamic too
ID's determined at runtime
Chad Hall
@chadlhall
Apr 21 2016 19:54
yeah I saw them changing around me a bit
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:54
I just hate minecraft block ID's so all my classes dont have them
i mean, there's no block #0
number corresponding for tile or for any object type determined in map loading process
then server sends the "classes" list to client
like in half-life
Chad Hall
@chadlhall
Apr 21 2016 19:55
I gotta convince my artist to get smarter about tile packing. My situation is less then favorable at the moment
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:55
what about TexturePacker?
I made my own implementation for gameofbombs, i just use two-dimensional arrays
Chad Hall
@chadlhall
Apr 21 2016 19:56
would probably help us, but he needs to learn. heh
Chad Hall
@chadlhall
Apr 21 2016 19:56
I was ultimately going to write some sort of texture packer myself
but yeah, I'll probably just use pixi's now
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:56
but for you its easier to use TexturePacker
or some free tool that can do that too
ShoeBox
just dump all png-s and it will generate json+png , pixi loader will take it and you'll have all textures from it
with one BaseTexture
or multiple BaseTextures if you have that many tiles
Chad Hall
@chadlhall
Apr 21 2016 19:58
yeah, we got a lot right now... many are redundant
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:58
shoebox/texturepacker can also add some space to it, or "bake" (add some RGB values at padding)
useful for webgl
Chad Hall
@chadlhall
Apr 21 2016 19:58
yeah saw that tidbit about pixel bleeding
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:58
yes
however pixi-tilemap can work without it, because , you know, shader stuff :)
Chad Hall
@chadlhall
Apr 21 2016 19:59
you got a devblog or anything you used while making/continuing to make GoB?
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:59
it even renders square tiles much faster
using gl.POINT
I had some articles on russian.. but i dont think they'll be useful to youu
Chad Hall
@chadlhall
Apr 21 2016 19:59
I did see that in a cursory glance at the source... was planning on extracting it rather then trying to switch wholesale :-)
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 19:59
if you want networking stuff, i can recommend you few articles
Chad Hall
@chadlhall
Apr 21 2016 20:00
networking is actually my jam. I know that front to back
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 20:00
you can make open-source tool using ours and yours stuff for constructor
people will be happy
i'll help too
so, what did I learn AFTER i wrote gameofbombs network
yes, im that stupid
AFTER i wrote gameofbombs network, I read Unreal Networking (just docs for unreal 3 or 4)
Chad Hall
@chadlhall
Apr 21 2016 20:01
yeah, tbh I see a lot of people asking how to do what I'm doing, but no one answering them :-)
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 20:01
tribes networking system
and some articles on 0fps.net
Chad Hall
@chadlhall
Apr 21 2016 20:01
you read the gaffer on games articles? they're pretty often referenced
I originally learned from those Unreal articles though
I live nearby Epic Games now... saw Tim Sweeny driving around once. heh
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 20:02
I wrote my networking system just after I read "Tale of desync" , then I wrote that bomber game as a test
then I realized that I really need UDP, read all that stuff about unreal and tribes and ... i still didnt implement it yet
wow!!!
Chad Hall
@chadlhall
Apr 21 2016 20:03
people are saying WebRTC will be as good or better then UDP
but support for it isn't all the way there yet, and I can't say I've read up on it that much
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 20:03
so far I saw only one implmenetation for client-server WebRTC
eureca.io
they also have some useful plugins for pixi
Chad Hall
@chadlhall
Apr 21 2016 20:04
oooo interesting. Hadn't seen this yet, either
I'm using the "ws" websocket library, it's low level but it works for me
(it's not really that low level....)
I'm primarily making an MMO although it's got action components. So far being forced to use TCP can cause a hiccup here or there, but it doesn't seem to be a game breaker
Chad Hall
@chadlhall
Apr 21 2016 20:09
I gotta get back to it... I'll shoot you an update about map loading. I now see you're the primary owner of pixi-tilemap so I might be able to shoot you some useful stuff. We'll see ;-)
thanks a ton for the help
Ivan Popelyshev
@ivanpopelyshev
Apr 21 2016 20:12
:)