Jump to content
  • Advertisement
  • entries
    11
  • comments
    40
  • views
    2156

About this blog

Creating a Tower Defence game for the TD GameDev challenge.

Entries in this blog

Finished & Post Mortem

Please check out my project page to play Shapes Tower Defense
You can play it on GameDev!    A Huge thank you to all those who've helped me out with this game.  There were quite a number of us encouraging each-other along and I thought, and think, that that is just fantastic.

POST MORTEM On the outset I was hoping to spend a lot of time on the game play.  But I wasn't able to devote as much time to game play as I would have liked.  In the future I think at least 50% of development time, if not more, should be spent play testing and tweaking.  But Over-all I'm quite satisfied with my implementation of the ideas I set out with in my first blog regarding this project.  Came together quite nicely.  I think all of my years of experience with THREE.js helped me fast track many of the steps that maybe new-comers to the API would have to learn the hard way.

What went Right:
Using my own 3D program helped out tremendously, I don't think I could have created all the unique shapes ( over 30 ) if not for that.  I think there is value in creating your own 2D and 3D suits.  though they would be much much simpler, you can create them to suit you needs.

Expected development time and debugging was quite accurate, I'm surprised. 

I enjoyed making this game a lot, and I think the part I enjoyed the most was looking up Johnson Solids and making them.

What went Wrong:
Like lawnjelly said, gimp is a nightmare.  I'm a bit more familiar with it now but what I've learned about that beast is that it's probably incredibly easy for those who know what hot keys their pressing, but for me, a Microsoft paint wiz, it was terrible. I didn't devote as much time to game play as I was expecting to.  And game play is a whole different animal.  I'm so used to technical problem solving that switching over your mind set to deal with something as ambiguous and subjective as game play was a challenge, especially since I only gave myself 5 days to do it.  But thankfully lawnjelly was a big help and he pointed out a lot of design flaws that I had over-looked.  I think I got most of them that he mentioned. My code, It's bad.
I documented things as best I could and tried to label things but once the complexity of this project grew I could no longer keep things tidy or orderly.  Sure I named variables 'vectorOne' instead of 'v' but the code lacks coherent structure.  By the end I was confused as to where I had put things.  Clearly much work to be done in this area. All and all I enjoyed the experience a lot, and I became closer with some members.  Win / Win
Have a great weekend.
Awoken

Awoken

Awoken

Almost Finished

This week has been one heck of a week. 
I wake up, eat breakfast, go for a run, go to work, come home eat dinner, program for 4 hours, go to bed, and repeat. I've got a lot done.  Here is a pic showing the latest accomplishments.
Added - Crystals which act like lives, but also generate points after each wave.  And they break if a shape touches one.
- Score system
- Upgrade system
- Update shape paths if they were travelling to a crystal that has already been broken. 
- Start screen
- Menu screen
- Lose Animation

I now only have two things to do to wrap up this game
best of all I'll have it done by Saturday.  I'm impressed with how well I've managed my time and how accurate I've been predicting how much time it will take me to do this or that.
So fingers crossed.  If I don't run into any snags I'll have met the requirements by Saturday Thanks for reading
 

Awoken

Awoken

Cube Cannon

Hello GameDev, Here is a screen shot of the Cube Cannon.  You can only build one! It is fully operational and it packs a punch, for squares that is.  Anyways I've made so many changes to the code I can't even really recap all the things I've done.  So here is the code TD.06.22.zip If you fancy, give the project a go.  I've included some instructions to go over.
I'm going to be plugging away come tomorrow to add the Hell-Fire Hex and the Tack Tower.
Then I'll be incorporating points and upgrades and a start screen

Yeish!  hopefully figures crossed.
 

Awoken

Awoken

First Wave of Shapes TD

Here is a video showing the first wave of Shapes TD It features some of the sound effects I've sourced as well.
I've implemented two major functions into the game.  It's now a functioning game.
There is a stage manager, which loads all the models before a given stage begins
And there is a wave manager which determines whether a new shape needs to spawn for a given wave, and if the shape has already spawned what actions it should take.
As well as a tower manager which handles tower targeting and tower animations.

I'll post a code update by the weekend.

Awoken

Awoken

Tower Placement

