Add loaded images to a group and then randomize them

Phaser 3
1

Hi there I am a complete amateur working on a small project to learn Phaser. I followed a tutorial and managed to recreate a super basic game similar to Breakout and now I’m trying to see how I can change it. One thing I thought to do for fun is to make it so that multiple balls spawn at the beginning, and also make it so the sprites/textures/images (not sure correct term) of the bullets are randomized every time.

I was a bit ambitious when I started this side quest however and ended up getting over 30 textures to randomize as ball ‘types’ and now I’m not sure how to do it.

In my head the first challenge is that I need to pre-load 30+ textures and so far I’ve been doing a single “load” line per texture like this:

this.load.image('ball1', 'assets/skins/whiteball.png')
this.load.image('fireball', 'assets/skins/redball.png')
etc.

Doing 30 lines of this seems inefficient but perhaps its the best way as I didn’t find anything else I could do in my googling efforts.

After loading all the images I would then think I need to somehow group them for another function to pull from later on and randomize. But again after quite a bit of googling I am struggling for the answer to this. I don’t know if I need to somehow group the 30 ball textures during the load phase with something about the Loader, or the best method is to just do it manually such as:

balllist = this.physics.add.group()
balllist.add('ball1')
balllist.add('fireball')
etc.

Are there any tips on how to achieve the goal I have in mind? I feel that with all the examples and resources that I came across so in my searching that I can probably get something working if I do everything manually but at the same time I thought it would be a good opportunity to see how to solve these and then be able to use the solutions again in the future.

Thank you!

2

Hi Guite,

you can store all the texture you want to load in an array and then load it using the loop.
you can use the same key name as your image.

let imgArr = ["whiteBal", "redBall", "yellowBall", "goldenBall", "dragonBall"];
        for (let i = 0; i < imgArr.length; i++) {
            console.log(imgArr[i], "images/Header/" + imgArr[i] + ".png");
        }

Then you can set the random texture using Math.random

this.bullet = this.add.image(x, y, imgArr[Math.floor(Math.random()* imgArr.length)]);

you can also change the texture at run time using

this.bullet.setTexture('textureKey')

And the other approach is if you want the image key to be different than the image name and some other data let’s say audios to be loaded with bullets, you can use the JSON format.

{
    "bullletData": [
        {
            "id": "whiteBall",
            "url": "../packet/assets/ball1.png",
            "audio": ""
        },
        {
            "id": "redBall",
            "url": "../packet/assets/ball2.png",
            "audio": ""
        },
        {
            "id": "yellowBall",
            "url": "../packet/assets/ball3.png",
            "audio": ""
        },
        {
            "id": "orangeBall",
            "url": "../packet/assets/ball4.png",
            "audio": ""
        },
        {
            "id": "dragonBall",
            "url": "../packet/assets/ball5.png",
            "audio": ""
        },
        {
            "id": "greenBall",
            "url": "../packet/assets/ball6.png",
            "audio": ""
        },
        {
            "id": "blackBall",
            "url": "../packet/assets/ball7.png",
            "audio": ""
        },
        {
            "id": "brownBall",
            "url": "../packet/assets/ball8.png",
            "audio": ""
        },
        {
            "id": "blueBall",
            "url": "../packet/assets/ball9.png",
            "audio": ""
        }
    ]
}

bullletData.forEach((bullet) => {
            this.load.image(bullet.id, bullet.url)
            this.load.audio(bullet.id, bullet.audio)
        });
3

load.image() can take an array of { key, url } objects.

You should probably keep your own list of texture keys.

For the group you must use either

balllist.create(0, 0, 'ball1');

or

balllist.add(existingBall);

A group can do batch creation with createMultiple(). See the randomKey calls (commented out) in group/create multiple keys.

You may prefer to do this with a single texture (spritesheet) with multiple frames. In that case you would use randomFrame in createMultiple().

4

Thank you nish_mishra and samme!
I appreciate advice as I was able to play around with both. Admittedly I still don’t really know what is best or if I did anything in an efficient manner, but in the end I was able to turn nish_mishra’s suggestion into something that is working.