Keeping sprites visible on screen

[JB Young]

Hello,

I'm new to game development and writing some a few simple games (I think... :-) to get used to Phaser.

I've been using tutorials and Google of course to try and figure out what's going wrong with a balloon-pop game.  What I want to get on the screen is 10 or 15 balloons every couple of seconds and I move them down the screen.  When they become invisible the sprites are killed off.

My create function:

create: function() {

     // Stuff ...

    // Every 2.5 sec...
    this.timer = game.time.events.loop(2500, this.addBalloons, this);

}

I have a group where I stick all the balloons that are spawned.  I still don't know why I'd do that, I'm in the early stages of game development...

So here is my addBalloons function, where I create them, stick them in the game, etc:

addBalloons: function() {

        // Add 15 balloons at x, y coords

        for (var i = 0; i < 15; i++) {
            
            // Within 0 or 1 to game.world.width for x, 0 or 1 to game.world.height for y

            // My guess is that game.world.{width,height} is different from the visible area on the screen

            var x = Math.floor(Math.random() * game.world.width) + 1;
            var y = Math.floor(Math.random() * game.world.height) + 1;

            this.addBalloon(x, y);
        }

        // Fix Balloon positions
        this.balloons.forEach( function(p) {
            // Something here with e.g. p.left < left_of_visible_screen?
        }, this);
}

This is the addBalloon function:

    addBalloon: function(x, y) {
    
        // Create a balloon at the position x and y
        
        // Note: need to know which colour balloon to add
        // balloon1 .. balloon4
        var balloonColour = Math.floor(Math.random() * 4) + 1;

        var balloon = game.add.sprite(x, y, 'balloon' + balloonColour);
        
        // Add input on sprite
        balloon.inputEnabled = true;
        balloon.events.onInputDown.add(this.pop, this);

        // Add the balloon to our previously created group
        this.balloons.add(balloon);

        // Enable physics on the balloon - do I need this for the game???
        game.physics.arcade.enable(balloon);

        // Add velocity to the balloon to make it move - floats down screen
        balloon.body.velocity.y = 150;

        // Automatically kill the balloon when it's no longer visible 
        balloon.checkWorldBounds = true;
        balloon.outOfBoundsKill = true;
    }

 

So, what I'm struggling with here is the visible screen size vs. game world size, and trying to keep the sprites within an area so they can all be tapped and popped.  I create the game with the width and height parameters as:

var game = new Phaser.Game(window.innerWidth * window.devicePixelRatio,
    window.innerHeight * window.devicePixelRatio, Phaser.CANVAS);

... so apparently what I get here is the window width and height with a multiplier when device manufacturers pack more pixels in that area.  These width and height parameters seem to be the world width and height.

With the x, y coordinates, would I take into account the sprite size and adjust the pseudo random number to be between the left of the screen plus width of the sprite (and perhaps DPI multiplier?) and the right of the screen minus width of sprite, for x, so it sits within the visible area?  Same reasoning for the y position?  The sprites are 64 x 64 pixels.  I thought of something like:

var x = Math.floor(Math.random() * game.world.width - 64) + 1;
var y = Math.floor(Math.random() * game.world.height - 64) + 1;

... but I can see I'm on the wrong track.  Using console.log("x = " + x + ", y = " + y);  the numbers are too big.  Most appear off the visible screen area.

Is there a way I can find the visible screen area?  Does it vary when the device is flipped around, looking at the screen "portrait" or "landscape"?

Thanks very much for any pointers! 

[samme]

Use game.world.bounds.width etc.

Or just use game.world.randomX and game.world.randomY.

[JB Young]

2 hours ago, samme said:

Use game.world.bounds.width etc.

Or just use game.world.randomX and game.world.randomY.

Hi Samme,

Thanks, but I still had the same problem with sprites not turning up (off the screen) and some sprites being cut in half on the edge of the screen, that sort of thing.

I came across what appears to be a good solution, for me at this time anyway.  I used this snippet of code after my Phaser code, before creating the game object:

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var gheight = elem.clientHeight;
var gwidth = elem.clientWidth;

// Initialize Phaser, make it scale nicely, we hope.
var game = new Phaser.Game(gwidth, gheight, Phaser.CANVAS);

Inside the game to get X and Y coordinates in the visible area on screen, in a pseudo random way:

// Generate 10 balloons, which are 64x64 sprites.

// x = within width minus sprite width, y = height / 2 (don't want them appearing too near the bottom of the screen)

// gheight and gwidth are globals set before the game is created, and before the functions are called

for (var i = 0; i < 10; i++) {

            var x = Math.floor(Math.random() * (gwidth - 64)) + 1;
            var y = Math.floor(Math.random() * (gheight / 2)) + 1;

            this.addBalloon(x, y);
 }

That seems to work great, except that I have too many balloons appearing on top of each other, overlapping.  A problem for later...

Thanks again