Matter Collision with Vertices

by ragesoft

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.54.0/phaser.min.js"></script>
<div id="phaser-example">

</div>

JavaScript

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1b1464',
    parent: 'phaser-example',
    physics: {
        default: 'matter',
        matter: {
            gravity: {
                x: 0,
                y: 0
            },
            debug: true,
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var txt;
var shapedata = [ {"x":179,"y":274}, {"x":135,"y":271}, {"x":108,"y":257}, {"x":88,"y":228}, {"x":19,"y":227}, {"x":19,"y":133}, {"x":90,"y":133}, {"x":90,"y":121}, {"x":41,"y":70}, {"x":109,"y":1}, {"x":179,"y":70}, {"x":222,"y":71}, {"x":244,"y":43}, {"x":309,"y":44}, {"x":320,"y":90}, {"x":322,"y":132}, {"x":354,"y":132}, {"x":392,"y":182}, {"x":355,"y":229}, {"x":322,"y":229}, {"x":318,"y":234}, {"x":317,"y":271}, {"x":312,"y":289}, {"x":311,"y":323}, {"x":228,"y":323} ];

var txtStyle = { font: '20px Corier', fill: '#ffff00'};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('ship', 'https://examples.phaser.io/assets/sprites/phaser-ship.png');
    this.load.image('church', 'https://i.ibb.co/hCL7BtH/church.png');
    //this.load.atlas('space', 'assets/tests/space/space.png', 'assets/tests/space/space.json');
}

function create ()
{
		//debugger;
    // some text
    this.add.text(10,20,"Moving: Arrows", txtStyle);

		let settings = {
    	vertices: shapedata,
      isStatic: 1,
    };
    this.church = this.matter.add.sprite(300, 300, 'church', null, settings);
    this.church.setOrigin( this.church.centerOfMass.x, this.church.centerOfMass.y );

		// the player
    this.player = this.matter.add.sprite(100,100, 'ship', null);
    this.player.setBody( {
            type: 'circle',
            radius: 10,
        },{
        	frictionAir: 0.2
        });
    this.player.setMass(100);
   	this.matter.world.setBounds();//0, 0, 800, 600);
    // give each wall a key to detect it in collision function
   ...