simulate keydown 'space' with pointerdown

Phaser 3
#1

Hi,

as a teacher I wanted to create an Among-Us-like-Game where my students have to do tasks to save a computer but there is a virus who deactivates them. My special idea: I can upload my own tasks with a JSON Document, so they have to do some maths e.g. to win the game.

Now everything works fine with a keyboard but many of my student just have smartphones and I’m struggeling with implementing mobile controls. The movement works by clicking on the edges of the screen. But I can’t implement a touch-zone which imitates clicking the spacebar.

All I want to do is adding a zone in the bottom right corner that triggers cursors.space.isDown. So there should be no difference if you hit the spacebar or click in the bottom right corner to start the taskScene, deactivate a player etc. Reminder: All that works already with onOverlap and the spacebar.

I would be so happy about some suggestions? I did all the hard work with many many tutorials and online threads but can’t find a solution for this easy sounding problem

Best Regards!

1 Like
#2

Hi @Vikthorin,

First of all great idea to create a game for your students. I really do appreciate that :clap:

My idea here is that you can seperate the logic from update function to another function and when cursors.space.isDown call the function.

Also in mobile or smartphones just create the clickable area to right bottom and call the same function when it’s pressed.

I had lot’s of these kind of situations at my work and would like to help.

Please do share some of your logic here so we can seperate it together or just let us know if you can figure it out :muscle:

1 Like
#3

:wave:

Yes, you don’t need to simulate a keydown, you just need to take the same action for two different input events.

You can use an input zone (invisible button).

#4

First of all I really want to thank yor for your fast answers! That and your offer to help is incredible kind.

E.g. this is my function to start a task by pressing space in the right zone:

startTask(player, zone) {
	if (this.socket.id == this.state.virusID) {
		return
	}

	if (this.spaceKey.isDown = true) {
		const taskName = zone.getData("taskName")
		console.log(taskName);
		this.input.keyboard.resetKeys();
		this.currentBattle = taskName
		this.scene.launch(taskName, { socket: this.socket, roomKey: this.state.roomKey });
	}
}

This is my “action”-Button in the bottom right corner:

            this.zone_space = this.add.zone(250, 250, 100, 100);
	this.zone_space.setOrigin(0.0);
	this.zone_space.setDepth(2);
	this.zone_space.setInteractive('pointerdown', () => { console.log('pointerdown'); });

Is there an easy way to connect both? I couldn’t find the term to ask at the station, if the pointer and or space is down. Can I just call startTask() instead of the console.log in the interactive zone? There are some more functions like deactivating and reporting a deactivated player. So I think it’s not possible to start all these functions every time I press the zone.

I can’t get rid of the feeling that the answer is too obvious for my twisted mind and too easy to google the problem.

Thank you very much for your time and attention!

Best Regards!

#5

Okey so I need to ask some questions about your code first. Will try to help after those:

How and where do you call this function? Is the second parameter zone is the same with

this zone ?

My second question is not related but is socket actually a socket.io connection? :slight_smile:

Third: Do you have a github repo for this? So maybe we can make some pr’s :slight_smile:

#6

Sorry for my late answer. Online-Schooling takes it toll. Still hyped by your help though!

I call the function in a simple collider:
this.physics.add.overlap(this.container, this.stations, this.startTask, false, this);

Yes it’s a socket.io connection.

This is the repo.

Thank you very much!

#7

Believe me I know how hard it is to do online classes with students so no worries :slight_smile:

Aight after checking your code a bit I can tell:

this.zone_space.setInteractive();
this.zone_space.on('pointerdown', () => {
  // you can use it like this. 
  // You just need to find which `zone` selected
  this.startTask(this.container, ?selectedZone);
  // maybe find the zone by checking if player on top of any of the zones?
})

In this way startTask function should work for both ways :slight_smile:

#8

Sorry for my late response. I became a dad this week (no kidding) and forgot about my coding issues :smiley:

But I tried your solution and found that since my startTask Function asks for Space-Input first it wouldn’t work at first. So I added this:

if (this.cursors.space.isDown) {
const taskName = zone.getData(“taskName”)
this.input.keyboard.resetKeys();
this.currentBattle = taskName
this.scene.launch(taskName, { socket: this.socket, roomKey: this.state.roomKey });
}
if (this.‘pointerdown’) {
const taskName = zone.getData(“taskName”)
this.input.keyboard.resetKeys();
this.currentBattle = taskName
this.scene.launch(taskName, { socket: this.socket, roomKey: this.state.roomKey });

and now it works just fine :slight_smile:
Thank you for your help!

1 Like