Jump to content
  • Advertisement
  • entries
  • comments
  • views

About this blog

Creating a Tower Defence game for the TD GameDev challenge.

Entries in this blog

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!



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.    



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.   



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.

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.  



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  



  • Advertisement

Important Information

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

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!