Search the Community

Showing results for tags 'movement'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 77 results

  1. I've published the first version of my grid-based physics plugin for Phaser 3 (a port and improvement from the Phaser 2 version). It makes it easy to create a game where the movement is restricted to tiles or a grid and comes with helpful built-in features such as a system for pushing objects or walking on one-direction tiles. I'm making the plugin to use it in a RPG I'm developing but it's suitable for everything from Sokoban-like games to Rouge-like. However, the development of the plugin will be focused to add features I need and fixing bugs that affect my game. Let me know if you use the plugin and feel that stuff is missing or if you run into issues. I won't be adding stuff just for the sake of the plugin unless there is a demand. DEMO: (Phaser 2 atm, but it'll give you an idea of what the plugin is about) Github:
  2. Trying to implement "moveToPointer"

    Hi Guys, so Phaser 2 had a method, game.physics.arcade.moveToPointer() which moved a sprite with a given velocity towards the cursor. It seems like this has been replaced in Phaser 3 by a "moveTo()" method in ArcadePhysics, so I'm trying to reimplement it myself. I create a spriteGroup: this.projectiles ={collideWorldBounds: true}) and then later create & attempt to fire a projectile from within a "fireProjectile" method: this.firePlayerProjectile = function(projectileType){ let projectile = this.projectiles.getFirstDead(true, this.player.sprite.x-16, this.player.sprite.y-32, projectileType); this.scene.physics.moveTo(projectile, {x: this.scene.input.x + this.scene.cameras.main.scrollX, y: this.scene.input.y + this.scene.cameras.main.scrollY}, 750); } This does create the projectile sprite in the correct location, but rather than then travelling towards the target location, it just sorta of flashes and disappears after a second. Can anyone tell what I might be doing wrong? How do I get the projectile to move to a given location (and beyond) at a constant velocity? Thanks, Sam
  3. I have been working on the starter project for Phaser 3 and I have an issue with the character moving to the right slowly. It doesn't seem to be related to the velocity applied during the update phase. I removed all of the controls and physics stuff and the character just accelerates faster towards the right side of the screen. It doesn't seem to be related to the ground either. Even when the character is in the air, it still moves to the right. I'm running from a flask server and I'm getting phaser through bower. Thanks for any help!
  4. Hi, I try to use a Camera with a built-in movement (WASD keys). Default collision system allows to climb on small enough objects. However, if I look directly down and move forward to climb on the same mesh - it's impossible. PG - I think this is because camera.keysUp = [87] actually is not for "go forward", but for "go where your camera looks". That means that while looking down - key W tries to go through the ground. So power pushing me down is much more than needed to go up. This disallows me to move over almost any size of objects. Is there a switch to prevent moving Camera Up/Down with WS keys (or at least ignore camera's Y rotation when calculating a movement direction) ? If not - what else can I do? I could create additional JavaScript keys listeners for movement, but built-in way is so short and easy to use, I would like to keep it. Thanks!
  5. Move sprite according to angle

    Hi, I've been trying to figure out how to move a sprite in the direction it is facing. I was originally going to use the p2js "thrust" function, but it caused a small jitter with the camera. I then tried to use the Arcade "velocityFromAngle", but it was not accurate enough. Here is the code I have playerBoat.prototype.update = function () { if(wasd.up.isDown ) this.speed += 2; else this.speed -=2; if(this.speed > 0){ //MATH } if(wasd.left.isDown && this.speed > 0){ this.angle -= 1; } else if(wasd.right.isDown && this.speed > 0){ this.angle += 1; } As someone who was never too strong in math, I am a little bit confused as to how to relate the angle and speed to do what I'm trying to do. I'm assuming it's something with vectors, but I could use some direction. Thanks in advance!
  6. I've been prototyping a local co-op game that involves multiple players moving around on the same screen. Where my trouble has come, is with inputs and handling multiple key presses and movement. I've tried using the action manager to apply forces, impulses, or setting linear velocity on key down, but all of them seem to feel very buggy, especially when trying to press multiple keys. A sample of my code looks like the following: scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) { console.log(evt.sourceEvent.key); var velocity = player.physicsImpostor.getLinearVelocity(); if (evt.sourceEvent.key == "w" || evt.sourceEvent.key == "W") { //player.applyImpulse(new BABYLON.Vector3(0, 0, 10), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(0, 0, 100), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(velocity.x, velocity.y, 20)); } if (evt.sourceEvent.key == 'a' || evt.sourceEvent.key == 'A') { //player.applyImpulse(new BABYLON.Vector3(-10, 0, 0), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(-100,0,0), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(-20, velocity.y, velocity.z)); } if (evt.sourceEvent.key == 's' || evt.sourceEvent.key == 'S') { //player.applyImpulse(new BABYLON.Vector3(0, 0, -10), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(0, 0, -100), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(velocity.x, velocity.y, -20)); } if (evt.sourceEvent.key == 'd' || evt.sourceEvent.key == 'D') { //player.applyImpulse(new BABYLON.Vector3(10, 0, 0), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(100, 0, 0), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(20, velocity.y, velocity.z)); } })); scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) { console.log(evt.sourceEvent.key + " up"); var velocity = player.physicsImpostor.getLinearVelocity(); if (evt.sourceEvent.key == "w" || evt.sourceEvent.key == "W" || evt.sourceEvent.key == 's' || evt.sourceEvent.key == 'S') { player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(velocity.x, velocity.y, 0)); } else if (evt.sourceEvent.key == 'a' || evt.sourceEvent.key == 'A' || evt.sourceEvent.key == 'd' || evt.sourceEvent.key == 'D') { player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(0, velocity.y, velocity.z)); } })); My question is, what is the best practice to handle movement of a simple object (I'm currently just using a cube), and have it work with multiple key presses? Keep in mind this will be repeated for multiple players, so I'd like to to be as modular as possible
  7. The title might be a bit misleading but that was the best I could come up with. So now to the main part. I am having a hard time making the controls for a game which was inspired by Ball Wars By Brackeys and a classic of game of Capture the Flag. Basically you either shoot and kill your opponent or be the first one to capture their crystal by standing on top of it. The controls are what I could decipher from the video. But I am having a lot of difficulty aiming because of the way I implemented the game by seeing the video. Also I want both the players to play from the same keyboard as of now. So any help regarding how to implement the aiming would help me out a lot. The controls are WASD to move and T to Shoot and Y to Jump for Player 2 and Arrow Keys to move Space to jump and Ctrl to shoot for Player 1. The code is available on Github: The project name is: ballBlasters Any help would be gladly appreciated.
  8. Hi guys, I finished the movement algorithm and now I have questions about camera, how can I make camera to follow character when character moving with animation? now my camera is not following, it just looking at object: is it a correct way to create another animation for camera?
  9. MOBA character movement

    What I want to achieve: as long as the mouse button is pressed, character follows it when a player releases mouse button character moves to the position, where the cursor was during release when a player clicks the mouse button character moves to that position of cursor using pathfinding on longer distance The first two points work suprisingly well with the use of arcade physics. I keep setting velocity each time mouse position is changed and store the last mouse position, so it can be used when the mouse button is released. I can drag character around the map this way, he bumps into obstacles and slides around them when I manipulate the mouse, this is the expected behavior and I am very happy about it. Because the movement is free and doesn't snap to grid, I have a hard time implementing pathfinding. When I use navmesh, character keeps getting stuck on the edges, because setting velocity isn't very accurate. When a mouse button is pressed, my pathfinding algorithm stores a path in an array and since I want the fastest path it will most likely lead close to a wall/obstacle, and I come to this example problem: Next destination on my path is x:200, y:400, my character has a velocity set, and one frame he is at 199:398, but the next frame he will be at 201:402, so I have to choose when I want it to count he reached the destination, sometimes that one pixel difference from what was expected leads to him being stuck at the corner, because arcade physics will block it. My two ideas are: force it to always stop at the exact location, but this looks wierd, it shifts a pixel every time it reaches the end of a path, the other idea is to turn off arcade physics when I am using pathfinding, but I am afraid this will cause more problems. I am not exactly sure how to go about it.
  10. Problem with Zelda movement?

    Hi all. For some reason my Link character from Legend of Zelda won't quit animating & switch back to Idle animation after letting go of the movement keys either left or right arrows. Also, the animation timing is off from the movement speed. What am I doing wrong here? How to fix? Legend of Zelda demo :: Legend of Zelda demo code :: view-source: be sure to copy ALL of the above line INCLUDING the 'view-source:' into your web browser Lines 258 - 408, SPECIFICALLY, lines : 340 - 406 are where this bug takes place. Thank you for helping! <3 ~M
  11. I'm still new to Phaser and coding in general so I apologize if this doesn't make sense. I have player gravity and bounce set to 0 and movement velocity cranked up so movement seems instant. I'm looking to make it so that once the player hits a certain point on the x axis it stops, then the movement key must be pressed again to continue in either direction until it hits another one of those points, and so on. One idea I had was to populate the screen with vertical immovable bars with collision spread out evenly, but I don't know how to make it so that once the player hits them and stops their momentum they can then proceed through them at the press of the movement key (or if thats even possible). I feel like its more likely that I'd be able to set a coordinate for movement to stop, but again I don't know if thats possible either. Any help would be appreciated!
  12. Physics Movement

    What is the BEST or PREFERRED way to move your character with physics so it should respect the surface walking on ... If I use mesh.imposter.setLinearVelocity(moveVector) it is NOWHERE as precise when moving diagonally using something like: mesh.position.addInPlace(moveVector)... I was having a problem with the direction and moving EXACTLY forward from what the character is currently facing... And when that angle was more like 0, 45, 90 etc... it worked good with setLinearVelocity... But if was point at something like a 30 degree angle it would NOT MOVE EXACTLY forward... but I I use that same moveVector and ADD TO my current position (so using translation to move and not setting the physics linear velocity) it moves PERFECT... All Angles of rotation are then respected... what ever angle I am at and I res the up arrow key... It goes exactly forward... Now is there something wrong with setLinearVelocity or is it just not PRESICE enough to handle angles in between 45 degrees ??? PROS AND CONS from what I see. Using mesh.position to move a character with physics state enabled (mesh.checkCollision = false ... Dunno if that matters but I thought if we are using physics collision we should turn off mesh.checkCollision as that is for camera collision... I think) =================================================================== PROS: 1... Exact precise movement 2... Respects collision with other objects that have a physics state... so can walk up ramps and such 3... I image a bit faster just moving the position and letting the physics engine account for that actual 'Ending' Position... I guess that why I can walk up ramps based on just horizontal and vertical inputs. CONS: 1... No imposter.getLinearVelocity values that I was using to determine is falling (isFalling = mesh.imposter.getLinearVelocity() < 0.1) but can be switched to just movement vector I guess... Dunno 2... Gotta change how I apply gravity when jumping or falling from something ==================================================================== Using mesh.physicsImposter.setLinearVelocity to move a character with physics state enabled (mesh.checkCollision = false ... Dunno if that matters but I thought if we are using physics collision we should turn off mesh.checkCollision as that is for camera collision... I think) PROS: 1... Gravity code works from what I got using imposter.getKinearVelocity CONS: 1... Movement (at least for me) seems what to imprecise with angle not quite 45 degrees in between (say I'm point at 30 degrees and press forward does not go exactly that way... at least for me it does not) So if you were making a THIRD PERSON CONTROLLER for your REAL GAME (not just a quick snippet in a playground that moves you around with something like mesh.position.z += 0.1... but making a real game) What do use use to moving your guy around respecting physics and what not... being to move and run and jump and what not... A full character controller... What do you use for the actual movement of a game object with physics state enabled ??? mesh.position or mesh.physicsImposter.setLinearVelocity ??? Or am I way off and it should totally be something else Anyways... Pinging @Deltakosh and @davrousand @Sebavan and @JCPalmer (who looks like h changed his icon, I hope that him) and @adam and of course 'Wingy' @Wingnut... Yep... I'm asking the whole crew... What would you do when making a real game ???
  13. Sprite Movement

    Hey Guys, I'm currently moving my camera around a series of sprites but the movement is painful to look at and jerky when moving the sprites and especially with higher speeds, is there anything you can do to fix/help the lag/poor performance as it isn't really usable as a build in this current state. I also as @Wingnut said have the issue that the transparent background is still clickable. Here is my current playground: @Deltakosh @Wingnut @JohnK Any incites Guys?
  14. How to make complex player movement

    I am making a rpg that will have skills with complex movement like if I use my A skill my player will jump and then dash diagonally back to the ground. My problem is not knowing how to achieve this. I tried with making it move to the sky first and then coming back down but they combine and make him only move diagonally. My guess is using timers for it but I don't know where to start. Any help would be appreciates, even if it's not code, just a step by step on how can I accomplish this, I can figure something out later.
  15. When make a game and NOT using the default First person view type camera movement... When you actually have to move a 3rd person view of a player or actor around... Using mesh.moveWithCollisions or using physics imposter set linear velocity ??? How are you to handle things like Jumping using each one these types of movement ??? If using physics for all movement, what is the overhead of adding to physics state to every object in the would that your= should NOT pass thru ??? And does anybody know what up with the way mesh.moveWithCollisions auto raise and keep raised the mesh from the ground... nearly 2 units... There has to be some rhyme or reason for that... Right ??? Anyways... Any help soon these questions will better help me make default movement systems for BabylonJS Toolkit Made Games And @Deltakosh and @Sebavan .. As always... I would luv to hear what you think about this stuff
  16. I wanted to know how to recreate the mouse movement effect I have found in an online example I am trying to recreate, the example is found here: Currently I get Jerky movements and fast rotation, I'm looking for infinite gradual scrolling effect which increases depending on mouse position, this is what im using for my mouse movement are there any alternatives or changes I can make to fix this? var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed);
  17. Camera and Sprite

    I have been working tirelessly with this and really struggling to get anywhere, if anyone can offer some form of assistance I would be greatly appreciative. I have essentially set up a reel of characters (staff) as sprites organised by co'ords in three circles, 12 characters per circle, around the camera set at (0,0,0), (Radius of circles are 1.5/1.45/1.4 I have a scene built currently which is super buggy in movement as well. I need it to when the mouse hovers on the left or right side of the screen to rotate the camera continuously scrolling through the images on loop (Cant get working past following the mouse - no loop - no smooth movement as mouse movement on y axis also rotates the camera. This is my mouse movement code: var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); The second main issue i'm having is that the sprites keep disappearing when rotating the camera, I'm trying to create a constant panable image reel from inside to view members of staff, there is an example i'm trying to follow and recreate found here: If anyone could tell me how to solve me mouse hover to move issue (with infinite looping) or a fix for the rendering of sprites issue it would be great! If anyone thinks they can help and needs any more code of any kinds just let me know and i''ll sort it! Thanks!
  18. Microlags with fast-moving objects

    When trying to move an object with high speed across the scene, I've noticed that the movement is not really smooth - there are some small but really annoying glitches. I've tried both manual moving and moving with TweenLite, the glitches persist in both cases. I'm using Pixi.js 4.5.3 This is how I create the Render, maybe something wrong with it: let canvas = <HTMLCanvasElement>document.getElementById("canvas"); this.renderer = PIXI.autoDetectRenderer(1500, 1200, { // ScenesManager.renderer = new PIXI.CanvasRenderer(800, 600, { view: canvas, antialias: false, roundPixels: false, }); this.renderer.backgroundColor = 0x000000; document.body.appendChild(this.renderer.view); And this is my tween: let wall:PIXI.Sprite = PIXI.Sprite.fromFrame("1.png"); this.addChild(wall); wall.position = new PIXI.Point(4*64, 2*64);, 15, { x: 99*64, y: 2*64, ease: Linear.easeNone}); And I also made the demo (see the attachment) I would really appreciate any help or ideas on what can cause such microlags, cause I've spent many hours trying to sort this out. The number of objects on scene doesn’t really matter, there are lags even on small test scene with just 1 moving object. Any thoughts on what's happening?
  19. Hey guys, I'm very new to babylon JS and I've a problem with understanding how to add a mesh to the cursors movement. Here is an example: I've created a playgroud: The mesh is changing its size and isn't always in front off all other meshes as shown in the exampel (matterport). Can somebody give me some light? Thanks in advance Benji
  20. Would it be possible to create a BabylonJS scene within the context of a NodeJS server simply to recreate the environment of a player and verify valid movement/collisions? The BabylonJS scene on the server would obviously not need to paint anything anywhere, but would simply need to calculate mesh positions/collisions/etc.
  21. Another 2.4 to 3.0 issue. I have assigned W, A, S, D to a camera for movement ( ). In my app I need to click before being able to use movement controls. I think I duplicated the issue in the playground linked, but it also seems like it is a focus issue, but I don't have a 2.4 playground to compare it against (this appears to happen in 2.5 also). Just to be clear, in my app, using 2.4, I can immediately press movement controls (W, A, S, or D) and move, but now with 3.0 I need to click before this is possible. Thank you, amorgan
  22. I am creating a script that will move a box along the vector in front of the center of the camera: Apart from the textures not loading, why does this script seem to not process the collision of the box falling onto the larger box in BJS Playground? The box upon which the smaller box falls seems to flicker, then disappear entirely after the smaller box lands. It works fine on my server. Also, is there a more elegant way to accomplish this in BJS?
  23. I am creating a Pacman game in JavaScript and have ran into a problem. I am trying to implement the ghost's movement. On each loop, I record the Tile Position of the ghosts var ghostX = Math.round(ghost.x / map.tileWidth); var ghostY = Math.round(ghost.y / map.tileHeight); There are four possible directions in which a ghost can move var moves = [ { 'direction': 'left', 'position': map.getTileLeft(0, ghostX, ghostY).x, 'distance': Math.sqrt(Math.pow((map.getTileLeft(0, ghostX, ghostY).x - pacmanX), 2) + Math.pow((map.getTileLeft(0, ghostX, ghostY).y - pacmanY), 2)), 'available': levelState.pathLeftAvailable(ghostX, ghostY) }, { 'direction': 'right', 'position': map.getTileRight(0, ghostX, ghostY).x, 'distance': Math.sqrt(Math.pow((map.getTileRight(0, ghostX, ghostY).x - pacmanX), 2) + Math.pow((map.getTileRight(0, ghostX, ghostY).y - pacmanY), 2)), 'available': levelState.pathRightAvailable(ghostX, ghostY) }, { 'direction': 'up', 'position': map.getTileAbove(0, ghostX, ghostY).y, 'distance': Math.sqrt(Math.pow((map.getTileAbove(0, ghostX, ghostY).x - pacmanX), 2) + Math.pow((map.getTileAbove(0, ghostX, ghostY).y - pacmanY), 2)), 'available': levelState.pathUpAvailable(ghostX, ghostY) }, { 'direction': 'down', 'position': map.getTileBelow(0, ghostX, ghostY).y, 'distance': Math.sqrt(Math.pow((map.getTileBelow(0, ghostX, ghostY).x - pacmanX), 2) + Math.pow((map.getTileBelow(0, ghostX, ghostY).y - pacmanY), 2)), 'available': levelState.pathDownAvailable(ghostX, ghostY) } ]; As you can see, I thought the best data structure for this would be an array of objects. Each move has several properties including the name of the direction, how far the move will place the ghost from Pacman, and whether it's a legal move. To find the closest tile, you use the distance formula. This is the square root of the squares of the sums of the x and y coordinates. I then created two variables to represent the closest and furthest tiles. This is where I received the error message var closestTile = moves.filter(m => m.available).sort((a,b) => a.distance - b.distance)[0].direction; var furthestTile = moves.filter( m => m.available).sort((a,b) => b.distance - a.distance)[0].direction; I need to find only legal moves, so it was necessary to filter() the array to find only those moves. The arrays then needed to be sorted by their distance. The first such element will be the result of the variable. But it couldn't find the direction property. The movement function is finished out like this var ghostVelocity = levelState.getGhostVelocity();, wallLayer, function() { var ghostDirection; if (ghost.direction == 'up' || ghost.direction == 'down') { ghost.y += ghost.direction == 'up' ? 1 : -1; if (ghost.vulnerable) { ghostDirection = furthestTile; } else { if (ghost == redGhost) { ghostDirection = closestTile; } else { ghostDirection = Math.random() > 0.5 ? 'left' : 'right'; } } ghost.body.velocity.y = 0; ghost.body.velocity.x = ghostDirection == 'left' ? -ghostVelocity : ghostVelocity; } else if (ghost.direction == 'left' || ghost.direction == 'right') { ghost.x += ghost.direction == 'left' ? 1 : -1; if (ghost.vulnerable) { ghostDirection = furthestTile; } else { if (ghost == redGhost) { ghostDirection = closestTile; } else { ghostDirection = Math.random() > 0.5 ? 'up': 'down'; } } ghost.body.velocity.x = 0; ghost.body.velocity.y = ghostDirection == 'up' ? -ghostVelocity : ghostVelocity; } ghost.direction = ghostDirection; }, null, this); As you can see, I am setting the ghost's direction property based on the closest tile to pacman. For reference, here are the four functions that determine whether a direction is available. There doesn't seem to be a problem here. pathRightAvailable: function(x, y) { return [x, x + 1, x + 2].every(function(xPosition) { return !map.hasTile(xPosition, y, 0); }); }, pathLeftAvailable: function(x, y) { return [x, x - 1, x - 2].every(function(xPosition) { return !map.hasTile(xPosition, y, 0); }); }, pathUpAvailable: function(x,y) { return [y, y - 1, y - 2].every(function(yPosition) { return !map.hasTile(x, yPosition, 0); }); }, pathDownAvailable: function(x,y) { return [y, y + 1, y + 2].every(function(yPosition) { return !map.hasTile(x, yPosition, 0); }); }, I've been working on this problem for some time but have ran into trouble. Any help is greatly appreciated
  24. Obviously this isn't optimal. Was wondering if maybe I'm doing something wrong? I have a standard game loop that's managed by requestAnimationFrame(gameLoop); and within my gameloop I have a function that moves each enemy like so: enemy.position.y += 6 I don't really know what to do to keep my movement speed from varying so dramatically across different devices. Another issue that might be related, over time my sprite movement becomes gradually faster and choppier. This is the part that really really bothers me. Any help or insight would be deeply appreciated.