Sprite keeps spawning in same place

[laduree77]

var game = new Phaser.Game(400, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

//creating score value and onscreen text
var score = 0;
var scoreText;

//creating random spawning place for diamond
var diamondX = game.world.randomX();
var diamondY = game.world.randomY();

function preload() {
	// preload assets
	game.load.image('sky', 'assets/img/sky.png');
	game.load.image('ground', 'assets/img/platform.png');
	game.load.image('star','assets/img/star.png');
	game.load.image('diamond', 'assets/img/diamond.png');
	game.load.spritesheet('baddie', 'assets/img/dude.png', 32, 48);
}

function create() {
	// place your assets
	//enabling Arcade Physics system
	game.physics.startSystem(Phaser.Physics.ARCADE);

	//adding a background
	game.add.sprite(0, 0, 'sky');

	//a group containing the ground and platforms to jump on
	platforms = game.add.group();

	//enabling physics for any object in this group
	platforms.enableBody = true;

	//creating the ground
	var ground = platforms.create(0, game.world.height - 64, 'ground');

	//scaling to fit the width of the game
	ground.scale.setTo(2, 2);

	//stops ground from falling once player jumps on it
	ground.body.immovable = true;

	//create five ledges
	var ledge = platforms.create(-300, 400, 'ground');
	ledge.body.immovable = true;
	ledge = platforms.create(200, 400, 'ground');
	ledge.body.immovable = true;
	ledge = platforms.create(100, 300, 'ground');
	ledge.body.immovable = true;
	ledge = platforms.create(-200, 200, 'ground');
	ledge.body.immovable = true;
	ledge = platforms.create(300, 100, 'ground');
	ledge.body.immovable = true;

	//create the player and its settings
	player = game.add.sprite(32, game.world.height - 150, 'baddie');

	//enabling physics on player
	game.physics.arcade.enable(player);

	//giving player a slight bounce
	player.body.bounce.y = 0.2;
	player.body.gravity.y = 300;
	player.body.collideWorldBounds = true;

	//walking left and right animations
	player.animations.add('left', [0, 1, 2, 3], 10, true);
	player.animations.add('right', [5, 6, 7, 8], 10, true);

	//create group for stars
	stars = game.add.group();
	stars.enableBody = true;

	//creating 12 stars evenly spaced apart
	for (var i = 0; i < 12; i++) {
		//create a star inside of the 'stars' group each 33 px apart
		var star = stars.create(i * 33, 0, 'star');

		//giving it gravity
		star.body.gravity.y = 20;

		//giving each star a random bounce value
		star.body.bounce.y = 0.7 + Math.random() * 0.2;
	}

	//create diamond and apply physics
	diamond = game.add.sprite(diamondX, diamondY, 'diamond');
	game.physics.enable(diamond, Phaser.Physics.ARCADE);
	diamond.body.gravity.y = 25;	
	diamond.body.bounce.y = 0.7 + Math.random() * 0.2;

	//displays score text on screen
	scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#000'});
}

function update() {
	// run game loop
	//collide player and platforms
	var hitPlatform = game.physics.arcade.collide(player, platforms);

	//built in keyboard manager
	cursors = game.input.keyboard.createCursorKeys();

	//reset players velocity (movement)
	player.body.velocity.x = 0;

	//moving with arrow keys
	if (cursors.left.isDown) {
		//move to left
		player.body.velocity.x = -150;
		player.animations.play('left');
	}
	else if (cursors.right.isDown) {
		//move right
		player.body.velocity.x = 150;
		player.animations.play('right');
	}
	else {
		//stand still
		player.animations.stop();
		player.frame = 2;
	}

	//allow player to jump if touching ground
	if (cursors.up.isDown && player.body.touching.down && hitPlatform) {
		player.body.velocity.y = -350;
	}

	//checking for collision with stars and platforms
	game.physics.arcade.collide(stars, platforms);

	//checking if player overlaps with star
	game.physics.arcade.overlap(player, stars, collectStar, null, this);

	//checking for collision with diamond and platforms
	game.physics.arcade.collide(diamond, platforms);	

	//checking if player overlaps with diamond
	game.physics.arcade.overlap(player, diamond, collectDiamond, null, this);

}

function collectStar (player,star) {
	//function for updating score for collecting stars
	//removes star from screen
	star.kill();

	//add and update score for stars
	score += 10;
	scoreText.text = 'Score: ' + score;
}

function collectDiamond (player, diamond) {
	//function for updating score for collecting diamond
	//remove diamond from screen
	diamond.kill();

	//add and update score for diamond
	score += 25;
	scoreText.text = 'Score: ' + score;
}

It's my first time trying out Phaser and what I want to do is have the 'diamond' spawn at random locations on the screen. I've managed to get the diamond to spawn on screen, but it doesn't seem to be spawning in different locations when I reload the game each time. I'm assuming that I'd need to put something in the update function, but I need a little help with that part!

[Mickety]

There are two explanations:

In Phaser CE v2.10.3 (which I use) game.world.randomX is not a function, so you don't call it like

var diamondX = game.world.randomX();

you assign it like this:

var diamondX = game.world.randomX;

 

Second explanation: you need salt (or seed)

Basically if you call a random number generator of anykind at first cycle of a program it will always generate the same, seemingly random number. So, a truly random number is needed to generate a random number (if that makes sense) which is usualy called "seed" or "salt" for hashes. Easiest way to do that would be to use a timestamp function, which shows an ammount of seconds passed since 1st of january 1970 and mix it with random number generator function one would use. In your case it would require 'hacking" a method "randomX' (which is not even a method as far as I understand)

 

 

[laduree77]

@Mickety Ahh I see, sorry, I'm very new to Phaser, but would there be a better or simpler way to generate the diamond randomly on screen? (without messing with a timestamp function and all that fun stuff; hopefully something easy for a beginner to understand) Thanks for your help again!

[Mickety]

@laduree77

So I assume

var diamondX = game.world.randomX;

didn't work?

If so, let me think about how to approach this, there's always an easy way in these situations

[laduree77]

@Mickety Sadly nope  It still keeps spawning in the upper lefthand corner of the screen, but this error message did come up: 

Uncaught TypeError: Cannot read property 'randomX' of null

[Mickety]

@laduree77

It looks like it gives you a 0,0 coordinates.

This might be because when you call game.world outside "create" function - "WORLD" doesn't exist yet. Try putting it last (and remember to move diamond creation code after that as well

Like this:

var diamondX = game.world.randomX;
var diamondY = game.world.randomY;
diamond = game.add.sprite(diamondX, diamondY, 'diamond');
game.physics.enable(diamond, Phaser.Physics.ARCADE);
diamond.body.gravity.y = 25;
diamond.body.bounce.y = 0.7 + Math.random() * 0.2;

 

RIGHT AFTER

scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#000'});

But in the scope of "create"

[laduree77]

@Mickety That fixed it! Thank you so so much, I've been struggling with this for quite a while haha  

[Mickety]

@laduree77

My pleasure. I haven't felt so happy in a while.

If you'll find this interesting - this is not a Phaser issue strictly saying. Most languages execute from top to bottom, yes, that's programming 101, but scopes and fields of visibility can become dizzying.

In this instance, for example, one would have to just ASSUME that "world" doesn't exist untill "create" function has been called, since it is where programmer would set up level, even though intuitively we already created a game instance outside of it. Well that, or just read a lot of docs without assuming anything Hope that makes sense

[laduree77]

@Mickety Awesome!! This is super helpful, thanks for the extra explanation!