flow

Members
  • Content Count

    32
  • Joined

  • Last visited

Everything posted by flow

  1. Why does the server need to know a players deltaTime? My understanding is that it is just broadcasting positions and maybe speed (which is FPS independent). The client has to take care then that the difference between expected and corrected position does not look awkward (I've seen people using tweens to do that).
  2. You can also include any custom font via CSS if you don't have a bitmap font, but they are usually not so "clear": @font-face { font-family: "MyFont"; src: url("assets/fonts/MyFOnt.ttf"); }
  3. The animation can be played looping or non-looping: sprite.animations.play(name [, frameRate] [, loop] [, killOnComplete]) https://photonstorm.github.io/phaser-ce/Phaser.AnimationManager.html#play Is that what you need here?
  4. Is there anything else in the update function? Because if not you can just set sprite.update = ... when you are ready for checks. If there is something just leave it with the boolean, the CPU power you can save is probably not worth it spending even 5min of your time with it ;-)
  5. Sounds like a bunch of individual solutions, so I guess you just have to try out some stuff, but I'd probably start by adding some children to the "main" sprite in each corner and maybe some larger one along the edges, all giving them a certain version of the click-drag-scale function (scale.set(x, constant), scale.set(constant, y) and the diagonal one scale.set(d)). For snapping to the grid you can try something like x = Math.round(x/10)*10 which would give you values like 10, 20, ... 110, 120, ...
  6. When you look at my "impactSquare" value in the post above you can see that I'm actually calculating the absolute value of the vector difference so this is taken into account automatically at least for the resulting velocities AFTER the collision. Problem with "before.body.speed - after.body.speed" is as mentioned: "Another (likely over-complicated) idea was to use the onBeginContact method to get the pre-collision velocity and store that somewhere so we can call it in the collides feedback, but ... well feels like there must be something simpler ..." ... I don't want to have all the overhead of defining onBeginContact listeners just to get a value that should be somewhere in the collision result ... Is there no value stored in any of the collision callback data that still carries this info??
  7. Maybe I missed something here but velocity and speed are the same things and body.speed does not exist ...
  8. I'm doing P2 physics collisions with: sprite.body.collides(collisionGroups, callback, this); and I'm trying to get some info on the momentum transfer of the collision to calculate damage, but I can't find the right values. What I've tried is to use the velocity difference like this: var impactSquare = Math.pow(p2BodyA.velocity.x - p2BodyB.velocity.x, 2) + Math.pow(p2BodyA.velocity.y - p2BodyB.velocity.y, 2); This works ok, but obviously it gives totally wrong values when the bodies fly towards each other and just barely touch, then deltaV is pretty high but there is basically no momentum transfer. Since there is no V_old and V_new (as far as I know) to get the change of velocity per sprite (pre and post collision) I've tried to look into using the deltaX values: dx = sprite.previousPosition.x - sprite.position.x ... but stopped there because it feels like an over-complicated and unreliable way to get something that should be somewhere in the data anyway Has anybody an idea where to look? Another (likely over-complicated) idea was to use the onBeginContact method to get the pre-collision velocity and store that somewhere so we can call it in the collides feedback, but ... well feels like there must be something simpler ...
  9. I just answered you in your other thread. I guess this should get you going?
  10. Funny I was just reading this old post when I saw your question:
  11. So its still a bit unclear to me if you want to drag the sprite along a diagonal or if you want to scale the sprite by dragging like a window resize. I've decided to go for the 2nd one :-D What it does is when you click the sprite you can move your mouse to scale it keeping the aspect ratio. To do that I simply use the x coordinate of the mouse to scale both x and y equally. Hope that helps :-) var spriteScale = false; var spriteScaleStartX, spriteStartSizeX; var spriteScaleStartY, spriteStartSizeY; var sprite; var game = new Phaser.Game({ state: { preload: function() { // This is equivalent to <https://examples.phaser.io/assets/>. this.load.baseURL = 'https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets@v2.0.0/assets/'; this.load.crossOrigin = 'anonymous'; this.load.image('dude', 'sprites/phaser-dude.png'); }, create: function() { sprite = this.add.sprite(300, 100, 'dude'); // this.physics.enable(sprite); sprite.anchor.setTo(0.5); sprite.scale.setTo(1.0); sprite.inputEnabled = true; sprite.events.onInputDown.add(function(){ spriteScale = true; spriteScaleStartX = game.input.activePointer.position.x; spriteScaleStartY = game.input.activePointer.position.y; spriteStartSizeX = sprite.scale.x; spriteStartSizeY = sprite.scale.y; }, this); sprite.events.onInputUp.add(function(){ spriteScale = false; spriteScaleStartX = null; spriteScaleStartY = null; }, this); }, update: function() { if (spriteScale && spriteScaleStartX){ var factor = 1+(game.input.activePointer.position.x-spriteScaleStartX)/spriteScaleStartX; sprite.scale.set(spriteStartSizeX*factor) } } } }); Codepen: Codepen example
  12. Oh I just realized that you only want to click the shape Well you could place the box (sprite 1) on mouse click, that is probably the easiest. Unfortunately you cannot use "inputEnabled = true;" here because I think it ignores the shape.
  13. Here is an example. It's not exactly what you need I guess, but maybe a good start. It shows how you can create overlap callbacks without collisions with P2. You can drag the white box with the mouse to overlap with another shape and when they get in contact the color changes. The "magic" you still have to do is calculating the shape overlap to see if it fits (if you care about shape comparison at all), I haven't seen any methods that can do that for you and its probably pretty complicated with polygons :-( var game = new Phaser.Game(800, 300, Phaser.CANVAS, 'body', {preload: preload, create: create, update: update, render: render}); var sprite, sprite2, sprite3, box; var collisionGroups = {}; function preload(){ //Define some shapes (polygons) game.load.physics('myShapes', null, { "testShape": [ { "shape": [ 0,0 , 40,0 , 40,40 , 0,40 ] } ], "testShape2": [ { "shape": [ 0,0 , 40,0 , 40,40 , 20,60 , 0,40 ] } ] }); } function create(){ //Get the physics loaded game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.setImpactEvents(true); //required for collision callbacks //Create some test sprites sprite = game.add.sprite(game.world.centerX, game.world.centerY, ''); game.physics.p2.enable(sprite, true); sprite.body.clearShapes(); sprite.body.loadPolygon("myShapes", "testShape"); sprite.inputEnabled = true; sprite.input.enableDrag(); sprite.body.data.shapes[0].sensor = true; //THIS IS THE MAGIC that detects contact without collision //add some graphics box = new Phaser.Graphics(game, 4, 4); box.lineStyle(0, 0x0000FF); box.beginFill(0xFFFFFF); box.drawRect(-20, -20, 40, 40); box.endFill(); sprite.addChild(box); sprite2 = game.add.sprite(game.world.centerX + 100, game.world.centerY, ''); game.physics.p2.enable(sprite2, true); sprite2.body.clearShapes(); sprite2.body.loadPolygon("myShapes", "testShape"); sprite2.body.static = true; //This prevents body from moving sprite3 = game.add.sprite(game.world.centerX - 100, game.world.centerY, ''); game.physics.p2.enable(sprite3, true); sprite3.body.clearShapes(); sprite3.body.loadPolygon("myShapes", "testShape2"); sprite3.body.static = true; //Create collision groups collisionGroups['player'] = game.physics.p2.createCollisionGroup(); sprite.body.setCollisionGroup(collisionGroups['player']); collisionGroups['env1'] = game.physics.p2.createCollisionGroup(); sprite2.body.setCollisionGroup(collisionGroups['env1']); collisionGroups['env2'] = game.physics.p2.createCollisionGroup(); sprite3.body.setCollisionGroup(collisionGroups['env2']); game.physics.p2.updateBoundsCollisionGroup(); //Set up the collisions //sprite.body.collides([collisionGroups['env1']]); //ONLY FIRST sprite.body.collides([collisionGroups['env1'], collisionGroups['env2']]); //BOTH sprite2.body.collides(collisionGroups['player']); sprite3.body.collides(collisionGroups['player']); //Correct Contact event sprite2.body.onBeginContact.add(function(p2BodyA, p2BodyB, shapeA, shapeB, equation){ console.log('onBeginContact'); box.tint = 0x00ff00; }, this); //Wrong contact event sprite3.body.onBeginContact.add(function(p2BodyA, p2BodyB, shapeA, shapeB, equation){ console.log('onBeginContact'); box.tint = 0xff0000; }, this); } function update(){ if(sprite.input.isDragged){ sprite.body.setZeroForce(); sprite.body.setZeroVelocity(); sprite.body.x = game.input.activePointer.worldX; sprite.body.y = game.input.activePointer.worldY; } } function render(){ var debug = game.debug; debug.phaser(10, 580); } Codepen: Codepen example
  14. Do you have a code (or codepen) example of your starting point? In general I'd say if you want to move something along a diagonal just replicate dx to dy so you always have Math.abs(x2-x1) = Math.abs(y2-y1) where x1,y1 would be the starting point of your drag and x2,y2 your current mouse pointer position. Resolved to one of the pointer coordinates that would be y2 = y1 + Math.abs(x2-x1) then you can move the mouse everywhere but the point on the diagonal would move according to your pointer x position.
  15. flow

    P2 physics child bug?

    Apparently there is an old issue about it: https://github.com/photonstorm/phaser-ce/issues/182 I'd really like to fix that problem, anybody any ideas where to start looking? Maybe where the P2 bodies are placed in the world or where the children are handled in P2?
  16. I'm sorry, I looked over your code a bit, tried some things in-game linke setting the bounds again, update the collision groups etc., but nothing works. Since you CAN collide with the trees I don't think that there is a general issue with the collisions but for some reason the player just won't collide with the bounds :-( I wonder if it might be related to the materials but idk. As a workaround I would suggest this inside you update() loop after controls: if (player.body.x > world.x2) player.body.x = world.x2; else if (player.body.x < world.x1) player.body.x = world.x1; if (player.body.y > world.y2) player.body.y = world.y2; else if (player.body.y < world.y1) player.body.y = world.y1; Oh and be aware that depending on how you intended to use world.x1, world.x2, ... the width for the setBounds function will actually be (world.x2-world.x1) ... Since your world.x1 is 0 it currently makes no difference though but if you plan to change it for some reason you might get a bug there.
  17. You will find the nasty bug in your code eventually since we know now that it "should" work ;-) When it wasn't working for me in the first try I forgot to enable P2 physics on the player sprite ^^. I created an issue about the presumed Phaser bug: https://github.com/photonstorm/phaser-ce/issues/493 let's see ^^
  18. Here you go (Phaser 2.6.2 without bug): Strange thing is that there is a bug in 2.10.1 that does not happen when using the Phase Sandbox for testing (https://phaser.io/sandbox/edit/2). The left bound seems broken in Phaser CE 2.10.1, Sandbox uses 2.6.2 and there it works fine. [EDIT] I can confirm that the bug happens first time in Phaser CE 2.7.0:
  19. Something I just tried in the Phaser Sandbox and it seems to work as intended :-) function preload() { game.load.baseURL = 'http://examples.phaser.io/assets/'; game.load.crossOrigin = 'anonymous'; game.load.image('phaser', 'sprites/phaser-dude.png'); game.load.image('deadland', ''); game.load.image('earth', 'misc/starfield.jpg'); } var cursors, player, deadland, land; function create() { deadland = game.add.tileSprite(0, 0, 1600, 1200, 'deadland'); land = game.add.tileSprite(200, 200, 1200, 800, 'earth'); land.fixedToCamera = false; //Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); game.world.setBounds(0, 0, 1600, 1200); game.physics.p2.setBounds(200, 200, 1200, 800); game.physics.p2.gravity.y = 0; game.physics.p2.gravity.x = 0; game.physics.p2.world.defaultContactMaterial.friction = 1; game.physics.p2.world.setGlobalStiffness(1e5); player = game.add.sprite(800, 800, 'phaser'); //Don't forget to enable physics on the sprite game.physics.p2.enable(player); game.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON, 0.1); cursors = game.input.keyboard.createCursorKeys(); } function update() { player.body.setZeroVelocity(); if (cursors.left.isDown){ player.body.moveLeft(400); } else if (cursors.right.isDown){ player.body.moveRight(400); } if (cursors.up.isDown){ player.body.moveUp(400); } else if (cursors.down.isDown){ player.body.moveDown(400); } }
  20. Are you actually using P2? If so do you set collision groups somewhere because then you might need to do game.physics.p2.updateBoundsCollisionGroup();
  21. Are you using arcade or P2 physics? I just played around with game.physics.p2.setBounds(100, 100, 600, 400) on a 800x600 canvas since I'm mostly using P2 and it seems to work well except for the left boundary which reacts super strange. Maybe game.physics.arcade.setBounds(100, 100, 600, 400) works fine.
  22. I'm not sure if I fully understand the intention of your code example, but you set the bounds to the same size as the deadland tileSprite so I'd expect that the player can really go there. Maybe you can work something out with: game.physics.p2.setBounds(...) game.physics.arcade.setBounds(...) or game.camera.bounds
  23. Has there ever been a proper solution for this issue? It seems that PIXI is upscaling sprites properly but downscaling cannot be improved by playing around with the (PIXI) scale mode. There is a rather old issue about it at PIXI as well (and a newer one from this year): https://github.com/pixijs/pixi.js/issues/1802 I wonder if this is different in Phaser3 ...