How to engine RPG game ? Some problems and questions

[grammka]

Hello! 1st of all Sry for my english 

Im a new to Phaser. 

 

I'd like to make RPG game. I read a lot of docs and started my project with small http://brainexplosion.ru/phasergame/ =) And here i got a lot of questions.. and I can't find answers =/ Where can I read about:

 

1) Tile Maps - how to manage layers and make objects with collisions (exm: stones)

2) Tiles overlays? I need to resolve this problem: I can't understand how to make such tile object =(

 

(* here must be image6 but i can't post it..) link: http://brainexplosion.ru/images/tiles-overlay

 

3) I used PathFinder plugin and move hero with tween. When hero is moving I can't stop him and change way until move is ended

4) How to get what way hero is moving to select right sprite ?

[grammka]

up?

[lewster32]

For your first two questions, this example shows how to implement the kind of thing you need: http://examples.phaser.io/_site/view_full.html?d=groups&f=depth+sort.js&t=depth%20sort

 

I don't believe Phaser's Tilemap implementation currently support the tilted Zelda-style projection you need (which is essentially an overlapping top-to-bottom sorted tilemap with offset collision) so the example above shows how you must cheat and create sprites manually to make it work. It will likely require a bit of effort to get it working with Tiled.

 

The pathfinder question; I'm not sure - you'll have to look in that plugin's documentation to see if it allows you to stop/cancel a move mid-way.

 

The last question should be straightforward if using an Arcade physics body, as you can just look at the body.facing property:

function update() {  // make sure our sprite is moving before determining which anim to play  if (sprite.body.speed > 0) {    // find which direction the sprite is moving and play that anim at 10fps on a loop    switch (sprite.body.facing) {      case Phaser.RIGHT:         sprite.animations.play("walk-right", 10, true);      break;      case Phaser.LEFT:         sprite.animations.play("walk-left", 10, true);      break;      case Phaser.UP:         sprite.animations.play("walk-up", 10, true);      break;      case Phaser.DOWN:         sprite.animations.play("walk-down", 10, true);      break;    }  }  // if the sprite is not moving, get the current anim (if any) and stop it  else {    if (sprite.animations.currentAnim && sprite.animations.currentAnim.isPlaying) {      sprite.animations.currentAnim.stop();    }  }}

[grammka]

Thank u a lot, lewster32

 

About pathfinder question.. sry I made mistake - the problem is with Phaser's Tween.. I trying same:

 

1) With PathFinder i find array of coordinates to move.

2) With these coo I can create chain tween like: 

 

I use loop "tween" function to get chained tween .to and then use start()

var Player = {tween: function (tween) {	var stepCoo = Player.vars.path[Player.vars.currPathStep++];	return stepCoo ? Player.methods.tween(tween.to({		x: stepCoo.x * 32,		y: stepCoo.y * 32	}, 100, Phaser.Easing.Linear.None)) : tween;},moveTo: function (path) {	Player.vars.currPathStep = 0;	Player.vars.path = path;	Player.vars.tween = Game.vars.game.add.tween(Player.vars.player);	Player.methods.tween(Player.vars.tween).start();}}

But when I request moveTo function again I need to stop tween and create new one.

I tried tween.stop() and TweenManager.remove(tween)

 

1) tween.stop just doesn't work =/

2) TweenManager delete tween but hero continues to move (like 1 - just doesn't work) =))

[grammka]

About body.facing

For using it i need init Physics, but is it good idea for just tweens? I move my hero with mouse clicking, I think i no need physics here =/ or I haven't choice ?   

 

It's rly boring =/ Each step I get problems.. If I use physics with Chaining tweens there isn't onChainComplete.. and I can set velocity to 0 when tween finished... Oh...

[marvster]

First of all, I would think of a 3D-World and slice them to layer. So end up with these layers, your's can differ, depends on your needs:

 

• terrain underground (grass, sand, all stuff on bottom):
  • This layer has no collision, as we schould be able to walk them all
• obstacle layer (small rocks, subparts of bigger objects [like tree chops])
  • This layer comes with collision, you can easily handle it with setCollisionByExclusion (e.g. this.setCollisionByExclusion([], true, this.layer.collision)
• action layer (triggers battle counter, or marks specific zones)
  • set actions to a specific topic with choosing a specific tile and go for setTileIndexCallback for custom behaviour (e.g. this.setTileIndexCallback([7410], this.inBattlezone, this, this.layer.battlezone); //if hit, battlezone is entered)
• object layer (to define stuff you like store in the tilemap, door trigger, chests, hidden items, npcs, enemies etc etc)
  • createFromObjects work wonder here (e.g. this.map.createFromObjects('objects', 1295, 'merchant', null, true, false, this.npcGroup, Npc, true)
•  sub-sky-layer (is layer is set above the player and contains the tree crowns, stone tops, house ceilings)
  • This layer has no collisions, if the player walk in this area he will be overlapped by this object, so can simulate depth
  • Additional you can create a handler for overlapping and set tranperancy up (untested yet), to show the user were the player is, while hidding
• sky-layer (clouds, fog, birds, effects, halftransparent treetops)
  • this layer has no collision and just add effects and depth as well.

I've used tiled (http://www.mapeditor.org/) for map creation, but pyxel edit (http://pyxeledit.com/) might work as well.

 

If using pathfinder, choose the obstacle layer as collision layer.

Sources:

http://docs.phaser.io/Phaser.Tilemap.html

http://docs.phaser.io/Phaser.TilemapLayer.html

http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=create+from+objects.js&t=create%20from%20objects

http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=map+collide.js&t=map%20collide

http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=tile+callbacks.js&t=tile%20callbacks

http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=tilemap+ray+cast.js&t=tilemap%20ray%20cast

[grammka]

First of all, I would think of a 3D-World and slice them to layer. So end up with these layers, your's can differ, depends on your needs:

....

 

Its ofc interesting but there are not answers on my questions =((

[marvster]

Its ofc interesting but there are not answers on my questions =((

 

The examples given will show you everything you need to correctly work with tilemap layers.

You may also cheat a bit while looking here: http://tannhauser-gate.net/projects/games/tilemap-test/

(http://tannhauser-gate.net/projects/games/tilemap-test/js/test.js bit outdated but will show you all you need at the beginning.)