Search the Community

Hello! I am trying to make a player to collide with the ground. But the ground has been imported from a tilemap using the tiled program. The collision is not working This is the important part of my code: collisionLayer = map.createStaticLayer('collisionLayer', tileset); var players = findObjectsByType('player', map, 'objectsLayer'); player = this.physics.add.sprite(players[0].x, players[0].y, 'dude'); this.physics.add.collider(player, collisionLayer); findObjectsByType is not a phaser native method, but it is working. The code runs without errors, but the collision is not working. I have attached the code. Thanks! example.zip

Hi !! I continue to learn this wonderful framework of BabylonJS and program an open source FPS game (should be on Github soon). I first hesitated between built-in collision system and the cannonjs physic engine : I tried both and I currently think the physical engine will better suit my needs (rocket jump ! ). I am already able to move a character, in any direction, first or third camera view, I can jump on objects, but I am facing a new problem.... => I have to detect ANY ground collision and this task is not so easy as it seems. Detecting collision with a cube is easy, but detecting collision ONLY from the top of the cube (to end a jump andplay a sound, for example) is more complicated. If I jump, I don't care about wall collision with the cube, I am interested only by the collision when my character collides from bottom. My character is a simple invisible Box. So I got some ideas : 1) create a second box for my character, a little bit smaller, just to detect collision "from bottom". xxxx xxxx <=== main box, detect wall collision xxxx ----- <=== thin bottom box of the character, detect ground collision 2) OR change scene objets where I can jump on, with a special "ground type objet" but this solution seems the most awful possible : you are not free anymore to design objects 3) OR change the way collision are detected : for example, if my position.y is decreasing AND THEN my position.y < epsilon, then it means I have collided something. With this solution I don't even need collision event : i create it myself, but it is a little but tricky to code OR ... any idea ? I will try solution 1 and will share my experience here. If anyone has an advice on this or encountered the same kind of problem plz tell us Thanks

