Phaser 3 создать зону круга - PullRequest
Новая
       29

Phaser 3 создать зону круга

0 голосов
/ 02 июня 2019

Существует определенный класс "монстр". У него есть зона так называемой Агро. Который активируется, когда игрок входит в него. Но проблема в том, что я не могу, и я не знаю, как это сделать. Есть специалисты в этой области, которые могут подсказать вам, как это сделать правильно?

Код класса на TS: 

import Creature from "./Creature";

export default class Monster extends Creature {
    private readonly speed: number;
    private agroZone!: Phaser.GameObjects.Zone;
    private target!: Phaser.Physics.Arcade.Sprite

    constructor(scene: Phaser.Scene, x: number, y: number, texture: string, 
frames?: string | number) {
        super(scene, x, y, texture, frames);

        this.hp.max = 10;
        this.hp.current = 10;
        this.hpBarConfig = {
            x: 250,
            y: 10,
            color: 0x15fa03,
            fixed:true
        };

        this.updateHpBar();

        this.speed = 50;

        this.scene.events.on('update', this.updateScene);
    }

    private updateScene = () => {
      this.checkAgroZone(this.target);
    };

    public initAgroZone = (target: Phaser.Physics.Arcade.Sprite) =>{
        this.target = target;
        this.agroZone = this.scene.add.zone(this.body.x, this.body.y, 200, 200);
        this.agroZone.setOrigin(0.5, 0.5);
        this.scene.physics.world.enable(this.agroZone, 0);
        this.agroZone.body.moves = false;
        this.scene.physics.add.overlap(target, this.agroZone);

        this.agroZone.on("enterzone", () => {console.log("!!!!!!!!!!!");});
    };

    private checkAgroZone = (target) => {
        if(target){
            const touching = this.agroZone.body.touching;
            const wasTouching = this.agroZone.body.wasTouching;

            if (touching.none && !wasTouching.none) {
                this.agroZone.emit('leavezone');
            }
            else if (!touching.none && wasTouching.none) {
                this.agroZone.emit('enterzone');
            }

            this.agroZone.body.debugBodyColor = 
this.agroZone.body.touching.none ? 0x00ffff : 0xffff00;
        }
    };

    chaseTarget(obj: Phaser.Physics.Arcade.Sprite){
        this.scene.physics.moveToObject(this, obj, this.speed);
    }
}

Ответы [ 2 ]

0 голосов
/ 03 июня 2019

В Phaser 3 зона по умолчанию прямоугольник , а не круг, вы можете попробовать метод setCircleDropZone. 

public initAgroZone = (target: Phaser.Physics.Arcade.Sprite) =>{
        this.target = target;
        this.agroZone = this.scene.add.zone(this.body.x, this.body.y, 200, 200);
        this.agroZone.setOrigin(0.5, 0.5);
        // make it a circle
        this.agroZone.setCircleDropZone(100); // radius = 100
        //etc.

В качестве альтернативы, я думаю, вы могли бы использовать круглое тело , а затем обрабатывать перекрытие вместо столкновения. 

mysprite = this.physics.add.image(400, 300, 'myimage')
        .setBounce(1, 1)
        .setCollideWorldBounds(true)
        .setCircle(46);

this.physics.add.overlap(mysprite, mygroup);
0 голосов
/ 02 июня 2019

Если вы хотите нарисовать крикет, вот как это сделать 

var config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    loader: {
      baseURL: 'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
      crossOrigin: 'anonymous'
    },
    parent: 'phaser-example',
    physics: {
      default: 'arcade'
    },
    scene: {
      preload: preload,
      create: create,
      update:update
    }
};

var game = new Phaser.Game(config);

var player;
var cursors;

function preload()
{
  this.load.image('dude', 'sprites/phaser-dude.png')
}

function create ()
{

  var graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
  var circle = new Phaser.Geom.Circle(50, 50, 50);
  graphics.fillCircleShape(circle);
  this.physics.add.existing(graphics);

  player = this.physics.add.sprite(300, 100, 'dude');
  player.setCollideWorldBounds(true);

  cursors = this.input.keyboard.createCursorKeys();
  
  this.physics.add.overlap(player, graphics, inZone);
}

function inZone (){
  console.log("Player in the circle")
}

function update()
{
  if (cursors.left.isDown)
  {
      player.setVelocityX(-160);
  }
  else if (cursors.right.isDown)
  {
      player.setVelocityX(160);
  }
  else if (cursors.down.isDown)
  {
      player.setVelocityY(160);

  } 
  else if (cursors.up.isDown)
  {
      player.setVelocityY(-160);
  }
}
<script src="//cdn.jsdelivr.net/npm/phaser@3.17.0/dist/phaser.min.js"></script>
...