Anyone working on a point and click adventure?

[spinnerbox]

Coding isn't that hard. We just need to analyze the requirements of such plugin and make it plugable into Phaser. (I would also develop code tests while we build it and use Jenkins as CI tool)

How about graphics, who is gonna draw graphics for testing?

Well custom made sounds/music would come good too

Yes yes there are ton of free music/graphics assets  on the Netz  but I am sure they will need to be edited in order to be useful  

[1-800-STAR-WARS]

I'm still interested! Got too busy with work and never got round to it before, but I'd be eager to collaborate on something like this.

[1-800-STAR-WARS]

Double post, I apologise, but I started a document to try and plan this thing out and get it started as I think it could be a great project.

https://docs.google.com/document/d/1XKQp-XMvBXb1GgigIqhmJe974W_EEEs6XRF_NqFaLqI/edit?usp=sharing

I've made it publically editable so feel free to add any ideas you have and we can get a github repo up soon if people are interested.

Edit: Git repo here: https://github.com/lewispollard/phaser-pnc

If you wanna get involved PM me here or on github and I'll add you as a collaborator!

[1-800-STAR-WARS]

OK, I did a bit of hacking over the weekend and started making a pathfinding/navigation system for point n click games. It's by no means a final or even necessarily good approach but it's what I got to after a day or so.

http://lewispollard.github.io/phaser-pnc/demo/

You can see faintly on the floor a navigation mesh. You can modify this mesh by pressing D. Clicking will add a point, and pressing Enter will create a polygon out of those points and calculate where the centre point of the poly is. You can press Z to undo the last action (including removing already existing polys). Changing the navmesh will output the JSON for it in the textbox on the right.

If a point in the poly overlaps another poly, it will create a path between the two centre points. This creates the graph of linking nodes you see represented by lines. This graph is fed into a Dijkstra's shortest path implementation found here.

When you click somewhere in the navmesh, the polygons get iterated over to find which poly the player character is standing in, and which poly is being clicked. It then uses the Dijkstra script to find the shortest path between those two polys. The plugin then essentially creates a chained tween that moves the player sprite to the centroid of each poly in the route. In my local copy it also then moves the player to the exact point clicked but I haven't committed it up just yet as I'm away from my machine.

It works! But is pretty janky and quite inefficient, and has some bugs (for example, if you click the poly with index 0 it just straight up tweens to it without following a path. Haven't figured that one out yet!). So if anyone has any suggestions feel free to discuss or submit a pull request or whatever  

My ideas for improvements: test line intersections for overlapping polys rather than the current way using point intersections. Add points where polys overlap. Move to these points as intermediates rather than moving straight from centre of poly A to poly B. Maybe interpolate the whole path slightly so it doesn't look so much like the sprite is moving along fixed, straight lines?

[harrywatson]

 

I've always found clicking a space to where your character should move to be a cumbersome gameplay. 

like that sentence. Also if you are capturing co-ordinates, could you not use your mouse click anywhere

on canvas then create exceptions?

I mean we are talking 2d? Then all you'd need is a nice little collision script to get your character moving

between rooms. "if harry.x > = door.x" Welcome to another room of delights!

Umm I guess keys out of the question? 

O well here is a keyboard script with X Y exceptions and rules - could always replace key co-ordinates with mouse

clicks. Full source here;

http://momogames.altervista.org/haunted/

 

var KEYCODE_SPACE = 32, KEYCODE_UP = 38, KEYCODE_LEFT = 37, KEYCODE_RIGHT = 39, KEYCODE_DOWN = 40;	
var keyDn = false, play=true, dir="right";
var vy = 0, vx = 0;
var lfHeld, rtHeld, helpmeghost;
//var base, base2;
var jumping = false, inAir = true, gravity = 2;

document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;

//OBVIOUSLY WILL NEED TO HANDLE ALL KEYS ^^

// JUST CODE SNIPPETS HERE QUESTIONS WELCOME

//THERE ARE FIVE PLATFORMS (BASES) (EXCEPTIONS ?)

base1 = new  createjs.Bitmap(base1);
base1.width = 250;
base1.height = 5;
base1.x = 450;
base1.y = 180;
base1.scaleX = .3;

// CHARACTER IN IDLE STATE

helpmeghost = new createjs.Sprite(mns);
       	  helpmeghost.framerate = 10;
          helpmeghost.scaleX = .8;
		  helpmeghost.scaleY = .8; 
     	  helpmeghost.x = 210;//550 
		  helpmeghost.y = 100;
		 
		   helpmeghost.gotoAndPlay("idle");

//CHARACTER MOVING

			//move left and right	
		if (lfHeld){
			vx = -5;	
		}
		if (rtHeld){
			vx = 5;
		}
		if(lfHeld && keyDn==false && inAir==false){
			helpmeghost.gotoAndPlay("walk");
			//createjs.Sound.play("squish");
			helpmeghost.scaleX = -1;
			keyDn=true;
		}
		if(rtHeld && keyDn==false &&  inAir==false){
			helpmeghost.gotoAndPlay("walk");
			//createjs.Sound.play("squish");
			helpmeghost.scaleX = 1;
			keyDn=true;
		}
		if (dir=="left" && keyDn==false && inAir==false){
			helpmeghost.gotoAndPlay("idle");
		}
		if (dir=="right" && keyDn==false && inAir==false){
			helpmeghost.gotoAndPlay("idle");
		}	
		helpmeghost.x+=vx;
		vx=vx*0.5;
	}
});

// MY OWN CLUNKY SOLUTION FOR 'EXCEPTIONS'.

if(helpmeghost.y < base4.y){
	   path = base4;}else
if(helpmeghost.y > base4.y && 
   helpmeghost.y < base.y){
	   path = base;}else
if(helpmeghost.y > base.y && 
   helpmeghost.y < base2.y){
		path = base2;}else
if(helpmeghost.y > base2.y && 
   helpmeghost.y < base3.y){
		path = base3;}

// THE PATH FUNCTION

function path(width, height, x, y){
	this.width = width;
	this.height = height;
	this.x = x;
	this.y = y;
}

// NOW I'M JUST MAKING THIS UP BUT HOW ABOUT RECORD A CO-ORDINATE ON 'MOUSEDOWN, THEN'GOTOANDPLAY' //ONMOUSEUP?

 

  

[1-800-STAR-WARS]

I see what you mean - I'm focussing mainly on the old Lucasarts style with a character that moves where you click right now. I can see why some may find that cumbersome, but I'm too nostalgic to let it go  There should definitely be support for other control schemes as this thing matures though.

In terms of having to click exactly on the point on the floor you want to go - the old Lucasarts games would let you click anywhere and move the character to the nearest point on the navmesh. That should be easy enough to do - when the scene is clicked, and no nav polygon is under the mouse, find the nearest one and set that as the destination.

I thought about using just collision maps instead of nav maps but I figured there might be weird edges cases. EG say there is, I dunno, a bookshelf between the character and the point you want to go to. With a collision map, the character would walk up to the bookshelf, sort of 'stick' to the edges of it as it moves around it to the target point. With a navmesh system the character would pick a more sensible route that avoids the bookshelf entirely.

[harrywatson]

Hey go for it ! Nothing like the passion ! Good learning curve too. 

There is a way of creating a wee map (polygons) quite easily then

recording mouse moves but you've cracked it as far as I can tell.

I like to read so I wouldn't want to avoid a book shelf however you could

create a 'no go' class; function (avoid){if character bla bla bla, XY (closest point on your mesh)}

When you make your bookshelf - scene.add(bookshelf) class = avoid.

Very simple way of making things fluid. If you write the code please post. could be useful for all sorts of things.