This post is a smaller one, but I figured it's been awhile.  It's also getting close to the deadline and I'm starting to panic.  Maybe alternating between projects wasn't the best strategy.  But progress is continuing.  Once I have enemies programmed it'll be tying it all up into a game experience.  I'm probably only going to be able to meet the minimum requirements for this challenge by the end date.  Here's hoping. Anyways, here's a quick video of tower placement along with the Tetra-Tosser.   Cheers

Awoken

Awoken

Pathfinding, Tower and Wall Placement Helpers.

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 ' f ' 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 ' t ' 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.

Awoken

Awoken

Added Walls and wall placement functionality

O.k, one more entry before the weekend, Heading out for the weekend, and next week I'll be working on unirule, so this'll be it for a couple weeks.
Just like last week I find that as the week goes by my excitement builds for the project I'm working on.  Come Monday, I'll be thinking more about Shapes TD than Unirule, come next Friday the reverse will be true. Wall placement has been added.
For those who want to give it a whirl:
- press 'w' to toggle wall placement on an off
- select a line ( it will turn yellow ), left click to create, right click to remove. Update the following files
shapesTD.js   add the following to keyboardControls.js   update mouseControls.js
Finally, add these three functions to generateGameContent.js   Have a great weekend!

Awoken

Awoken

Visual Grid, Target Mesh, Keyboard and Mouse Controls.

Hello GameDev, I got some essentials out of the way.  I added a play field grid to the scene which has individually select-able boxes.
First things first for those who want to follow along with development with their own copies:
Grab needed files over on my previous blog replace the script src's within the .html with <script src='three.min.js'></script> <script src='keyboardControls.js'></script> <script src='mouseControls.js'></script> <script src='generateGameContent.js'></script> <script src='shapesTD.js'></script> Grab the three new files: keyboardControls.js mouseControls.js generateGameContent.js And then update the shapesTD.js file var camera, scene, renderer, keyboard, lightSource; var mouseVector2, mouseRay; var grid, gridTargetMesh, cells; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 20, 1024/768 , 0.01, 30 ); camera.position.z = 5; camera.lookAt( new THREE.Vector3( 0 , 0 , 0 ) ); //we're going to add a feature to the camera allowing us to toggle the screen size when the user presses 'f' camera.renderSizeToggle = false; // any visual content we want displayed on screen we'll add to the scene. scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( 1024 , 768 ); document.body.appendChild( renderer.domElement ); lightSource = new THREE.DirectionalLight( 0xffffff, 1 ); lightSource.position.set( 1 , 1 , 1 ); scene.add( lightSource ); // mouse controls document.addEventListener( 'mousedown' , mouseControls.checkMouseDown , false ); // keyboard controls keyboard = {}; window.onkeyup = function(e) { keyboard[e.keyCode] = false; } window.onkeydown = function(e) { keyboard[e.keyCode] = true; } // we're going to add a timestamp to the keyboard allowing us to limit how fast the keyfire method fires under // certain circumstances. keyboard.timeStamp = +new Date(); /* * game content * * first we'll add all the features for a playable game, * then we'll add an html overlay to act as our start screen. */ // PART A // - create visual grid // - create target mesh // - create cell array to reference between the visual grid and target mesh, // it will also act as our pathfinding array later on. // generate a grid and add it to the scene. grid = generateGameContent.generateGrid( 13 , 19 ); scene.add( grid ); // since the grid will act as our visual reprentation of the playing area, we'll need to know // which square in the grid is being selected. For that we'll add a grid target mesh. gridTargetMesh = generateGameContent.generateGridTargetMesh( grid ); scene.add( gridTargetMesh ); // create cells to act as the go between grid and gridTargetMesh, // and they will also be used later on for pathfinding. cells = generateGameContent.createCells( grid ); } function animate() { requestAnimationFrame( animate ); keyboardControls.checkKeysPressed( keyboard ); grid.rotation.x += 0.001; grid.rotation.y += 0.002; gridTargetMesh.rotation.x += 0.001; gridTargetMesh.rotation.y += 0.002; renderer.render( scene, camera ); } If all goes according to plan you'll see a spinning grey grid that when you click on it will turn the selected square blue.    

Awoken

Awoken

An Homage to Cartridge Cover Art

