简体   繁体   English

移相器JS走上瓷砖台阶

[英]Phaser JS walk up tile based stairs

I'm creating a small 2d-minecraft clone, in Phaser js, on my own as a learning experience. 我将自己作为学习经验,在Phaser js中创建一个小型的2D-minecraft克隆。 So far I have gotten player movement and random level seeds to work ok. 到目前为止,我已经获得了玩家的移动和随机的种子来正常工作。

I am using Phasers P2JS engine and have sprites that are box based. 我正在使用Phasers P2JS引擎,并且具有基于盒子的精灵。 What I'm struggling with now Is I want the player to be able to walk unhindered up small elevations, (1-tile high) but I don't have any good idea of how I should Implement this. 我现在正在苦苦挣扎的是,我希望玩家能够不受阻碍地走上较小的海拔高度(1瓦高),但是我对如何实现这一点并不了解。

I have tried changing the bounding box of the player so that it had a slope at the bottom but this gets me in to a bunch of trouble with wall climbing. 我尝试过更改播放器的边界框,使其底部有一个坡度,但这使我在爬墙时遇到了很多麻烦。 I want a way to do this where it gets as seamless as possible. 我想要一种可以做到尽可能无缝的方法。 Preferably the player speed is not altered much by climbing the steps. 优选地,通过爬上台阶,玩家速度不会改变太多。

I am concidering writing some kind of collision detection function to handle this but I am uncertain if this is the best way to do it. 我正在考虑编写某种碰撞检测函数来处理此问题,但是我不确定这是否是实现此目标的最佳方法。

Thanks for your help. 谢谢你的帮助。

Below is my code and an image that shows the kind of step I want to beable to walk up. 以下是我的代码和一张图像,该图像显示了我希望能够走的那种步骤。 Its the first elevation to the left in the image. 它是图像左侧的第一个标高。

var pablo = require('../generators/pablo.js');
var destiny = {};
var socket;
var player;
var jumpButton;
var levelCollisionGroup;
var playerCollisionGroup;


destiny.create = function () {
  console.info("game loaded");

  // World
  this.game.world.setBounds(0, 0, 4000, 1000);
  this.game.physics.startSystem(Phaser.Physics.P2JS);
  this.game.physics.p2.gravity.y = 600;
  this.game.physics.p2.applySpringForces= false;
  this.game.physics.p2.applyDamping= false;
  this.game.physics.p2.restitution = 0;
  this.game.physics.p2.friction = 0.01;

  // Player
  playerCollisionGroup = this.game.physics.p2.createCollisionGroup();
  player = this.game.add.sprite(this.game.world.centerX, 800, 'player');
  this.game.physics.p2.enable(player,true);
  player.body.fixedRotation = true;
  player.body.setCollisionGroup(playerCollisionGroup);
  player.body.mass = 2;

  // Camera
  this.game.camera.follow(player);
  this.game.camera.deadzone = new Phaser.Rectangle(200, 0, 400, 100);

  // Controls
  jumpButton = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
  leftButton = this.game.input.keyboard.addKey(Phaser.Keyboard.A);
  rightButton = this.game.input.keyboard.addKey(Phaser.Keyboard.D);

  // Level
  levelCollisionGroup = this.game.physics.p2.createCollisionGroup();
  this.game.physics.p2.updateBoundsCollisionGroup();
  for (i = 0; i < 280; i = i + 1) {
    var block;
    var height = pablo.getHeight(i);
    for(j = 0; j < height; j = j + 1){
      if(j === height-1){
        block = this.game.add.sprite(15*i, 993-15*j, 'grass');
      } else {
        block = this.game.add.sprite(15*i, 993-15*j, 'dirt');
      }
      block.width = 15;
      block.height = 15;
      this.game.physics.p2.enable(block);
      block.body.static=true;
      block.body.immovable = true;
      block.body.collides([levelCollisionGroup, playerCollisionGroup]);
      block.body.setCollisionGroup(levelCollisionGroup);
      if(j == height){

      }
    }
  }
  player.body.collides(levelCollisionGroup);
  this.game.stage.backgroundColor = "#5599CC";

};

destiny.update = function() {

    player.body.velocity.x=0;

    if (leftButton.isDown) {
        player.body.velocity.x = -200;
    } else if (rightButton.isDown) {
        player.body.velocity.x = 200;
    }

    if (jumpButton.isDown && this.checkIfCanJump()) {
      player.body.velocity.y = -400;
    }
};

destiny.render = function() {
  this.game.debug.cameraInfo(this.game.camera, 32, 32);
  this.game.debug.spriteCoords(player, 32, 550);
};

destiny.checkIfCanJump = function() {

    var result = false;

    for (var i=0; i < this.game.physics.p2.world.narrowphase.contactEquations.length; i++) {
        var c = this.game.physics.p2.world.narrowphase.contactEquations[i];
        if (c.bodyA === player.body.data || c.bodyB === player.body.data) {
            var d = p2.vec2.dot(c.normalA, p2.vec2.fromValues(0, 1));

            if (c.bodyA === player.body.data) {
                d *= -1;
            }

            if (d > 0.5) {
                result = true;
            }
        }
    }
    return result;
};

module.exports = destiny;

在此处输入图片说明

===================== Edit ===================== =====================编辑=====================

I have now tried creating slopes of the edge pieces when generating the world. 我现在尝试在生成世界时创建边缘片段的坡度。 But I realized that this makes me have to regenerate the world when I later add the feature for hacking away blocks. 但是我意识到,这使我不得不在以后添加用于破解数据块的功能时重新生成世界。 Thus this is not the solution. 因此,这不是解决方案。 I think I will need to do some collision detection and move the player up when I hit an edge. 我认为我需要进行一些碰撞检测,并在碰到边缘时向上移动播放器。 But I'm not quite sure how to do this in phaser. 但是我不太确定如何在移相器中执行此操作。 Any help is still appreciated. 任何帮助仍然表示赞赏。

!!! !!! Here is an image of what not to do !!! 这是什么都不做的图片!

在此处输入图片说明

Emanuele Feronato has a post on replicating the game Magick in Phaser . Emanuele Feronato 在复制移相器中的Magick游戏中张贴了一个帖子

There he covers the case of a block colliding with a barrier/wall, with the ability of the block to climb one level up. 他在那里报道了一个木块与障碍物/墙壁碰撞的情况,该木块具有向上爬升的能力。

You can check the tutorial, but what he appears to be doing is checking to see if the diagonal tile is empty (in other words, is it just a 'step' up), and if it is, running a 'jump' function, which looks more like a climb. 您可以查看本教程,但他似乎正在做的工作是检查对角线是否为空(换句话说,是否只是“上一步”),如果是,则运行“跳转”功能,看起来更像是攀登。

Depending upon how you want your character to step, you could potentially look at both the next tile (on the x-axis) as well as the one after it to check for the height. 根据您希望角色如何走动,您可能会同时查看下一个图块(在x轴上)以及在它之后的下一个图块以检查高度。

So for example, if moving right and the next tile is flat, but the second tile has a step, you might start moving your character up on the y-axis. 因此,例如,如果向右移动并且下一个图块是平坦的,但是第二个图块有一个台阶,则您可能会开始在y轴上向上移动角色。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM