Pau

Hello, In this game: https://pablomonteserin.com/apuntes/web/js/canvas/phaser/ex/coches/8-colisiones-con-matter/index.html the matter collision is not working. the players must to collision with the borders of the road, but it is not working. I am using matter collision. This is the Javascript code: class Escena extends Phaser.Scene { preload() { resize(); this.load.tilemapTiledJSON('level1', '/apuntes/assets/phaser/coches/map-wahab-2-capas.json'); this.load.image('nombreDelTilesetEnPhaser', '/apuntes/assets/phaser/coches/tiles.png'); this.load.image('car1', '/apuntes/assets/phaser/coches/F1_amarillo_32x64.png'); this.load.image('car2', '/apuntes/assets/phaser/coches/F1_azul_32x64.png'); this.load.image('car3', '/apuntes/assets/phaser/coches/F1_rojo_32x64.png'); this.load.image('car4', '/apuntes/assets/phaser/coches/F1_verde_32x64.png'); this.load.image('upbtn', '/apuntes/assets/phaser/coches/acelerador.png'); this.load.image('leftbtn', '/apuntes/assets/phaser/coches/flecha_giro.png'); } create() { this.velocity = 0; const map = this.make.tilemap({key: 'level1'}); const tileset = map.addTilesetImage('nombreDelTilesetEnTiled', 'nombreDelTilesetEnPhaser'); const backgroundLayer = map.createDynamicLayer('carreteraLayer', tileset, 0, 0); const paredesLayer = map.createDynamicLayer('paredesLayer', tileset, 0, 0); const players = this.findObjectsByType('player', map, 'objectsLayer'); map.setCollisionByProperty({ collides: true }); this.matter.world.convertTilemapLayer(paredesLayer); this.matter.world.setBounds(map.widthInPixels, map.heightInPixels); this.matter.world.createDebugGraphic(); this.matter.world.drawDebug = true; this.cursors = this.input.keyboard.createCursorKeys(); ////////////////////////////// this.player1 = this.matter.add.sprite(players[0].x, players[0].y, 'car1'); //////////////////////////// this.player1.setFrictionAir(0.08); this.player1.setMass(30); this.player1.setFixedRotation(); this.player2 = this.matter.add.sprite(players[1].x, players[1].y, 'car2'); this.player3 = this.matter.add.sprite(players[2].x, players[2].y, 'car3'); this.player4 = this.matter.add.sprite(players[3].x, players[3].y, 'car4'); this.controlesVisuales(); } findObjectsByType(type, tilemap, layer) { var result = []; tilemap.objects.forEach(function (element) { if (element.name === layer) { element.objects.forEach(function (element2) { if (element2.type === type) { element2.y -= tilemap.tileHeight; result.push(element2); } }); } }); return result; } update() { if ((this.cursors.up.isDown)) { this.player1.thrust(-0.03); } if (this.cursors.left.isDown) this.player1.setAngularVelocity(-0.065); else if (this.cursors.right.isDown) this.player1.setAngularVelocity(0.065); } controlesVisuales() { this.player1.parametros = {}; this.player1.parametros.direccionHorizontal = 0; const leftbtn = this.add.sprite(30, 600, 'leftbtn').setInteractive(); const rightbtn = this.add.sprite(100, 600, 'leftbtn').setInteractive(); rightbtn.flipX = true const upbtn = this.add.sprite(60, 550, 'upbtn').setInteractive(); rightbtn.on('pointerdown', () => { this.player1.parametros.direccionHorizontal = 1; }); leftbtn.on('pointerdown', () => { this.player1.parametros.direccionHorizontal = -1; }); upbtn.on('pointerdown', () => { this.player1.parametros.up = true; }); rightbtn.on('pointerup', () => { this.player1.parametros.direccionHorizontal = 0; }); leftbtn.on('pointerup', () => { this.player1.parametros.direccionHorizontal = 0; }); upbtn.on('pointerup', () => { this.player1.parametros.up = false; }); } } function resize() { const canvas = document.querySelector('canvas'); const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; canvas.style.width = `${windowWidth}px`; canvas.style.height = `${windowHeight}px`; } const config = { type: Phaser.AUTO, width: 960, height: 640, scene: Escena, physics: { default: 'matter', matter: { gravity: { y: 0, }, }, }, }; new Phaser.Game(config); window.addEventListener('resize', resize, false); ¿Can help me? Thank you in advance

Hello, I would like to create a interactive zone which is relative to an existing sprite. For example, this code is working: var marcoObjs = this.add.sprite(x, y, 'marcoObjs'); var puerta1 = this.add.zone(50, 50, 100, 100) puerta1.setInteractive(); this.add.graphics().lineStyle(2, 0xff0000).strokeRectShape(puerta1); But i want the puerta1 object to be relative positioned to marcoObjs object. So if marcoObjs x,y coordinates change, puerta1 coordinates must change too. I tried this way, but is not working: var marcoObjs = this.add.sprite(x, y, 'marcoObjs'); var puerta1 = marcoObjs.add.zone(50, 50, 100, 100) puerta1.setInteractive(); this.add.graphics().lineStyle(2, 0xff0000).strokeRectShape(puerta1); Any Ideas? Thank you in advance.

