Some of my buttons are not showing up.

[Haon1919]

Hey guys! I am kinda new to PIXI so I apologize if there is a super obvious fix to this problem but I am having a super hard time getting display objects I called buttons to show up. Button 1 and the TilingSprite appear just fine but the rest of the buttons do not. I looked at the contents of app.stage in my console and it says the buttons are all in there. Thanks in advance for the help!

 

function playerSelect(){
    // var onClick = function(){  new characterSelect()};
    var stage = new PIXI.Container();
    stage.visible = true
    // var container = new PIXI.Container();
    var button1 = new Button("resources/button-small.png", 323, 162);

    var player1 = new Button("resources/player-select-buttons/1player-noselect.png", 293, 575);
    var player2 = new Button("resources/player-select-buttons/2player-noselect.png", 293, 575);
    var player3 = new Button("resources/player-select-buttons/3player-noselect.png", 293, 575);
    var player4 = new Button("resources/player-select-buttons/4player-noselect.png", 293, 575);
    //selected
    var player1Select = new Button("resources/player-select-buttons/1player-selected.png", 293, 575);
    var player2Select = new Button("resources/player-select-buttons/2player-selected.png", 293, 575);
    var player3Select = new Button("resources/player-select-buttons/3player-selected.png", 293, 575);
    var player4Select = new Button("resources/player-select-buttons/4player-selected.png", 293, 575);


    button1.position.x = 800;
    button1.position.y = 900;
    player1.position.x = 323;
    player1.position.y = 227;
    player2.position.x = 653;
    player2.position.y = 227;
    player3.position.x = 975;
    player3.position.y = 227;
    player4.position.x = 1300;
    player4.position.y = 227;

    player1Select.position.x = 323;
    player1Select.position.y = 227;
    player2Select.position.x = 653;
    player2Select.position.y = 227;
    player3Select.position.x = 975;
    player3Select.position.y = 227;
    player4Select.position.x = 1300;
    player4Select.position.y = 227;


    button1.on("mousedown", function(){
        stage.visible = false;
        new characterSelect()});
    player1.on("mousedown", function(){
        stage.addChild(player1Select)
        });
    player2.on("mousedown", function(){
        // stage.removeChildren();
        stage.addChild(player2Select)});
    player3.on("mousedown", function(){  app.stage.addChild(player3Select)});
    player4.on("mousedown", function(){  app.stage.addChild(player4Select)});
    player1Select.on("mousedown", function(){ console.log("hit")});


    app.stage = stage;

    var renderer = PIXI.autoDetectRenderer(
        1920,
        1080,
        {view:document.getElementById("game-canvas")}
    );
    //switch to png
    PIXI.loader
        .load(function(){
            var b = PIXI.Texture.fromImage("./resources/playerSelection-final.png");
            var tilingSprite = new PIXI.extras.TilingSprite(b, 1920, 1080);
            tilingSprite.alpha=0.5;
            stage.addChild(tilingSprite);
            stage.addChild(button1);
            stage.addChild(player2);
            stage.addChild(player1);
            stage.addChild(player3);
            stage.addChild(player4);
            renderer.render(stage);

        });




}

function Button(path, width, height) {
	var texture = PIXI.Texture.fromImage(path);
	PIXI.extras.TilingSprite.call(this, texture, width, height);

	this.tilePosition.x = 0;
	this.tilePosition.y = 0;
	this.interactive = true;
	this.buttonMode = true;

	this.viewportX = 0;
}

Button.prototype = Object.create(PIXI.extras.TilingSprite.prototype);



Button.prototype.setViewportX = function(newViewportX) {
	var distanceTravelled = newViewportX - this.viewportX;
	this.viewportX = newViewportX;
	this.tilePosition.x -= (distanceTravelled * button.DELTA_X);
};

 

[ivan.popelyshev]

You render only once, and its before the buttons are loaded. Loader complete event fired after all resources loaded, but fromImage doesnt work through loader.

[ivan.popelyshev]

Btw, all points, including "position" have "set" method.

[Haon1919]

Hey thanks @ivan.popelyshev !  Are you saying that I need to create my buttons inside of the loader and use a different method than fromImage?

[ivan.popelyshev]

Yeah, loader will fix that. However, you didnt start the renderloop  you need "render()" inside RAF. Its ok that buttons will be loaded after the fact. 

If you dont know what RAF is, I suggest you spend time on HTML5 canvas tutorials, and in pixi tutorial: https://github.com/kittykatattack/learningPixi

[Haon1919]

Hey sorry to bother you again @ivan.popelyshev but do I still need to use RAF even if the screen I am on has no animations? Its just a screen where the user clicks on the number of players that are playing then resets the stage to a new container for selecting their characters.

 

[ivan.popelyshev]

well its better if you use RAF just setup a boolean flag whether screen has changes.