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

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.

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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.