Combining sprites into a single sprite

[NibblyPig]

I have some sprites and rather than draw them all individually, I wanted to combine some of them together to make a new texture, and create sprites using that. I figure it will save processing time.

I searched on google but it was very hard to find out how to do this, eventually I found some code and tried to implement it like this:

let renderer = PIXI.autoDetectRenderer(32, 32);

let renderTexture = new PIXI.RenderTexture.create(32, 32); 

renderer.render(sprite1, renderTexture);

renderer.render(sprite2, renderTexture);

var combinedSprite = new PIXI.Sprite(renderTexture);

app.stage.addChild(combinedSprite);

However it seems PIXI autoDetectRenderer is undefined. If I open up my debugging console:

>PIXI
{VERSION: "5.0.0-alpha.3", accessibility: {…}, extract: {…}, filters: {…}, interaction: {…}, …}
>PIXI.autoDetectRenderer
undefined

I am not sure what to do.

[xerver]

v5 changes a few APIs. One of the major changes is that the Canvas Renderer is a plugin, and the autoDetectRenderer function lives in that plugin.

The base "pixi.js" bundle doesn't include the canvas plugin. The "pixi.js-legacy" bundle does.

If you only need WebGL, then use "new PIXI.Renderer()". If you need canvas as well, then switch bundles and continue using autoDetectRenderer.

[jonforum]

hi, the tricks is to add your sprites [children] in a container.
Then render the container as texture.

Also take a look to 

renderer.extract.canvas(renderTexture)

if this can help

[NibblyPig]

Thanks is there some example of the code I should be using?

I changed it to PIXI.Renderer() and now I get

Uncaught TypeError: this.addSystem is not a function
    at Object.e [as Renderer] (pixi.min.js:8)

I switched to pixi 4 and it runs but nothing renders now.

I must be doing something wrong. I can't find any tutorials or examples anywhere of how to do this.

[bubamara]

https://pixijs.io/examples/#/basics/render-texture.js

[NibblyPig]

20 minutes ago, bubamara said:

https://pixijs.io/examples/#/basics/render-texture.js

Hmm that is quite hard to understand and it doesn't really answer any questions about what I'm confused about or doing wrong.

It looks like it adds a container to the stage, and puts 25 bunnies in it.

Then it creates a base render texture, not sure what that is. Then it creates a render texture, not sure what that is either from the base.

Then it makes a sprite from it. But I can't see how the new sprite isn't just blank, it doesn't have any references to container. Unless it's simply rendering the entire stage to a container which wouldn't be much use?

[jonforum]

you can also try 

http://pixijs.download/dev/docs/PIXI.SystemRenderer.html#generateTexture

 

 const tex = renderer.generateTexture(Container); // container with all your sprites as children
 const combinedSprite = new PIXI.Sprite(tex);

Stage.addChild(combinedSprite);

this should create a new texture with the current container and childrens
And then you create a new sprite with this texture.

[NibblyPig]

Thanks, I have tried that and this is my code but nothing appears on the canvas:

        let renderer = PIXI.autoDetectRenderer(64, 64);
        var container = new PIXI.Container();

        let sprite1 = new PIXI.Sprite(PIXI.utils.TextureCache["MySprite.png"]);
        let sprite2 = new PIXI.Sprite(PIXI.utils.TextureCache["MySprite.png"]);
        sprite1.x = 0;
        sprite1.y = 0;
        sprite2.x = 32;
        sprite2.y = 0;

        container.addChild(sprite1);
        container.addChild(sprite2);

        var tex = renderer.generateTexture(container); // container with all your sprites as children
        var combinedSprite = new PIXI.Sprite(tex);

        _app.stage.addChild(combinedSprite);

My biggest WTF is that I have no idea how I'm supposed to learn PIXI js, I am just banging my head against a wall trying random snippets I find on google. I read through the tutorial but I can't understand how to learn anything that isn't in it. It's an exercise in frustration to spend hours trying to do every single tiny step. Any ideas? Maybe I should ditch it and use another framework?

[jonforum]

hum ok , but first it a good idea to read all basic tutorial.

http://www.pixijs.com/tutorials

And yes it true, for other tips and trick you need to ask a pixi pro

[bubamara]

you need to preload your textures first. paste this into pixi examples page

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

PIXI.loader
    .add('bunny', 'required/assets/basics/bunny.png')
    .add('head', 'required/assets/eggHead.png')
    .load(onAssetsLoaded);

function onAssetsLoaded(loader, resources)
{
    var container = new PIXI.Container();

    var sprite1 = new PIXI.Sprite(resources.bunny.texture)
    var sprite2 = new PIXI.Sprite(resources.head.texture)

    sprite1.x = 0;
    sprite1.y = 0;
    sprite2.x = 32;
    sprite2.y = 0;

    container.addChild(sprite1);
    container.addChild(sprite2);

    var tex = app.renderer.generateTexture(container);

    var combinedSprite = new PIXI.Sprite(tex);
  
    app.stage.addChild(combinedSprite);
}

as jonforum suggested, see the tutorials together with pixi sources. may be WTF at the beginning, but will be same with other rendering engines/frameworks

 

[jonforum]

        let renderer = PIXI.autoDetectRenderer(64, 64);
        var container = new PIXI.Container();

        let sprite1 = new PIXI.Sprite(PIXI.utils.TextureCache["MySprite.png"]);
        let sprite2 = new PIXI.Sprite(PIXI.utils.TextureCache["MySprite.png"]);
        sprite1.x = 0;
        sprite1.y = 0;
        sprite2.x = 32;
        sprite2.y = 0;

        container.addChild(sprite1, sprite2);
        renderer.render(container); // force rendering stage or container ? 

        var tex = renderer.generateTexture(container); // container with all your sprites as children
        var combinedSprite = new PIXI.Sprite(tex);

        _app.stage.addChild(combinedSprite);

am not sure because my stage are autoRender when i test, it work on my side, but in your case did you render the container before or your stage ?

Try ithis and tell me . and look what @bubamara say, it true, i don't know you app source code, but logicly you have to preload all your game image before.

[NibblyPig]

Sprites are loading correctly, if I simply add sprite1 instead of combinedSprite then it works.

I've tried adding that renderer.render line, but still nothing.

I've switched back to 4.7.3 do I need to switch back to 5 to try the other example?

 

Edit: AHA.

Replaced the auto detect renderer line with this:

let renderer = _app.renderer;

That seems to have done the job.

Not *really* sure in detail what the renderer is and how it works to render a container, would be interesting to understand it. It didn't make sense why auto detect renderer took dimensions as a parameter.

I don't need to call renderer.render on my stage, I just add things to it. But apparently it's needed for a container. I am not sure what that operation is actually doing. 

 

Edit 2:

Hmm, seems the _app.renderer.render(container); was actually rendering the container to the screen, not sure why that was suggested, I've removed it since I don't want to render the container. Also not really sure what that does, why would you directly render a container and how does it store it? Normally you just add a sprite to the stage, but renderer.render seems to bypass that I guess as you don't need to use the stage? I have absolutely no idea what's going on

[ivan.popelyshev]

combine sprites in v4? 

https://github.com/gameofbombs/pixi-super-atlas 
https://github.com/gameofbombs/pixi-super-atlas/blob/master/test/checkpack.ts
"SuperAtlas.add" should give you new texture region in your new atlas. Unfortunately, there are no demos, but a few projects use it. You have to read SuperAtlas source code to see which functions do which things.