Hello onlycape, Thank you very much for your help, and for your fast reply . I tried to integrate your code in mine, but it is giving me the next error: "objectCar.entraEnArea1 is not a function". I tried to give the car object (coche) a property name called "love", but it says that the value is undefined. If i try to make it without a group, it gives to me the same error. I would like to make it with a group, anyways. function create() { map = this.make.tilemap({key:'level1'}); tileset = map.addTilesetImage('nombreDelTilesetEnTiled', 'nombreDelTilesetEnPhaser'); carreteraLayer = map.createDynamicLayer('carreteraLayer', tileset,0,0); alrededoresLayer = map.createDynamicLayer('alrededoresLayer', tileset,0,0); var players = findObjectsByType('player', map, 'objectsLayer'); var metaIN = findObjectsByType('meta', map, 'objectsLayer')[0]; var metaOUT = findObjectsByType('meta2', map, 'objectsLayer')[0]; var metaObjIN = this.add.zone(metaIN.x, metaIN.y+32, metaIN.width, metaIN.height).setOrigin(0,0) this.physics.world.enable(metaObjIN); var metaObjOUT = this.add.zone(metaOUT.x, metaOUT.y+32, metaOUT.width, metaOUT.height).setOrigin(0,0) this.physics.world.enable(metaObjOUT); cursors = this.input.keyboard.createCursorKeys(); coches = this.physics.add.group(this); player1 = coches.create(players[0].x, players[0].y,'car1'); player2 = coches.create(players[1].x, players[1].y,'car2'); player3 = coches.create(players[2].x, players[2].y,'car3'); player4 = coches.create(players[3].x, players[3].y,'car4'); Phaser.Actions.Call(coches.getChildren(), function(coche) { coche.setDrag(100,100) coche.parametros = {} coche.love= 2 coche.entraEnArea1 = function (){ this.triggered=true; console.log(this.name +' crossing goal'); } coche.entraEnArea2 = function (){ if(this.triggered){ } this.triggered=false; } }) this.physics.add.overlap(coches, metaObjIN, entra1.bind(this)); this.physics.add.overlap(coches, metaObjOUT, entra2.bind(this)); alrededoresLayer.setCollisionBetween(0, 500); this.physics.add.collider(coches, coches); this.physics.add.collider(coches, alrededoresLayer); } function entra1(objectCar,objectZone1){ console.log(objectCar) console.log(objectCar.love) objectCar.entraEnArea1(); } function entra2(objectCar,objectZone2){ objectCar.entraEnArea2(); } Thank you in advance.

Ah! Sorry about my wrong explanation I want the event to trigger each time the car pass across the goal zone. With your code it only trigger one time. Thank you

Hello, I want to trigger the "goal" function just one time, when one of the elements of the "players" group enter in the the overlappingArea. Now, the "goal" function is triggering multiple times, while one of the player's group is over the overllapping area. How can i trigger just one time, when the player enter in the zone? this.physics.add.overlap(players, overlappingArea, goal); Thank you in advance

Thank you! Is Working player1.setDrag(100,100)

Sorry, it is not working for me This is the whole code, maybe it helps Thank you in advance: var velocity=0; var juego; var config = { type: Phaser.AUTO, width: 960, height: 640, scene: { preload: preload, create: create, update: update }, physics: { default: 'arcade', arcade: { debug: true, gravity: { y: 0 } } } } var game = new Phaser.Game(config); function preload() { resize() window.addEventListener("resize", resize, false); this.load.image('car1', '../img/F1_amarillo_32x64.png'); this.load.image('car2', '../img/F1_azul_32x64.png'); this.load.image('car3', '../img/F1_rojo_32x64.png'); this.load.image('car4', '../img/F1_verde_32x64.png'); this.load.image('upbtn', '../img/acelerador.png'); } function create() { cursors = this.input.keyboard.createCursorKeys(); juego = this; coches = this.physics.add.group(); player1 = coches.create(300,100,'car1'); player2 = coches.create(300,200,'car2'); player3 = coches.create(300,300,'car3'); player4 = coches.create(300,400,'car4'); this.physics.add.collider(coches, coches); player1.setFrictionX(5) player1.setFrictionY(5) player2.setFrictionX(5) player2.setFrictionY(5) player3.setFrictionX(5) player3.setFrictionY(5) player4.setFrictionX(5) player4.setFrictionY(5) } function findObjectsByType(type, tilemap, layer) { var result = []; tilemap.objects.forEach(function(element) { if (element.name == layer) { element.objects.forEach(function(element2) { if (element2.type == type) { element2.y -= tilemap.tileHeight; result.push(element2); } }); } }); return result; } function update(){ if (cursors.up.isDown && velocity <= 200) { velocity+=7; }else if (velocity >= 7){ velocity -= 7; } player1.body.velocity.x = velocity * Math.cos(Phaser.Math.DegToRad(player1.angle-180)); player1.body.velocity.y = velocity * Math.sin(Phaser.Math.DegToRad(player1.angle-180)); /*Rotation of Car*/ if (cursors.left.isDown ) player1.angle = player1.angle - 10*(velocity/1000); else if (cursors.right.isDown ) player1.angle = player1.angle + 10*(velocity/1000); } function resize(width, height) { var canvas = document.querySelector("canvas"); var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; var windowRatio = windowWidth / windowHeight; var gameRatio = game.config.width / game.config.height; if (windowRatio < gameRatio) { canvas.style.width = windowWidth + "px"; canvas.style.height = (windowWidth / gameRatio) + "px"; } else { canvas.style.width = (windowHeight * gameRatio) + "px"; canvas.style.height = windowHeight + "px"; } }

