flow

Members
  • Content count

    32
  • Joined

  • Last visited

About flow

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. flow

    phaser real-time mmo authoritative server

    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. flow

    how to load custom font

    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. flow

    Drag and Scale Object

    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. flow

    P2 physics momentum transfer

    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. flow

    P2 physics momentum transfer

    Maybe I missed something here but velocity and speed are the same things and body.speed does not exist ...
  8. flow

    P2 physics momentum transfer

    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. flow

    Drag and Scale Object

    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. flow

    Is there a code for diagonal dragging?

    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