Best practice for this scenario

[bQvle]

I'm developing a multiplayer game where each player is able to customize its vehicle.

 

A player is therefore put together by multiple sprites.

 

Base model (with customizable tint and sprite stickers)

Gun (with customizable tint and sprite stickers)

And SpriteStickers (which can be tinted, positioned, rotated, scaled and is masked so they don't exceed the actual model)

 

I guess this will cause alot of overhead, especially if theres 50 players in the game.

 

So how would you go about this?

 

I'm thinking the following scenario:

When instantiating the vehicle, Caching the container as a bitmap. 

 

But the concerns i have:

1. Wont this eliminate the purpos of Spritesheets? (will each cashed bitmap be treated as a separate image?)

2. the gun needs to rotate and always be on top (also on top of other players "vehicle/container"). this means i will also have to cache the gun as a separate bitmap, and place it in a another container that's positioned higher than the container holding the bodies of the vehicles.

3. If the gun needs to be positioned off-centered to the body, is there any smart method of doing this when the gun isn't a part of the same container as the body?

 

 

My hope is to solve this in the most "technically" correct way, so that i will cause the least amount of drawcalls and the best preformance possible. (and as a side question, is each Container causing a drawcall, or will the engine batch calls as long its using the same sprite, and how does CachedBitmap fit into this) 

 

Thanks

[xerver]

> Wont this eliminate the purpos of Spritesheets? (will each cashed bitmap be treated as a separate image?)

 

Yes, it will. If all the customizations are within a single spritesheet it would likely be faster to just have those sprites drawn. No speculation is better than benchmarking. I would try it both ways.

 

> the gun needs to rotate and always be on top (also on top of other players "vehicle/container"). this means i will also have to cache the gun as a separate bitmap, and place it in a another container that's positioned higher than the container holding the bodies of the vehicles.

 

Kind of? It just needs to be a sibling of those sprites, but drawn afterwards.

 

> If the gun needs to be positioned off-centered to the body, is there any smart method of doing this when the gun isn't a part of the same container as the body?

 

Not sure what you mean by "smart", you would just have to update the gun every frame to match the location of the other object.

[d13]

I guess this will cause alot of overhead, especially if theres 50 players in the game.

Pixi does a whole bunch of crazy optimizations for you under the hood, so you don't have to over-think it.

Just make compound sprites using sprite sheets and containers in a logical way just like you think should - chances are it will work just fine 

If you defensively pre-optimized without benchmarking you could be introducing some of you own bad code that could slow things down much more than letting Pixi do its thing for you. 

[bQvle]

Thanks for answering guys

 

I guess I will try both and see what works best.

 

Regarding the stickers, I'm thinking of putting them all in one container, and the do the masking on the container.

But isn't the mask recalculated each frame?

 

 > Not sure what you mean by "smart", you would just have to update the gun every frame to match the location of the other object.

If the gun needs to sit at the front-left of the body, i could offset that using pivot. but that wont work, since the gun needs to rotate around itself.

 

The best/"smartest" solution i can think of is just to make a Child container on the body where the gun is supposed to be positioned, and then update the "sibling/gun" to inherit that container's world position.

But is it okay to use empty containers for positional references?  

[bQvle]

I'm still having some issues i need to solve here.
 
Currently I've succeeded creating the fully customizable viechle.
 
//Container
var body = new PIXI.Container();
 
//Sprites
var bodyMask = PIXI.Sprite.fromImage('Sprites/Tank/body1/mask.png');
var bodyShader = PIXI.Sprite.fromFrame('Tank/body1/shader.png');
var bodyPattern = new PIXI.extras.TilingSprite(...);
bodyMask.anchor.set(0.5, 0.5);
bodyShader.anchor.set(0.5, 0.5);
 
//Fill and pattern
var bodyFill = new PIXI.Container();
bodyPattern.tint = ....;
bodyFill.mask = bodyMask;
bodyFill.addChild(bodyPattern);
 
//Stickers
for (var i = 0; i < [stickercount]; i++) {
    var sticker = PIXI.Sprite.fromFrame(....);
    sticker.anchor.set(0.5);
    sticker.scale.set(...);
    sticker.x = ...;
    sticker.y = ...;
    bodyFill.addChild(sticker);
}
 
//Combine
body.addChild(bodyFill);
body.addChild(bodyShader);
body.cacheAsBitmap = true;

 

 

And I'm doing the same for the Gun.

this bumped me up from 3-5 drawcalls to ~200 drawcalls, and it was REALLY killing the browser to a point where i couldn't even close it.

I solved that by setting it to cacheAsBitmap.

 

That reduced my drawcalls to around 65. (2 drawcall for each player + level and gui).

And its perfoming allright on my PC.

 

 

But

I want it to preform great, and also on mobile devices.

So i thought that instead of caching as bitmap, I wanted to render it to another canvas, and use that as a spritesheet. But that brings me several problems! and I hope someone can help me.

 

1. I can't use a WebGL canvas, since pixi only works with one WebGL canvas.

2. Using a normal canvasRenderer gives me several other problems.

- Nothing is getting tint colored.

- The fill (bodyPattern/tilingSprite) isn't tiling.

- The mask isn't working

= resulting in a black and white collage of sprites that isn't masked.

 

Any good workarounds here?

Thanks

 

Edit

I'm currently trying to make the spritesheet with a render texture. but everytime i call RenderTexture.resize, it clears the whole texture. I cant figure out why.