We Keep Coding

How do I check if one fabricjs object collides with another one?

I have the following code in my requestAnimationFrame loop:
//move obstacles
game.obstacles.forEach(function(obstacle, index) {
obstacle.shape.left-=OBSTACLE_SPEED
//if outside to the left of canvas remove element,
//splice: https://stackoverflow.com/questions/9882284/
//index in foreach: https://stackoverflow.com/questions/10179815/
if (obstacle.shape.left < 0-OBSTACLE_SIZE*2) {
game.obstacles.splice(index, 1) //removes invisible obstacle
console.log("obstacles.size: " + game.obstacles.length)
addObstacle() //adds new obstacle
}
//check if player intersects with obstacle
//console.log("intersects? " + obstacle.shape.intersectsWithObject(player.avatar))
if (obstacle.shape.intersectsWithObject(player.avatar)) {
console.log("YO ITS OVER!")
alert("asdas")
}
})
obstacle.shape are fabricjs.Rect objects and player.avatar is a fabricjs.Circle object.
any idea why the obstacle.shape.intersectsWithObject(player.avatar) always returns false even though they are visibly clipping in the game?
player.avatar is also drawn by adjusting player.avatar.top or .left and I draw everything by calling canvas.renderAll()
if (player.moving == true ) { //move player
//console.log("moving")
player.avatar.top+=player.dy
}
//console.log(player.avatar.top)
canvas.renderAll()
I am basically trying to achieve the basic functionality of this game:
https://www.youtube.com/watch?v=WtsMbQRViFE

How do I make my character jumps in Phaser 3?

I'm new to Phaser 3, and I'm trying to make my character jump.
Here is my code:
create() {
this.kid = this.physics.add.sprite(50, 380, 'idle');
this.kid.setScale(.3);
this.kid.setGravityY(300);
this.kid.setBounce(0.2);
this.kid.setCollideWorldBounds(true);
this.physics.add.collider(this.kid, this.platforms);
this.cursorKeys = this.input.keyboard.createCursorKeys()
}
update() {
this.moveKid()
}
moveKid() {
if (this.cursorKeys.left.isDown) {
this.kid.setVelocityX(-300)
} else if (this.cursorKeys.right.isDown) {
this.kid.setVelocityX(300)
} else {
this.kid.setVelocityX(0);
this.kid.setVelocityY(0);
}
if (this.cursorKeys.up.isDown && this.kid.body.touching.down) {
this.kid.setVelocityY(-300);
}
}
But currently, the character only jumps a few pixels up and thats all. If I remove the touching.down part, the player jumps freely but also jumps in the air and falls very, very slow (no matter the gravity I set to it to).
Could anyone help?

You would want to remove the line in your code where you set the character's y velocity to zero whenever there's no keyboard input. It stops the character's motion every time the game updates, hence the slow fall speed.

Phaser game - get last frame of a sprite

I don't want to play animation,I want to chage sprite's frames by clicking right and left buttons.
var sprite = game.add.sprite(200, 100, 'mySprite');
sprite.frame = 3;
Now, if a right button is pressed I want this sprite goes to next frame
sprite.frame += 1;
If left button is pressed, sprites goes to the previous frame.
sprite.frame -= 1;
If left is pressed and current frame is 0 the sprite does not change it's frame, it stops on frame 0. I want the sprite goes from 0 to the last frame when I click left button.
For example, in Actionscript 3, I can do this:
sprite.gotoAndStop(sprite.totalFrames);
Is there "totalFrames" in Phaser/JS?

I did not find any answer, I have created a custom variable 'totalFrames' for all objects. The first frame is 0, then 1 and so on...
if (rightClick)
{
objects.frame += 1;
}
else if (leftClick)
{
if (objects.frame > 0)
{
objects.frame -= 1;
}
else
{
objects.frame = objects.totalFrames;
}
}

A bit late, buy you could try Phaser.GameObjects.Sprite.anims.getTotalFrames()

Phaser, make a button click event continuous

I'm using Phaser.js to create a map (tileSprite) and have some sprites on it, because not all the sprites can get in, I'm using the camera to pan right and left.
I want the user to either click a keyboard key (left or right) or a directional button sprite to continuously pan the camera until the user releases the control.
I've implemented keyboard panning similar to this example, I hold down a key and the camera moves/pans (10 pixels to each side on an event) and stops on key release.
However, when I've tried to implement the same thing using the 2 sprite buttons, each button fired only 1 event and panned the camera only 10 pixels per click. I need to to keep firing until I let go of the key.
var panRightButton = game.add.button(800, 5, 'right_pan_btn', onClickAction, this);
panRightButton.onInputOver.add(onButtonOver, this);
panRightButton.onInputOut.add(onButtonOut, this);
panRightButton.onInputDown.add(panScreenRight, this);
function panScreenRight() {
game.camera.x += 10;
}
I've tried using a boolean flag (isPanning) that would turn to true if i'm clicking a button and false on release. and have a while loop on game.camera.x += 10;, but it just slowed and stopped the script.
function onClickAction() {
isPanning = true;
}
function onButtonOut() {
isPanning = false;
}
function onButtonUp() {
isPanning = false;
}
function panScreenLeft() {
if (isPanning) {
game.camera.x -= 10;
}
}

The proper way to do it is on the update method, but not within a loop. Using a flag to know if the button is being pressed is ok, but just let Phaser to update the camera position, like in the example that you have linked:
function update() {
//...
if (isPanningLeft) {
game.camera.x -= 10;
} else if (isPanningRight) {
game.camera.x += 10;
}
//...
}
You don't need a loop because the update method is executed within a loop (and it is expected to be executed once by frame)

Jumping animation in javascript?

I'm trying to put together a simple game in javascript, and I cant get the jumping to work:
function jump()
{
isJumping=true;
var jumpint= setInterval(function() {
ypos=ypos-5;
}, 10);
if(ypos==150)
{
isJumping == false;
clearInterval(jumpint);
jumpint = 0;
alert("it works");
return;
}
}
Whenever I call this function it provides the animation, and the character moves in the right direction, but it doesn't stop. Once the ypos would equal 150 it keeps moving and doesn't execute the if statement and I cant figure out why. Obviously, I'll some equation in there, but I want to get this jumping to execute right before I move on.

Put the if-statement inside the setInterval, otherwise it will only be executed once.
var jumpint = setInterval(function() {
ypos=ypos-5;
if(ypos==150)
{
isJumping == false;
clearInterval(jumpint);
alert("it works");
}
}, 10);
Also, you might want to change the condition to ypos <= 150. Say the ypos is 157. If you keep decreasing by 5, it will go 157 -> 152 -> 147 and jump right past the condition. To fix it, simply change the if-statement's condition to ypos <= 150.