Phaser text event not detecting listener callback

I feel like I've hit a wall with this problem... does anyone have any insight on what might be causing it to fail?

The goal is to use a text element as a button in my game, but whenever I launch it, all I see is a black screen and an error message.

Below is the TypeScript code for reference, excluding the window.onload handler that initializes the MyGame class:

class MyGame {

game: Phaser.Game;
textStyle: object = { font: "Ubuntu", fill: "black", align: "center" };

constructor() {
    this.game = new Phaser.Game(800, 640, Phaser.AUTO, 'content', { preload: this.preload, create: this.create, update: this.update });
}

preload() { }

create() {

    this.game.stage.backgroundColor = "#eee";

    let buttonPlay = this.game.add.text(this.game.world.centerX, this.game.world.centerY, "play", this.textStyle);
    buttonPlay.anchor.setTo(0.5);
    buttonPlay.inputEnabled = true;
    buttonPlay.events.onInputUp.add(this.onPlay, this); //line 19

}

update() { }

onPlay() {
    console.log("pressed play");
}
}

This is the specific error message I encounter:

Uncaught Error: Phaser.Signal: listener is a required param of add() and should be a Function.
at i.Signal.validateListener (phaser.min.js:3)
at i.Signal.add (phaser.min.js:3)
at Object.MyGame.create (app.ts:19)

Answer №1

Instead of creating the game instance in the constructor, it is recommended to do it in the onload handler as shown below:

new Phaser.Game(800, 640, Phaser.AUTO, 'content', new MyGame());

By following this approach, when Phaser calls the create method on the object you provided:

{ preload: this.preload, create: this.create, update: this.update }

Within the method, this will refer to the object you provided and not the class instance itself. (For further clarification on how this works, feel free to research.)

The issue arises when onPlay is not present in that object, causing this.onPlay to be undefined, leading Phaser to believe that a listener parameter was not provided.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pass data between different parts of the system

Utilizing the angular material paginator has been a great experience for me. You can check it out here: https://material.angular.io/components/paginator/examples. The paginator triggers an event which allows me to print the page size and page index. This f ...

What is the best way to determine the variable type in TypeScript?

What is the method for determining the static type of a variable in TypeScript, allowing it to be applied to another variable? ...

Loading custom components dynamically in Angular with SVG: a how-to guide

Looking for a way to dynamically load SVG items with ease. The items needed are quite simple. Here's a basic template: <svg:rect [attr.x]="x" [attr.y]="y" width="10" height="10" /> Component Class Example: export class DraggableSvgItemCompon ...

Unable to update the <object/> element while transitioning from application/pdf to text/html

I am attempting to refresh a specific element within the DOM tree. Essentially, the TypeScript code is responsible for updating both the data and type attributes of an existing HTMLObjectElement. Here is a simplified version of the code: const textCanvas: ...

Utilizing Shadow Root and Native Web Components for Seamless In-Page Linking

An illustration of this issue is the <foot-note> custom web component that was developed for my new website, fanaro.io. Normally, in-page linking involves assigning an id to a specific element and then using an <a> with href="#id_name&quo ...

Is it possible that Angular 6's ngOnChanges directive is not compatible with a lambda expression?

Currently, I am in the process of creating an attribute directive that is designed to alter the background color of the host element based on a provided "quality" @input. While experimenting with my directive, I discovered that using ngOnChanges as a lamb ...

The index type in TypeScript's keyof function is overly broad

Sorry if this question has been addressed before, but I'm having trouble finding the right search terms. Feel free to correct my question if necessary. This is what I have: type RowData = Record<string, unknown> & {id: string}; type Column&l ...

Understanding the return type of a function in TypeScript

As someone new to TypeScript, I have some knowledge about the concept of generics in Java. Here's my dilemma: I have three functions - searchTrack, searchAlbum, and searchArtist. searchTrack(query: string): Observable<Track[]> { return th ...

The attribute 'Error' is not available for the object of type 'MovieData | ResponseError'. This attribute is also not present in objects of type 'MovieData'

Question Answered I am currently working with two interfaces, MovieData and ResponseError. export interface MovieData { Poster: string; Title: string; Plot: string; imdbID: string; } The ResponseError interface looks like this: export interface R ...

Error: The promise was not caught due to a network issue, resulting in a creation error

I'm trying to use Axios for API communication and I keep encountering this error. Despite researching online and attempting various solutions, I am still unable to resolve the problem. Can someone please assist me? All I want is to be able to click on ...

Unable to locate module 'fs'

Hey there, I'm encountering an issue where the simplest Typescript Node.js setup isn't working for me. The error message I'm getting is TS2307: Cannot find module 'fs'. You can check out the question on Stack Overflow here. I&apos ...

Tips for determining the minimum value within an array of objects across multiple keys using a single function

I am currently tasked with the challenge of determining the minimum value from an array of objects that contain multiple keys. My ultimate goal is to identify the minimum value among all keys or specific keys within the objects. For instance var users = ...

Is it possible for TypeScript to mandate abstract constructor parameters?

This specific function is designed to take a constructor that requires a string argument and then outputs an instance of the constructed value T: function create<T>(constructor: new(value: string) => T): T { return new constructor("Hello& ...

When aggregating data using Mongoose expressions, Number, Boolean, and ObjectId types are not compatible

I am facing an issue with my query: const match: PipelineStage.Match = { $match: { deleted: false, provinceId: new mongoose.Types.ObjectId(req.params.provinceId), }, }; const query: PipelineStage[] = [match]; const c ...

Adjust the height of a div vertically in Angular 2+

Recently, I started using angular2 and I've been attempting to create a vertically resizable div without success. I have experimented with a directive for this purpose. Below is the code for my directive: import { Directive, HostListener, ElementRef ...

Utilizing Angular PrimeNG's range datepicker, you can select a date range spanning from January 31st to December 1st, 2023 within a reactive form. Take it a step further by calculating

Here is some HTML code: <div class="row"> <div class="col-4"> <p-calendar label="startDate" formControlName="startDate" [minDate]="daMaxRange" ...

How do you define prop types when passing them in Nextjs?

Welcome to my page import { InferGetServerSidePropsType, GetServerSideProps } from 'next' import ProductList from '../../component/product/ProductList' export interface Item { title: string price: number } const products ...

Swapping Out Imports with Window Objects in TypeScript

After creating a TypeScript module that relies on a third-party library, the JavaScript output from compilation includes a statement using require: "use strict"; var dexie_1 = require("dexie"); var storage; (function (storage) { ... })(storage || (stora ...

Are indexed properties constraints in Typescript only working with raw types and not with object literals?

After defining this interface: interface Thing1 { [key: string]: string; x: number; } During compilation in Typescript, an error is thrown stating "TS2411: Property 'x' of type number is not assignable to string index type 'string& ...

Angular: Identifier for Dropdown with Multiple Selection

I have recently set up a multi select dropdown with checkboxes by following the instructions provided in this post: https://github.com/NileshPatel17/ng-multiselect-dropdown This is how I implemented it: <div (mouseleave)="showDropDown = false" [class. ...