Sign in to follow this  
pebb

How to make a bunch of clickable polygons for geography game

Recommended Posts

Hi. I would like to make a geography quiz game. The player should be able to click on a map to identify a certain state in the U.S.

I read about using making polygon shapes for sprites (using PhysicsEditor), but how do I make mutiple polygons that are super-imposed on a map (image) which will trigger

a callback that can I customize? Any free tools and/or tutorials that I use to accomplish this? Thanks.

Share this post


Link to post
Share on other sites

Here is an example. It's not exactly what you need I guess, but maybe a good start. It shows how you can create overlap callbacks without collisions with P2. You can drag the white box with the mouse to overlap with another shape and when they get in contact the color changes.

The "magic" you still have to do is calculating the shape overlap to see if it fits (if you care about shape comparison at all), I haven't seen any methods that can do that for you and its probably pretty complicated with polygons :-(

var game = new Phaser.Game(800, 300, Phaser.CANVAS, 'body', {preload: preload, create: create, update: update, render: render});
var sprite, sprite2, sprite3, box;
var collisionGroups = {};

function preload(){
  //Define some shapes (polygons)
  game.load.physics('myShapes', null, {
    "testShape": [
      { "shape": [ 0,0 , 40,0 , 40,40 , 0,40 ] }
    ],
    "testShape2": [
      { "shape": [ 0,0 , 40,0 , 40,40 , 20,60 , 0,40 ] }
    ]
  });
}

function create(){
  
  //Get the physics loaded
  game.physics.startSystem(Phaser.Physics.P2JS);
  game.physics.p2.setImpactEvents(true);      //required for collision callbacks
      
  //Create some test sprites
  sprite = game.add.sprite(game.world.centerX, game.world.centerY, '');
  game.physics.p2.enable(sprite, true);
  sprite.body.clearShapes();
  sprite.body.loadPolygon("myShapes", "testShape");
  sprite.inputEnabled = true;
  sprite.input.enableDrag();
  sprite.body.data.shapes[0].sensor = true;  //THIS IS THE MAGIC that detects contact without collision
  //add some graphics
  box = new Phaser.Graphics(game, 4, 4);
  box.lineStyle(0, 0x0000FF);
  box.beginFill(0xFFFFFF);
  box.drawRect(-20, -20, 40, 40);
  box.endFill();
  sprite.addChild(box);
  
  sprite2 = game.add.sprite(game.world.centerX + 100, game.world.centerY, '');
  game.physics.p2.enable(sprite2, true);
  sprite2.body.clearShapes();
  sprite2.body.loadPolygon("myShapes", "testShape");
  sprite2.body.static = true;                //This prevents body from moving
  
  sprite3 = game.add.sprite(game.world.centerX - 100, game.world.centerY, '');
  game.physics.p2.enable(sprite3, true);
  sprite3.body.clearShapes();
  sprite3.body.loadPolygon("myShapes", "testShape2");
  sprite3.body.static = true;
  
  //Create collision groups
  collisionGroups['player'] = game.physics.p2.createCollisionGroup();
  sprite.body.setCollisionGroup(collisionGroups['player']);
  
  collisionGroups['env1'] = game.physics.p2.createCollisionGroup();
  sprite2.body.setCollisionGroup(collisionGroups['env1']);
  
  collisionGroups['env2'] = game.physics.p2.createCollisionGroup();
  sprite3.body.setCollisionGroup(collisionGroups['env2']);
  
  game.physics.p2.updateBoundsCollisionGroup();
  
  //Set up the collisions
  //sprite.body.collides([collisionGroups['env1']]);   //ONLY FIRST
  sprite.body.collides([collisionGroups['env1'], collisionGroups['env2']]);   //BOTH
  sprite2.body.collides(collisionGroups['player']);
  sprite3.body.collides(collisionGroups['player']);
  
  //Correct Contact event
  sprite2.body.onBeginContact.add(function(p2BodyA, p2BodyB, shapeA, shapeB, equation){
    console.log('onBeginContact');
    box.tint = 0x00ff00;
  }, this);
  //Wrong contact event
  sprite3.body.onBeginContact.add(function(p2BodyA, p2BodyB, shapeA, shapeB, equation){
    console.log('onBeginContact');
    box.tint = 0xff0000;
  }, this);
}

function update(){
  if(sprite.input.isDragged){      
    sprite.body.setZeroForce();
    sprite.body.setZeroVelocity();
    sprite.body.x = game.input.activePointer.worldX;	sprite.body.y = game.input.activePointer.worldY;
  }
}

function render(){
  var debug = game.debug;
  debug.phaser(10, 580);
}

Codepen:

Codepen example

Share this post


Link to post
Share on other sites

Oh I just realized that you only want to click the shape :lol:

Well you could place the box (sprite 1) on mouse click, that is probably the easiest. Unfortunately you cannot use "inputEnabled = true;" here because I think it ignores the shape.

Share this post


Link to post
Share on other sites

Thanks, flow. I think I will end up using PhysicsEditor along with this code:

function create() {


   var graphics = game.add.graphics(0, 0);
   graphics.beginFill(0xFFFFFF);
   graphics.name='illinois';
   graphics.drawPolygon([ 0+20,0 , 40+20,0 , 40+20,40 , 0+20,40 ]);
   graphics2.alpha=10; 
   graphics.inputEnabled = true;
   graphics.input.useHandCursor = true;
   graphics.events.onInputUp.add(onClick, this);
   

}

function onClick(target, pointer) {
    console.log(target.name);
}

 

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.

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.