Assign body to graphics?

[Hazukiy]

Hi, I'm currently trying to create random circles around my map what will spawn randomly, with random colors however I can't seem to apply a body to those circles?

 

My aim is to have it so that when the player overlaps that node, it will dispose (kill) that individual node? I'm relatively new to this game engine and HTML5 programming as a whole.

 

What I've got atm is this:

function generateNodes() {			for (var i = 0; i < maxNodes; i++)			{				var posX = Math.random() * (10, game.world.width - 50) + 10;				var posY = Math.random() * (10, game.world.height - 50) + 10;				nodes = game.add.graphics(0, 0);				nodes.beginFill(0x1E90FF, 1);				nodes.enableBody = true;				nodes.drawCircle(posX, posY, 20);			}		}

Then in update:

game.physics.arcade.collide(nodes);

[drhayes]

Welcome to HTML5 game development! Glad to have you aboard.

 

You probably want "Sprites" instead of "Images". Sprites have some of this stuff built-in and ready to use. "enableBody" isn't the right thing to use there, you probably want "game.physics.arcade.enableBody(nodes);" instead.

 

That "nodes" variable looks suspicious; did you mean to add a bunch of nodes to a group instead of always replacing it with the last circle that was created? Try this:

var nodes;function generateNodes() {  nodes = game.add.group('nodes');  nodes.enableBody = true;  for (var i = 0; i < maxNodes; i++) {    // generate position randomly...   var node = nodes.create(x, y, 'circle');    // do something with the node here if you want  }}

Then, in update:

// assuming you have a sprite named "player"...game.physics.arcade.collide(player, nodes, onPlayerCollide);// outside of update...function onPlayerCollide(player, node) {  // do something}

Truthfully, you probably want "overlap" more than "collide", but it works just about the same way. "collide" separates the sprites based on their physics models; overlap just tells you when the hit each other but doesn't separate them for you.

[Hazukiy]

Welcome to HTML5 game development! Glad to have you aboard.

 

You probably want "Sprites" instead of "Images". Sprites have some of this stuff built-in and ready to use. "enableBody" isn't the right thing to use there, you probably want "game.physics.arcade.enableBody(nodes);" instead.

 

That "nodes" variable looks suspicious; did you mean to add a bunch of nodes to a group instead of always replacing it with the last circle that was created? Try this:

var nodes;function generateNodes() {  nodes = game.add.group('nodes');  nodes.enableBody = true;  for (var i = 0; i < maxNodes; i++) {    // generate position randomly...   var node = nodes.create(x, y, 'circle');    // do something with the node here if you want  }}

Then, in update:

// assuming you have a sprite named "player"...game.physics.arcade.collide(player, nodes, onPlayerCollide);// outside of update...function onPlayerCollide(player, node) {  // do something}

Truthfully, you probably want "overlap" more than "collide", but it works just about the same way. "collide" separates the sprites based on their physics models; overlap just tells you when the hit each other but doesn't separate them for you.

 

That's brilliant and thanks for the welcome, however what I was going for is to create a bunch of random colored circles which also have a random size across the map, so you can see why I would have some trouble, especially with the coloring.

[drhayes]

I've had a lot of luck creating BitmapData objects and then using them as textures for Images and Sprites:

 

      var starsBmp = this.game.add.bitmapData(this.game.width, this.game.height);      ctx = starsBmp.ctx;      var starsImage = this.game.cache.getImage('stars');      for (var i = 0; i < 100; i++) {        var x = Math.round(Math.random() * this.game.width);        var y = Math.round(Math.random() * this.game.height);        var frame = Math.round(Math.random() * 3);        ctx.drawImage(starsImage, frame * 9, 0, 9, 9, x, y, 9, 9);      }      this.stars = this.game.add.image(0, 0, starsBmp);      this.stars.fixedToCamera = true;      this.game.world.sendToBack(this.stars);

Once this generates a star field I like I'll end up saving the image, but you get the idea.

[MichaelD]

You cal also add graphics objects as children into blank sprites (with the correct dimensions) and apply the physics to the sprites.

square = game.add.graphics(100, 100);square.beginFill(0xff0000, 1);square.drawRect(0, 0, 100, 100);var sp = game.add.sprite(0,0);sp.addChild(square);

Then you can enable physics etc...