• Content count

  • Joined

  • Last visited

Community Reputation

146 Neutral

About 0026sd

  • Rank
  1. ************ ** SOLVED  ** ************   OK, I've solved this issue by doing the following (CodePen has been updated). Commented out the line where I was adjusting the player's position to snap to the grid. Reverted back to using the player x and y (not the centers) and the path coordinate x and y (not centers) That's it. Now it can travel at any speed and go all directions.   Apologies if I've wasted anyone's time. I've literally been staring at this for hours.
  2.   Ok, I've adjusted my CodePen, however, it remains the same. You do bring up a good point, though. That ApplyPhysics() function was converted from C# from a sample game that came with XNA (now MonoGame) and I wasn't sure how to multiply 2 vectors in javascript.   i.e.: this.pos * this.velocity; as opposed to what I had; this.pos.x * this.velocity.x //etc...
  3. Hi everyone!   I come with a general question however I've also tried to solve it and failed. Not miserably - it half works....   Anyway, after some sort of path finding algorithm has been executed and we're left with an array containing path nodes, how do we move a player along that path inside a game loop? I've attempted to research this and have fallen short so, instead, I gave it try.   Please see this CODE PEN with my efforts (left click on the canvas to find a path). The path finding is being done with QIAO's pathfinding.js and works really well! I'm quite happy with it.   You'll see the start of the path finding code around line 276 in the code pen JS window. The part where I'm trying to move the player begins at line 313.   There are 2 major problems with it: The player will move up and/or left but not down and/or right. I have a suspicion that it has something to do with the fact that positions are based off of the top left corner and I haven't taken this into account. I did think of this and tried to fix it by working with the player's center and the node ending center.. to no avail. For some reason the player's speed is completely ignored. You can set the player's speed on line 122. Doesn't matter if it's 1 or 20, he still moves to the destination (as long as it's up and/or left) at the same speed. This isn't good.  NOTE: If I set the player speed to 20 it actually seems to fix the issue stated in #1...    Anyway, if anyone can help, it would be very much appreciated. I tried to strip out as much unnecessary code as possible.   Thanks,   SD
  4.   Updated JS FIDDLE: https://jsfiddle.net/L7an0c1g/3/   OK, so I've applied the changes you suggested and it works except for one thing. The ELSE portion of my IF statement, checking intersection depths beginning on line 203, was intending to correct the player's position if the depth on both axes were the same (hit a corner). When I set my position x,y to the localBoundsRect + depth, it stops the player when sliding on a wall. I think it's because the player is hitting the corner of the tile it's moving into and correcting both the x and the y, stopping him.   Right now, after commenting out the else block, if you press W + A simultaneously, the player should pass through the corner tile and stop when it is fully in that tile. Uncommenting the else block will fix this but cause the issue mentioned above (sticky wall sliding).   I have read that this is a common issue with corners and maybe it just comes down to level design to minimize that from happening, but if you have any thoughts on how to correct this it would be greatly appreciated.   Thanks!
  5.   Thank you for your reply!! Sounds like it's exactly what my problem is - I'll give it a try tomorrow and let you know how it went!
  6. Hi everyone,   I've been researching for days and am unable to find the solution to this problem, although everyone talks about it....   Anyway, I've created a simple HTML5 game. It's a top down 2D tilemap with free movement (like Zelda). I've implemented simple collision detection and response using SAT (Separating Axis Theorem) but cannot figure out how to fix the sticky wall sliding: when the player is hugging a wall and you try to slide along - pressing into the wall and down the axis (i.e.: holding down and left at the same time on a wall). The player moves along the wall but not without violent bouncing.   I've set up a JS FIDDLE with my issue: https://jsfiddle.net/L7an0c1g   Everything is all well and good until you hit a wall and attempt to continue moving diagonally through it.   To make it easier to find, the Player "class" is at line 116 and the collision handling happens around line 160. It's called from Player.ApplyPhysics() on line 221.   Thank you in advance for your feedback! It's much appreciated.   Scott.   EDIT 1: I just discovered that the jumping also occurs if you push straight down (or sideways) on a wall while straddling 2 tiles.   EDIT 2: I'll paste the code here as well <!DOCTYPE html> <html> <head> <style type="text/css"> * { padding: 0px; margin: 0px auto; } html, body { background-color: #FFFFFF; font:normal 9pt "Century Gothic", Verdana, Arial; color:#222222; } #wrapper { margin-top:50px; } #wrapper #heading { font-size:48pt; } </style> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" language="javascript"> /******************************************* ************** INPUT OBJECT ************** *******************************************/ var Input = { Keys: { _isPressed: {}, W: 87, A: 65, S: 83, D: 68, SPACE: 32, GetKey: function (keyCode) { return Input.Keys._isPressed[keyCode]; }, onKeyDown: function (e) { Input.Keys._isPressed[e.keyCode] = true; }, onKeyUp: function (e) { delete Input.Keys._isPressed[e.keyCode]; } } }; /********************************************************** ************** RECTANGLE EXTENSIONS OBJECT ************** **********************************************************/ var RectangleExtensions = { GetIntersectionDepth: function (rectA, rectB) { var halfWidthA, halfWidthB, halfHeightA, halfHeightB, centerA, centerB, distanceX, distanceY, minDistanceX, minDistanceY, depthX, depthY; // Calculate Half sizes halfWidthA = rectA.Width / 2.0; halfWidthB = rectB.Width / 2.0; halfHeightA = rectA.Height / 2.0; halfHeightB = rectB.Height / 2.0; // Calculate centers centerA = {'x': rectA.left + halfWidthA, 'y': rectA.top + halfHeightA}; centerB = {'x': rectB.left + halfWidthB, 'y': rectB.top + halfHeightB}; distanceX = centerA.x - centerB.x; distanceY = centerA.y - centerB.y; minDistanceX = halfWidthA + halfWidthB; minDistanceY = halfHeightA + halfHeightB; // If we are not intersecting, return (0, 0) if (Math.abs(distanceX) >= minDistanceX || Math.abs(distanceY) >= minDistanceY) return {'x': 0, 'y': 0}; // Calculate and return intersection depths depthX = distanceX > 0 ? minDistanceX - distanceX : -minDistanceX - distanceX; depthY = distanceY > 0 ? minDistanceY - distanceY : -minDistanceY - distanceY; return {'x': depthX, 'y': depthY}; } }; /******************************************** ************** TEXTURE CLASS ************** ********************************************/ function Texture (pos, size, fillColor) { this.pos = pos; this.size = size; this.fillColor = fillColor; } Texture.prototype.update = function (pos) { this.pos = pos; }; Texture.prototype.draw = function () { game.context.save(); game.context.beginPath(); game.context.rect(this.pos.x, this.pos.y, this.size.width, this.size.height); game.context.fillStyle = this.fillColor; game.context.fill(); game.context.closePath(); game.context.restore(); }; /********************************************** ************** LEVEL MAP ARRAY ************** **********************************************/ var LevelMap = [ ['w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w'], ['w','w','w','-','-','-','-','-','-','-','w','w','-','-','w','w','-','-','w','w','w','w','w','w','w','-','w','-','s','w'], ['w','w','-','-','-','-','-','-','-','-','-','-','-','-','w','w','-','-','-','w','w','w','w','w','w','-','w','-','-','w'], ['w','-','-','-','-','-','-','-','-','-','w','w','-','-','w','w','-','-','-','w','w','w','w','w','w','-','w','-','-','w'], ['w','-','-','-','-','-','-','-','-','-','w','w','-','-','w','w','w','w','-','w','w','w','w','w','w','-','w','w','-','w'], ['w','w','w','-','-','w','w','w','w','w','w','w','w','w','w','w','w','w','-','w','w','w','w','w','w','-','w','w','-','w'], ['w','w','w','-','-','w','w','w','w','w','w','w','-','-','-','-','w','w','-','w','w','w','w','w','w','-','w','w','-','w'], ['w','w','w','-','-','-','-','-','-','-','-','-','-','-','-','-','w','w','-','w','w','w','-','-','-','-','w','w','-','w'], ['w','-','-','-','-','w','w','w','w','w','w','-','-','-','-','-','w','w','-','w','w','w','-','-','-','-','-','w','-','w'], ['w','w','-','-','w','w','w','w','w','w','w','w','-','-','-','-','w','w','-','w','w','w','w','w','w','w','-','w','-','w'], ['w','w','-','-','w','w','w','w','w','w','w','w','-','-','-','-','w','w','-','w','w','w','w','w','w','w','-','w','-','w'], ['w','w','-','-','w','w','w','w','w','w','w','w','-','-','-','-','w','w','-','w','w','-','-','-','w','w','-','w','-','w'], ['w','w','-','-','-','w','w','w','w','w','w','w','-','-','-','-','-','-','-','w','w','-','-','-','w','w','-','w','-','w'], ['w','w','-','-','-','w','w','w','w','w','w','w','-','-','-','w','w','w','w','w','w','-','-','-','w','w','-','-','-','w'], ['w','-','-','-','-','w','w','w','w','w','w','w','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','-','w'], ['w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w','w'] ]; /***************************************** ************** TILE CLASS ************** *****************************************/ function Tile (pos, tileBG, collision) { this.pos = pos; this.size = {'width': 25, 'height': 25}; this.collision = collision; this.texture = new Texture(this.pos, this.size, tileBG); } Tile.prototype.draw = function () { this.texture.draw(); }; /******************************************* ************** PLAYER CLASS ************** *******************************************/ function Player (level) { this.level = level; this.pos = {'x': 100, 'y': 100}; this.size = {'width': 25, 'height': 25}; this.velocity = {'x': 0, 'y': 0}; // Constants for controling movement this.MoveAcceleration = 500.0; this.MaxMoveSpeed = 5; this.GroundDragFactor = 0.38; this.movementX = 0; this.movementY = 0; this.texture = new Texture(this.pos, this.size, '#FFFFFF'); } Player.prototype.Clamp = function (value, min, max) { return (value < min) ? min : ((value > max) ? max : value); }; Player.prototype.SetPos = function (pos) { this.pos = pos; }; Player.prototype.GetInput = function () { // Horizontal Movement if (Input.Keys.GetKey(Input.Keys.A)) { this.movementX = -1.0; } else if (Input.Keys.GetKey(Input.Keys.D)) { this.movementX = 1.0; } // Vertical Movement if (Input.Keys.GetKey(Input.Keys.W)) { this.movementY = -1.0; } else if (Input.Keys.GetKey(Input.Keys.S)) { this.movementY = 1.0; } }; Player.prototype.HandleCollision = function (gameTime) { // Set local variables var i, j, bottom, localBoundsRect, tileSize, topTile, leftTile, bottomTile, rightTile, tile, tileRect, depth, absDepthX, abdDepthY; // Set bouding box for our player localBoundsRect = {'left': this.pos.x, 'top': this.pos.y, 'right': this.pos.x + this.size.width, 'bottom': this.pos.y + this.size.height, 'Width': this.size.width, 'Height': this.size.height}; // Set the tile size (hard coded) tileSize = {'width': 25, 'height': 25}; // Get the closest tiles topTile = parseInt(Math.floor(parseFloat(localBoundsRect.top / tileSize.height)), 10); leftTile = parseInt(Math.floor(parseFloat(localBoundsRect.left / tileSize.width)), 10); bottomTile = parseInt(Math.ceil(parseFloat(localBoundsRect.bottom / tileSize.height)) - 1, 10); rightTile = parseInt(Math.ceil(parseFloat(localBoundsRect.right / tileSize.width)) - 1, 10); // Loop through each potentially colliding tile for (i = topTile; i <= bottomTile; ++i) { for (j = leftTile; j <= rightTile; ++j) { // Put the tile we're looping on in a variable for multiple use tile = this.level.tiles[i][j]; // Create a bounding box for our tile tileRect = {'left': tile.pos.x, 'top': tile.pos.y, 'right': tile.pos.x + tileSize.width, 'bottom': tile.pos.y + tileSize.height, 'Width': tileSize.width, 'Height': tileSize.height}; // Check if this tile is collidable. Else, check if it's the exit tile if (tile.collision === 'IMPASSABLE') { // Now we know that this tile is being collided with, we'll figure out // the axis of least separation and push the player out along that axis // Get the intersection depths between the player and this tile depth = RectangleExtensions.GetIntersectionDepth(localBoundsRect, tileRect); // Only continue if depth != 0 if (depth.x !== 0 && depth.y !== 0) { absDepthX = Math.abs(depth.x); absDepthY = Math.abs(depth.y); // If the Y depth is shallower than the X depth, correct player's y position and set y velocity to 0. // If the X depth is shallower, correct player's x position and set x velocity to 0. // Else, we've hit a corner (both intersection depths are equal). Correct both axes and set velocity to 0 if (absDepthY < absDepthX) { this.pos.y += depth.y; this.velocity.y = 0; } else if (absDepthX < absDepthY) { this.pos.x += depth.x; this.velocity.x = 0; } else { this.pos = {'x': this.pos.x + depth.x, 'y': this.pos.y + depth.y}; } } } } } }; Player.prototype.ApplyPhysics = function (gameTime) { this.velocity.x += this.movementX * this.MoveAcceleration; this.velocity.y += this.movementY * this.MoveAcceleration; // Apply pseudo-drag horizontally this.velocity.x *= this.GroundDragFactor; this.velocity.y *= this.GroundDragFactor; // Prevent player from going faster than top speed this.velocity.x = this.Clamp(this.velocity.x, -this.MaxMoveSpeed, this.MaxMoveSpeed); this.velocity.y = this.Clamp(this.velocity.y, -this.MaxMoveSpeed, this.MaxMoveSpeed); // Apply velocity to player this.pos.x += Math.round(this.velocity.x); this.pos.y += Math.round(this.velocity.y); // Handle Collisions this.HandleCollision(); }; Player.prototype.update = function () { this.GetInput(); this.ApplyPhysics(); // Update the player this.texture.update(this.pos); // Clear inputs this.movementX = 0; this.movementY = 0; }; Player.prototype.draw = function () { // Draw player texture this.texture.draw(); }; /****************************************** ************** LEVEL CLASS ************** ******************************************/ function Level () { this.bgPos = {'x': 0, 'y': 0}; this.bgSize = {'width': game.CANVAS_WIDTH, 'height': game.CANVAS_HEIGHT}; this.bgTexture = new Texture(this.bgPos, this.bgSize, '#222222'); this.player = new Player(this); this.tiles = []; this.LoadTiles(); } Level.prototype.LoadTiles = function () { var i, j, x, y, map, tileBG, collision; // Store our map in a local variable map = LevelMap; // Loop through the map and add a new Tile to the array for (i = 0; i < map.length; i++) { // Create a row in our tiles array this.tiles[i] = []; // Loop through each column of the row for (j = 0; j < map[i].length; j++) { // Calcluate the x,y coordinates based on array indexes x = j * 25; y = i * 25; // Based on the character, determine properties of this tile switch (map[i][j]) { case 'w': tileBG = 'rgb(' + Math.floor((Math.random() * 150) + 1) + ', ' + Math.floor((Math.random() * 150) + 1) + ', ' + Math.floor((Math.random() * 150) + 1) + ')'; collision = 'IMPASSABLE'; break; case 's': tileBG = ''; // transparent collision = 'PASSABLE'; this.player.SetPos({'x': x, 'y': y}); break; case '-': tileBG = ''; // transparent collision = 'PASSABLE'; break; } // Add this tile to the array this.tiles[i][j] = new Tile({'x': x, 'y': y}, tileBG, collision); } } }; Level.prototype.update = function () { this.player.update(); }; Level.prototype.draw = function () { var i, j; // Draw Background this.bgTexture.draw(); // Draw tiles for (i = 0; i < this.tiles.length; i++) { for (j = 0; j < this.tiles[i].length; j++) { this.tiles[i][j].draw(); } } // Draw Player this.player.draw(); }; /****************************************** ************** GAME OBJECT ************** ******************************************/ var game = { init: function () { this.isRunning = true; this.FPS = 30; this.CANVAS_WIDTH = 750; this.CANVAS_HEIGHT = 400; this.canvas = $('#gameArea')[0]; this.context = this.canvas.getContext('2d'); this.level = new Level(); // Set up the canvas $('#wrapper').width(this.CANVAS_WIDTH).height(this.CANVAS_HEIGHT); game.canvas.width = this.CANVAS_WIDTH; game.canvas.height = this.CANVAS_HEIGHT; // Create input event listeners window.addEventListener('keyup', function (e) { Input.Keys.onKeyUp(e); }, false); window.addEventListener('keydown', function (e) { Input.Keys.onKeyDown(e); }, false); // Game Loop game.run(); }, run: function () { setInterval(function () { if (game.isRunning) { game.update(); game.draw(); } }, 1000/game.FPS); }, update: function () { game.level.update(); }, draw: function () { game.context.clearRect(0, 0, this.CANVAS_WIDTH, this.CANVAS_HEIGHT); game.level.draw(); } }; // Entry point for the game $(function () { game.init(); }); </script> </head> <body> <div id="wrapper"> <div id="heading">HTML5</div> <canvas id="gameArea"></canvas> </div> </body> </html>
  7. Hi everyone!   Simple question: I'm wondering how to handle armor or appearance upgrades in-game specifically relating to the sprite's appearance. Say the player gets a new helmet! How do I reflect that on the character? What if I have 50+ different combinations of armor/clothing for each type of character in the game? Would I need to have a separate sprite image for each combination? Or does the character sprite have a base model and you overlay images onto that? What about animation for shirts or pants or weapons... Gosh, this seems quite overwhelming.   Anyway, hopefully I've gotten my question across in an understandable way. I'm sure that there's an easy solution for this but I can't imagine what that might be.   Thanks for any advice or help! Scott.
  8. SFML Frame Per Second feedback

    [quote name='BeerNutts' timestamp='1351703200' post='4995879'] What is the cpu % if you don't make the FPS call in your loop? [/quote] I believe it's around 3% or so..
  9. SFML Frame Per Second feedback

    [quote name='rip-off' timestamp='1351699688' post='4995852'] [quote] I'm bascially just wondering if there's any way to optimize the performance as it sometimes eats up more CPU than I would have thought it should [/quote] What amount of CPU usage were you expecting, and why? Generally, it is a good thing that no one tries to pre-emptively throttle your program - that way when you need to use the maximum available system resources you can (more or less). The OS is usually happy for your game to soak up any remaining CPU time. If your game knows that it doesn't need to use all the CPU, it can tell the OS this by issuing blocking calls. I'm not overly familar with SFML, but some places to start include: [list] [*]SetFramerateLimit - does reducing this value to 60 change anything? [*]Have you tried UseVerticalSync()? [/list] [/quote] Reducing the value to 60 doesn't change much in terms of CPU usage and I have used vertical sync with the same result. The amount of CPU it's using is a similar amount to the amount that World of Warcraft runs on the same computer!! My CPU meter basically goes from 0% to 12-17%. Anyway, if it's not something to worry too much about then I won't. I'm still new to low level programming and am trying to learn best practices. thanks for you feedback.
  10. Hi everyone, I wanted to add an FPS visual in my game so I converted a script I saw in the XNA 3.0 book to SFML. I'm bascially just wondering if there's any way to optimize the performance as it sometimes eats up more CPU than I would have thought it should. Here's the code: [b]Main.cpp[/b] [source lang="cpp"]#include <SFML/Graphics.hpp> #include <iostream> #include "FPS.h" #define ScreenWidth 500 #define ScreenHeight 300 int main() { sf::RenderWindow window(sf::VideoMode(ScreenWidth, ScreenHeight, 32), "SFML Template"); window.SetFramerateLimit(200); FPS fps; fps.Initialize(); while(window.IsOpened()) { sf::Event Event; while(window.GetEvent(Event)) { if(Event.Type == sf::Event::Closed || Event.Key.Code == sf::Key::Escape) window.Close(); } window.Clear(); // Draw Game Components fps.Draw(window, (ScreenWidth / 2) - 25); window.Display(); } return 0; }[/source] [b]FPS.h[/b] [source lang="cpp"]#pragma once #include <SFML/Graphics.hpp> #include <iostream> #include <sstream> class FPS { private: float fps; float updateInterval; float timeSinceLastUpdate; float frameCount; sf::String string; std::stringstream ss; public: FPS(void); ~FPS(void); void Initialize(); void Update(sf::RenderWindow &window); void Draw(sf::RenderWindow &window, float cameraX); }; [/source] [b]FPS.cpp[/b] [source lang="cpp"]#include "FPS.h" FPS::FPS(void) { } FPS::~FPS(void) { } void FPS::Initialize() { float updateInterval = 1.0f; float timeSinceLastUpdate = 0.0f; float frameCount = 0.0f; string.SetSize(12); string.SetColor(sf::Color::White); } void FPS::Update(sf::RenderWindow &window) { } void FPS::Draw(sf::RenderWindow &window, float cameraX) { frameCount++; timeSinceLastUpdate = window.GetFrameTime(); if(timeSinceLastUpdate > updateInterval){ fps = frameCount / timeSinceLastUpdate; ss << "FPS: " << fps; string.SetText(ss.str()); string.SetPosition(cameraX, 20); window.Draw(string); ss.str(""); frameCount = 0; timeSinceLastUpdate -= updateInterval; } } [/source]
  11. Games with menus

    Thank you both for your insight! This is excalty what I'm looking for!
  12. Hi everyone, Just a general question. Are game menus (Start menu, pause menu, etc) typically put into their own class where all the drawing and logic would take place or are the menus all programmed in the main game logic class? A lot of the tutorials and books I'm reading all have the start menu in the main game class however these are very simple menus (An image that says press enter to start game). I want to make complex menus with character stat selection and pause menus with options. Surely menus with so much logic wouldn't all be crammed into the main game class...? Thanks, Scott