Pixi.js: How to have a Container fixed size?

[Esshahn]

Before using pixi, I created a canvas "A" of say 320x200 pixels and put it on canvas "B" sized 640x400 pixels. Whatever I put into canvas A got limited by the rectangle of the canvas, which is exactly what I try to have now with pixi.

Think of a Commodore 64, where the outside box is the border and the inside box ("B") is the screen.

How can I do this?

While I'm at it: any way to scale the pixels times two and not blur them?

Example without pixi: http://awsm.de/papillons/

[englercj]

Create a renderTexture of some size and draw a scene to it, then draw that to your main scene using the render texture as the texture of a sprite.

[Esshahn]

First: thank you.
Second: can you give a short code example? I'm having a hard time understanding it.

[englercj]

Sure, something along these lines:

// this contains the objects you normally draw to the small canvas
var containerOfThings = new PIXI.Container();

// this represents your small canvas, it is a texture you can render a scene to then use as if it was a normal texture
var smallTexture = new PIXI.RenderTexture(renderer, 320, 200);

// instead of rendering your containerOfThings to the reeal scene, render it to the texture
smallTexture.render(containerOfThings);

// now you also have a sprite that uses that texture, rendered in the normal scene
var sprite = new PIXI.Sprite(smallTexture);

sceneContainer.addChild(sprite);

renderer.render(sceneContainer);

[Esshahn]

Thank you very much for taking the time explaining it. I greatly appreciate this.

[renatonolo]

Hello.

I am trying to build a camera system using this above example but it's not working for me.

What I am doing is create a large Container (928px X 672px) and putting some sprites inside this container.
After this, I'm creating a RenderTexture with size 800px X 544px and rendering the large container inside this RenderTexture.
Then, I am creating a sprite using this RenderTexture.
Finally, I am putting this sprite inside the app.stage using app.stage.addChild method.

But when I did this, notting appear in my screen.

Can you help me to solve this?

[englercj]

@renatonolo Open a new issue and provide a running example.

[renatonolo]

Thanks for the reply.

I finally got my code working.. 👍

Basically I created an large PIXI.Container, add my sprites as child of this container and put a mask to this container with container.mask = mask (a simple PIXI.Graphics object).

Thank you again for the attention. :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.