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
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 80 results

  1. I'm facing a frustrating conflict between client prediction and smooth movement that hopefully someone can help me out with. Every 15ms, the client gets a target from the mouse position and sends it off to the server and immediately simulates the effects. I'll call this the input tick. When an update is received from the server, the client compares its current state with the server's state + any unacknowledged input. They should usually match pretty closely and in my implementation they do. Because the details of that interaction are out of the scope Pixi, that's all I'll say about that. Just know that it currently works as expected. My issue is that when the client simulates the effects of each movement, it is moving across relatively large amounts of pixels very quickly, leading to understandably jittery movement. Each input tick, the player needs to move upwards of 8 pixels which seems small but is very noticeable if it isn't smooth. Here is my movement code... const distance = getDistance(this.local.pos.x, target.x, this.local.pos.y, target.y); this.local.direction = Math.atan2(distance.y, distance.x); /* speed = 8 */ this.local.pos.x += speed * Math.cos(this.local.direction); this.local.pos.y += speed * Math.sin(this.local.direction); The movement works as intended but in a jittery fashion. So I tried instead setting the player velocity like so... /* speed = 8 */ this.local.vel.x = speed * Math.cos(this.local.direction); this.local.vel.y = speed * Math.sin(this.local.direction); Then in Pixi's ticker, update the position like so... this.local.pos.x += this.local.vel.x * delta; this.local.pos.y += this.local.vel.y * delta; The delta here is the ticker's deltaTime which should make for smooth frame rate independent movement. And it does!😁 Except it throws the whole prediction-reconciliation aspect out of whack.😩 This is because now the player is moving with the animation loop and at a different speed due to the delta. I also tried lerping between the current position and the predicted position but I think that since the input tick rate is so low, the lerp function is only interpolating between a couple states. I tried doing this in the Pixi ticker loop... /* this is reset every 15ms with each input tick */ sincePrediction += app.ticker.elapsedMS; const smoothPeriod = 15; const delta = sincePrediction / smoothPeriod; manager.interpolate(_.clamp(delta, 1)); Then in the "manager.interpolate" method using the lerp function to interpolate between the previous and next state. But as I said, I think since 15ms is so low, lerping essentially just jumps to the next state here. So, I need a way to smoothly move to the new position up until the next prediction tick hits in 15ms. Sorry for the long question, I wanted to be thorough. Please let me know if any more info is needed. Any suggestions, advice, and help is appreciated
  2. kurhlaa

    Frame rate independent movement

    Hi, While it should be an easy question, I can't get a fixed movement speed. By "fixed" I mean frame rate independent. According to the manuals it could be done inside update function like this: function update(time, delta) { ... container.body.setVelocityX(speed * delta); ... } .. where "container" is a normal Phaser 3 container and "speed" is predefined. The problem is that I still get noticeably different speeds (for example, small vs big canvas). I check it by measuring a time to get from point A to point B. How can this be improved/fixed? Do I need to turn on something that is turned off by default?
  3. Sammdahamm

    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
  4. I think I may be using rotation incorrectly, but I'm not sure what I'm doing wrong. I'd ask a more specific question, but I truly have no idea how to narrow things down. So either I have a small stupid bug somewhere (could be...) or just a fundamental misunderstanding of something 3D, in which case I hope someone in this forum can point it out. I've got a multiplayer first person shooter where the game client sends its keystrokes and camera rotation to the server. This is used to rotate the player's mesh (which is just a cube with a red face for forward) and then move the player around. The player is not limited to moving along the ground, and can in fact just look up into the sky and press forward and fly around... so I guess they're a little more like space ships that can strafe than true first person shooter characters. Everything looked like it was working perfectly until I started comparing the client predicted positions to the server authoritative positions. Now I don't mean to drag anyone down the rabbit hole of netcode, and I strongly suspect my bug is something very basic relating to rotating a mesh and then trying to move it forward (or left, or right, or backwards). To rotate the camera, I'm just capturing mouse movement and multiplying by a mouseSensitivity input.onmousemove = (e) => { if (input.isPointerLocked) { camera.rotation.y += e.movementX * mouseSensitivity camera.rotation.x += e.movementY * mouseSensitivity } } I'm not sure if that is correct, but it looks and feels like a first person shooter. Every frame the client produces a command that looks like this: { forward: <Boolean> input.frameState.forward, backward: <Boolean> input.frameState.backward, left: <Boolean> input.frameState.left, right: <Boolean> input.frameState.right, rotationX: <Float32> camera.rotation.x, rotationY: <Float32> camera.rotation.y, rotationZ: <Float32> camera.rotation.z, delta: <Float32> deltaTime } This contains the state of the movement-related keys, and how long they've been held down (determinism note: holding 'W' for 0.187 seconds at speed 100 is a deterministic calculation which can be repeated by server and client to get the same result). It also contains the camera rotation, which I'm wondering if this correct..? I'd like to note that I've used this type of command structure in several games and that it is truly deterministic, but that I've never done this in 3D, so perhaps my error is just the rotation. The actual movement logic move(command) { // rotate the mesh to the same rotation as the camera mesh.rotation.x = command.rotationX mesh.rotation.y = command.rotationY mesh.rotation.z = command.rotationZ // unit vector of our movement let unit = BABYLON.Vector3.Zero() if (command.forward) { unit.z += 1 } if (command.backward) { unit.z -= 1 } if (command.left) { unit.x -= 1 } if (command.right) { unit.x += 1 } unit.normalize() // rotating the unit vector to the context of this entity let heading = mesh.getDirection(unit) // full vector, movement and magnitude let velocityCoef = speed * let velocity = heading.multiplyByFloats(velocityCoef, velocityCoef, velocityCoef) // move mesh.position.x += velocity.x mesh.position.y += velocity.y mesh.position.z += velocity.z let y = ground.getHeightAtCoordinates(mesh.position.x, mesh.position.z) // added a little padding to keep the cube off of the ground if (mesh.position.y < y + 1) { mesh.position.y = y + 1 } } So the mesh gets rotated instantly to the rotation specified in the command. The command's rotation is just the camera's rotation. Is this a mistake..? Is copying the values of the camera's rotation vector TO the player mesh rotation not in fact what I should be doing to get the player to face in the same direction as the camera? After that I do that unit vector stuff which encompasses what I consider to be first person-style movement with strafes: forward, backward, left, and right. The direction the mesh actually moves when all is said and done is calculated by mesh.getDirection, and then multiplied by the velocity. I worry about both the above ideas, because I've been combing this forum looking for babylon first person shooter examples, and they're all different from this and from one another. None of them copy the camera's rotation vector on the player, and none of them use getDirection. I see other people using matrices, local/global thingies, getfrontposition, and other properties of cameras. I feel like I'm missing something. And yet, my game SEEMS to work pretty well. It wasn't even until I started integrating the clientside prediciton layer that I started to notice that there were tiny inconsistencies with the positions of objects. When moving the mouse and rotating the camera, there are no clientside prediction errors. If the client predicts that rotationX is 0.1234, the server always agrees. This is no surprise because the camera rotation is in fact client authoritative. When hitting W A S D or the arrow keys in any combination without rotating the camera, there are no clientside prediction errors. The length of any key press is known. The client produces its own local version of the movement. The server then receives the identical command and moves the player by an identical amount. At some point the client will receive a snapshot of server data that contains the state of the gameworld after having factored in the aforementioned command, at which point the client will know if the movement it predicted a few frames ago lined up with the server authoritative movement. This is the actual hard part of clientside prediction and I'm pleased to say it is working and even supports collisions with the terrain mesh. It isn't even the case that it sometimes has a mild error -- it literally never has an error, and this should be expected given that there are no collisions between players, so there's never any unknown state to the client that could potentially cause it miscalculate a position. However when moving the mouse AND holding any of the movement keys, the predictions are incorrect every frame! Because of the way this engine is put together the position gets reconciled, and it recovers. But what is throwing off the deterministic calculation? A.) rotate a mesh to a specific XYZ, B.) find a forward vector C.) move a specific distance along that vector. I'm clearly not doing A->B->C otherwise it would be deterministic and there would be no error. I tried to recreate the movement code without a network, and got even more confused because setting the xyz of a mesh.rotation and then using mesh.getDirection to attempt to move it forward produced no turning in the BJS playground, the sphere just kept moving in one direction: There are two spheres, one remains stationary, the other one is moved 3 steps by 3 commands each of which rotates the mesh before moving it forward. It ends up going straight, which I don't understand given that it is being rotated and that it moves in the direction it is facing (or that was my intention). So perhaps therein lines the issue, though if this playground doesn't work how does my game even do anything at all... Here's a gif of what the camera controls and cube players look like (all of the visible cubes are bots that are sending random commands tho, so never-mind they crazy directions that they're facing).
  5. 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. 1. Testing a bridge and tiles will collidable borders. 2. Testing one-way collision (and I got stuck). 3. Turn-based mode with smooth animations. Multiple bodies getting pushed. DEMO (Use dat.gui to toggle turn-based mode, maximum number of bodies the player can push, velocity and more) Github:
  6. 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!
  7. 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!
  8. Shermz345

    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!
  9. 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
  10. 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.
  11. 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?
  12. kuuuuujo

    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.
  13. Mythros

    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
  14. MackeyK24

    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 ???
  15. 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!
  16. Mezzorio

    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?
  17. DaLancelotBruh

    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.
  18. 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
  19. 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);
  20. vdddslep

    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?
  21. Mezzorio

    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!
  22. 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
  23. 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.
  24. CaioMGA

    Stuck in the Corners

    Hi! I'm making a game where the player clicks or touches the screen and his avatar walks towards that point and stops. It works great without obstacles. With obstacles the player avatar get stuck in the corner. See gif below. I managed to fix it, but it feels hacky. When hero (player's avatar) collides with box (obstacle on screen) I move him towards his target EXAMPLE: if hero collides with left or right side of box and target is above him, I move hero up a bit function collisionHandler(){ //prevent hero avatar from getting stuck on corners kick = 0.4; if(box.x < hero.sprite.x && > hero.sprite.x){ hero.sprite.x += kick; //KICK right } else if(box.x > hero.sprite.x && < hero.sprite.x){ hero.sprite.x -= kick; //KICK left } if(box.y < hero.sprite.y && > hero.sprite.y){ hero.sprite.y += kick; //KICK down } else if(box.y > hero.sprite.y && < hero.sprite.y){ hero.sprite.y -= kick; //KICK up } } Is there a property of ARCADE physics I'm missing? Do I need my hacky code or there's a better way of fixing it? UPDATE: Github page: hero.js: function createHero(x, y, _speed){ return { "alive":true, "walking" : false, "speed":_speed, "direction" : {"x":1, "y":0}, "target":null, "sprite" : null, "createTarget": function(){ = createTarget(); }, "createAnimations" :function(){ this.sprite = game.add.sprite(x, y, 'hero_spritesheet', 10); this.sprite.anchor.setTo(0.5, 0.5); this.sprite.animations.add('walkH', [13, 14 ,15, 14], 8, true); this.sprite.animations.add('walkUp', [7, 8, 7, 9], 8, true); this.sprite.animations.add('walkDown', [10, 11, 10, 12], 8, true); this.sprite.animations.add('idle', [10], 8, false); this.sprite.animations.add('idleUp', [7], 8, false); this.sprite.animations.add('victory', [10, 16, 10, 16, 10, 16], 5, false); this.sprite.animations.add('death', [0, 1, 2, 3, 0, 1, 2, 3, 4, 5, 6], 10, false);'idle'); game.physics.enable(this.sprite, Phaser.Physics.ARCADE); this.sprite.body.collideWorldBounds = true; this.sprite.body.setCircle(16); this.sprite.body.bounce.set(0.05); }, "death" : function(){'death'); }, "walk" : function(direction){'walkH'); this.sprite.scale.x = direction; }, "walkUp" : function(){'walkUp'); }, "walkDown" : function(){'walkDown'); }, "stop" : function(){ this.walking = false;'idle'); }, "victory" : function(){'victory'); }, "update" : function(){ this.move(); }, "move" : function(){ if(this.walking){ game.physics.arcade.moveToXY(this.sprite,,,this.speed, 0); if(Phaser.Math.distance(this.sprite.x, this.sprite.y,, < 8){ this.sprite.x =; this.sprite.y =; this.walking = false; this.sprite.body.velocity.setTo(0, 0); this.stop();; } } }, "setTarget" : function (x, y){, y); this.walking = true; if(Math.abs(this.sprite.x - >= Math.abs(this.sprite.y -{ if(this.sprite.x >{ this.walk(-1); } else { this.walk(1); } } else { if(this.sprite.y >{ this.walkUp(); } else { this.walkDown(); } } }, "init" : function(){ this.createAnimations(); this.createTarget();; } }; }
  25. 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