Sign in to follow this  

Randomly Generated Background

Recommended Posts



Does anyone know how I might be able to load a different background each time a game is started?


I have three different preloaded backgrounds and would like the game to select a random one each time the game begins.


I'm a complete newbie to Phaser and any help/tutorials would be hugely appreciated!


Can link code if needed.




Share this post

Link to post
Share on other sites

I usually make randomized generation like this:


// this rolls either value 1, 2 or 3

var roll = game.rnd.integerInRange(1, 3);


// make separate if-statements for each value of roll

// (i dont know what kind of background item youre using, i use images like this, but add them to display groups)

if (roll === 1) {backgroundimage =  game.add.image(0, 0, 'image1');};

if (roll === 2) {backgroundimage =  game.add.image(0, 0, 'image2');};

if (roll === 3) {backgroundimage =  game.add.image(0, 0, 'image3');};



// Its basically just rolling a dice and telling the code what to do depending on the number it rolls

Share this post

Link to post
Share on other sites

I'd do something similar but I'd use an array of images to keep things DRY-er

var images = [  'foo.png',  'baz.png',  'bar.jpg']backgroundImage = game.add.image( 0, 0 images[ game.rnd.integerInRange( 0, images.length - 1 ) ] )

This also makes it a little easier to dynamically load the images array should that ever be necessary.

Share this post

Link to post
Share on other sites

I like your answer, mattstyles. I've been a bit annoyed with that repetition. Might try your way next time.

Although I currently often use this, since it allows me to adjust rolls more accurately.

chanceRoll(4) means it has 4/100 chance of being true.


        var object = null;
        while (object === null) 
            if (game.math.chanceRoll(1)) {object = 'star1'};
            if (game.math.chanceRoll(4)) {object = 'star2'};
            if (game.math.chanceRoll(1)) {object = 'nebula1'};
            if (game.math.chanceRoll(5)) {object = 'anomaly1'};

Share this post

Link to post
Share on other sites

Yeah, but, in your example you don't have a 1/25 chance of hitting `star2` because even if that succeeds you still have a chance of hitting either `nebula1` or `anomaly1`, unless I'm misreading it? (I just read the phaser docs, I dont use phaser currently).


Infact, I'm not exactly sure what happens practically with that code snippet. I'd guess its fairly random with a skew towards `anomaly1` and a slight skew favouring `star2` over the others, which I guess is what you're after, but why make that many chance rolls?


Why not roll once and use fuzzy logic to get your result:

function fuzzy( roll ) {  if ( roll >= 0 && roll < 4 ) {    return 'star1'  }  if ( roll >= 4 && roll < 9 ) {    return 'anomaly1'  }  // etc etc, perhaps with some better smarts to create the 'chance' table}object = fuzzy( random( 0, 11 ) ) // I just counted up all your chances 

That is hacked together, there's plenty of tidying and optimising that can be done.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.