Hello! I am making a car racing game. You can play the prototype in this link: https://pablomonteserin.com/apuntes/web/js/canvas/phaser/ex/coches/cars-foro-phaser-2/ My problem is when when the car i am controlling with the keyboard collisions with another car. The second car starts moving and never stops. I tried to put some friction, but it is not working. This is the important part of the code: coches = this.physics.add.group(); player1 = coches.create(300,100,'car1'); player2 = coches.create(300,200,'car2'); player3 = coches.create(300,300,'car3'); player4 = coches.create(300,400,'car4'); this.physics.add.collider(coches, coches); player1.setFrictionX(5) player1.setFrictionY(5) player2.setFrictionX(5) player2.setFrictionY(5) player3.setFrictionX(5) player3.setFrictionY(5) player4.setFrictionX(5) player4.setFrictionY(5) How can in make the collisioned car stops moving after a while? Thank you in advance

Sorry, i believe that the explanation of my problem wasn't clear. I think that if the car rotates from its top-left corner it will be a wrong behaviour when you are playing. So i want it to rotate from its 0.5,0.5 position. The problem is when i import the position of the elements from tiled editor. I have prepared this example: https://pablomonteserin.com/apuntes/web/js/canvas/phaser/ex/coches/cars-foro-phaser/ In the example i have two cars. Both are right positioned in the tiled editor. In the tiled editor, both are just after the whilte line, in its center. But when i import the json generated with tiled to phaser, i must use setOrigin(0,0) to maintain the right location. In my online example, i didn't use setOrigin(0,0) for the second car, so it is wrong positioned: But if i change the origin to the 0,0 point, the rotation is not working fine. It is not rotating from its center and i believe it is a wrong behaviour when you are playing. I did put the game with the tiled editor map in the attachments. Thank you in advance. cars-foro-phaser.zip

I am making a car racing game. When i rotate the car, it doesen't rotate well. It is rotating in a weird way. I did set the origin to the 0,0 with following code in order to make it match with the tiled editor origin. But, after that, the rotation is wrong. player1 = this.physics.add.sprite(500, 500, 'car1').setOrigin(0 , 0) Before start rotating: After be rotating for a while: I put the game code in the attachment. Thank you in advance. cars.zip

Thank you ol-web! The variables i don't put var in front has global scope. That's right in my game.

Hello, I have design this car path with tiled editor: but when i load it in phaser i see this: It's like the tile rotation i made in tiled is no working in phaser. This is the code i use to load it the tilemap: function preload(){ this.load.tilemapTiledJSON('level1', 'map.json'); this.load.image('nombreDelTilesetEnPhaser', '../img/tiles.png'); } function create(){ map = this.make.tilemap({key:'level1'}); tileset = map.addTilesetImage('nombreDelTilesetEnTiled', 'nombreDelTilesetEnPhaser'); backgroundLayer = map.createStaticLayer('background', tileset,0,0); } How can i get the tiles rotation working in phaser as i can see on tiled editor? Thank you in advance.

Thank you! your explanation solved my problem. I share my on code-explanation. function preload(){ this.load.tilemapTiledJSON('level1', 'map.json'); this.load.image('tilesetNameInPhaser', 'tiles.png'); } function create(){ map = this.make.tilemap({key:'level1'}); tileset = map.addTilesetImage('tilesetNameInTiled', 'tilesetNameInPhaser'); backgroundLayer = map.createStaticLayer('background', tileset,0,0); } Thank you!

Thank you for your help Vexen :D, At last, i solve it, but using a lot of code. Your solution is better. Thank you

Hello, I am trying to load a tilemap mad with tiled, but i am getting this error in the console: Error: No data found in the JSON tilemap from Tiled matching the tileset name: "gameTiles" This is the code i am using in phaser: function preload(){ this.load.tilemapTiledJSON('level1', 'map.json'); this.load.image('gameTiles', 'tiles.png'); //this.load.spritesheet('gameTiles', '../img/tiles.png', { frameWidth: 32, frameHeight: 32 }); } function create(){ map = this.make.tilemap({key:'level1'}); tileset = map.addTilesetImage('gameTiles'); backgroundLayer = map.createStaticLayer('background', tileset,0,0); } I give you the complete source code in the attachment. It is not so much. Thanks in advance. 1-carga-carretera.zip