Jump to content
  • Advertisement

Pathfinding, Tower and Wall Placement Helpers.

Awoken

975 views

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 Comments


Recommended Comments

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 !

Share this comment


Link to comment

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!).

Share this comment


Link to comment

@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.

Share this comment


Link to comment

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! :) 

Share this comment


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
  • Advertisement
  • Blog Entries

  • Similar Content

    • By Val Valentino
      I've developed a browser game that I do not intend to sell and I'm looking for an investor to help me with advertising and upgrading.
      Languages: PHP7, HTML, JS, Jquery
      Database: MySQL
      FrameWork: Laravel
      Anyone who wants more information, write on PM
    • By niamleeson
      Dear Gamedev.net members,
      I'm sorry to be asking in Javascript, but it is the only language I'm working with currently. I am hoping that the code is simple enough for you to understand what it is doing.
      I'm trying to rotate a cube so that dragging down always rotates the object around the world X axis, and dragging to the side always rotates the object around the world Y axis no matter the rotation of the object.
      I've seen this example which achieves the exact behavior I am looking for: https://jsfiddle.net/MadLittleMods/n6u6asza/
      And then, here's my jsFiddle code that I'm having trouble with: http://jsfiddle.net/9sqvp52u/
      I saw this stackoverflow answer: https://stackoverflow.com/questions/45091505/opengl-transforming-objects-with-multiple-rotations-of-different-axis
      But I still don't understand what I'm doing wrong. I think I'm still multiplying the rotation matrix to the left side of the object matrix in my code, but the object is always just rotating around its local axis. I learned how the transformation matrix works and how quaternion works but I feel like I am still missing something crucial here.
      I would really appreciate your help.
      Thank you.
    • By Steffi
      I am creating an endless runner, please see my code here: https://codepen.io/clownhead/pen/BqyqOm
      At the moment when the left arrow key is pressed the player moves left, the camera follows him so he does not go off screen and the ground tiles below the player are destroyed as they move out of the world bounds on the right and are recreated just before they move into the world bounds on the left. This allows him to keep running forever without running out of ground and works perfectly, but with one problem: I want the player to be running to the right of the game, NOT to the left. Please note I do not need the player to be able to move both ways. I can make the camera follow the player to the right instead of the left by doing the following: I remove the negative from -this in
      this.world.setBounds(-this.player.xChange, 0, ...); so it becomes
      this.world.setBounds(this.player.xChange, 0, ...); Now when the right arrow key is pressed the camera follows the player as he runs right so he does not go off screen, but the ground tiles do not regenerate and he runs out of ground. So basically I need to reverse the direction in which the ground is regenerating but I can't figure out how to do it.  As everything is working to the left, I am sure it's a few simple settings, perhaps some negatives that need to be made positive? I have tried all that I can think of but I can't get it to work. I think the key to solving this might be in these lines:
      this.platforms.forEachAlive( function( elem ) { this.platformXMin = Math.min( this.platformXMin, elem.x ); if( elem.x > this.camera.x + this.game.width ) { elem.kill(); this.platformsCreateOne( this.platformXMin - 70, this.world.height - 50, 50 ); } }, this ); I have tried changing all sorts of settings there, but I can't seem to get it to work. I am new to Phaser and still learning Javascript. Is anyone able to see an obvious solution? I'd be so grateful. Thanks in advance for any help!
    • By Steffi
      I have a background image and a separate ground image that I want to repeat as long as the character is moving forward. When the character stops, the background and ground should not be moving. Basically I am creating an endless runner. For similar games it is often suggested to add this.game.background.tilePosition.x -= 1to the update function. This is not what I am looking for as it makes the background constantly move regardless of whether the character is moving. At the moment my background and ground images are repeating, but they are restricted to this.game.world.setBounds(0, 0, 1280, 800);. Any suggestions would be greatly appreciated as I have been at this for days, and I am sure there must be a simple solution. Please see my code below:
       
      function Hero(game, x, y) { Phaser.Sprite.call(this, game, x, y, 'player'); this.anchor.set(0.5, 0.5); this.game.physics.enable(this); this.body.collideWorldBounds = false; this.animations.add('stop', [0]); this.animations.add('run', [1, 2, 3, 4, 5], 14, true); // 14fps looped this.animations.add('jump', [6]); this.animations.add('fall', [7]); this.animations.add('die', [8, 9, 8, 9, 8, 9, 8, 9], 12); // 12fps no loop } Hero.prototype = Object.create(Phaser.Sprite.prototype); Hero.prototype.constructor = Hero; Hero.prototype.move = function (direction) { const SPEED = 200; this.body.velocity.x = direction * SPEED; if (this.body.velocity.x < 0) { this.scale.x = -1; } else if (this.body.velocity.x > 0) { this.scale.x = 1; } }; Hero.prototype.jump = function () { const JUMP_SPEED = 600; let canJump = this.body.touching.down; if (canJump) { this.body.velocity.y = -JUMP_SPEED; } return canJump; }; Hero.prototype.bounce = function () { const BOUNCE_SPEED = 200; this.body.velocity.y = -BOUNCE_SPEED; }; Hero.prototype.update = function () { // update sprite animation, if it needs changing let animationName = this._getAnimationName(); if (this.animations.name !== animationName) { this.animations.play(animationName); } }; Hero.prototype.die = function () { this.alive = false; this.body.enable = false; this.animations.play('die').onComplete.addOnce(function () { this.kill(); }, this); }; Hero.prototype._getAnimationName = function () { let name = 'stop'; // default animation if (!this.alive) { name = 'die'; } else if (this.body.velocity.y > 0 && !this.body.touching.down) { name = 'fall'; } else if (this.body.velocity.y < 0) { name = 'jump'; } else if (this.body.velocity.x !== 0 && this.body.touching.down ) { name = 'run'; } return name; PlayState = {}; PlayState.init = function () { this.game.renderer.renderSession.roundPixels = true; this.keys = this.game.input.keyboard.addKeys({ left: Phaser.KeyCode.LEFT, right: Phaser.KeyCode.RIGHT, up: Phaser.KeyCode.UP }; PlayState.preload = function () { this.game.load.json('level:1', 'data/level01.json'); this.game.load.image('ground', 'images/ground.png'); // I need this to repeat infinitely this.game.load.image('background', 'images/background.png'); // I need this to repeat infinitely this.game.load.spritesheet('player', 'images/player.png', 64, 64); }; PlayState.create = function () { this.game.world.setBounds(0, 0, 1280, 800); this.game.background = this.game.add.tileSprite(0, 0, this.game.world.width, 800, 'background'); this.game.ground = this.game.add.tileSprite(0, 680, this.game.world.width, 166, 'ground'); this.game.physics.arcade.enable(this.game.ground); this.game.ground.body.immovable = true; this.game.ground.body.allowGravity = false; this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this._loadLevel(this.game.cache.getJSON('level:1')); }; PlayState.update = function () { this.physics.arcade.collide(this.player, this.game.ground); this._handleInput(); }; PlayState._handleInput = function () { if (this.keys.up.isDown) { this.player.jump(); } else if (this.keys.right.isDown) { // move player right this.player.move(1); } else if (this.keys.left.isDown) { // move player left this.player.move(-1); } else { // stop this.player.move(0); } }; PlayState._loadLevel = function (data) { this._spawnPlayer({player: data.player}); const GRAVITY = 1200; this.game.physics.arcade.gravity.y = GRAVITY; }; PlayState._spawnPlayer = function (data) { this.player = new Hero(this.game, data.player.x, data.player.y); this.game.add.existing(this.player); this.game.camera.follow(this.player, Phaser.Camera.FOLLOW_PLATFORMER); }; window.onload = function () { let game = new Phaser.Game(866, 520, Phaser.CANVAS, 'game'); game.state.add('play', PlayState); game.state.start('play'); };  
    • By MakeIndieGreatAgain
      Game developers will be able to become pioneers in the development of decentralized games for the gambling industry using DAO.Casino protocol.
      On September 17, 2018, DAO.Casino is opening Sandbox for developers, independent teams and game development studios that choose to harness the power of the rapidly developing DApp industry.
      Starting today everyone may submit their application for Sandbox on the official Sandbox page.
      The Sandbox project is designed by DAO.Casino developers. Participants of Sandbox will learn the basics of decentralized applications development on DAO.Casino protocol. Developers participating in Sandbox will learn to create, design and deploy decentralized games and applications on Ethereum blockchain.
      DAO.Casino is planning to reward most active developers for their constructive feedback on the improvement and optimization of the SDK and related documentation. The company will separately announce the details of the rewards program later this fall.
      “We are confident that the Sandbox project will play an important role in our collaboration with studios and independent game developers. We cannot wait to see our product helping developers unleash their creative and entrepreneurial talents and apply those to one of the most groundbreaking technologies of the XXI century. — states Ilya Tarutov, CEO, DAO.Casino. – I am sure that the products we’re developing will transform the online gambling into a fair and transparent industry for all of the involved parties: casino operators, developers, and affiliate marketers. “
      “We are launching the Sandbox with the goal of enabling as many developers as possible to learn to create decentralized games. We have achieved an important milestone by starting to accept applications from developers all around the world who share our idea to make online gambling fair and transparent. With our technology, developers can take the whole gambling industry to the next level” – says Alexandra Fetisova from DAO.Casino.
      DAO.Casino is disrupting the online gambling industry by developing the protocol based on Ethereum blockchain technology. The protocol ensures the automation of transactions and facilitates interactions between all the industry participants: casino operators, game developers, and affiliate marketers. DAO.Casino team is fully dedicated to developing the best products and making the gambling industry a better place.

      View full story
×

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!