[F8] Orthographic engine with node based pathfinding

[renderhjs]

this is not exactly a game but rather my upcomming portfolio site. My idea was to create a big house where each floor can be a category - and the visitor as a thief can explore everything.
I should mention that it is not yet finished,- I need to fix many smal bugs.

url for testing
http://www.burg-halle.de/~st2520/

screenshot:


I have included 3 levels in this upload:

you can select them from the elevator menu (see screenshot)- for the elevator click either on the green sqaure (no icon yet) in the upper left corner or in the lower right corner the green button labeled 'elevator'.
- elevator: the first smal level- just the elevator box has a complex pathfinding setup
- round gallery test: test gallery (click on the images to enlarge them) with a round floor
- pathfind level: smal demo showing simple pathfinding between to rooms.



controls:
just click on the floor, objects or pictures (see 'round gallery sample' or 'pathfind test').


If you want to see a little bit more click on the blue button with the label '!debug' - wich will reload the scene but in the debug mode. Where:
- orange are the zones (can contain scripts such as camera change, object movement,...)
- red is the restriction border of possible walks
- turquoise are info points (will work best if the debug mode is disabled)
The 2 circles in the middle let you control the camera


If you want to see even more click on the yellow 'init editor' button. If the Browser panel here doesn´t load proper click again on the yellow 'init editor' button.


I´ll explain a little more in detail later - for now I am very sleepy

[everfornever]

pretty cool man, I like it alot.

if you can get it down to very easy to use and efficient this would make a cool website indeed.

I see you have done alot of things I would think of to make it easy to use, but something still seems like it has a learning curve.

but all and all I really like it, just makes me feel a bit standoffish in a weird way. like nervous about what I am doing and am I seeing everything that is available to me to do.

cuz people hate searching on websites. and like to see evrything right away like bam here it all is what do yuo want to do.

I give it an A+ for effort and originality.

[Orkahm52]

Maybe if you add arrow keys to rotate the screen it would be a little easier to use.

As a game programmer I see many opportunities for that in a game.
I actually made something similiar, but since it was made in flash 6 it was alot slower.

Very, very cool concept!

[ozmic66]

Hey, that's a really cool idea and very nice execution

I think it could make an interesting site, but I think you should also take it further and make a full game out of it.. looks like you already have the game engine almost completed anyway

@everfornever
I think you're right, but this site is obviously for showing off talent, and everyone needs one of those as long as there's an easy to use one as well

p.s, why in the pathfinding levels do the lamps appear under the character?

[hooligan2001]

Sweeeeet

[X-Tender]

Verrrrry Nice .. Keep up the AWESOME! Work ..

[tonypa]

p.s, why in the pathfinding levels do the lamps appear under the character?

Dont see any depth management yet. Still, it looks very good.

[EvilKris]

As a game, it has a higher potential than about 90% of the WIP's posted on here. Fantastic stuff. As a website, -if you're seeking honest opinions- it's overly confusing.
Make it a game, dude.

[mr_malee]

superb game, i agree with evil Kris, website is hard to navigate

but still, thats nuts

[mentuat]

excellent work, great idea for a portfolio website, look forward to seeing it finished!

[renderhjs]

thanks for the coments so far,- you guys gave me some interesting thoughts

seems like I have to think even more about the controls,- or at least how to make it more intuitive to work with.

Depth management is taken out for now since I had ugly results in some levels (on faces the z- depth point is in the center of the 3d- space of that face and once a face is a little bit larger it covers smal objects/ sprites beneeth it) - but I think I will solve this soon.

I want to avoid using the keyboard,- but you inspired me and I am thinking of either:
- a focus mode wich will zoom/ rotate to an object once you hover over it
- or general ability to extend the rotation if the mouse is out of the safe boundary of the screen (meaning ,- if the mouse is in the middle of the screen nothing will be affected,- but if you move outside an invisible box you can affect the camera rotation)

My previous website was the opposite,- absolutely technical and designed for a control freaks. However a lot of people were overburdened on how to control it. That feedback back then made me this developing this method. But you are right,- maybe I should make it easier for the user to focus on the important things. Like a glow/ highlight or something else on important objects/ elements.
I also thought about a tutorial level- wich explains most important things- but right now there arent that much things you need to know- not yet.


like I already said,- I´d like to grant you some insight and share some thoughts because depending on your comments I might improve or overthink certain aspects.

Level preparations
(here are samples of 1 level)

I first always start with a sketch,- a level can be pretty much work and if the concept is not good enough it gets frustrating in the end


in the very beginning my next step was to find the proportions and sizes with a 3d application (3dsmax in this case)- and also to avoid using to many faces


next is to paint/ edit the textures and build the level as *.xml file to see how it looks in the engine (see bottom of this screenshot)


then I usually import the textures back to the 3d application,- prepare the lights bake all the light & effects on the textures (texture baking wich is a unique rendering functionality) wich look on the textures like this:


here is a sample (screenshot from engine) of how a level can look with texture baking on the textures


as you can see I pretty much mixed 3d- and 2d tools to gain what I wanted,- all rotateable sprites were rendered aswell because of the different angles (if they have some).
The main character needs some improvements,- because I am still not very happy with the bends of his arms & legs and the animation. Also I try to incraese the angle renderings of the character (currently 8 angles- planning on 16) wich will affect the engine size but I guess it´s worth it.

