How to make a bunch of clickable polygons for geography game

[pebb]

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.

[flow]

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

[flow]

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

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.

[pebb]

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);
}

 

[flow]

beauty is in simplicity