Jump to content

Random Sprite Image


Randore
 Share

Recommended Posts

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);


    }

 

Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

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);

 

Link to comment
Share on other sites

  • 2 weeks later...

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);
        }

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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