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?
@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 ;)
also you can ask people at http://www.html5gamedevs.com/forum/15-pixijs/
and search that subforum too
thanks :-) I did comb through the docs and the forums a little bit, found some useful info here and there
there are a couple of books
was just wondering if there was maybe a "best practices" list anywhere... the wiki had as mall one
I think we'll have critical mass of things on forum soon, i'll compile it in free book :)
*small one
btw, there will be 3d in next version: http://monsterisland.chimeracompanygames.com/lux-demo/index.html (QE + mouse)
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?
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
ahhhhh
what kind of map is it?
I completely mistook it's purpose then. I figured it was to duplicate a texture over and over to fill up the sprite
that too
it's from Tiled, but it's a little more complicated then the plug-in will help me with, unfortunately
how complicated?
I'm currently rendering map data to 3 or 4 4096x4096 images, then using those as the sprites
that's good idea too
not overly complicated. But I've also had my own working importer for a long time
https://github.com/pixijs/pixi-tilemap works differently
so right now I'm just tossing those sprites into the stage... and it does work pretty well
yep
it depends on whether you want to actually store texture buffers
I'm doing some tricky things with one of the layers to draw it behind or in front of characters
yeah, common problem
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
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 :)
oooo, I might take a look. No idea if I'll be able to grok it or not :-)
Im going to backport some stuff
so people wont be that afraid
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
then using those pre-rendered canvas' as BaseTextures, so they tend to change a lot
yup. this. probably exactly
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
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
i dont know if docs are updated to v4
but destroy() was always the problem
its parameters.. its pain..
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?
you dont do it often
and you'll have problem with PIXI.Graphics if you use primitives for characters
ehhh.. it could happen a lot
context2d is better for that kind of operations
there's no primitives. But one character render could be made up of 6-8 different images
then PIXI will work
use PIXI.RenderTexture
in v4:
ok, I'm using that for my mini-map and it's working really nice
renderer.render(myContainer, renderTexture);
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?
yep
but you are not doing it every frame, right?
every frame the animation or equipment changes
so i dont think it will be huge performance improvement
what kind of animation?
right now walking, walking with gun out, shooting.... things characters do
frame-by-frame?
yeah... I'm not using any sort of cache right now :-/
then it will be improvement
if its not frame-by-frame but something smooth - look at http://esotericsoftware.com
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
pixi spine runtime is up to date
I'm primarily working with a pixel artist right now and things are a little more retro
then you can pre-render all frames at once
although I did make sure to show him spine2d and the fact that pixi supports it ;-)
dont do it in runtime
just make a spritesheet instead of just one frame
well, the character can change equipment
then you'll remake that spritesheet
just updating the BaseTexture every time equipment changes
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
I can zip it for you
its not using pixi
well thank you :-)
just add a link to gameofbombs.com somewhere
if you use some parts of it
whoa that took up a lot of space
nice
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 ;-)
:D
its not using pixi yet
pure canvas
I have to implement multiple features in pixi before I move gameofbombs.com to it
that's a pretty cool game.. using node on the backend?
Java, Scala
node.js
groovy
coffeescript
EVERYTHING
lol
want to see something mind-blowing?
tell me your nickname i'll show you DEV server
PsycTheWalrus
ok, refresh the page , select DEV server (selection is in top-left corner)
have'nt confirmed email
can't chat in game :-)
oh, one second
ok, later
just follow me
that's really cool
:)
Topology tricks
portals and stuff
that's why i cant just move it to pixi
I need advanced Camera
yeah, I can believe that
that can render one object multiple times and sort its "instances" to show them correctly
been working on my project for about a year, and have kind of kept everything "lo-fi". I'm pretty iterative
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
when you get near portals, do you stream the next map's data in?
im helping them with conversion to pixiv4
yes
can't say I've looked at the rpgmaker impl.... ever... will get on that
there's basic function that gives atlas by point
are you all procedural?
maps are generated, yes
with some structures
like the kind of stuff they're trying to do in Rust
whoa man, characters to represent tiles
:))))
tiles are dynamic too
ID's determined at runtime
yeah I saw them changing around me a bit
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
I gotta convince my artist to get smarter about tile packing. My situation is less then favorable at the moment
what about TexturePacker?
I made my own implementation for gameofbombs, i just use two-dimensional arrays
would probably help us, but he needs to learn. heh
I was ultimately going to write some sort of texture packer myself
but yeah, I'll probably just use pixi's now
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
yeah, we got a lot right now... many are redundant
shoebox/texturepacker can also add some space to it, or "bake" (add some RGB values at padding)
useful for webgl
yeah saw that tidbit about pixel bleeding
yes
however pixi-tilemap can work without it, because , you know, shader stuff :)
you got a devblog or anything you used while making/continuing to make GoB?
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
I did see that in a cursory glance at the source... was planning on extracting it rather then trying to switch wholesale :-)
if you want networking stuff, i can recommend you few articles
networking is actually my jam. I know that front to back
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)
yeah, tbh I see a lot of people asking how to do what I'm doing, but no one answering them :-)
tribes networking system
and some articles on 0fps.net
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
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!!!
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
so far I saw only one implmenetation for client-server WebRTC
eureca.io
they also have some useful plugins for pixi
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
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
:)