Pau

Members
  • Content Count

    35
  • Joined

  • Last visited

Everything posted by Pau

  1. 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
  2. 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.
  3. 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.
  4. 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
  5. 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
  6. Thank you! Is Working player1.setDrag(100,100)
  7. 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"; } }
  8. 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
  9. 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
  10. 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
  11. Thank you ol-web! The variables i don't put var in front has global scope. That's right in my game.
  12. 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.
  13. 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!
  14. Thank you for your help Vexen :D, At last, i solve it, but using a lot of code. Your solution is better. Thank you
  15. 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
  16. Hello, I would like to change the direction of an enemy when it arrive to the end of the platform. I have tried using hasTileAt, but it is not working for me. I think maybe there is a better way. You have the game code in the attachments, and you can see the same code working in this url: https://pablomonteserin.com/apuntes/8-enemigo-inteligente-2 This is the problematic code: var nextX = this.x + direccion*(Math.abs(this.width/2) ); nextX=Math.floor(nextX/32)+1 //32px is my tilesize var nextY = this.y+this.height/2; nextY = Math.floor(nextY/32) console.log(nextY) var nextTile = collisionLayer.hasTileAt(nextX, nextY) console.log(nextTile + " - " + this.body.blocked.down) if(!nextTile && this.body.blocked.down){ this.body.velocity.x *= -1; } 8-enemigo-inteligente-2.zip
  17. I founded, but i wanted to make a geometry interactive inside an sprite, and there is an special code for it: var mazmorra = juego.add.sprite(480, 320, 'mazmorra'); var puerta1 = juego.add.zone(150, 140, 210, 410) puerta1.setInteractive(); puerta1.on('pointerdown', puertaPulsada);
  18. Pau

    Load tilemap

    In my case, it was to replace the create layer method for createStaticLayer, as elleniaw said. But i think yout problem is different
  19. Hello! I followed to advice and now the event triggers, but i happens when the mouse enter in the canvas var puerta1 = new Phaser.Geom.Rectangle(500, 100, 230, 430) var graphics1 = this.add.graphics({ fillStyle: { color: 0xff0000 } }); graphics1.fillRectShape(puerta1) graphics1.setInteractive(puerta1, puertaPulsada) ... function puertaPulsada(puerta){ alert("enter") }
  20. Hello! I would like to make geometry interactive. I have this code: var puerta1 = new Phaser.Geom.Rectangle(500, 100, 230, 430).setInteractive() var graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } }); graphics.fillRectShape(puerta1); But the console is telling me that setInteractive is not a function. How can i make puerta1 object interactive? Thanks in advance
  21. 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
  22. Pau

    Load tilemap

    It is working! Thanks!
  23. Pau

    Load tilemap

    Thanks! I made it, but the console says "TypeError: this.map.createLayer is not a function". This is the my code, but you can see the whole application it in the attachment: var config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); function preload(){ this.load.image('gameTiles', 'tiles_spritesheet.png'); this.load.tilemapTiledJSON('level1', 'map.json'); } function create(){ this.map = this.add.tilemap('level1'); var tileset = this.map.addTilesetImage('tiles_spritesheet','gameTiles'); this.backgroundLayer = this.map.createLayer('backgroundLayer', tileset); } coches.zip
  24. Pau

    Load tilemap

    Hello, I am trying to load a tilemap json file made with the tiled program. I am looking for phaser 3 equivalent to this phaser 2 code: function preload(){ this.load.image('gameTiles', 'tiles_spritesheet.png'); this.load.tilemap('level1', 'map.json', null, Phaser.Tilemap.TILED_JSON); } function create(){ this.map = this.add.tilemap('level1'); this.map.addTilesetImage('tiles_spritesheet','gameTiles'); this.backgroundLayer = this.map.createLayer('backgroundLayer'); } I have the attached the phaser 2 code, they are a few lines. Thank you! 1-carga-carretera.zip
  25. Thank you so much, for the explanations I made it as @snowbillr and @onlycape said (sorry @snowbillr i didn't get it with your first explanation). I take note of the @samme way to make it woking, that is working too. Thank you!