Cover Art for Shapes TD. So I decided to pay my respects to old school cover art for cartridge games that you'd typically see back in the 80's.  Sometimes the art would depict things that weren't even in the game, and the art was usually mediocre and had few colors. I free hand the drawing in pencil, scanned it up and then used GIMP to color it.   

Awoken

Awoken

Introduction to THREE.js

Time to introduce just how awesome THREE.js is. 
With the following three files you too can begin building content with THREE.js that will work in any browser that supports WebGL.The files include the latest and greatest minified version of THREE.js.
three.min.js

Out of the box code to begin this project. var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 70, 1024 / 768 , 0.01, 10 ); camera.position.z = 1; scene = new THREE.Scene(); geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); material = new THREE.MeshNormalMaterial(); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( 1024 , 768 ); document.body.appendChild( renderer.domElement ); } function animate() { requestAnimationFrame( animate ); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); } shapesTD.js And a basic html file which references both THREE.js and the basic code for starting this project. <html> <head> <title>Shapes TD</title> </head> <body oncontextmenu="return false;"> <script src='three.min.js'></script> <script src='shapesTD.js'></script> </body> </html> ShapesTD.html
  Once you click on the html file with both of the other files in the same directory you should see a spinning cube.
If not, check to see if you have WebGL support enabled on the browser you are using.  
This will be my starting base.  I figured I'd throw in the code as well so that if any beginner wants to have a shot at an extremely easy language, JavaScript, and a well documented API, then these files are for you.  

Awoken

Awoken

Participating in the Tower Defence Challenge.

Hello GameDev,  In the past I've made many half-games, but never finished one.  I usually became bored of the games and usually played out their fun before I finished them.  I'm going to participate in the May to June challenge, earn myself a trophy.  It will be a browser game built off of the Three.js API. My goal is to finish a game with the emphasis on being enjoyable to play. So hopefully I will learn a thing or two about making fun games.  My first concern was that this new game would distract from my main project, unirule   So I decided to alternate which project I work on week to week.  I've spent the past couple days thinking about how I was going to tackle this challenge and meet all of its requirements.  For my first post I'm going to sketch out a rough proposal for the challenge.  Some of the details I sketch out may change over time.  But here we go: -The game is called Shapes TD, enemies will be 3D shapes, comprised of triangles, squares, pentagons and hexagons. 

-There will be 5 towers you can select from:
- - Tetra Tosser; that's right, it shoots out little tetrahedrons. ( Can build 3 )
- - Cube Chucker; you get the idea. ( Can build 1 )
- - Hellfire Hex; this one is a missile tower with six sides to each missile. ( Can build 2 )
- - Misty Mist; this one just creates mist that is corrosive. ( Can build 1 ) { might change this one }
- - Wall; used to construct passageways. ( Can build infinite )

-I'm planning on having 5 playable levels, each level will introduce a new 2D shape that enemies can be constructed from, triangles, squares, pentagons and hexagons.  Each level will also introduce a new tower that can be used, each level will only allow 3 different Tower Types to be used.  Each new level will tack on 10 more waves of enemies than the previous.
-Each 2D shape will have unique properties:
- - Triangles; can be destroyed with 1 tetra shot, 1 cube or Mist;
- - Squares; can be destroyed with 10 tetra shots or 1 cube or Mist.
- - Pentagons; regenerate after a period of time and can be destroyed with 1 shot.
- - Hexagons; Can only be destroyed with a Hellfire Hex Missile.

-I'm going to introduce Maze construction to the game; enemies will be dumb and will randomly choose passageways when they come across forks.  They will never explore the same fork twice.  At the beginning of the level the player must predetermine where they want their towers and walls.  The level will start and the player will be awarded credit for upgrading purposes as they successfully destroy enemies. -Enemies: Enemies will be semi-transparent.  The edges of their shape will be outlined, and each side will be the color of their corresponding 2D shape; orange triangles, light blue squares, light pink pentagons and red hexagons.  The outline of the shape will remain intact so long as 1 side remains, once all sides/faces have been destroyed the shape will disappear and the player will be awarded with credits. -Boss: Each level will have a boss themed by the levels 2D shape. -Life: the player will have 10 lives. If a shape escapes the playing area the player will lose 1 life and 3 lives if a boss escapes.

Feel free to leave a comment and let me know what you think  

Awoken

Awoken

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!