Search the Community
Showing results for tags 'slopes'.
-
i need help with a game i'm creating. I need a platform which has a curved path and the player moves along the path created. I have created a path using Bezier Interpolation which creates a path using random points in a range. The issue is that i can only create the outline of the path and i need to fill the area under the curve so that it looks like a solid platform.
-
Hello everyone! I thought I'd share something I've been working on for the past few weeks. A plugin for Phaser that provides collision handling for sloped tiles and half tiles, similar to Ninja Physics but somewhat more concisely. Check it out on GitHub, give it a whirl, let me know what you think! Github: https://github.com/hexus/phaser-arcade-slopes Demo: http://hexus.github.io/phaser-arcade-slopes/ It's still early days for this project, as I've only just released v0.1.0-alpha today, but I look forward to continuing fleshing it out. Why did I make this? I've been intending to make a 2D platformer with Phaser for ages, and I knew I wanted it to have sloped tiles to allow for a liberating way to traverse the Y axis, but I couldn't find anything that worked the way I want it to. I experimented with Ninja Physics, but it's deprecated and its limitations left me wanting. I tried P2, but it was too much in terms of physics for me, and I didn't want to tame a beast like that. I started searching these forums to see if anyone had managed to get sloped tiles working in Phaser, with some success, but not completely. The solutions wouldn't allow for completely free tile placement, and they just stuck physics bodies to the slopes and left it at that. So, with a somewhat limited understanding of the maths I'd need to learn to achieve what I wanted, I started reading tutorials about the Separating Axis Theorem (SAT), particularly the ones from Metanet and one I found magically through a Google search. After experimenting with SAT.js in Phaser, I decided that I could totally pull off my own plugin to solve this the way I wanted it to be. With lots of learning, but with a clear vision of how I wanted the plugin to work, this is what I've managed! I have lots more features planned, as you can see in the roadmap, but for now I'm just glad I've built something that can be plugged straight into any Arcade Physics project that just works. Screenshots
- 32 replies
-
- slopes
- sloped tiles
- (and 6 more)
-
I'm currently having this issue when I am trying to get a sprite to go up a slope within phaser using the phaser-arcade-slopes.min.js plugin. I am using a .csv tilemap also with a tile size of 32x32. I'm unsure if my names are just incorrect or I am using the wrong type of file for the tilemap itself. I have been getting errors such as - Tilemap.createLayer: Invalid layer ID given: null & Cannot read property 'resizeWorld' of undefined(…). Any help would be much appreciated. "snow_tiles_32.png" is the name of the tileset I created and I'm using "tiles.csv" the tilemap created inside Tiled. I've also included a .rar file of everything to do with the game if anyone decides to take a further look into this issue. HTML var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { this.game.load.tilemap('tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV); this.game.load.spritesheet('tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32); this.game.load.spritesheet('player', 'assets/penguin.png', 32,48); } var player; var cursors; function create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.plugins.add(Phaser.Plugin.ArcadeSlopes); cursors = game.input.keyboard.createCursorKeys(); this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('snow_tiles_32', 'tiles'); this.game.stage.backgroundColor = '#80e3ff'; this.ground = this.map.createLayer('collision'); this.ground.resizeWorld(); this.game.slopes.convertTilemapLayer(this.ground,{ 2: 'FULL', 3: 'HALF_BOTTOM_LEFT', 4: 'HALF_BOTTOM_RIGHT', 6: 'HALF_TOP_LEFT', 5: 'HALF_TOP_RIGHT', 15: 'QUARTER_BOTTOM_LEFT_LOW', 16: 'QUARTER_BOTTOM_RIGHT_LOW', 17: 'QUARTER_TOP_RIGHT_LOW', 18: 'QUARTER_TOP_LEFT_LOW', 19: 'QUARTER_BOTTOM_LEFT_HIGH', 20: 'QUARTER_BOTTOM_RIGHT_HIGH', 21: 'QUARTER_TOP_RIGHT_HIGH', 22: 'QUARTER_TOP_LEFT_HIGH', 23: 'QUARTER_LEFT_BOTTOM_HIGH', 24: 'QUARTER_RIGHT_BOTTOM_HIGH', 25: 'QUARTER_RIGHT_TOP_LOW', 26: 'QUARTER_LEFT_TOP_LOW', 27: 'QUARTER_LEFT_BOTTOM_LOW', 28: 'QUARTER_RIGHT_BOTTOM_LOW', 29: 'QUARTER_RIGHT_TOP_HIGH', 30: 'QUARTER_LEFT_TOP_HIGH', 31: 'HALF_BOTTOM', 32: 'HALF_RIGHT', 33: 'HALF_TOP', 34: 'HALF_LEFT' }); this.map.setCollisionBetween(2,34, true, 'collision'); //player this.player = this.game.add.sprite(100,50,'player'); this.game.physics.arcade.enable(player); this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 2000; this.player.body.collideWorldBounds = true; this.player.animations.add('left', [0,1,2,3], 10, true); this.player.animations.add('right', [5,6,7,8], 10, true); this.game.slopes.enable(this.player); this.game.camera.follow(this.player); } function update() { this.game.physics.arcade.collide(this.player, this.ground); this.player.body.velocity.x = 0; if(cursors.left.isDown){ this.player.body.velocity.x = -150; this.player.animations.play('left'); } else if (cursors.right.isDown){ this.player.body.velocity.x = 150; this.player.animations.play('right'); } else{ this.player.animations.stop(); this.player.frame = 4; } if(cursors.up.isDown && player.body.onFloor()){ this.player.body.velocity.y = -350; } } Test Game Phaser.rar
-
Since my previous post I have been wondering on how I can map tiles myself within Phaser using the slopes plugin. If I wanted to include tiles such as "hills" or different sorts of slopes, are there any good tutorials out there that explains this? It would be very beneficial to the game I am creating. I am using 32x32 tiles with arcade physics. I've read in this file I downloaded about a "Arcade Slopes converter" which I'm unsure about. I've included the current tile sheet I created and using to test things out as well as the full code. Any help is appreciated! This is my current code for the mapping of my tiles. this.game.slopes.convertTilemapLayer(this.ground,{ 1: 'FULL', 2: 'FULL', 3: 'FULL', 4: 'FULL', 5: 'FULL', 6: 'FULL', 7: 'FULL', 8: 'FULL', 9: 'HALF_TOP', 10: 'FULL', 12: 'FULL', 13: 'HALF_BOTTOM_LEFT', 14: 'HALF_BOTTOM_RIGHT', 15: 'HALF_BOTTOM_LEFT', }); Test Game Phaser.rar
-
Hello everybody ! I'm trying to build some slope and non-regular tiles but i have a lot of problem with collision. The main problem is that when I use moveRight()/moveLeft() on a slope (in this case, just a simple body) and I stop at the middle of the tile, my player just jump like that : On the other case, when I from the top of the tile to the left, my player just fly in the air and slowly land. I tried to tweak a bit the material by setting friction and removed restitution but it don't really change. Maybe it could work if I put a huge amount of gravity but then it will influence other part of the game (like jumping). I have also tried to add a sensor (simple circle) just below the sprite so I could set the x/y velocity at zero when the sensor is in contact with the ground. This is working well but it's not working at all when i'm trying to go down the slope. Basically it moves one px left, set velocity to 0, fall one px (cause of the gravity). move one px left and etc... This is the code if you want to reproduce the problem (I'm stuck with this for many days D:) : create() { this.playerMaterial = this.game.physics.p2.createMaterial() this.tileMaterial = this.game.physics.p2.createMaterial() this.game.physics.startSystem(Phaser.Physics.P2JS); this.game.physics.p2.gravity.y = 400 this.player = this.game.add.sprite(40,40, 'player', 1) this.tile = this.game.add.sprite(80, 272, 'player') this.tile.visible = false this.game.physics.p2.enable([this.player, this.tile]) this.player.body.clearShapes() this.player.body.addRectangle(0, 40, 0, 0) this.player.body.debug = true this.player.body.fixedRotation = true this.player.body.setMaterial(this.playerMaterial) this.player.body.mass = 1.5 this.tile.body.clearShapes() this.tile.body.addPolygon( {} , 0,29, 0,40 , 50, 40 , 50, 0 ) this.tile.body.debug = true this.tile.body.static = true this.tile.body.setMaterial(this.tileMaterial) this.cursors = this.game.input.keyboard.createCursorKeys() this.jumpButton = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR) let contactMaterial = this.game.physics.p2.createContactMaterial(this.playerMaterial, this.tileMaterial) contactMaterial.friction = 1 contactMaterial.restitution = 0 contactMaterial.frictionRelaxation = 3; contactMaterial.surfaceVelocity = 0 contactMaterial.frictionStiffness = 1e7; contactMaterial.stiffness = 1e7; } update() { if (this.cursors.left.isDown) { this.player.body.moveLeft(200); } else if (this.cursors.right.isDown) { this.player.body.moveRight(200); } else { this.player.body.velocity.x = 0; } if (this.jumpButton.isDown) { this.player.body.moveUp(100); } } So, any idea how can I resolve this problem ? I'm a bit lost. Thanks !
-
What I am trying to achieve is when a bullet is fired at a 45 degree slope, it bounces off at a 90 degree angle, this may be clearer looking at the attached image. As you can see you would expect the bullet to bounce off at a 90 degree angle when it collides with the slope. I have all the logic and code ready to bounce the bullet off at this angle, my problem is that the bounding box around the slope is square or rectangular, as a result the bullet bounces off the slope before it actually collides with the pixels. I read in the forums earlier that phaser only supports square/rectangular collision. But how else would I be able to achieve this in my game, it does not need to be perfect, but just passable?