character movement

[rpiller]

I can't seem to get my player character to move. It seems phaser gets updated so much and things change so much that any tutorial I find online is outdated. How am I supposed to setup an move a character in an rpg top down style game? Here is what I do:

 

var w = window.innerWidth * window.devicePixelRatio, h = window.innerHeight * window.devicePixelRatio;var game = new Phaser.Game(w, h, Phaser.Auto, 'game', { preload: preload, create: create, update: update });var map;var layer1;var layer2;var layer3;var cursors;var player;function preload() {    game.load.tilemap('map', 'content/maps/test.json', null, Phaser.Tilemap.TILED_JSON);    game.load.image('tiles', 'content/images/tileset.png', 32, 32);    game.load.image('player', 'content/images/phaser-dude.png')    game.load.spritesheet('player', 'content/images/test.png', 24, 32, 12);}function create() {    map = game.add.tilemap('map');    map.addTilesetImage('base', 'tiles');    layer1 = map.createLayer('Ground');    layer1.resizeWorld();    layer2 = map.createLayer('Object');    layer2.resizeWorld();    layer3 = map.createLayer('Object2');    layer3.resizeWorld();    player = game.add.sprite(150, 320, 'player');    player.animations.add('north.walk', [0, 1, 2], 6, true);    player.animations.add('east.walk', [3, 4, 5], 6, true);    player.animations.add('south.walk', [6, 7, 8], 6, true);    player.animations.add('west.walk', [9, 10, 11], 6, true);    cursors = game.input.keyboard.createCursorKeys();    game.camera.follow(player);}function update() {    //player.body.setZeroVelocity();    if (cursors.left.isDown) {        player.body.x -= 2;        player.animations.player('west.walk');    }    else if (cursors.right.isDown) {        player.body.x += 2;        player.animations.player('south.walk');    }    if (cursors.up.isDown) {        player.body.y -= 2;        player.animations.player('north.walk');    }    else if (cursors.down.isDown) {        player.body.y += 2;        player.animations.player('east.walk');    }}

 

[Raikoh]

You need to enable physic on your player sprite : game.physics.enable(player) and change to that : player.body.velocity.x = 2 

[Martiny]

If I'm not wrong, the "body" is part of Arcade Physics. So you'll need to start it in your create function and enable it to player.

function create() {game.physics.startSystem(Phaser.Physics.ARCADE);// the rest of your code..//player = game.add.sprite(150, 320, 'player');game.physics.enable(player, Phaser.Physics.ARCADE);//..}

Should work, I guess.

 

If you don't want to work with Arcade Physics, I think removing the "body" (just player.y += 2; for instance), should work. 

[rpiller]

OK, so setting the velocity gives more of an asteroid type of movement which doesn't really work for an RPG game. If I take away the body and just do player.x or y then is there a way for me to have the player collide with some tiles in the map?

[Raikoh]

Look at the examples you will see a lot of stuff that will help you very quickly. http://examples.phaser.io/

[rpiller]

Thanks Raikoh there are some good stuff there, but I'm sort of shocked there isn't any RPG top/down style example since they are so popular with 2D games. That sort of is the style I'm going for.

[Martiny]

Is this the movement you are trying to achieve?

 

https://googledrive.com/host/0Byme41zCWn4pdlJ6ekJjaExOTXc/

 

Here's the code:

var sprite1;var speed = 5; function preload() {    game.load.image('sprite1', 'assets/bird.png');  }function create() {	sprite1 = game.add.sprite(200, 200, 'sprite1');	game.physics.enable(sprite1, Phaser.Physics.ARCADE);}function update() {	if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {		sprite1.body.x -= speed;	}	if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {		sprite1.body.x += speed;	}	if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {		sprite1.body.y -= speed;	}	if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {		sprite1.body.y += speed;	}}

Without velocity.

[rich]

Thanks Raikoh there are some good stuff there, but I'm sort of shocked there isn't any RPG top/down style example since they are so popular with 2D games. That sort of is the style I'm going for.

 

Like this one?

 

http://examples.phaser.io/_site/view_full.html?d=groups&f=depth+sort.js&t=depth%20sort

[rpiller]

I don't see any tile collision in either of those examples. Normally the character wouldn't be able to walk on certain tiles. So the question would be how do you move the character with +/- x & y but still get tile collision on the tilemap.

 

The sorting seems interesting but I would almost expect to be able to place the characters into a certain layer so the sorting is handled that way. Normally you would have a background layer, object layer, & foreground layer. Trees are generally placed in 2 layers. The trunk of the tree in one layer that the player collides with, and the top part of the tree in the foreground layer so the characters are drawn behind them when they walk "behind" the tree.

[blues_driven]

You have to choose a layer to enable collision on like this:

map.setCollisionByExclusion([], true, layer1);

and then set your player sprite to collide with it in the update function like this:

game.physics.arcade.collide(player.sprite, layer1);