Jump to content
  • Advertisement

username@gamedevnet

Member
  • Content Count

    5
  • Joined

  • Last visited

Community Reputation

129 Neutral

About username@gamedevnet

  • Rank
    Newbie
  1. username@gamedevnet

    Another 2D tiled RPG movement question

    So after doing some more Google'ing I found a Game Maker tutorial about this topic, and a demonstration. I managed to get it working in LOVE, but I'd be interested to hear what people think of that solution in general.
  2. username@gamedevnet

    Another 2D tiled RPG movement question

    I have a basic understanding of tile maps and movement, but I'm having trouble moving beyond that. My goal is to replicate the movement seen in NES games like Dragon Warrior and Final Fantasy. Here's the code I've been experimenting with: function love.load() x = 0 y = 0 dx = 0 dy = 0 size = 64 t = 10 v = size / t end function love.draw() love.graphics.rectangle("fill", x, y, size, size) end function love.update(dt) x = x + (dx - x) * (v * dt) y = y + (dy - y) * (v * dt) end function love.keypressed(key) if key == "up" then dy = dy - size end if key == "down" then dy = dy + size end if key == "left" then dx = dx - size end if key == "right" then dx = dx + size end if key == "escape" then love.event.push("quit") end end Currently I can press a button and the block will move a set distance, which is great, but it moves at a variable speed; it slows down as it approaches the end of it's movement.   Am I on the right track at the moment? I feel like I'm missing something in the math department.
  3. I started messing around with Missile Command and am trying to recreate the movement of the incoming missiles, and from what I can gather that requires the use of Vectors. I spent a fair amount of time last night on the internet, but I need some clarification and/or help and/or extra knowledge.   So assume I have a missile coming in from some location at the top of the screen, and a target to strike at the bottom of the screen, lets just assume the screen is 640x480:   missile.pos.x = 100 missile.pos.y = 0 target.pos.x = 382 target.pos.y = 480   From what I understand subtracting the missile's current position from the target's current position will provide me with a direction.   direction.x = target.pos.x - missile.pos.x direction.y = target.pos.y - missile.pos.y   So if I use that as is to move the missile it gets there on the first update cycle; as you would expect. If I multiply it by anything like delta time or some random float it slows down as I approach the target. I assume this only applies if dt is less than 1, I'm guessing it would speed up on approach if dt were greater than 1.   // Teleports to target missile.pos.x = missile.pos.x + direction.x missile.pos.y = missile.pos.y + direction.y // Slows down as it approaches target missile.pos.x = missile.pos.x + direction.x * dt missile.pos.y = missile.pos.y + direction.y * dt   Then I read about normalization, which I understand as:   // The distance between the two...or the Vector length distance = math.sqrt((direction.x * direction.x) + (direction.y * direction.y)) // The normalized Vector norm.x = direction.x / distance norm.y = direction.y / distance   Using the normalized vector I get where I want to go at a consistent rate regardless of the distance between the two points, although it's updating at the same rate as the loop so it's still pretty fast. However, if I multiply it by dt it goes painfully slow.   // Constant speed from start to target, too fast missile.pos.x = missile.pos.x + norm.x missile.pos.y = missile.pos.y + norm.y // Constant speed from start to target, too slow missile.pos.x = missile.pos.x + norm.x * dt missile.pos.y = missile.pos.y + norm.y * dt   So I assume I need to apply some kind of speed, which is what might be referred to as a scalar? How do I apply it?   // Like this? spd = 10 * dt missile.pos.x = missile.pos.x + norm.x * spd   Am I on the right track with all of this stuff, or am I way off base? Any feedback, info, etc., would be appreciated!
  4. username@gamedevnet

    Your First Step to Game Development Starts Here

    This article helped me. It's the right amount of honesty, encouragement, and information.
  5. username@gamedevnet

  6. username@gamedevnet

    Feedback wanted on Javascript PONG clone

    Thanks for the input. I'm not done reworking it yet, but I thought I would share what I have to make sure I'm going in the right direction. I think part of the problem I'm having is determining what goes in each class/object. Like the player controls, it seems like the input should be a game responsibility, and the actual updating of the paddle should be a paddle responsibility...or maybe I'm over thinking it? // Utility object inherited by Paddle and Ball, provides // everything needed to draw the object to the canvas. // These methods may need to be empty... function GameObj() { this.x; this.y; this.width; this.height; // Initialize the 'x' and 'y'...not sure this should be here this.init = function(x, y) { this.x = x; this.y = y; } // Draw 'this' to the canvas this.draw = function() { this.context.fillRect(this.x, this.y, this.width, this.height); } } // Define the paddles used to hit the ball. Inherits from GameObj(). function Paddle() { this.width = 16; this.height = 64; this.moveUp = function() { // this.y -= this.speed; } this.moveDown = function() { // this.y += this.speed; } } Paddle.prototype = new GameObj(); // Define the bouncy ball. Inherits from GameObj(). function Ball() { this.width = 16; this.height = 16; } Ball.prototype = new GameObj(); // All the game stuff function Game() { this.canvas = document.getElementById('canvas'); this.context = canvas.getContext('2d'); this.canvasHeight = this.canvas.height; this.canvasWidth = this.canvas.width; this.init = function() { // Not sure if this is the best way, but it does eliminate the need // for an extra parameter to make the draw() method work GameObj.prototype.context = this.context; // Initialize game objects this.ball = new Ball(); this.playerOne = new Paddle(); this.playerTwo = new Paddle(); // This seems like the easiest way to do this...probably not the best. this.ball.init((this.canvasWidth - this.ball.width) / 2, (this.canvasHeight - this.ball.height) / 2); this.playerOne.init(0, (this.canvasHeight - this.playerOne.height) / 2); this.playerTwo.init((this.canvasWidth - this.playerTwo.width), (this.canvasHeight - this.playerTwo.height) / 2); } // Update everything this.update = function() { // do some stuff... } // Draw everything this.draw = function(timestamp) { window.requestAnimationFrame(this.draw.bind(this)); // Update game stuff this.update(); // Draw game objects to the canvas this.ball.draw(); this.playerOne.draw(); this.playerTwo.draw(); } } // Play the game var game = new Game(); game.init(); game.draw();
  7. I finished my PONG clone today; finished enough anyway, it has a start, a middle, and a win condition. No audio at the moment. Any feedback would be appreciated. I should probably add that this is the first game or programming project I've gotten to this state of 'finished', let alone shown anyone. I've only included the .js file as the .html and .css files are pretty bare. It's a hot mess, but here it is... var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); function Paddle() { this.x = 0; this.y = 0; this.speed = 7; this.width = 16; this.height = 64; this.score = 0; this.draw = function() { context.fillStyle = 'white'; context.fillRect(this.x, this.y, this.width, this.height); } } function Ball() { this.x = 0; this.y =0; this.xv = 1; this.yv = 1; this.speed = 4; this.width = 16; this.height = 16; this.draw = function() { context.fillStyle = 'white'; context.fillRect(this.x, this.y, this.width, this.height); } } // Keep track of keypresses... // Using an array this way ensures smooth movement, // without the jerky motion at the start var keystates = []; // Some "constants" to track specific keys var LEFT_PADDLE_UP = 87; var LEFT_PADDLE_DOWN = 83; var RIGHT_PADDLE_UP =79; var RIGHT_PADDLE_DOWN =75; var SPACE = 32; // Flag a key as active on keydown by adding it to // the keystates array window.addEventListener('keydown', function(e) { keystates[e.keyCode] = true; }); // Remove a key on keyup...I think delete sets it to undefined... window.addEventListener('keyup', function(e) { delete keystates[e.keyCode]; }); // Do something with all the keypresses stored in keystates function updatePaddles() { // Move the left paddle if (keystates[LEFT_PADDLE_UP] && leftPaddle.y > 0) { leftPaddle.y -= leftPaddle.speed; } if (keystates[LEFT_PADDLE_DOWN] && leftPaddle.y < canvas.height - leftPaddle.height) { leftPaddle.y += leftPaddle.speed; } // Move the right paddle if (keystates[RIGHT_PADDLE_UP] && rightPaddle.y > 0) { rightPaddle.y -= rightPaddle.speed; } if (keystates[RIGHT_PADDLE_DOWN] && rightPaddle.y < canvas.height - rightPaddle.height) { rightPaddle.y += rightPaddle.speed; } } function updateBall() { if (ball.y < 0 || ball.y > canvas.height - ball.height) { ball.yv *= -1; } if (ball.x <= 0) { rightPaddle.score++; resetBall(); } if (ball.x >= canvas.width - ball.width) { leftPaddle.score++; resetBall(); } // As is, if the ball hits the paddle from the top/bottom // then it can get stuck on the x-axis behind the paddle if (ball.x < leftPaddle.x + leftPaddle.width && ball.x + ball.width > leftPaddle.x && ball.y < leftPaddle.y + leftPaddle.height && ball.y > leftPaddle.y) { ball.xv *= -1; } if (ball.x < rightPaddle.x + rightPaddle.width && ball.x + ball.width > rightPaddle.x && ball.y < rightPaddle.y + rightPaddle.height && ball.y > rightPaddle.y) { ball.xv *= -1; } ball.x += ball.xv * ball.speed; ball.y += ball.yv * ball.speed; } // Centers the ball on screen function resetBall() { ball.x = (canvas.width - ball.width) / 2; ball.y = (canvas.height - ball.height) / 2; ball.xv *= -1; } function resetPaddles() { leftPaddle.x = 0; leftPaddle.y = (canvas.height - leftPaddle.height) / 2; rightPaddle.x = canvas.width - rightPaddle.width; rightPaddle.y = (canvas.height - rightPaddle.height) / 2; leftPaddle.score = 0; rightPaddle.score = 0; } // Set up game objects var leftPaddle = new Paddle(); var rightPaddle = new Paddle(); var ball = new Ball(); var isPlaying = false; var startScreen = document.getElementById('start'); resetPaddles(); resetBall(); context.fillStyle = 'white'; context.font = '64px Arial'; context.textBaseline = 'top'; // Run the game function loop(timestamp) { window.requestAnimationFrame(loop); if (keystates[SPACE]) { isPlaying = !isPlaying; delete keystates[SPACE]; } if (isPlaying) { startScreen.style.display = 'none'; updatePaddles(); updateBall(); context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect((canvas.width - 16) / 2, 0, 16, canvas.height); context.fillText(leftPaddle.score, (canvas.width / 2) - (context.measureText(leftPaddle.score).width + 32), 0); context.fillText(rightPaddle.score, (canvas.width / 2) + 32, 0); ball.draw(); leftPaddle.draw(); rightPaddle.draw(); } if (leftPaddle.score === 3 || rightPaddle.score === 3) { isPlaying = !isPlaying; startScreen.style.display = 'block'; resetPaddles(); resetBall(); } } window.requestAnimationFrame(loop);
  • Advertisement
×

Important Information

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

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!