I'm new to Phaser and am following this tutorial here: https://phaser.io/tutorials/making-your-first-phaser-3-game/part7
What do I need to change for use on a mobile cell phone browser to make the player automatically run to the right and jump when the screen is tapped? I've searched for ages but can't find the answer and am trying to learn
// Input Events
cursors = this.input.keyboard.createCursorKeys();
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-330);
}
What I would do:
Add an input handler to your general game that calls a 'jump' function when a pointer is down.
this.input.on('pointerdown', this.jump, this);
Jump should now verify that the player can jump. Something like:
jump() {
if (this.player.body.touching.down) {
this.player.setVelocityY(-330);
}
}
To have your player automatically move at a speed, you can just set the player's body velocity when you're creating the player.
this.player.body.velocity.x = 160;
Note that if you want to keep the current ability to control the player, another option is to have actual buttons on the screen that the user can tap/click on to have the player move/act accordingly. There's an official plugin for Phaser 2 that does this, that you could look at.
Related
I'm trying to create a 'Bomber-man' like game using Phaser3 library.
For this purpose I'd like to define a collision relationship between the player and the bricks,
and more importantly - detect the collision direction relative the the player.
I've noticed body properties like touching or blocked but they are always set to false. (please see below)
//scene.js
// bricks static group
this.scene.physics.add.staticGroup({ immovable: true });
// player defined in external file (as sprite)
this.player = new Player(this, 90, 90)
// player.js
// ...
this.physics.add.collider(
this,
scene.bricks,
function(player, brick) {
if(player.body.touching.left) { //ALWAYS FALSE!!!
this.isBlockedFromLeft = true;
}, else if(player.body.touching.right) {
this.isBlockedFromRight = true; // ALWAYS FALSE!!!
}
},
null,
this
);
I'd appreciate any help. This is driving me crazy. Maybe there is a better way to do it and i'm missing something...
Thanks in advance.
So I finally figured it out.
The major issue was the way I defined the player movement. It should be
if (this.keyboard.right.isDown) {
this.body.setVelocityX(this.speed);
}
rather than
if (this.keyboard.right.isDown) {
this.x += this.speed;
}
The second way prevent collision detection and the body.touching and body.blocked properties to be updated.
Furthermore, I've found out that when it comes to top-down tiled games, it's really easier to build up the game using the tile-map feature.
official examples can be found here:
https://phaser.io/examples/v3/search?search=map
and here is a tutorial of how to make a tiled-map using a light-weight software called 'Tiled'
https://www.youtube.com/watch?v=2_x1dOvgF1E
Thank you all!
Can you please show me how the dom can communicate mouse pointer movement events as an input to a phaser scene. I've seen how mouse movement can be tracked within the scene area; but once the mouse leaves and goes to other areas of the DOM, that data is not tracked. I figure if perhaps there was a way to have an input to communicate data from "the outside world" then this could be possible. I am very grateful for help and direction you could share.
All you need to do is add an event listener to the DOM object you also want to track movement in using plain JavaScript. Then, you tie the event listener to the game method you want to execute when the event is triggered.
const body = document.querySelector('body');
body.onmousemove = (pointer) => {
updatePoint(pointer);
};
And then setup your game as normal:
const config = {
type: Phaser.CANVAS,
height: 400,
width: 400,
parent: 'gameContainer',
scene: {
create: create
}
};
const game = new Phaser.Game(config);
let dataText;
function create() {
this.input.on('pointermove', (pointer) => {
updatePoint(pointer);
});
dataText = this.add.text (10, 10, 'x, y');
}
function updatePoint(pointer) {
dataText.text = 'x: ' + pointer.offsetX + ', y: ' + pointer.offsetY;
}
You may have to refactor your code a little bit to get this to work, because the event listener on your DOM element needs to be able to access the game methods. I created a quick codepen showing the setup that worked for me.
I'm trying to make a sprite moving when the mouse is over it and I'd like it to stop when the mouse is not over it anymore.
Here is my code:
mySprite.events.onInputOver.add(() => touchMouse = true);
mySprite.events.onInputOut.add(() => touchMouse = false);
and
update() {
if (touchMouse) {
mySprite.x += 5;
}
}
My sprite is correctly moving but the onInputOut signal is not dispatched if I don't move the pointer out of the initial sprite position!! This result in my sprite moving out of my pointer and continuing its journey until I move my mouse...
Is it a phaser bug? Has anyone a solution to make this work?
Thank you very much and have a good day,
Simon
Edit:
I just tried to use the Phaser.InputHandler object instead but I got the same kind of bug. Here is the code:
update() {
if (mySprite.input.pointerOver()) {
mySprite.x += 5;
}
}
Someone answered my question in the html5gamedevs forum.
Phaser doesn't ordinarily update inputOver/inputOut events while the pointer isn't moving. You need to set pointer.dirty = true for that.
I am making a platformer, and I want to make something similar to Thwomp from Mario. So it's just an enemy that patrols between two points, and any collision with the player will kill the player.
I do this via Phaser's sprite.body.moveTo. I need to check if the enemy overlaps with the player, so I can trigger the player dying.
The problem is that, when the player and enemy collide, the moveTo is messed up, and the enemy's path is hindered. I took a short video to demonstrate what happens. Video.
Here is the code for when I create the enemy. I use an object group from Tiled for the properties, so thats what all the map.objects.mainObjecets[i] stuff is.
//demons is a phaser group with body enabled.
var demon = demons.create(map.objects.mainObjects[i].x,map.objects.mainObjects[i].y,'demon');
demon.direction = Number(map.objects.mainObjects[i].properties.direction);
demon.distance = Number(map.objects.mainObjects[i].properties.distance);
demon.duration = Number(map.objects.mainObjects[i].properties.duration);
//I tried using stopVelocityOnCollide and immovable to fix the problem, neither one worked
demon.body.stopVelocityOnCollide=false;
demon.body.immovable = true;
demon.body.onMoveComplete.add(moveDemon, this);
game.time.events.add(map.objects.mainObjects[i].properties.delay, function(a) {
a.body.moveTo(a.duration, a.distance, a.direction);
}, this, demon);
And here is the code that runs everytime a movement completes.
function moveDemon(demon) {
game.time.events.add(Phaser.Timer.SECOND * .3, function() { //.3 second delay before moving
demon.direction = 360-demon.direction;
demon.body.moveTo(demon.duration, demon.distance, demon.direction);
}, this);
}
And lastly, here is the code for checking for overlaps
this.physics.arcade.overlap(player,demons,function(){
//This code just moves the player back to the spawn point.
player.x = map.objects.spawn[0].x;
player.y = map.objects.spawn[0].y;
});
I want to be able to go to options menu in the game I am developing and set up my controls.
It is a simple game of pong (for now) and the controls for each player are just up and down.
This is how I want the process to look like: I click SETUP CONTROLS, game displays the name of the control I am supposed to change and it waits, I click the button on keyboard that i want it to be changed to, game reads it and displays the next control I am supposed to change and so on until i change all controls.
I have found a way how to do that here and my code now looks basicly like this:
if (optionsBList.IsButtonClicked("SETUP CONTROLS")) //when i click the
//SETUP CONTROLS button
//in the options menu
{
KeyboardState currentKeyboardState = new KeyboardState();
waitingForKey = true;
while (waitingForKey)
{
if(currentKeyboardState.GetPressedKeys().Count() > 0)
{
player1.upkey = currentKeyboardState.GetPressedKeys()[0];
//the path for the key isn't player1.upkey, but lets say it is.
waitingForKey = false;
}
}
}
In this short code my goal is to change just one key. If I can make it change 1 key, changing more wont be a problem.
The problem is, I don't see why does my game stop responding when i click the SETUP CONTROLS button. I don't see an infinite loop here nor a memory leak.
Why is my game crashing and is there a better way to load controls in options menu?
If you saw the answer from the link you placed in your question, you would have noticed that he actually deleted the while loop and he made it an if statement.
Like Nico Schertler said : "while(waitingForKey) is your infinite loop. That loop blocks the game thread, so no further input is recognized."
Link to the answer from your link: https://stackoverflow.com/a/15935732/3239917
if (optionsBList.IsButtonClicked("SETUP CONTROLS")) //when i click the
//SETUP CONTROLS button
//in the options menu
{
KeyboardState currentKeyboardState = new KeyboardState();
waitingForKey = true;
if (waitingForKey )
{
if(currentKeyboardState.GetPressedKeys().Count() > 0)
{
player1.upkey = currentKeyboardState.GetPressedKeys()[0];
//the path for the key isn't player1.upkey, but lets say it is.
waitingForKey = false;
}
}
}