(another screenshot out of 3dsmax)


I´ll prepare some screenshots & illustrations on how I did the pathfinding,
wich i think is special because it doesn´t require a gird or shapes (hittest) and has special abilities like single or bidirectional directions aswell as zoning areas.

[AfternoonDelite]

Looks amazing, but I just thought I'd report something.

When I click twice for him to go somewhere, he walks back to the original spot and then goes to the destination rather than continuing to walk.

Anyways, great job and looking forward to the final result.

[renderhjs]

so about the pathfiding,..
like many other methods its not easy to explain- so instead I will first show a general workflow on how it works from the concept.
First of all collisions in my pathfinding are based on this function

wich checks where 2 streight vektors/ strokes do cross or if they do not (no movieClips or whatever needed,- only numbers). Because this function is called very often its important to optimize this function. I used boundary boxes methods (a stroke simplified by a box) to determine beforehead if they are even close to each other and if there is a possibility for an intersection. You can see a demo showing the concept of that here:
http://www.renderhjs.net/bbs/flashki...l/intersec.htm
If the possibility is given I calculate the intersection point with vektor math (thanks to tonypa who really could teach me how it works on his tutorial site)
here is a simple shoot demo that shows what is possible with this function
http://www.renderhjs.net/bbs/flashki...ec_shooter.htm



ok but back to the concept....


1.) imagine the following level
2.) because its unclear where a player can go and where a restricted area is I gave each shape a variable called 'dir' (stands for direction) wich is like the normal in 3d/ poly stuff. 1 stands for outside of this shape and -1 inside this shape.



3.) next is to determine (either manually set or calculate) the perimetric points around the shapes. If you want to calculate this automaticly its very important to have the information of the dir variables we set before.
Either way its a simple rule - each edge that covers an angle of more than 180° gets a perimetric point with a little distance to the actual edge of the shape.
4.) Next is to merge close nodes (the perimetric points) wich really are close. In this example it might not make much difference but in large mazes or comples levels it very well makes sense.
Also at this state I´ll try to connect each node (again either manually (can be lots of work) or automaticly) to another one if they reach each other streight without hitting the boundaries. You get a network of nodes.



5.) preparations are done,- lets start by setting a start and goal point
6.) always avoid complex calculations- so first try to check if a direct path is possible. Uh that hurts it seems that the straigt path collides at least with one boundary (wich is always a streight line,- because each shape consists of streight vektors/ lines)



7.) Because the 'start' and 'goal' points are not within the network of nodes we have to find access booth for the start and goal poit. The entry points are the ones that can be directly accessed and are not blocked by any boundary- also if more nodes are available always choose the one wich is the closest to the point.
8.) Now its time for the actual path finding,- to find the shortest path from the 'start entry point' to the 'end entry point' on the node network. Basicly its a function that goes in a loop and in its loop it calls another function wich can grave into multiple depth branches of the node network. At the end you get several results but not every one of them is the shortest- so for each result calculate the distance and sort the results on the distance- then take the shortest one.

---- short brake (because of the limitation of images in a post-----

[renderhjs]

9.) Lets assume that this is the shortest/ best path (I know that it actually is not but just assume!)
10.) That path would still not be optimized so we need to check if the path can be optimized wich means if the distance of the path can be decreased. One way to do this is to try to skip the 2nd node of the path if this is possible.


11.) the same goes for the 2nd last node (no. 6 in this case) try to skip this one aswell if it is possible
12.) the final path has been found



ok thats only the concept,- however I think that this might explain people more as just lots of code.
Also this is just the rough idea,- I added some abilities where you can determine weither a node connects with the other one backwards or not. Also it should be possible to add weights on each node so that the player avoids those nodes more as others.

Here is an example how I tricked with it in the elevator level:

(green are the directions of the nodes to each other)
- Node 7 for example only connects with Node 3,4,5 and 6 - but you cant go back from the nodes 3,4,5,6 to node 7
- another nice trick is to use a boundary between 2 nodes (see node 9 and 10 for example) this forces the player to first go to node 9 and then to node 10 if you want to leave the elevator

[walsher]

Wow, thats some cool stuff. What version of Max do you use, if you don't mind me asking?

[VENGEANCE MX]

Umm...

Don't you think this is a bit overkill for a website navigator? :P

[renderhjs]

@ walsher:
when I started with some experiments on texture baking I worked with r7,- the character and newer things are done with r8.
Texture baking was introduced in r7, some earlier versions of maya should do the same trick- but its a pain in the ass using it there.
If you want to render orthographic images almost any max release will do (at least from r2.5 upwards)

[walsher]

Okay, I've got ver. 6 so I'm not too sure what texture banking is? How do you do this orthgraphic images, is it an option in the material editor or render?

Thanks

[X-Tender]

Its a Technique to bake Light and Shadow into Textures ... also Possible with Maya ..

[renderhjs]

@ walsher
first of with the max render this only works with a camera,- not the perspective view (other renders like brazil can differ in this case)
so select the camera- and on the right properties bar check "orthographic projection",- you will see the result in the camera view- change the FOV and lens to zoom out/in
you might find this old article interesting
http://www.gamedev.net/reference/art...rticle1911.asp