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
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 67 results

  1. 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 ???
  2. 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!
  3. 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?
  4. 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.
  5. 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
  6. 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);
  7. 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?
  8. 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!
  9. 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
  10. 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.
  11. 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
  12. 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?
  13. 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
  14. 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.
  15. Server sided movement

    Sup guys, I'm back and once again working on my side project now that school is out. I recently rewrote some of my server sided code, specifically the pieces that handle anti-cheat. One problem I ran into is my anti speed hack mechanism. Prior to my rewrite (which was more of a cleanup) the way I handled movement on the server was I allowed the client to move however it liked. It would then send its new position (after ever frame) to the server. The server would then check to see how far the client moved (based on its last position which is saved on the server) and made sure that the client didn't move more than a certain amount of pixels each frame. If it moved legally, then it's "last" position would be updated with the new position the client provided and the client legitimately moved. If it moved too fast, the clients old position is kept as its server position, ensuring that sure the client isn't speed hacking (at least on the server side, can't stop the client from moving anywhere really). Anyway, that's how the system works, and it works great, until I ran into the problem of different frame rates (at least I think that's what's causing the issue). After the rewrite of this system, clients are moving too fast to the server, and I think it could be because of slower fps'? Like Ill move right, but now instead of moving say 5 pixels per frame like the pre-rewrite code would detect, im getting 6, and 8 and 15 and other higher random numbers, as if the server was missing some calls. Regardless of the cause, I was wondering, how do people usually handle movement on servers. Am I going about this correctly? Any suggestions? What other ways can I verify a player isn't teleportating or speed hacking? Thanks.
  16. Hi, I am trying to move mesh relative to ArcRotateCamera alpha value. Basically it should move the same direction as mouse is moving (up, down, left, right) , works fine with 0 angle but different angles need to flip x/z and change their directions. What the best way to calculate direction vector from angle and 0 angle direction? Working example: (angle 0) Not working: (angle 55) I tried to rotate vector using: const matrix = BABYLON.Matrix.RotationAxis(BABYLON.Axis.Y, camera.alpha); const movement = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(x, 0, z), matrix);
  17. Hi guys, I'm having a hard time figuring out how to move a given object to the destination of a clicked mesh. Playground link (similar recreated scenario): As you can see, the first two actions (hovering mouse in/out effect) work fine with every tile, but the animating action seems to always extract the position of the last added tile. I'm suspecting it's because I'm overwriting the tile variable (and thus its position values) or something. I also suspect that using instances for the tiles might be a better option, since in the game they also just use 5 different materials that are loaded before-hand...but first things first. Thanks in advance for taking a look!
  18. Animating a tween with controls

    So I have a character (sprite) that whenever you press a key it'll move it along the y position and once it reaches the top, send it back down to the bottom. So I've been doing this game.input.keyboard.onDownCallback = function() { player.y -= game.height / 4 + 20 if (player.y < 0) { player.alignIn(laneRect_three, Phaser.CENTER); } }; I've been doing this. So basically, every key down move the player up and if it goes beyond the screen send it back down. So I want to add some nice animation to this. So instead of just jumping up, it kind of travels up so I've added a tween, currentPosFish = game.height / 4 + 20; game.add.tween(playerFish).to({ y: currentPosFish }, 1000, Phaser.Easing.Quadratic.InOut, true); But the thing with this is, it just sets it at the y position. How can I set a tween so it increments like what I was doing above?
  19. First of all here is my project, controls are WASD and mouse. I was wondering what is causing some kind of friction between the ground and a tank, try to press A or D for 5 seconds, it will not turn smoothly, I noticed that the glitch occurs when the tank is on X or Z axis (probably also on Y axis too but I didn't try). You can see that wheels are rotating propertly, there are no forces pushing the hull, just wheels are jointed to it. Any ideas?
  20. I'm developing point&click quest adventure (something like Machinarium) I have a background, for example, like on the bkg1.ipg I want to define some zone where the character can move. Example on bkg1-marked.jpg. Reaching the end of the red zone the character should stop. Also, it would be great to have ability to make it with some pathfinding like f.e. there are stairs on the background image and the character stays somewhere else on the "first floor". Player clicks on top of the stairs and the character goes there, according to the zone where he can walk Does Phaser have any tools for that?
  21. I'm currently building a two player platform-shooting game that supports controllers. Right now I have two separate move functions placed in the update that handles player movement. Here's the code: movePlayer1: function () { if (!player.alive) return ; //controller input if(this.pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)< -0.1){ this.player_1.body.velocity.x = -300; //move left'left'); } if(this.pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)>0.1){ this.player_1.body.velocity.x = 300; //move right'right'); } if(this.pad1.justPressed(Phaser.Gamepad.XBOX360_A)&& this.player_1.body.onFloor() ){ this.player_1.body.velocity.y = -999; //jump } this.player_1.weapon.fireAngle = -(90 + 90 * -this.pad1.axis(Phaser.Gamepad.XBOX360_STICK_RIGHT_X)); if(this.pad1.isDown(Phaser.Gamepad.XBOX360_RIGHT_TRIGGER)||this.pad1.justPressed(Phaser.Gamepad.XBOX360_RIGHT_BUMPER)) {; } }, movePlayer1: function () { //player 2 controller if(game.input.gamepad.supported && && game.input.gamepad.pad2.connected) { this.indicator2.animations.frame = 0; } else { this.indicator2.animations.frame = 1; } if(this.pad2.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)< -0.1){ this.player_2.body.velocity.x = -300;'left'); } if(this.pad2.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)>0.1){ this.player_2.body.velocity.x = 300;'right'); } if(this.pad2.justPressed(Phaser.Gamepad.XBOX360_A)&& this.player_2.body.onFloor() ){ this.player_2.body.velocity.y = -999; } this.player_2.weapon.fireAngle = -(90 + 90 * -this.pad1.axis(Phaser.Gamepad.XBOX360_STICK_RIGHT_X)); if(this.pad2.isDown(Phaser.Gamepad.XBOX360_RIGHT_TRIGGER)||this.pad2.justPressed(Phaser.Gamepad.XBOX360_RIGHT_BUMPER)){; } } , I feel that this isn't the best way to code for two player movement. What would you do differently?
  22. Hi all. I am trying to make a simple top-down, asteroids-like game, where movement is done through Phaser's arcade physics system. I find quite puzzling how angular movement works for it. I've followed a few tutorials, where I find the same issue. What is happening is, when my ship has an angle, thrusting or reversing is quite inconsistent. The ship appears to be "slipping" a bit in random directions, and does not always follow exactly the direction it's facing. The relevant create code is: player.body.maxVelocity.setTo(MAX_SPEED, MAX_SPEED); player.body.drag.setTo(DRAG, DRAG); whereas the relevant update code is: if (cursors.left.isDown) { player.body.angularVelocity = -ROTATION_SPEED; } else if (cursors.right.isDown) { player.body.angularVelocity = ROTATION_SPEED; } else { player.body.angularVelocity = 0; } if (cursors.up.isDown) { player.body.acceleration.x = Math.cos(player.rotation) * ACCELERATION; player.body.acceleration.y = Math.sin(player.rotation) * ACCELERATION; } else if (cursors.down.isDown) { player.body.acceleration.x = -Math.cos(player.rotation) * ACCELERATION; player.body.acceleration.y = -Math.sin(player.rotation) * ACCELERATION; } else { player.body.acceleration.setTo(0, 0); } I don't understand what could be causing this. Is the code just wrong (although I've seen this happening in all the tutorials)? Is it some rounding error? Am I just being crazy seeing this as wrong behavior? Is there any way to achieve the effect I am looking for (moving diagonally back and forth, on a straight line)? You can play around with this here as well.
  23. Which NPC gets to move first?

    My understanding of writing a game loop is that you have to loop through all the objects who need to react and update each loop. Looping though a collection of something usually implies an order of execution. When making a sports simulation game where all the players are NPCs, who gets to move first or last can have significant tactical advantages/disadvantages. In real life we move and act independently and in real time, but with a game loop the NPCs are at the mercy of the developer and the order they choose. So my question is, how do you decide which NPC gets to move/react first?
  24. When using CreateGroundFromHeightmap... When i use the camera to move around on ground IS VERY SLOW and VERY CHOPPY... AND LOWERS FPS down to 15fps. This is my code for creating Ground: // Parse scene native mesh and heightmap terrains var terrains:BABYLON.Mesh[] = this._scene.getMeshesByTags("[TERRAIN]"); if (terrains != null) { terrains.forEach((terrain)=>{ console.log(terrain.metadata); if (terrain.metadata != null && != null) { if ( { var tempBase64:string =; var terrainWidth:number =; var terrainLength:number =; var terrainHeight:number =; var minimumHeightLevel:number =; var maximumHeightLevel:number =; var groundTessellation:number =; var surfaceMaterialId:string =; var surfaceMaterialInst:BABYLON.Material = null; if (surfaceMaterialId != null && surfaceMaterialId !== "") { var material:BABYLON.Material = this._scene.getMaterialByID(surfaceMaterialId); surfaceMaterialInst = material; } BABYLON.MeshBuilder.CreateGroundFromHeightMap(( + "_Mesh"), tempBase64, { width: terrainWidth, height: terrainLength, subdivisions: groundTessellation, minHeight: minimumHeightLevel, maxHeight: maximumHeightLevel, updatable: true, onReady: (mesh:BABYLON.Mesh) => { mesh.parent = terrain; mesh.scaling = terrain.scaling.clone(); mesh.position.x -= terrain.position.x; mesh.position.z -= terrain.position.z; mesh.checkCollisions = true; if (surfaceMaterialInst != null) { mesh.material = surfaceMaterialInst; } } }, this._scene); } else { // TODO: Native Mesh - Note should try do all c# editor side } } }); } Any help would be awesome... as always