Jump to content

Assign body to graphics?


Hazukiy
 Share

Recommended Posts

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);
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...