CrabBoy

Members
  • Content Count

    6
  • Joined

  • Last visited

About CrabBoy

  • Rank
    Newbie

Recent Profile Visitors

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

  1. Thanks for your insight! Your comment made me add some log to my Spawn function with Sprite.revive() and it indeed looks like that the item is revived right after it is killed. There is some problem with my item spawning logic, I need to debug more. Thanks!
  2. Hi! character in my game is this cat: The cat is class extending group and contains torso and head, both are sprites with arcade physics enable on it. In the game, the cat is pushed up by applying velocity on it and it collects certain items (gameplay is similar to Flip the Gun game, check it out for better understanding). THE PROBLEM: In update method, I am constantly checking for collisionse between cat and the items: this.game.physics.arcade.overlap(this._cat, this._sceneObjectsLayer, this.onObjectCollision, null, this); My onObjectCollision method looks like this: onObjectCollision(cat: Phaser.Sprite, item: GeneratedItem) { console.log("COLLISION SOURCE IS " + cat.key); console.log("COLLISION! OBJECT ID IS " + item.ItemID + "... UPDATE FRAME IS " + this._updateFrameCnt); this._items++; this._UI.showCount(this._items); item.KillItem(); //inside this method I call item.kill() this._sceneObjectsLayer.remove(item); } Basically, it should just update the total amount of items taken in player UI. The problem is that same item is sometimes collected multiple times. That makes sense - one collision for torso, one for head, but I would expect it not to call this method for the same item after item.kill() is called. I already debugged this and I put the variable this._updateFrameCnt to update method. Result is this. You can see that the item with certain ID is collected, then it is killed and after few frames it is collected again like no kill() was called on it: State_game.ts:451 COLLISION SOURCE IS catHead State_game.ts:452 COLLISION! OBJECT ID IS 0... UPDATE FRAME IS 2034 GeneratedItem.ts:52 KILLING ITEM WITH ID 0 //called from item.KillItem //and after few frames: State_game.ts:451 COLLISION SOURCE IS catTorso State_game.ts:452 COLLISION! OBJECT ID IS 0... UPDATE FRAME IS 2040 GeneratedItem.ts:52 KILLING ITEM WITH ID 0 //called from item.KillItem Moreover, this sometimes happens for the same sprite (for example it is called twice for head sprite). Is this expected behaviour due the reasons how Phaser handles physics? Seems really strange for me, I would expect to make physics computation after each frame and therefore no second collision should occur, because the item should be dead at the time. Am I missing something here? Thanks in advance for your responses!
  3. If I call this this from update method, that basically means I want to rotate my head by the current angle of the torso. You call this 60times within a second and the only thing you see is the head rotating around the body as crazy. Better approach would be getting angle difference since last update call and rotate the head by this difference. Anyway I tried this approach and it did not work for some reasons... In the end I was able to achieve the behaviour I wanted by calling my code above (the one with sin and cos) from the postUpdate method instead of update. The problem was that physics calculations was always called after my code in update, so I was one step ahead the physics. Calling the code from postUpdate solved my problem. Thanks for your hints anyway!
  4. Thanks for the hint, but I don´t think this is the right way to do it, or at least I don´t know how to use it properly - can you provide some code snippet if you still think this is the right way to go? In the meantime, I discovered this article and I implemented it as follows: //in the constructor: this._catHeadDist = this.game.physics.arcade.distanceBetween(this._catHead, this._torso, false, false); //in the update method: this._catHead.x = Math.cos((this._torso.angle) * Math.PI / 180) * this._catHeadDist + this._torso.x; this._catHead.y = Math.sin((this._torso.angle) * Math.PI / 180) * this._catHeadDist + this._torso.y; this._catHead.rotation = this._torso.rotation; I got the behaviour as desired, but it is still not perfect - the head is somehow changing the distance from the body in certain angles and basically it behaves like a spring joint instead of distance joint. Sometimes it is ok but sometimes it is not, as you can see on the image below: Any other advices? Thanks!
  5. Hi guys! Main character in my game is this cat: Cat is composed from two parts - the torso and the head - and for each part I want to have physics body enabled, therefore I decided all parts will be inside a group. During the gameplay, I apply certain amount of velocity to the cat torso and cat then should rotate around its own axis, clock-wise and counter clockwise. I chose the approach to apply velocity to the torso and I want to position the head according the torso in the update method. Basically I want to achieve the same behaviour as Sprite.addChild() (add head as a child of a torso), but I want to do it in a group. I imagine basic (pseudo)code should look like this: export class Cat extends Phaser.Group { private _torso: Phaser.Sprite; private _catHead: Phaser.Sprite; private _torsoHeadDistance: number; public constructor(game: Phaser.Game, startPosY: number) { super(game); //torso this._torso = game.add.sprite(game.world.centerX, startPosY, "torso"); this._torso.anchor.setTo(0.5); this._torso.scale.setTo(0.5); //head this._catHead = game.add.sprite(this._torso.x, this._torso.top, "head"); this._catHead.anchor.setTo(0.5, 0.7); this._catHead.scale.setTo(0.3); this.add(this._torso); this.add(this._catHead); game.physics.enable(this._torso, Phaser.Physics.ARCADE); game.physics.enable(this._catHead, Phaser.Physics.ARCADE); //Get the distance between both parts this._torsoHeadDistance = this.game.physics.arcade.distanceBetween(this._torso, this._catHead, true); } //This will be called when player interacts with the game public AddVelocity(angle, speed, angularVel: number) { this._game.physics.arcade.velocityFromAngle(angle, speed, this._torso.body.velocity); this._torso.body.angularVelocity = angularVel; } //Called from update each frame public UpdatePosition(){ //pseudo code this._catHead.position = this._torso.position + _torsoHeadDistance; this._catHead.rotation = this._torso.rotation; } } Basically I just want retain the same distance between both sprites in the group within the time. The problem is that I am not able to figure out the code which should be in UpdatePosition() method. I know it should be something with vectors and normalizing, but I already spent few hours solving this without success. Can someone point me closer to the solution, please? I start to be desperate... Thanks in advance!
  6. Hi guys, I´m working on simple Connect-the-dots game (there are dots on the screen and you have to join them with mouse in order to get some image) and I´m trying to implement pencil, which will draw on canvas. I also need functionality where all what I´ve previously drawn will change the color when the image is complete, that means I need to preserve created data somehow. I´ve already tried multiple solutions I found here and around the internet, but nothing seems to work as I need. I´ve tried this: 1) Drawing with bitmapdata Basically this solution: http://phaser.io/examples/v2/bitmapdata/copy-bitmapdata, the problem is dots aren´t close enough each other when you move mouse fast and also I cannot access previously drawn data in order to change their color. 2) Drawing with Phaser.graphics this.game.input.onDown.add(this.startDrawing, this); this.game.input.onUp.add(this.stopDrawing, this); startDrawing: function(pointer) { this.drawing = true; this.graphics = this.game.add.graphics(); this.graphics.beginFill(); this.graphics.lineStyle(4, 0xFFFFFF); this.graphics.moveTo(pointer.x, pointer.y); this.game.input.addMoveCallback(this.onDraw, this); }, onDraw: function(pointer, x, y) { if (this.drawing) this.graphics.lineTo(x,y); }, stopDrawing: function(pointer, x, y) { this.drawing = false; this.graphics.endFill(); this.game.input.deleteMoveCallback(this.onDraw, this); }, Here I`ve experienced some serious drawbacks. First, this solution doesn`t work at all in Opera (also I`ve noticed weird behaviour of this example in my browser - the shapes are just blinking or you cannot see them at all) and in other browsers it looks like shapes are closing themselves automatically - that means shape is after each step closed (it is always polygon) and I cannot make path just from the lines - is it correct behaviour of the graphics class? 2) Drawing directly to canvas context through bitmapdata Currently I ended up with this: this.bmd = this.game.make.bitmapData(this.game.width, this.game.height); this.bmd.addToWorld(); this.game.input.onDown.add(this.startDrawing, this); this.game.input.onUp.add(this.stopDrawing, this); startDrawing: function(pointer) { this.drawing = true; this.bmd.ctx.beginPath(); this.bmd.ctx.lineWidth = 10; this.bmd.ctx.moveTo(pointer.x, pointer.y); this.game.input.addMoveCallback(this.onDraw, this); }, onDraw: function(pointer, x, y) { if (this.drawing){ this.bmd.ctx.lineTo(x, y); this.bmd.ctx.stroke(); } }, stopDrawing: function(pointer, x, y) { this.drawing = false; this.bmd.ctx.closePath(); this.game.input.deleteMoveCallback(this.onDraw, this); }, This solution seems to work only in IE, in Firefox and Opera nothing is shown. Could you please provide me some advices how to solve my situation? What is the best way to implement pencil-like behaviour in Phaser? I`ve already spent whole afternoon on this - without usable solution. Thanks in advance!