sprites Random Sprite Image

[Randore]

Hello all,

I am new here and playing with Pixi.js using latest build but learning with old tutorials and examples.

My question is I am working on a Board Game: Jackpot game

Problem: I want to generate 3 Random Sprite images on canvas but how to do that. I tried but it's not working, how to pass random fruit image into sprite and display it on canvas.

 

Thanks in Advance.

 

PIXI.loader
        .add("images/48.png", "images/49.png", "images/50.png", "images/52.png")
        .load(setup);

    function setup() {
        var randomFruits = ["images/48.png", "images/49.png", "images/50.png", "images/52.png"];

        function getRandomFruit(fruits) {
            var num = Math.floor(Math.random() * fruits.length);
            if (num === 0) {
                num = 1;
            }
            var fruit = fruits[num];
            console.log(fruit);
        }

        getRandomFruit(randomFruits);

        let orange = new PIXI.Sprite.fromImage(fruit);
        orange.scale.set(0.6);
        orange.x = (app.renderer.width / 2) + 230;
        orange.y = (app.renderer.height - container.height) / 2 + 20;

        app.stage.addChild(orange);


    }

 

[ivan.popelyshev]

PIXI.loader
        .add("images/48.png")
        .add("images/49.png")

 

[ivan.popelyshev]

Also, please don't use "container.height". It is not a variable, its calculated based on positions of children.

Either use constant, either take getBounds() and then look in its width/height.

Also, "renderer.width" will be deprecated, use "renderer.screen.width" or "app.screen.width", but that's not that important

[Randore]

48 minutes ago, ivan.popelyshev said:

Also, please don't use "container.height". It is not a variable, its calculated based on positions of children.

Either use constant, either take getBounds() and then look in its width/height.

Also, "renderer.width" will be deprecated, use "renderer.screen.width" or "app.screen.width", but that's not that important

 

 

Hi, thanks for replying

can you please look into this code and check the function to create 3 fruit images on canvas. what I am doing wrong here.

        //Make 3 fruits
        let numberOfFruits = 3,
            spacing = 48,
            xOffset = 150;

        for (let i=0; i<numberOfFruits; i++) {
            //var num = Math.floor(Math.random() * id.length);

            //Make a fruit
            let fruit = new Sprite(id[Math.floor(Math.random() * id.length)]);
            console.log(fruit);
            let x = spacing * i + xOffset;

            let y = randomInt(0, game.stage.height - fruit.height);

            fruit.x = x;
            fruit.y = y;

            game.stage.addChild(fruit);
        }

        //var randomNumber = randomInt(1, 10);

        function randomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        //Render the stage
        game.render(stage);

 

[Randore]

I want to generate 3 random fruit images from list of images.

[ivan.popelyshev]

You have to make an array of strings like you did before
 

let arr = Object.keys(id)

...

let randomIndex = Math.floor(Math.random() * arr.length);
let fruit = new Sprite(id[arr[randomIndex]])

 

[Randore]

7 minutes ago, ivan.popelyshev said:

You have to make an array of strings like you did before
 

let arr = Object.keys(id)

...

let randomIndex = Math.floor(Math.random() * arr.length);
let fruit = new Sprite(id[arr[randomIndex]])

 

 

Thanks a lot @ivan.popelyshev , you are the man with the power. Thank you Mr.DynoMan

[Randore]

Hi, Please check the following code, the diceGrid is rendering fine outside loop but when I move the diceGrid inside for loop it's not displayed on the stage.

 

let gridBoxes = 3;
        for (let i = 0; i < gridBoxes.length; i++) {
            diceGrid = new Sprite(id["grid"]);
            diceGrid.width = 320;
            diceGrid.height = 320;
            x = (game.renderer.width - diceGrid.width);
            diceGrid.x = x;
            game.stage.addChild(diceGrid);
        }

 

[ivan.popelyshev]

Width and height of container is not what you think. Its hard to explain every time , those implementation details, but "diceGrid.width" is always texture width, not what you assigned to it. Use getBounds() to get actual dimensions.

[Randore]

sorry, I was following kitty kat's git guide and trying to apply the latest released version syntax to what I am learning. 

Can you please suggest the best way to learn and keep up with latest releases of PIXI, is release docs API is update to date to follow?.

Thanks for your time.

[ivan.popelyshev]

Oh, actually its correct, I just always have problems with those properties. Now I don't know whats wrong with your code, except may be that fact that you dont use "i" at all.

[Taz]

14 hours ago, Randore said:

Hi, Please check the following code, the diceGrid is rendering fine outside loop but when I move the diceGrid inside for loop it's not displayed on the stage.

let gridBoxes = 3;
        for (let i = 0; i < gridBoxes.length; i++) {
            diceGrid = new Sprite(id["grid"]);
            diceGrid.width = 320;
            diceGrid.height = 320;
            x = (game.renderer.width - diceGrid.width);
            diceGrid.x = x;
            game.stage.addChild(diceGrid);
        }

Hi Randore. A few things jump out:

1. "gridBoxes.length" is undefined. "0 < undefined" evaluates to false. So the loop body is never executed. Probably you want "i < gridBoxes", which will run through the loop body 3 times.

2. All three sprites will be added to the same location. Your earlier code shows how to space them out: "x = i * spacing + xOffset".

3. It's often helpful to make 1 small change at a time, then make sure it still works and study what the one change did -and how- before moving on to the next small change.

[Randore]

24 minutes ago, Taz said:

Hi Randore. A few things jump out:

1. "gridBoxes.length" is undefined. "0 < undefined" evaluates to false. So the loop body is never executed. Probably you want "i < gridBoxes", which will run through the loop body 3 times.

2. All three sprites will be added to the same location. Your earlier code shows how to space them out: "x = i * spacing + xOffset".

3. It's often helpful to make 1 small change at a time, then make sure it still works and study what the one change did -and how- before moving on to the next small change.

 

Hey,  I have resolved the issues long back anyhow thanks for your suggestion.