NibblyPig

Combining sprites into a single sprite

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
20 minutes ago, bubamara said:

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
        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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.