我正在创造一个无尽的跑步者 . 当按下左箭头键时,玩家向左移动,摄像机跟随他,当玩家移出右边的世界边界时,玩家下方的地砖被摧毁,并在他们进入世界边界之前重建在左边 . 这使他能够永远奔跑而不会失控 . 我的代码完美无缺,但有一个问题:我希望玩家在游戏右侧跑,而不是向左跑 . 请注意我不需要播放器能够双向移动 . 通过执行以下操作,我可以让相机跟随播放器向右而不是向左:我从中删除了负片
this.world.setBounds(-this.player.yChange, 0, ...);
所以它变成了
this.world.setBounds(this.player.yChange, 0, ...);
现在,当按下右箭头键时,摄像机在向右行驶时跟随玩家,但是地砖不会再生,并且他会跑出地面 . 所以基本上我需要扭转地面再生的方向,但我无法弄清楚如何去做 . 由于一切都在左边工作,我确信这是一些简单的设置,也许一些负面因素需要积极进行?我已经这几天了,无法弄明白 . 有人能看到明显的解决方案吗?我会非常感激的 .
我的代码如下,或者看到codepen链接:https://codepen.io/clownhead/pen/BqyqOm
var Jumper = function() {};
Jumper.Play = function() {};
Jumper.Play.prototype = {
preload: function() {
this.load.image( 'hero', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/dude.png' );
this.load.image( 'pixel', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/pixel_1.png' );
},
create: function() {
// background color
this.stage.backgroundColor = '#6bf';
// scaling
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.maxWidth = this.game.width;
this.scale.maxHeight = this.game.height;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.scale.setScreenSize( true );
// physics
this.physics.startSystem( Phaser.Physics.ARCADE );
// camera and platform tracking vars
this.cameraXMin = 99999;
this.platformXMin = 99999;
// create platforms
this.platformsCreate();
// create hero
this.heroCreate();
// cursor controls
this.cursor = this.input.keyboard.createCursorKeys();
},
update: function() {
// this is where the main magic happens
// the x offset and the width of the world are adjusted
// to match the furthest point the hero has reached
this.world.setBounds(-this.hero.xChange, 0, this.world.width + this.hero.xChange, this.game.height);
// the built in camera follow methods won't work for our needs, we create a custom one
this.cameraXMin = Math.min( this.cameraXMin, this.hero.x - this.game.width + 130 );
this.camera.x = this.cameraXMin;
// hero collisions and movement
this.physics.arcade.collide( this.hero, this.platforms );
this.heroMove();
// these are pooled so they are very performant
this.platforms.forEachAlive( function( elem ) {
this.platformXMin = Math.min( this.platformXMin, elem.x );
if( elem.x > this.camera.x + this.game.width ) {
elem.kill();
this.platformsCreateOne( this.platformXMin - 70, this.world.height - 50, 50 );
}
}, this );
},
shutdown: function() {
// reset everything, or the world will be messed up
this.world.setBounds( 0, 0, this.game.width, this.game.height );
this.cursor = null;
this.hero.destroy();
this.hero = null;
this.platforms.destroy();
this.platforms = null;
},
platformsCreate: function() {
// platform basic setup
this.platforms = this.add.group();
this.platforms.enableBody = true;
this.platforms.createMultiple( 10, 'pixel' );
// create a batch of platforms that start to move across the level
for( var i = 0; i < 9; i++ ) {
this.platformsCreateOne( this.world.width - 70 - 70 * i, this.world.height - 50, 50);
}
},
platformsCreateOne: function( x, y, width ) {
// this is a helper function since writing all of this out can get verbose elsewhere
var platform = this.platforms.getFirstDead();
platform.reset( x, y );
platform.scale.x = width;
platform.scale.y = 16;
platform.body.immovable = true;
return platform;
},
heroCreate: function() {
// basic hero setup
this.hero = game.add.sprite( this.world.centerX, this.world.height - 69, 'hero' );
this.hero.anchor.set( 0.5 );
// track where the hero started and how much the distance has changed from that point
this.hero.xOrig = this.hero.x;
this.hero.xChange = 0;
// hero collision setup
// disable all collisions except for down
this.physics.arcade.enable( this.hero );
this.hero.body.gravity.y = 500;
this.hero.body.checkCollision.up = false;
this.hero.body.checkCollision.left = false;
this.hero.body.checkCollision.right = false;
},
heroMove: function() {
// handle the left and right movement of the hero
if( this.cursor.left.isDown ) {
this.hero.body.velocity.x = -400;
} else if( this.cursor.right.isDown ) {
this.hero.body.velocity.x = 400;
} else {
this.hero.body.velocity.x = 0;
}
// handle hero jumping
if( this.cursor.up.isDown && this.hero.body.touching.down ) {
this.hero.body.velocity.y = -350;
}
// wrap world coordinated so that you can warp from top to bottom
this.world.wrap( this.hero, this.hero.width / 2, false );
// track the maximum amount that the hero has travelled
this.hero.xChange = Math.max( this.hero.xChange, Math.abs( this.hero.x - this.hero.xOrig ) );
}
}
var game = new Phaser.Game( 500, 300, Phaser.CANVAS, '' );
game.state.add( 'Play', Jumper.Play );
game.state.start( 'Play' );
1 回答
所以你的代码的相关位基本上是这样的:
如果我们看看代码是如何表现的,它会跟踪英雄的位置,然后考虑英雄的位置 .
只要英雄向左移动,这就行得很好,因为
x
越来越小 . 然而,一旦你开始向右移动,他们第一次开始(比如说0)将始终低于他们去的地方(这将越来越高) .所以,而不是跟踪
Math.min
,你需要Math.max
. 您需要更多地重构代码,但进行以下调整将使您走上正确的道路 .在
create
中,您必须设置更好的默认值:现在在你的
update
中,有它Math.max
:您的平台代码也需要更改,但上述内容应该可以让您了解需要更改的内容 .