Jump to content

Rendering another container messes interactivity?


Recommended Posts


Messing around with pixi.js trying to implement a UI layer that doesn't follow the scaling of the rest of the game, but rather its own rules. So I chose to render a second container containing the UI elements. This however makes the game container's thingies unclickable (at least 'click' events don't register). Below is an example I modified from Pixi.js Click example. Using version 4.1.0 of pixi.js for the actual project, by the way.

Why is this, and how could I work around it?

(Extra info: The game is a gambling game, main target platform is mobile web, there is no movement left or right, but a larger area of a background image may be shown on different screens or landscape mode. User interface needs to be scaled and positioned according to screen size / position for user experience reasons - buttons need to be at the low end of screen, at the left and right edges of the screen, near the user's thumbs. Scaling of the buttons may need to be different depending on if the user is playing on a tablet or a phone. Unfortunately I am not allowed to post actual game code here due to company rules, so I am just trying to figure out what's with the example I posted.)


var renderer = PIXI.autoDetectRenderer(800, 600);

var sprite = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
var stage = new PIXI.Container();

sprite.x = renderer.width / 2;
sprite.y = renderer.height / 2;

sprite.interactive = true;
sprite.buttonMode = true;
sprite.on('pointerdown', onClick);


// UI
var ui = new PIXI.Container();
var button = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
button.width = 10;
button.height = 10;
button.interactive = true;
button.buttonMode = true;
button.on('click', function() {
  console.log('Clicked it.');
ui.position.set(10, 10);


function animate() {
    renderer.render(ui, null, false); // Commenting this out let's me click on the 'sprite' again.

function onClick () {
    sprite.scale.x *= 1.25;
    sprite.scale.y *= 1.25;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...