Phaser 3：绘制实时曲线

Question

我正在关注 post:

https://cedarcantab.wixsite.com/website-1/post/phaser-coding-tips1-2-revisited-part-1-creating-a-game-like-tanks---worms

我正在尝试绘制一条实时曲线，以确定子弹在射击前与地面重叠的位置。有人对这种情况有什么想法吗？谢谢。

Answer 1

无需太多计算的解决方案可能是，使用虚拟对象作为 “示踪子弹”。
换句话说，制作一个不与任何东西碰撞的物理对象，“射击”那个对象，并在特定的间隔内绘制一个小的“标记” ，这将追踪所采用的弧线/路径。

这是一个小演示，展示了这个想法：

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create,
        update
    },
    physics:{
      default:'arcade', 
      arcade:{
        gravity:{y: 260},
      }},
    banner: false
}; 

let player;
let firstMarker;
let pathItems;
let lastMarker;

function create () {
    this.add.text(10, 10, 'move mouse for targeting\nhold still to see the full path.', {color:'#ffffff'})
    let floor = this.add.rectangle(0 , 183, 535, 20, 0x00ff00).setOrigin(0, .5);
    pathItems = this.add.group();
    player = this.add.rectangle(30 , 158, 30, 30, 0x1AA840);
    player.setDepth(2)
    
    firstMarker = this.add.arc(-10, 0, 5, 0, 2 * Math.PI, true, 0xffffff);
    
    this.physics.add.existing(firstMarker);
    
    this.input.on('pointermove', function (pointer) {
        startMarkerTrail(this, player, pointer)
    },this);
}

function update(time, delta){

    let {x, y} = firstMarker
    if(!lastMarker || Phaser.Math.Distance.Between(x, y, lastMarker.x, lastMarker.y ) > 20){
      let marker = this.add.arc(x, y, 3, 0, 2 * Math.PI, true, 0xcdcdcd);
      pathItems.add(marker);
      lastMarker = {x, y};
  }
}

function startMarkerTrail(sccene, player, pointer){
    let speed = 300;
    let angle = Phaser.Math.Angle.BetweenPoints(player, pointer);
  
    pathItems.clear(true);
    firstMarker.setPosition( player.x, player.y );
    sccene.physics.velocityFromRotation(angle, speed, firstMarker.body.velocity);
   
}

new Phaser.Game(config);

* {padding:0;margin:0;}

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

如果你需要一条线可以让距离变小and/or让标记点的尺寸变小

Phaser 3：绘制实时曲线

Phaser 3: Draw a live curve

curve

typescript

phaser-framework