Search the Community
Showing results for tags 'ArcadePhysics'.
Found 4 results
-
Hello All, I'm new to Phaser and the world of HTML game development so I'm trying to learn the ins and outs of Phaser 3. Past several days I've been trying to get some sprite animations working via an atlas but not having much luck. The feet would not stay aligned to the floor. I'm assuming it has to do with the physics body since I can get it to work as intended via a sprite sheet or with an atlas without the physics involved. I've tried messing with the body.setSize() and the setOrigin() to the sprite itself but luck. I've attached the quick demo of the problem. The attachments go into the "assets" folder and the index.html code is below. Apologies ahead of time if I'm not going about posting the example in the proper way...let me know if I am. In the demo I've got three versions of the sprite: The first (dude1) is created via sprite sheet and works as expected. The second (dude2) is created with an atlas with no physics and plays the animation as expected The third (dude3) is created with the same atlas as the second but I've added the physics to it. As it animates it seems to jitter vertically and will go through the floor. The atlas png/JSON was created using TexturePacker and I've added a pivot point right at the left feet of the sprite. Any help would be very much appreciated. -Ray <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <style> body { background-color: grey; } </style> </head> <body> <script type="text/javascript"> const config = { type: Phaser.AUTO, parent: "phaser-example", width: 600, height: 400, pixelArt: true, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; const game = new Phaser.Game(config); function preload() { this.load.image('ground', 'assets/platform.png'); this.load.spritesheet("dude1", "assets/king_spriteSheet.png", { frameWidth: 78, frameHeight: 58} ); this.load.atlas("dude2", "assets/king_atlas.png", "assets/king_atlas.json"); } function create() { let floor = this.physics.add.staticGroup(); floor.create(0, 400, 'ground').setScale(3).refreshBody(); this.anims.create({ key: "dude1_idle", frames: [ { key: "dude1", frame: 0, duration: 1000 }, { key: "dude1", frame: 1, }, { key: "dude1", frame: 2, }, { key: "dude1", frame: 3, }, { key: "dude1", frame: 4, }, { key: "dude1", frame: 5, }, { key: "dude1", frame: 6, } ], frameRate: 10, repeat: -1 }); this.anims.create({ key: "dude2_idle", // frames: this.anims.generateFrameNumbers('dude2', { start: 1, end: 8 }), frames: [ { key: "dude2", frame: "Idle (78x58)_01", duration: 1000 }, { key: "dude2", frame: "Idle (78x58)_02" }, { key: "dude2", frame: "Idle (78x58)_03" }, { key: "dude2", frame: "Idle (78x58)_04" }, { key: "dude2", frame: "Idle (78x58)_05" }, { key: "dude2", frame: "Idle (78x58)_06" }, { key: "dude2", frame: "Idle (78x58)_07" }, { key: "dude2", frame: "Idle (78x58)_08" }, { key: "dude2", frame: "Idle (78x58)_09" }, { key: "dude2", frame: "Idle (78x58)_10" }, { key: "dude2", frame: "Idle (78x58)_11" } ], frameRate: 10, repeat: -1 }) this.dude1 = this.physics.add.sprite(100, 250, "dude1"); this.dude1.anims.play("dude1_idle"); this.dude1.body.setSize(50, 30) this.physics.add.collider(this.dude1, floor); this.dude2 = this.add.sprite(150, 352, "dude2"); this.dude2.anims.play("dude2_idle"); this.dude3 = this.physics.add.sprite(200, 250, "dude2", "Idle (78x58)_01"); this.dude3.anims.play("dude2_idle"); this.physics.add.collider(this.dude3, floor); this.cameras.main.setBackgroundColor("#AAAAAA"); this.cameras.main.setZoom(2); this.cameras.main.setScroll(-100,80) } function update() { console.log( // `D1-F: ${this.dude1.frame.height} D1-B: ${this.dude1.body.height}`, // `D2-F: ${this.dude2.frame.height}`, `D3-F: ${this.dude3.frame.height} D3-B: ${this.dude3.body.height}` ) } </script> </body> </html> king_atlas.json
-
I'd like to use sprites with 3D look (using light sources which cast shadows), and pre-render them from 3D models to 2D images for sprites. For sprite rotations (think Asteroids ship rotating), I thought I'd pre-render multiple frames for the different rotation angles, and select the frame which matches the rotation angle. I cannot figure out how to best handle this in Phaser Arcade Physics. If I try to use body.angularvelocity which seems to set sprite.rotation, the framework rotates the currently active frame, which messes up the shadow directions. Is there some way to override the body rotation handling so that it would switch frames (and update body dimensions) instead of rotating the single frame? Any other alternatives?
-
Hey guys, I had related topics before, but let me give a short summary: I am working on a time-based game, roughly similar to guitar hero. For that, I use deltaTime and PhysicsElapsed like this: update: function() { deltaTime = (this.time.elapsedMS)/(1000/60) this.time.physicsElapsed = this.time.elapsedMS*0.001; } So if the framerate drops to 30, deltaTime = 2 and physicsElapsed will also be double the value it is normally (1/60 as in 1/desiredFPS). It always seemed to work perfectly fine. Sure, it leads to a loss of accuracy whith lower framerates or bigger lags, but that's another story. I've tested it with 30fps (forced with a screen capture tool) and it was running at the same speed as it would with 60, so everything is alright. Just yesterday, I found out that when played on a 144hz monitor, the game runs in slow motion. I've checked all the vars above, and I could not find a problem. The game runs at 144 fps, deltaTime is around 0.42 as it should be and physicsElapsed naturally also has the value I expected (0.006999999999999999 for example). But all the motions are at half speed. Or more like 0.42x speed. The spawns, which are also tied to the game time are correct, so no problems there, but everything just moves too slow. The big mistery is: if somebody has a 30hz display, will it run at double speed which wouldn't be playable at all? I just can't think of a reason why this would happen as everything works fine with software caused differences in fps and especially since all the values seem to be in check. Maybe I am overlooking something? Maybe the hardware has some other effect that takes place outside of my code logic? I read that there are issues with other refresh rates, but I was under the impression my code would take care of that. Please help D:
-
Hi, First of all; I'm using Phaser 2.0.0, I have two sprite groups, "newspaper" and "home" and I'm moving the home group with clockwise movement of mouse. I do "game.physics.arcade.enable(sprite);" thing for all sprites in these groups. When i'm trying detect overlap with this code, this.physics.arcade.overlap(this.newspaper, this.homes, (newspaper, home) => { if (newspaper.name == 'newspaper' && home.name == 'newspaper') { newspaper.name = ''; home.name = ''; this.money += 1; } });It doesn't work When i'm trying Phaser 1.1.6, it works but i can't use Phaser 1.1.6.. How i can solve this problem ASAP? Thx for answers
