Pathfinding, Tower and Wall Placement Helpers.

posted in Awoken for project Shapes TD
Published May 27, 2018
Advertisement

Just wrapped up organising the code.

Originally when I set out to program this project I had the idea that would-be followers of my efforts could just copy and paste quick little bits to the base files from my Introduction to Three.js post.  However, I'm not that organise and don't have the level of skill to be able to pull that off.  I've had to go through many older functions and modify this or that.  So you'll have to bare with me but if you want to stay up to date with this project and have a copy of the code as of 'today' you'll have to just download everything here

TD.zip

current functionality:
Toggle Screen Size; if you press ' ' you'll toggle the size of the screen.

Walls; If you press ' w ' you'll be able to select locations for walls.  Moving your mouse along the grid you'll see the grid line the cursor is closest to turn yellow.  If you left click the mouse button you'll create a wall.  If you right click on a line under a wall that already exists the wall will be removed.  Walls can be created between adjoining cells/squares/spaces.  When you select a grid line that will block the path to an exit the line will turn red indicating that a wall can't be built there.  If you try to left click nothing will happen.

Towers; If you press ' ' you'll be able to select the locations for tower.  Moving your mouse along the grid you'll see a large square 2x2 appear in cyan if you select a location that doesn't envelop any surrounding wall.  The large square will turn red if the location isn't permitted.  As of right now the Tower placement function doesn't take into account Towers blocking the path to an exit.

If you want to switch between walls and towers you must de-select your previous choice by pressing the say keyboard key.  Clear as mud?  Hope not.

Here's a video showing what's been added.

 

Now that this is all done I can start adding towers and enemies. 
I'm going to scrap the Misty Mist Tower.  I'm instead going to replace it with the Tach Tower.  It will shot bullets that will slow down an enemy with each successive hit.  It's been done a bunch before.  But unlike other games where the effect wears off, in this one the effect will be permanent.  However; in order to dramatically reduce the speed of an enemy, it have to be shot many times.

Let me know what you think!

Thanks for reading.

4 likes 4 comments

Comments

DexterZ101

Cool Bro ^_^y I'm amaze that we can do this now over modern browser, I wrote my own simple 2D Game engine in HTML5/TypeScript maybe it's time to upgrade it and put 3D support, last time I created 3D over the web was using Silverlight but today  WebGL rocks !

May 27, 2018 04:16 AM
lawnjelly

Good stuff so you will defend by placing your walls rather than just having the enemies follow a preset path, that is definitely more realistic! :)

I know what you mean about code organisation, mine is a mess at the moment I am going to have to restructure at the end to release the source. I suspect with most of these source code tutorials they finish the whole thing first, then start building up what they already know works, bit by bit (then sometimes pretend they are making it up as they go lol!).

May 27, 2018 08:40 AM
Awoken

@DexterZ101, I know right. When I was first introduced to THREE.js I was immediately drawn in at just how quickly I could get things done.  It's a great API to just play around with.  And the number of artistic features it supports is vast.

@lawnjelly Yes I agree.  I think they backward engineer their tutorials.  Unless they've done the same thing time and time again.

May 27, 2018 11:43 PM
Rutin

Nice job with the walls :) I'm doing my entry with dynamic pathing by creating mazes, but the wall idea is even better than what I have going! Awesome stuff! :) 

May 28, 2018 12:28 AM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Profile
Author
Advertisement
Advertisement