Search the Community

Showing results for tags 'collisions'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 63 results

  1. Hi all! I use Blender for modelling. I've found out that mesh's instances can greatly improve performance, however I've got 2 issues after importing scene in Babylon.js: 1. There are no collisions with any instances except "parent" mesh. In Blender collision checkbox is set and affects all instances (no chance to set it separately, but that's OK in this case). How to enable collisions? 2. There are no tags for individual instance. I can set them for "parent" mesh, in Blender tags are visible for all instances, however they are not accessible from Babylon.js. How to set different tags for individual instance? Thank you!
  2. I have used this phaser example as a starting point to build a game where shapes are dynamically dropped from the top of the screen and collide with each other: What I would like is for the shapes to stop bouncing and vibrating when they collide - but I'm not sure which settings to adjust to achieve this effect (and I've not had much luck with trial and error so far!). I have set gravity like this: game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 6000; Here is my shapes/sprites json file: { "shapeOne": [ { "density": 2, "friction": 100, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 84, 76 , 0, 160 , 0, 0 , 84, 0 ] } , { "density": 2, "friction": 100, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 84, 76 , 314, 76 , 314, 160 , 0, 160 ] } ], "shapeTwo": [ { "density": 2, "friction": 100, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 0, 0 , 315, 0 , 315, 83 , 0, 83 ] } ], "shapeThree": [ { "density": 2, "friction": 100, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 0, 0 , 237, 0 , 237, 235 , 0, 235 ] } ] } Does anyone know the correct settings to adjust? Do I need to turn density up really high and friction low? And should gravity be high? Here is a screenshot of the shapes that are being dropped into the container:
  3. Hi, I took the drag and drop demo and added collisions to it. Basically that means that in onPointerMove: I move the mesh I do mesh.computeWorldMatrix I check for an intersection of the mesh with every other mesh and if I discover one I move the mesh back Everything works fine and the meshes generally don't "go through" each other. However, if I drag a mesh fast enough it will slightly intersect with another mesh before actually being stopped by it. I can't understand why this is happening. Any ideas? Thanks!
  4. Hello, Some people offer to use BABYLON.ActionManager.OnIntersectionEnterTrigger and BABYLON.ActionManager.OnIntersectionExitTrigger to detect when one mesh collides with the other. I like the idea because an event is triggered only once. However, when I try - - moving with A and D, nothing happens when red box collides with a blue box. Am I missing something or OnIntersectionEnterTrigger is being triggered only when one object is actually inside the other (I tried disabling collisions)? I really don't wan't to use box.onCollide = function(collidedMesh) { because it's being executed in a loop forever in a FPS-like game - even when there are no other meshes near you - onCollide() will still happen because collidedMesh is a ground. It would be great to have a BABYLON.ActionManager.OnCollisionEnterTrigger and BABYLON.ActionManager.OnCollisionExitTrigger functions, which run only once, if it's impossible to get such functionality at the moment.
  5. Hi, Simple demo of the problem - Try to move to the box from the front or side - camera's ellipsoid (with size 1.5) works as expected. Now try to move to the box from below - you can go a little inside the box and see the internals. You can notice that camera's ellipsoid from above is missing or it's size is 0. According to this -,_mesh_collisions_and_gravity - ellipsoid should be symmetrical. Is this fixable? Bug exists only when moving from below the box. UPDATE Another funny thing is with planes - ... when moving through it from one side - there are normal collisions, but from another - you are able slowly go through it like something is wrong with collisions detection.
  6. Collisions with sprites

    I am making a game where I need to know if a sphere has collided with an enemy. The problem I have is that the enemies are sprites. Is there a way to check collisions with sprites?
  7. Hello! I try to implement jumping without included physics plugin. I've read so many topics, but without the result I want. Here is a demo - Please press RUN, left click to enable moving with arrows and mouse - try to jump with Shift on the red box - you will fall down through it, but I want to stay ON it. I think I've enabled all checkCollicions, gravity etc, but still no luck. What am I missing? Maybe my jumping implementation is bad. At this moment I don't want to use a physics plugin because I think it's an overhead for me - I need moving and jumping only from a character at the moment.
  8. Hi, I have been working on my first full game and decided to try a snake clone. I haven't followed any kind of tutorial and have just been trying to get to grips with the framework. I am however having a few issues and have been stuck for a couple of hours to try and fix a couple of annoying bugs. The first main issue I have with my game is that collisions don't seem to be firing correctly. I have tried to set one up when the head of the snake collides with any of the tail elements which just restarts the game state for testing purposes. This seems to however try to trigger another function which should only happen when a player collides with food. I am guessing I need to setup my collision handlers differently in order to fix this. The other bug is that when a bit of food has been eaten a new sprite it created but just before it does it gets added randomly to somewhere on the screen then disappears but I can't work out why that would be. I setup a git repo of my project so far on github and it can be found here: If someone could offer some advice as to what I can do to fix this I would be very grateful. Thanks
  9. I'm making a game using Phaser, P2 physics and webpack. When it comes to P2 I can not use custom physic shapes because they won't collide with world bounds. I'm using Phaser webpack example template ( Templates/Webpack) and an example from the website ( The point is that when using custom colision shapes, entities won't collide. But they do if I use the default squared shapes or the circle ones that Phaser provide. The game code is simple and you can check it here: /** * Import Phaser dependencies using `expose-loader`. * This makes then available globally and it's something required by Phaser. * The order matters since Phaser needs them available before it is imported. */ import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js'; import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js'; import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js'; var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('tetrisblock1', 'assets/sprites/tetrisblock1.png'); game.load.image('tetrisblock2', 'assets/sprites/tetrisblock2.png'); game.load.image('tetrisblock3', 'assets/sprites/tetrisblock3.png'); game.load.physics('physicsData', 'assets/physics/sprites.json'); } var tetris1; var tetris2; var tetris3; var mouseBody; var mouseConstraint; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 1000; tetris1 = game.add.sprite(300, 100, 'tetrisblock1'); tetris2 = game.add.sprite(375, 200, 'tetrisblock2'); tetris3 = game.add.sprite(450, 300, 'tetrisblock3'); // Create collision group for the blocks var blockCollisionGroup = game.physics.p2.createCollisionGroup(); // This part is vital if you want the objects with their own collision groups to still collide with the world bounds // (which we do) - what this does is adjust the bounds to use its own collision group. game.physics.p2.updateBoundsCollisionGroup(); // Enable the physics bodies on all the sprites game.physics.p2.enable([ tetris1, tetris2, tetris3 ], false); tetris1.body.clearShapes(); tetris1.body.loadPolygon('physicsData', 'tetrisblock1'); tetris1.body.setCollisionGroup(blockCollisionGroup); tetris1.body.collides([blockCollisionGroup]); tetris2.body.clearShapes(); tetris2.body.loadPolygon('physicsData', 'tetrisblock2'); tetris2.body.setCollisionGroup(blockCollisionGroup); tetris2.body.collides([blockCollisionGroup]); tetris3.body.clearShapes(); tetris3.body.loadPolygon('physicsData', 'tetrisblock3'); tetris3.body.setCollisionGroup(blockCollisionGroup); tetris3.body.collides([blockCollisionGroup]); // create physics body for mouse which we will use for dragging clicked bodies mouseBody = new p2.Body();; // attach pointer events game.input.onDown.add(click, this); game.input.onUp.add(release, this); game.input.addMoveCallback(move, this); } function click(pointer) { var bodies = game.physics.p2.hitTest(pointer.position, [ tetris1.body, tetris2.body, tetris3.body ]); // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system var physicsPos = [game.physics.p2.pxmi(pointer.position.x), game.physics.p2.pxmi(pointer.position.y)]; if (bodies.length) { var clickedBody = bodies[0]; var localPointInBody = [0, 0]; // this function takes physicsPos and coverts it to the body's local coordinate system clickedBody.toLocalFrame(localPointInBody, physicsPos); // use a revoluteContraint to attach mouseBody to the clicked body mouseConstraint =, [0, 0], clickedBody, [game.physics.p2.mpxi(localPointInBody[0]), game.physics.p2.mpxi(localPointInBody[1]) ]); } } function release() { // remove constraint from object's body game.physics.p2.removeConstraint(mouseConstraint); } function move(pointer) { // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system mouseBody.position[0] = game.physics.p2.pxmi(pointer.position.x); mouseBody.position[1] = game.physics.p2.pxmi(pointer.position.y); } function update() { } function render() { // game.debug.text(result, 32, 32); } If you need to have a look at the project, you can check it here: Any toughts about why the collisions are not working when using custom collision shapes? Thanks in advance, Alex
  10. Very new to Phaser and reading as much as I can before committing to using it as my game development system. My goal is to alternate views, a bit like VR, from one eye to the other. I have done this before by setting specific colours for backgrounds (x2) and Sprites (two colour versions). Person uses Red Green filters to limit view to each eye. In the past I have page flipped (RE screen drawn, then LE screen drawn) which I know is not needed in Phaser. I can just change background colour for each screen refresh which will do the job. But this introduces a potential new problem as I need to hide objects / sprites from each aye alternately as background colour changes. Am thinking I could alternate "visible" for sprites that I do not want seen in alternate cycles. Question is, will collisions be detected with an invisible object? Goal is to teach both eyes to work together but while playing a simple retro style game. Another option would be to redraw sprites to be hidden in the background colour. I saw this as an option in in the examples but don't know how resource intensive this will be. Only four colours can be used in the design process. Two for backgrounds, two for sprites. Each eye only responds to two colours. Does anyone know if this could work? A better workaround? Just thought about the depth positioning. I could place the ones to be hidden behind the background? Can I set two layers, one drawn for RE and the other for LE and then just move one forward and back as required? Thinking this might be easier to code as sprites will be children of each layer? Again will collisions be detected? Thanks
  11. Hello! I created a simple semi cylinder on Blender and imported it inside my game but for some reason the .checkCollisions of the model is not working. It is set to true , and the free camera's .checkCollisions is also set to true but the camera can still go through the model. I've tried with babylon meshes and checkCollisions is working fine. I even enabled collisions in the physics tab in Blender but nothing seems to be working. I am guessing the problem is with the model itself. But any thoughts on why it's not working? I attached the model here if you need to check it. Help would be really appreciated. cylinder1.blend
  12. Hi i'm quite new to phaser but ive been making this game for a school project where you control a helicopter and when the helicopter body collides with the water refill building it refills the water but if i go up against the side of the building and change direction it flips my helicopter so that it flys the other direction which then makes the helicopter overlapping the water refill building and my game crashes and i get this error Game.js:342 Uncaught ReferenceError: refill is not defined at Function.<anonymous> (Game.js:342) at Phaser.Physics.Arcade.collideSpriteVsSprite (phaser.js:80431) at Phaser.Physics.Arcade.collideSpriteVsGroup (phaser.js:80520) at Phaser.Physics.Arcade.collideHandler (phaser.js:80369) at Phaser.Physics.Arcade.overlap (phaser.js:80121) at Object.update (Game.js:341) at Phaser.StateManager.update (phaser.js:30658) at Phaser.Game.updateLogic (phaser.js:38763) at Phaser.Game.update (phaser.js:38707) at Phaser.RequestAnimationFrame.updateRAF (phaser.js:61260) function Refill() { water = 3 } game.physics.arcade.overlap(player, WaterBuildings, function (overlappingPlayer, overlappingWaterBuildings) { refill() }); any help would be much appreciated
  13. Hi, I'm using a tileset for my maps. Not all tiles fill their whole square though, like the top and bottom blocks there, for example. The player character is a simple square guy. Here's my problem : for example in this part of one of the map, as long as there's one tiny bit of rock in a tile, Arcade will consider the whole tile should detect collisions. Meaning the player will effectively bounce back against thin air. To have more precise collisions, I'd like to have the character using Arcade physics as it's a simple square and I don't need anything fancy for its physics, and I'd like to use P2 to add detailed physics for collision with the "not entirely filled" map tiles. Is that even possible ? How would you go about doing it ? For now, I've made a json file with physics applied to the whole tileset (using PhysicsEditor) and imported it in the preload method of the Preload state like that : //Preload.js InteractiveResume.Preload.prototype = { preload: function() { //... //load Tiled map this.load.tilemap('grottoMap', 'assets/tilemaps/testGrotto.json', null, Phaser.Tilemap.TILED_JSON); //the terrain tileset and its physics this.load.image('mainTileset', 'assets/png/mainTileset.png');"mainTileset-physics", "assets/json/mainTileset-physics.json"); } } I setup my game maps with an external method located in a "global namespace", the method looks like this : //gameFunctions.js var funcs = { mapSetup: function(map) { =; //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset'mainTileset', 'mainTileset', 16, 16); //create layers config.currentState.firstBackgroundLayer ='firstBackgroundLayer'); config.currentState.secondBackgroundLayer ='secondBackgroundLayer'); config.currentState.blockedLayer ='blockedLayer'); //resizes the game world to match the layer dimensions config.currentState.firstBackgroundLayer.resizeWorld(); config.currentState.secondBackgroundLayer.resizeWorld(); config.currentState.blockedLayer.resizeWorld(); //collision on blockedLayer, 100000, true, 'blockedLayer');, config.currentState.blockedLayer); } } (I had to define a global variable 'config.currentState' to access the 'this' keyword representing the current state outside of it, if anyone knows a better solution I'd be very thankful as its quite heavy to use) And then in my Grotto state : // Grotto.js InteractiveResume.Grotto.prototype = { create: function() { //Creating the map, player sprite and everything... //setup Arcade physics for the player character; }, update: function() { //collisions, this.blockedLayer); //... } } Could anyone point me to the correct direction here ? I must admit I'm totally lost
  14. Collisions doesn't work

    Character fall through the ground although i use function setCollision. Here is my code main.js Here is map newmap.json Please help
  15. Hello there! Long time lurker, first time poster here... In the following example: Why does the sphere mesh overlap (or fall slightly into) the box mesh as the box moves upwards? Is there a way to make the sphere not overlap the box as the box moves the sphere upwards?
  16. Hi guys, this is my first topic in this amazing community, so I would be glad if you can enlighten my doubts as a nice welcome :). I'm programming a survival horror game, and everything is working great except when it comes to colliding among two or three objects. I can't describe the behavior properly because for example: If the main character collides a barrel for example, it works great but It doesn't happen the same when an enemy is moving randomly and suddenly rans into a barrel, because it's like there is no barrel, the enemy just goes through. Here is the index.html file so that you can help me out on this, it's not a large code at all, it's very simple but it's driving me crazy until now. <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Rescate</title> <script type="text/javascript" src="js/libs/phaser/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> //---------------------------------------------------------------------------------------------------------------- //Crea la pantalla principal del juego var game = new Phaser.Game(640,480, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //Cargo fondo, pisos, estrellas y personaje function preload() { game.load.image('fondo', 'assets/MAPA.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('barril','assets/barril.png',30,40); game.load.spritesheet('dude', 'assets/personaje.png', 64, 64); game.load.spritesheet('mummy', 'assets/momia37x45.png', 37, 45, 18); } //---------------------------------------------------------------------------------------------------------------- var player; var platforms; var cursors; var stars; var fondo; var fondo_movil; var score = 0; var scoreText; var background=1; //PARA LA MOMIA var mummy; var anim; var last_direction=9; //Variables para la animacion de la momia var barril,barril2, barril3; //---------------------------------------------------------------------------------------------------------------- function create() { //Se activa la fisica para el juego de tipo ARCADE game.physics.startSystem(Phaser.Physics.ARCADE); //Fondo para el juego fondo_movil = game.add.tileSprite(0,0,640,480,'fondo'); //plataformas donde se para el personaje platforms =; //se activa la fisica para cualquier objeto creado en este grupo platforms.enableBody = true; //Se crea el piso var ground = platforms.create(0, - 2, 'ground'); //Escalado ground.scale.setTo(2, 2); //Esto impide caer al piso cuando el personaje lo pisa ground.body.immovable = true; // El jugador y sus caracteristicas player = game.add.sprite(32, - 150, 'dude'); //Se habilita la fisica al jugador game.physics.arcade.enable(player); //Creo el enemigo (momia) mummy = game.add.sprite(380, 400, 'mummy', 5); mummy.scale.set(1.5 ); mummy.smoothed = false; mummy.enableBody = true; game.physics.arcade.enable(mummy); mummy.body.collideWorldBounds = false; barril = game.add.tileSprite(490,430,30,40,'barril'); barril.enableBody = true; game.physics.arcade.enable(barril); barril.body.immovable = true; barril2 = game.add.tileSprite(300,430,30,40,'barril'); barril2.enableBody = true; game.physics.arcade.enable(barril2); barril2.body.immovable = true; //Propiedades físicas del jugador. Se le da al jugador un pequeño rebote. player.body.bounce.y = 0.2; player.body.gravity.y = 400; player.body.collideWorldBounds = true; player.smoothed = true; //Las dos animaciones, caminando a la izquierda y a la derecha player.animations.add('left', [0, 1, 2, 3,4,5,6,7,8], 10, true); player.animations.add('right', [10,11,12,13,14,15,16,17,18], 10, true); //El puntaje scoreText = game.add.text(16, 16, 'Puntos 0', { fontSize: '32px', fill: '#000' }); //Nuestros controles cursors = game.input.keyboard.createCursorKeys(); anim = mummy.animations.add('walk'); anim.onStart.add(animationStarted, this); anim.onLoop.add(animationLooped, this);, true); } //---------------------------------------------------------------------------------------------------------------- function update() { mummy.position.x -= 1; //Colision del jugador con la plataforma y otras cosas game.physics.arcade.collide(player,mummy); game.physics.arcade.collide(player,barril); game.physics.arcade.collide(player,barril2); game.physics.arcade.collide(player,platforms); game.physics.arcade.collide(mummy,barril); game.physics.arcade.collide(mummy,barril2); game.physics.arcade.collide(mummy,platforms); // Resetea la velocidad a cero player.body.velocity.x = 0; // Movimiento de la momia. //Si el cursor izquierdo esta presionado if (cursors.left.isDown) { //fondo movil derecha if(player.x < 0.3 *{ fondo_movil.tilePosition.x += background; barril.position.x += background ; barril2.position.x += background ; if(player.x < 0.2 *{ player.x = 0.2 *; } } // Moverse a la izquierda player.body.velocity.x = -90; last_direction=0;'left'); } //Si el cursor derecho esta presionado else if (cursors.right.isDown) { //Moverse a la derecha player.body.velocity.x = 90;'right'); //fondo movil derecha if(player.x > 0.5 *{ fondo_movil.tilePosition.x += -background; barril.position.x -= background ; barril2.position.x -= background ; if(player.x > 0.8 *{ player.x = 0.8 *; } } last_direction=9; } else { //Sino mantenerse quieto player.animations.stop(); player.frame = last_direction; } // Permite al jugador saltar si este esta tocando el piso if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = - 250; } } //---------------------------------------------------------------------------------------------------------------- //Animacion de la momia function animationStarted(sprite, animation) { /* game.physics.arcade.collide(player, platforms); game.physics.arcade.collide(mummy, platforms); game.physics.arcade.collide(player,barril); game.physics.arcade.collide(player,barril2); game.physics.arcade.collide(player,mummy); */ //game.add.text(32, 32, 'Animation started', { fill: 'white' }); } function animationLooped(sprite, animation) { /*if (animation.loopCount === 1) { loopText = game.add.text(32, 64, 'Animation looped', { fill: 'white' }); } else { loopText.text = 'Animation looped x2'; //animation.loop = false; }*/ } </script> </body> </html> See you guys, hope you are great!
  17. Hi, I would like to understand a strange behavior of my camera and how to prevent it. Let me explain. I have a mesh that I like to see from different point of views with an ArcRotateCamera. If collisions are enabled, if the camera move from viewpoint1 to viewpoint2 and the translation between these 2 points intersects the mesh, the new camera position is not the expected one. If collisions are disabled, it works. If the translation doesn't intersect the mesh, it also works. Here is a PG to illustrate my issue : you can change viewpoints by pressing keys '1', '2', '3', '4', '5' or '6' to see respectively the cube from front, left, back, right, top or bottom viewpoint you can toggle collision by pressing 'c' If collisions are enabled, my issue happens when : switching from opposite viewpoints (1 -> 3, 2 -> 4, 5 -> 6), you obviously intersect the cube if you are close enough of the cube, moving to any viewpoint will intersect the cube and pressing consecutively the same key will not have the same result until the camera is not in the intended position If collisions are disabled, camera's behavior is the expected one. I don't know why my camera moves like this. I assume that the camera is not teleported from a viewpoint to another but it is translated which implies a collision with my mesh. Can it be fix in Babylon.js ? Do I misuse the library ? How can I prevent this behavior ? I succeed to avoid it but I have to use window.setTimeout twice to disable collisions, then move my camera and enable collisions. function setViewpoint(viewpoint) { camera.checkCollisions = false; window.setTimeout(function() { camera.alpha = viewpoint.alpha; camera.beta = viewpoint.beta; window.setTimeout(function() { camera.checkCollisions = true; }, 100); }, 100); } It is a bit tricky and I'd like to find another way to do it. Thanks
  18. My Camera

    Hi all, I am using Universal Camera and I would like to improve differents features of it. This is the definition of my camera: var camera = new BABYLON.UniversalCamera("universalCamera", new BABYLON.Vector3(600, 200, -500), scene); camera.setTarget(new BABYLON.Vector3(0,0,0)); camera.speed = 1.5; camera.checkCollisions = true; camera.ellipsoid = new BABYLON.Vector3(1, 1, 1); camera.attachControl(canvas); The first question is about collisions. When I move arround the scene and I go to some building of, all the collisions are calculated and my camera is very slow. Are there any way to optimice this operation? When I am near of the different elements of my scene the movement of camera is very bad. The second question is relative to control of camera. I want change the arrow keys to "a","s","d" and "w". Do you know if is it possible? Thanks
  19. Collision between ground and items

    Hi all ! I'm new to phaser, I would like to create an event when items collide to the ground. The items are generated randomely. //Add items emails =; emails.enableBody = true; emails.physicsBodyType = Phaser.Physics.ARCADE; //Generate items for (var y = 0; y < 2; y++) { for (var x = 0; x < 10; x++) { var mail = emails.create(5 + x * 94, y * 10, 'email'); = 'mail' + x.toString() + y.toString(); // ?? mail.checkWorldBounds = true;, this); mail.body.velocity.y = 150 + Math.random() * 200; } } I tried this : //Create collision level2.physics.arcade.overlap(ground, emails, fbiCollect, null, this); //enemy collect function enemy() { console.log('in enemy collect') mail.kill(); scoreEnemy += 10; } But it doesn't work.. So if anyone has an idea
  20. Collisions with tiled

    So i am trying to create a small map with tiled and implement it into phaser. But the collision between the map and the sprite im using as a player doesnt seem to work Here is my code: Platformer.Main = function(game){ var map; var layer; var layer2; var layer3; }; Platformer.Main.prototype = { preload: function(){ }, create: function(){ //map =, 0, 'map'); //map.width = 1280; //map.height = 3800; map = game.add.tilemap('firstLevel'); map.addTilesetImage('object- layer', 'groundlayer'); map.addTilesetImage('ground_tiles'); map.addTilesetImage('Cliff_tileset'); map.addTilesetImage('graphics-tiles-waterflow'); map.addTilesetImage('Extra_Unfinished4'); map.setCollisionBetween(15, 16); map.setCollisionBetween(20, 25); map.setCollisionBetween(27, 29); map.setCollision(40); layer2 = map.createLayer('Background'); layer3 = map.createLayer('Background2') layer = map.createLayer('Tile Layer 1');; this.goUp = game.input.keyboard.addKey(Phaser.Keyboard.UP); this.goDown = game.input.keyboard.addKey(Phaser.Keyboard.DOWN); this.sprite =, 250, 'player'); game.physics.enable(this.sprite, Phaser.Physics.ARCADE); this.sprite.inputEnabled = true; this.sprite.body.collideWorldBounds = true;; layer.resizeWorld(); }, update: function() { game.physics.arcade.collide(this.sprite, layer); game.physics.arcade.collide(this.sprite, layer2); if(this.sprite.input.pointerOver()){ this.sprite.body.velocity.x = 0; this.sprite.body.velocity.y = 0; } else { game.physics.arcade.moveToPointer(this.sprite, 200); } if (Phaser.Rectangle.contains(this.sprite.body, game.input.x, game.input.y)) { this.sprite.body.velocity.setTo(0, 0); } } } Im trying to get the player to collide with some rocks i have in my map. Those rocks are on layer and layer2 which im trying to collide with but it doest work. It also gives me this error Phaser.Tileset - image tile area is not an even multiple of tile size I dont really know how to fix it But im using spritesheets with more than 1 images on them and they are all 32x32 px. And i have really never understood what the map.setCollisionBetween is doing thats why there is so many of them in there Ty for any help
  21. I'm wondering if there's a way to manually check for collisions. I'm making VR first person Pacman game for a project and I need the pacman to eat all the pellets in the direction the user is facing. I got the game working with gravity and collisions but the game was laggy and slow due to collisions with the ground and the pellet at the same time. This was my original function: camera.onCollide = function(collidedMesh) { if (arr[collidedMesh.uniqueId] !== undefined) { //console.log('gone'); arr[collidedMesh.uniqueId].dispose();; score++; if (canvas2 === undefined) { canvas2 = create(scene, score); } else { canvas2.levelVisible = false; canvas2 = create(scene, score); } } }; Now I'm trying to move the camera as it renders but the collisions completely turn off, I'm wondering if there's a way to manually check/enforce for collisions? var moveCamera = function() { var camSpeed = 0.1; var forwards = new BABYLON.Vector3(parseFloat(Math.sin(camera.rotation.y)) * camSpeed, 0, parseFloat(Math.cos(camera.rotation.y)) * camSpeed); camera.position = camera.position.add(forwards); }; scene.registerBeforeRender(function() { moveCamera(); }); mazeRunner.jsx
  22. Problem with zombies collisions

    Hey guys! I make this zombie game: As you can see on the demo, zombies do not react on each other. For now they have only set of predefined points that they should move on. I calculate path to each point using EasyStar.js. My question is, how should I manage zombies movement, so they won't block themselves. I tried updating grid for EasyStar with zombies positions and recalculating path every frame ( or every certain time ) but this didn't work. I thought of implementing Boids algorithm ( mainly separation rule ) but I am not sure how will this work with head-on collisions. Do you have any ideas how can I solve this ? Here is the code:
  23. From what i see in the debug layer, there is ALWAYS a bounding box around meshes. I assume this is the bounding box used for camera collisions against the camera.ellipsoid. My question is, If this is the case then how come ALL meshes wouldn't automatically have a 'SIMPLE' collision box WHY would you need to create a simplified mesh for collisions if every mesh automatically get a very simple bounding box. Now i use a separate simplified mesh for terrains, so i understand the collision system being impacted by the detail of the terrain mesh. I even have support (in my BabylonJS Toolkit For Unity) the Mesh Collider component so you can more easily attach a simplified mesh directly on the game object (just as you would in unity) and it works great... I simply take the 'Simplied Mesh' and enable collisions on that mesh, set its alpha to 75% and isvisible to false. I then set it as the child of the original mesh and reset its transform (because it parented in original mesh). Looks good, works great for both terrains and everyday meshes... I just don't quite understand why i would need these separate simplified meshes IF simple bounding boxes for EVERY mesh AUTOMATICALLY get created and used for collisions ??? P.S. - Even though i wrote (what i think) is an awesome Managed Scene Component API and a KICK-ASS Game Editor Toolkit (almost ready)... I am still new to some of the 3D game concepts. That is the main reason i built the toolkit... was so i can use 'Unity' as my game concept learning tool... So if i want to make some kind of racing game... Ill go find some in-depth training on making a racing game in unity (follow all the tutorials) but use my toolkit to actually implement those concepts in BabylonJS. So again... Sorry for the real newbie questions sometimes
  24. World/local/ray

    Hey, it's me and my bloody Rays again! I went through a bunch of Babylon's classes, but just can't wrap my head around World vs Local vs BoundingBoxes vs Rays. It looks like PickWithRay (and Mesh.intersects(Ray)) only work if meshes' positions are not changed! Here's the PG: Line 40 returns "true" even though the target mesh is outside Ray's path. It just hurts my brain!
  25. Collision layer with P2

    Hi, I create a tilemap with 4 layers with one for collisions ( named : collisions ). The layer with pink tiles is my collisions layer, and the tile ID is 515. Then I add a player and active collisions. function preload() { game.load.tilemap('map', gamePath + 'assets/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', gamePath + 'assets/tiles.png'); game.load.spritesheet('cars', gamePath + 'assets/cars.png', 180 / 5, 73); } function create() { game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('map'); map.addTilesetImage('tiles'); layer = map.createLayer('collisions'); console.log(layer); layer.resizeWorld(); map.setCollision(515,true); game.physics.p2.convertTilemap(map, layer); player = game.add.sprite(1100, 800, 'cars'); game.physics.p2.enable(player,true);; cursors = game.input.keyboard.createCursorKeys(); } I do not understant why there is not collisions between my player and my collisions layer. thx for your help.