Hi All, Disclaimer: I'm very new to Babylon. I was playing around with this cloth tutorial, and I wanted to make the cloth land on some sort of ground object. So far, I haven't been able to find one that works. You can see in this playground how the cloth reacts to a box impostor, side-by-side with a sphere behaving normally. I have the restitution of everything set to 0. The sphere stops nicely but the cloth shoots off into the distance. I've also tried this with a ground impostor (sphere works fine, cloth doesn't interact with the ground), and a plane impostor (cloth collides correctly, but sphere shoots up into the stratosphere). I have also tried adjusting the initial linear velocity of the cloth particles. More velocity = flies away faster, less velocity = falls right through the ground. My ultimate goal involves the cloth having an initial z velocity, so I'd like to be able to make that work. Can someone help me figure out what I'm missing here? Does it have something to do with the distance joints connecting the particles in the cloth? Should I try using sphere impostors instead of particles? Thanks! (side note: is there a better way to translate the cloth's position than the translatePositions function I made? The built-in ground.rotation.axis method rotates the cloth, but not the actual particles themselves)

So I've been following along with a tutorial to make my first game in Phaser. I'm trying to understand everything the tutorial is saying, but I can't find an explanation for everything. For example, the background image being used in the game is 400x32. However, the tutorial says the following: // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); My question is this; if the original size is 400x32, then why does seting the ground scale to 2, 2 work out? The game made in the tutorial works, and the ground does fit the width, but wouldn't the ground have to be 400x2 or something like that to have the proper width? I'll attach the tutorial file to this post so you can see the whole thing. I attached the tutorial text itself, and "part9.html" is the completed code that came with the tutorial. I don't think my code is needed to answer my question because I'm just following along with the tutorial, and it's just a less completed version of part9.html. I also have one more question regarding the ground. The tutorial says this: // Here we create the ground. var ground = platforms.create(0, game.world.height - 64, 'ground'); Again, if the size is 400x32, then why does -64 work to put the ground at the bottom? What does 64 do in this code? I guess I'm just looking for an explanation of why the code I posted works. I understand the rest of the code in the file, just these 2 lines are what confuse me the most. I'd greatly appreciate any help I can get, thanks! Edit: I realize now that in the first line of code I pasted here, the 400x32 is talking about the size of the platform itself, not the whole background. Still, how does the (2, 2) scale a 400x32 platform to fit the whole background? tutorial.html part9.html

Somtehing went wrong with the playground. Has Anyone else this error ?

Hello, I am actually trying to make my very first game with Phaser ! Saddly, I am not able to get it work. Actually, the game is simple : There is a ground, a character (player), and a "coin" that fall from the top of the game to the ground. If the player hit it, the score increase by 1. All of this work fine. But I want to end the game if the "coin" hit the grounds. For this, I want the coin to collide with the ground. But unfortunally, the player collide with the ground, and the coin pass through the ground. I don't understand why. Demo here. Keep in mind that this code & game is only for testing PHASER. Here is the full code : Could you please help ? ;...; xxx lol EDIT : I got the problem solved, just misstake to place it : Now I wonder why my function endGame() isn't call when gold hit the ground. EDIT² : I got my second problem solved with this code : But I don't understand the difference between my code and game.physics.arcade.overlap();. Can someone explain me ? Code updated aswell !

hi everyone,I want to get x and y from ground when I click and where I click to do click to move. I tried this but it not working to me: P.S scene.meshes[1] is a ground var pickInfo = scene.meshes[1].pick(ev.clientX,ev.clientY); error: Object doesn't support property or method 'pick'

Hi All, I am using Babylonjs to create map these days. Basically, I have two layers, one layer is tiledmap, which is a png image, another is semantic map, which is a svg file. The size of two map is almost same. So I just create two grounds whose materials are created by the png image and the svg file and put them at the same position. If I make them locate at different heights, one ground will hide another. If I make them locate at the same heights, they cannot merge perfectly, at some angle you can see svg materials clearly, and png materials at some other. My problem is how to merge these two grounds perfectly?

Hi team, I would like to create a ground in my scene. However I don't want that it was square, is it possible? Thanks!

Hi, I'm creating a game that player can walk over terrains with lots of slopes. How can I make my player rotate accordingly to the angle of the slope? This is how it's currently working: And this is how is must work (I've changed the angle manually): I'm using Box2D plugin to generate the terrain accordingly to an image. That's the reason of all these bodies. Thanks!!

Hey Community ! I'm currently using with Friends Phaser for the first time for a school project, and I need your help on 1 point. I'm using Dude as a character and blocks appear, but my problem is Dude can go out of the game Area and the game never restart :/ Any Idea ? Thanks a lot and sorry for my poor english <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Phaser - Making your first game, part 1</title> <script type="text/javascript" src="js/phaser.min.js"></script> <style type="text/css"> body { margin: 100; } </style> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(500, 500, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var player; var platforms; var cursors; var stars; var score = 0; var scoreText; var sky; function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/pipe.png'); game.load.image('star', 'assets/star.png'); game.load.spritesheet('dude', 'assets/dude.png', 32, 48); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); sky = game.add.sprite(0,0, 'sky'); platforms = game.add.group(); var timer = game.time.events.loop(Phaser.Timer.SECOND, addRowOfPipes, this); // The player and its settings player = game.add.sprite(250, game.world.height - 200, 'dude'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); cursors = game.input.keyboard.createCursorKeys(); } function update() { game.physics.arcade.collide(player, platforms); game.physics.arcade.collide(stars, platforms); game.physics.arcade.overlap(player, null, this); player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -250; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 250; player.animations.play('right'); } /* else if(cursors.down.isDown) { game.state.start(game.state.current); } */ else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. console.log(player.body); if (cursors.up.isDown || player.body.touching.collideWorldBounds) { game.state.start(game.state.current); } } function addOnePipe(x,y) { // Create a pipe at the position x and y var pipe = game.add.sprite(x, y, 'ground'); // Add the pipe to our previously created group this.platforms.add(pipe); // Enable physics on the pipe game.physics.arcade.enable(pipe); // Add velocity to the pipe to make it move down pipe.body.velocity.y = 150; // Automatically kill the pipe when it's no longer visible pipe.checkWorldBounds = true; pipe.outOfBoundsKill = true; pipe.body.immovable=true; } function addRowOfPipes() { // Randomly pick a number between 1 and 5 // This will be the hole position var hole = Math.floor(Math.random() * 5) + 1; // Add the 6 pipes // With one big hole at position 'hole' and 'hole + 1' for (var i = 0; i < 8; i++) if (i !== hole && i !== hole + 1) { addOnePipe(i * 60 + 10, 0); } } </script> </body> </html>

Is it possible to make a ground from a heightFieldImpostor? I need to do this in order to use get height at coordinates for my game. Or is there a way to use get height at coordinates with a heightFieldImpostor?

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 = level2.add.group(); 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.name = 'mail' + x.toString() + y.toString(); // ?? mail.checkWorldBounds = true; mail.events.onOutOfBounds.add(mailOut, 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

Hi all, Are there any way to set my import mesh (obj) to height of ground? I have done something similar with SPS but in this case I have to do this with differents meshes which have been imported to scene. Thanks!

Hello everybody! Is it possible to change y position value of tiled ground ? I'd like to create hill tiled ground with perlin noise changing thy y values of tiled ground. There is no vertices data ?

Hey Dave... I really need your help in finishing up my build in babylonjs terrain system. I think i may need some mods to the CreateGroundFromHeightmap or maybe help in creating a new CreateGroundFromUnityHeightmap where we go in and compensate for the height map coming from unity and 'post' process those height values to make it look good in babylon. Please take a look at the the video link explaining the problem (Also is attached a TestTerrain.png height map at 100 width/length and 50 height for to try to get to make look good with a creategroundfromheightmap call): Dear Dave - Please Help Try This Playground and see if can't get not so choppy around the edges: http://www.babylonjs-playground.com/#RDPE6#1

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

I was wondering since I have a chunked (tiled) based terrain system, I have a height tool made now, but at the edge of each tile I have gaps forming, I have seen somewhere a way that this can be fixed but hours of searching I haven't been able to find it and I seem to forgotten to bookmark it.. so hoping for some pointers here on possible ways this can be achieved. I attached a image to show what is happening between chunks (meshes). Thanks! Edit: Found the article and it has to deal with Three.js so not at all useful for me..

Hello, I want to "draw" some text, in a font, using a material/color, preferably in the "ground plane". Is it doable? Thank you...

I have created a simple scene including a camera, a ground a some hemispheric light. I want to change the size of the ground based on the size of the canvas. How could I do that, I don't find a method that may help me to perform this operation? Thanks for your help, Abdelkrim

Hello and welcome to my flat shaded ground demo. So if you want to make a dynamic ground that is flat shaded using the convertToFlatShadedMesh function would make it a 2 step process so i made my own custom mesh builder that also flips the triangles to give a better effect. DEMO http://www.babylonjs-playground.com/#1SLLOJ#77 how to - Equilateral Triangles http://www.babylonjs-playground.com/#ANEKM#8 //this is not dynamic look at demo to see how to edit equilateral triangles how to - Right Triangles http://www.babylonjs-playground.com/#ANEKM#6

Hello again. So as stated in the topic title i want to know if there is any alternative for getHeightAtCoordinates function. Here is the solution i thought of: I have a ground 3000x3000 loaded with createGroundFromHeightMap. The problem with getHeightAtCoordinates is that it is too slow. For instance if i have a set of 200 points and if i try to find out the y coordinate for each one using a for loop, the y is set to 0. One solution i thought of(knowing that the ground is not going to change) is to remember in an array all the y coordinates of all points (i know there are 9 000 000 y coordinates for the whole map) - or for the active part of the map; the first time i load up the map. My question would be, is there anyway i can compute the y coordinates, without relying on getHeightAtCoordinates? Thank you in advance. Note: I'm only interested in height where coordinates are whole numbers (ex: y where x=1.0 , z=2.0)

I am having difficulty having the ground stop any object other than player (not even quite sure why player stops). The other object(s) fall straight through. I thought it would be a simple as creating another collision group, but when I do so the game does not run. Here is what I am trying --- create: function () { this.physics.startSystem(Phaser.Physics.P2JS); this.physics.p2.setImpactEvents(true); this.physics.p2.gravity.y = 1200; this.world.setBounds(0, 0, 2000, 600);//(x, y, width, height) this.physics.p2.setBoundsToWorld(true, true, false, true, false); this.physics.p2.friction = 5; clouds = this.add.tileSprite(0, 0, 2048, 600, 'clouds'); ground = this.add.sprite(this.world.width/2, this.world.height-24,'ground'); this.physics.p2.enable(ground); ground.body.static=true; player = this.add.sprite(350, this.world.height - 150, 'player'); this.physics.p2.enable(player, false); player.body.setCircle(22); player.body.fixedRotation = true; player.body.mass = 4; player.body.name = 'player'; enemy = this.add.sprite(350, this.world.height - 450, 'enemy'); this.physics.p2.enable(enemy, true); enemy.body.setCircle(22); enemy.body.fixedRotation = true; enemy.body.mass = 4; var playerCollisionGroup = this.physics.p2.createCollisionGroup(); var enemyCollisionGroup = this.physics.p2.createCollisionGroup(); var groundCollisionGroup = this.physics.p2.createCollisionGroup(); player.body.setCollisionGroup(playerCollisionGroup); enemy.body.setCollisionGroup(enemyCollisionGroup); ground.body.setCollisionGroup(groundCollisionGroup); player.body.collides(enemyCollisionGroup, this.destroyEnemy, this); enemy.body.collides(playerCollisionGroup); enemy.body.collides(groundCollisionGroup);

Hello there! This year I've discovered the js13kgames competition and I've decided to find some time and give it a try! It has been really challenging and I've learned a lot! Unluckily I've discovered the competition a little bit late so I've just had like a week to create my game but in the end I managed to do it in time 2015's theme was "Reversed" so I've decided to create something a little bit crazy, and pretty hard to play: a fast paced survival space shooter in which enemies have the same color of the background. You will have to reverse the background color to reveal hidden enemies, avoid their bullets and survive! It is mobile compatible and here's how to play: - Desktop: arrow keys to move, spacebar to reverse background color. M to toggle mute. - Mobile: tilt device to move, tap to reverse background color. You can play Reverse Ground Battle here: http://js13kgames.com/games/reverse-ground-battle/index.html Here's the source code on GitHub: https://github.com/MattiaFortunati/Reverse-Ground-Battle And here's a screenshot: It was my first time using jAllegro and bfxr really saved my time! I had some issues with mobile browsers compatibility but in the end I managed to create this little game with great fun and satisfaction! I'll just leave this here in case you want to play some unusual game, while hoping that the source code can be helpful, too! Have Fun!

Hi guys! I have a mesh (ground) that is created with this function: ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", captureFilePath, 200, 200, 250, 0, 10, scene, false); At some point, I know that the file (captureFilePath) has changed (same file, but data has changed), and so, I want to update the mesh. I tried to do like this: ground.dispose(); ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", captureFilePath, 200, 200, 250, 0, 10, scene, false); But nothing changed. I feel like my first image is cached somewhere, because if I change the file (not only the data, but also the name), eveything goes well. My project is an offline project and the file is located on my local drive. Any idea? Thanks! Fred