Search the Community

Showing results for tags 'movement'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 60 results

  1. 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: try.matterport.com. I've created a playgroud: https://www.babylonjs-playground.com/#S0BZWE 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
  2. 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.
  3. 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); TweenLite.to(wall.position, 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? TestTween.zip
  4. 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.target.sprite.x > hero.sprite.x){ hero.sprite.x += kick; //KICK right } else if(box.x > hero.sprite.x && hero.target.sprite.x < hero.sprite.x){ hero.sprite.x -= kick; //KICK left } if(box.y < hero.sprite.y && hero.target.sprite.y > hero.sprite.y){ hero.sprite.y += kick; //KICK down } else if(box.y > hero.sprite.y && hero.target.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: https://github.com/CaioMGA/ZenvaGameJam/ 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(){ this.target = 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); this.sprite.animations.play('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(){ this.sprite.animations.play('death'); }, "walk" : function(direction){ this.sprite.animations.play('walkH'); this.sprite.scale.x = direction; }, "walkUp" : function(){ this.sprite.animations.play('walkUp'); }, "walkDown" : function(){ this.sprite.animations.play('walkDown'); }, "stop" : function(){ this.walking = false; this.sprite.animations.play('idle'); }, "victory" : function(){ this.sprite.animations.play('victory'); }, "update" : function(){ this.move(); }, "move" : function(){ if(this.walking){ game.physics.arcade.moveToXY(this.sprite, this.target.sprite.x, this.target.sprite.y,this.speed, 0); if(Phaser.Math.distance(this.sprite.x, this.sprite.y, this.target.sprite.x, this.target.sprite.y) < 8){ this.sprite.x = this.target.sprite.x; this.sprite.y = this.target.sprite.y; this.walking = false; this.sprite.body.velocity.setTo(0, 0); this.stop(); this.target.hide(); } } }, "setTarget" : function (x, y){ this.target.set(x, y); this.walking = true; if(Math.abs(this.sprite.x - this.target.sprite.x) >= Math.abs(this.sprite.y - this.target.sprite.y)){ if(this.sprite.x > this.target.sprite.x){ this.walk(-1); } else { this.walk(1); } } else { if(this.sprite.y > this.target.sprite.y){ this.walkUp(); } else { this.walkDown(); } } }, "init" : function(){ this.createAnimations(); this.createTarget(); this.target.init(); } }; }
  5. Another 2.4 to 3.0 issue. I have assigned W, A, S, D to a camera for movement ( http://www.babylonjs-playground.com/#3H5RJW ). 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
  6. I am creating a script that will move a box along the vector in front of the center of the camera: https://www.babylonjs-playground.com/#KWD0E1 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?
  7. 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(); this.game.physics.arcade.collide(ghost, 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
  8. 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.
  9. 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.
  10. 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: http://www.babylonjs-playground.com/#W8MYRB#7 (angle 0) Not working: http://www.babylonjs-playground.com/#W8MYRB#10 (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);
  11. 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): http://www.babylonjs-playground.com/#2CFAMI#13 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!
  12. 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?
  13. First of all here is my project, controls are WASD and mouse. http://babylonjs-playground.azurewebsites.net/#11OMIX#26 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?
  14. 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?
  15. 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 this.player_1.animations.play('left'); } if(this.pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)>0.1){ this.player_1.body.velocity.x = 300; //move right this.player_1.animations.play('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)) { this.player_1.weapon.fire(); } }, movePlayer1: function () { //player 2 controller if(game.input.gamepad.supported && game.input.gamepad.active && 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; this.player_2.animations.play('left'); } if(this.pad2.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)>0.1){ this.player_2.body.velocity.x = 300; this.player_2.animations.play('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)){ this.player_2.weapon.fire(); } } , I feel that this isn't the best way to code for two player movement. What would you do differently?
  16. 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.
  17. 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?
  18. 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 && terrain.metadata.properties != null) { if (terrain.metadata.properties.heightmapBase64) { var tempBase64:string = terrain.metadata.properties.heightmapBase64; var terrainWidth:number = terrain.metadata.properties.width; var terrainLength:number = terrain.metadata.properties.length; var terrainHeight:number = terrain.metadata.properties.height; var minimumHeightLevel:number = terrain.metadata.properties.minimumHeightLevel; var maximumHeightLevel:number = terrain.metadata.properties.maximumHeightLevel; var groundTessellation:number = terrain.metadata.properties.groundTessellation; var surfaceMaterialId:string = terrain.metadata.properties.surfaceMaterialId; var surfaceMaterialInst:BABYLON.Material = null; if (surfaceMaterialId != null && surfaceMaterialId !== "") { var material:BABYLON.Material = this._scene.getMaterialByID(surfaceMaterialId); surfaceMaterialInst = material; } BABYLON.MeshBuilder.CreateGroundFromHeightMap((terrain.name + "_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
  19. Hello. This is my first post on this forum, i read the rules and i hope i'm not breaking them because i don't have a demo. I need a way to display a 2d galaxy map (it will be in 3d, but it will be a top view) for my game, i will use Babylon.js, however i need some help on some points. My map have 3 modes which depends on the zoom on the map; mode 1 where you see the planets (which are meshes); mode 2 where you see the solar systems (planets are hidden), mode 3 where you see the galaxies (solar systems are hidden). Here is a representation of mode 1 with the zoom bar on the right : The red bar is the current zoom level. My questions are : - How to make a top view camera with rotation blocked but keep the wheel for zooming in and out ? - How to make that i can move the camera on x,y with my mouse ? (Since the rotation will be disabled the mouse is free) I will use camera.radius to get the current zoom level and dynamicly update the planets / solar systems / galaxies display with AJAX as a function of x,y coordinates. Thank you so much.
  20. Hi all, I have two sprites ( sprite A and sprite B ) that I want to select and move around the screen one at the time, like this: click on sprite A to select it, sprite B should be then deselcted click anywhere in the world to move sprite A to where the mouse clicked double click on a sprite A to cast spell 1 double click on sprite B to cast spell 2 Issues I have are: Issue: If sprite A is already selected, and I single click on sprite B to select it, then sprite A moves to location of sprite B. Intended: no sprite moves, sprite B is selected and sprite A is deselected Issue: If a sprite is already selected, and I single click on it, the sprite is deselected (and the other is selected). Intended: the sprite remains selected Issue: Double clicking on the world (outside any sprite) cause a selected sprite to move two steps towards where clicked. Intended: Double clicking on the world should be ignored Issue: Single clicking anywhere but the center of a selected sprite makes it move a bit towards where clicked. Intended: single clicking on a selected sprite should be ignored Issue: The two sprite overlap. Intended: collision and separation What I'm doing wrong Thanks! Code var playState = { create: function() { this.mouseClicks = 0; this.mouseClicksStarted = false; this.createPlayers(); this.myEvent = game.input.onDown.add(this.movePlayer, this); this.playerGroup.forEach(function(player) { player.events.onInputDown.add(this.countClicks,this); //param 1: sprite, param2: pointer }, this); }, update: function() { game.physics.arcade.collide(this.playerGroup); }, countClicks: function(player, pointer) { this.mouseClicks ++; this.player.canMove = false; if (this.mouseClicksStarted) { return; } this.mouseClicksStarted = true; //call function after x seconds setTimeout(function() { if(this.mouseClicks > 1) { if(player.role == "thrower") { console.log("double: casting thrower spell") } else { console.log("double: casting catcher spell") } //One click } else { this.selectPlayer(player); } this.mouseClicksStarted = false; this.mouseClicks = 0; }.bind(this), 250); }, selectPlayer: function(player) { this.playerGroup.forEach(function(player) { if(player.isSelected) { player.isSelected = false; player.tint = 0xffffff; } else { player.isSelected = true; player.tint = 0xff0000; } }, this); }, createPlayers: function() { this.playerGroup = game.add.group(); this.player = new Player(this.game, 'player', 'thrower', true); this.game.add.existing(this.player); this.playerGroup.add(this.player); this.player.reset(game.world.randomX, game.world.randomY); this.player2 = new Player(this.game, 'catcher', 'catcher', false); this.game.add.existing(this.player2); this.playerGroup.add(this.player2); this.player2.reset(game.world.randomX, game.world.randomY); }, movePlayer: function (pointer) { this.playerGroup.forEach(function(player) { if(player.isSelected) { if (this.tween && this.tween.isRunning) { this.tween.stop(); } var duration = (game.physics.arcade.distanceToPointer(player, pointer) / 400) * 1000; this.tween = game.add.tween(player).to({ x: pointer.x, y: pointer.y }, duration, "Sine.easeInOut", true); game.add.tween(player.scale).to({x: 1, y: .8}, duration).to({x: 1, y: 1}, 1000, Phaser.Easing.Elastic.Out).start(); player.rotation = game.physics.arcade.angleToPointer(player); } }, this); }, }; Player var Player = function (game, sprite, role, isSelected) { //save passed variables so they can be accessed later this.role = role; this.isSelected = isSelected; this.max_energy = 100; this.currentEnergyLevel = 0; Phaser.Sprite.call(this, game, game.width/2, game.height-150, sprite); this.anchor.setTo(0.5, 0.5); this.scale.setTo(1); game.physics.enable(this, Phaser.Physics.ARCADE); this.body.collideWorldBounds = true; this.body.bounce.setTo(0.9, 0.9); //this.body.immovable = true; this.playerKillParticles = game.add.emitter(0,0,15); this.playerKillParticles.makeParticles('playerParticle', 2); this.playerKillParticles.setYSpeed(-100,0); this.playerKillParticles.setXSpeed(-100,100); this.inputEnabled = true; this.input.useHandCursor = true; //this.input.priorityID = 1; }; Player.prototype = Object.create(Phaser.Sprite.prototype); Player.prototype.constructor = Player; Player.prototype.setRole = function(role) { this.role = role; }; Thanks!
  21. Hey Phaser people, I'm currently working on a 2d upperview point & click game, using Arcade physics. What I want to develop is a "smart movement" system, where if you click on a part of the map, your character shouldn't get stuck in obstacles, but pass around them. For now, I'm using tweens to move my character to the mouse position, which cancels the collision. Thus, it's a no go. this.game.input.onDown.add(this.movePlayer, this); movePlayer: function (pointer) { var time = 9.5; var duration = (this.distance(this.player.x, this.player.y, pointer.x, pointer.y) * time); this.tween = this.game.add.tween(this.player).to({ x: pointer.x, y: pointer.y }, duration, Phaser.Easing.Linear.None, true); } Any suggestions ? Thanks ! I've also attached a small screenshot/ drawing of what I strive to achieve.
  22. Hello. I have included character movement in my phaser isometric game. This is the code that allows the character to move: // INSIDE CREATE // this.cursors = game.input.keyboard.createCursorKeys(); this.game.input.keyboard.addKeyCapture([ Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT, Phaser.Keyboard.UP, Phaser.Keyboard.DOWN, ]); // INSIDE UPDATE // var speed = 100; if (this.cursors.up.isDown) { dude.body.velocity.y = -speed; dude.body.velocity.x = -speed; } else if (this.cursors.down.isDown) { dude.body.velocity.y = speed; dude.body.velocity.x = speed; } else { dude.body.velocity.y = 0; dude.body.velocity.x = 0; } if (this.cursors.left.isDown) { dude.body.velocity.x = -speed; dude.body.velocity.y = speed; } else if (this.cursors.right.isDown) { dude.body.velocity.x = speed; dude.body.velocity.y = -speed; } I can actually move my character, but two problems happen: The response time is not that good. I notice that when I click one of the arrow keys my character doesn't move exactly when I click it. Not like in this example: http://rotates.org/phaser/iso/examples/character.htm . Sometimes, when I just click one of the arrows and release it the character continues to move continously. I want my character not to be fixed to the isometric grid like in the example. That is why I have those extra commands in relation to the example I showed. Any help with this? Thank you
  23. I have trouble getting the code to work properly in the playground, so I hope you get an idea of what I mean. I'm using cannon direcly, and not as the plugin in Babylon. I have a cannon body and a sphere shape, and I'm controlling the movement on the X and Z axis using keyboard input. On top of that I have a sphere mesh in order to verify the changes to the body. Now, I use the below handler to rotate the body itself according to the mouse. window.addEventListener("mousemove", function(e) { // console.log("mouse"); var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; this.sphereBody.rotation.y += movementX * 0.002; this.sphereBody.rotation.x += movementY * 0.002; }); Now, the problem is, that if I rotate, let's say 50 degrees to the left, and press the key bound to the forward movement, the body moves directly forward, and not in the direction that the body rotated. I'm a little unsure as of what and how to accomplish this. This should be able to run server-side using node, which it already does, but this has it's limits, as I'm not planning to run babylon on the node server. I need a way to assign the Z and X axis to the way the body is currently rotated. I guess I could use a camera on the client, but then the rotation has to be useable on the body server-side. I already checked quite a few examples, one being the Cannon.js FPS example. I can upload the files somewhere if needed.
  24. Hello again friends! I am trying to smoothly slide a free camera along an X axis to keep up with a moving object (a hockey puck). I created this smoothMove function and expected it to work smoothly ... but the camera jitters at times if my smoothMove speed is over 0.3 or so. Not sure why. If I use a smoothMove speed that slow the camera cannot track the puck from one end of the ice to the other fast enough sometimes. Any ideas? Am I reinventing the wheel here? I can't find how to smooth out the follow of a free camera in the docs. function smoothMove(camera){ var puckPosX = puck.position.x; var camPosX = camera.position.x; //limit movement var xMax = 110; var xMin = -110; if(puckPosX > xMax) { puckPosX = xMax; } else if(puckPosX < xMin) { puckPosX = xMin; } //smooth move ... camera does not move fast enough! var smoothMove = 0.33; if(Math.abs(puckPosX-camPosX) >= smoothMove * 10){ if (camPosX < puckPosX){ puckPosX = camPosX + smoothMove; } if (camPosX > puckPosX){ puckPosX = camPosX - smoothMove; } //follow puck console.log("puckX="+puckPosX+" camX="+camPosX); camera.position.x = puckPosX; } }
  25. Hello. I am porting my WebGL game from Unity3D to Phaser but i have a problem with linear movement of creatures. Sprite is starting to "shake" when moving... I was using 2 diffrent formulas for movement (One is commented in my code bellow) and also trying to round pixels up and down.. (not working). What can be wrong? I dont want to use physics for movement.. function updateCreature(creature, deltaTime) { var walkTo = creature.walkTo; if(walkTo == null) { creature.animations.play('stay'); return; } creature.animations.play('run'); var distance = Phaser.Math.distance(walkTo.x, walkTo.y, creature.position.x, creature.position.y); if (distance < 30 ) { return; } var speed = deltaTime * creature.speed; var diff = (new Phaser.Point(walkTo.x - creature.position.x, walkTo.y - creature.position.y)).normalize(); creature.position.x += diff.x * speed; creature.position.y += diff.y * speed; creature.position.x = Math.round(creature.position.x); creature.position.y = Math.round(creature.position.y); // var angle = Math.atan2(walkTo.y - creature.position.y, walkTo.x - creature.position.x); // creature.position.x += Math.cos(angle) * speed; // creature.position.y += Math.sin(angle) * speed; if(creature.scale.x > 0) { if(creature.position.x < walkTo.x) { creature.scale.x *= -1; } } else if(creature.scale.x < 0) { if(creature.position.x > walkTo.x) { creature.scale.x *= -1; } } creature.lastDistance = distance; }