Make UI Disappear After Collision

[Nick_Romanek (0nederful)]

I have a script that disabled the character upon collision but the UI will not disappear. I’m making it disappear so I know it’s there to begin with. I will later reverse it, so the collision makes the UI appear. I’m trying to serialize the canvas so I can attach it to the script, I don’t see the field to drag my canvas into on the script which indicates serialize isn’t working. What do I need to change?

import { Behaviour, serializable } from “@needle-tools/engine”;

export class PlayerCollisionHandler extends Behaviour {

// Reference to the Canvas (automatically find in scene)
private gameOverCanvas?: any;

async onStart() {
    // Manually find the Canvas object by name (ensure the name is correct)
    this.gameOverCanvas = this.context.scene.getObjectByName("Canvas");

    if (!this.gameOverCanvas) {
        console.error("Canvas object not found in the scene!");
    } else {
        console.log("Canvas found successfully.");
    }
}

onCollisionEnter(collision: any) {
    // Get the collided object
    const collidedObject = collision.gameObject;

    // Check if the collided object is tagged as "candle"
    if (collidedObject.userData.tag === "candle") {
        console.log("Collision with Candle detected! Ending game...");
        this.endGame();
    }
}

// Function to handle end game logic
private endGame() {
    // Disable the Canvas to hide all UI elements
    if (this.gameOverCanvas) {
        console.log("Disabling the Canvas...");
        this.gameOverCanvas.visible = false; // Hide the entire Canvas
    } else {
        console.error("Canvas not found! Cannot disable.");
    }

    // Disable player controls or the player object
    this.gameObject.visible = false; // Hide the player

    console.log("Player hidden, game over.");
}

}

[needle-assistant (Needle Engine Assistant)]

Hi 0nederful!

It looks like you want to serialize the gameOverCanvas variable so that it can be attached to the script in the editor, allowing you to drag your UI Canvas into it. To achieve this, you need to use the @serializable decorator before declaring the variable.

Here is how you can modify your script:

import { Behaviour, serializable } from "@needle-tools/engine";

export class PlayerCollisionHandler extends Behaviour {

    // Serialize the Canvas field to allow for inspector assignment
    @serializable
    private gameOverCanvas?: any;

    async onStart() {
        // If not assigned in the inspector, find the Canvas object by name
        if (!this.gameOverCanvas) {
            this.gameOverCanvas = this.context.scene.getObjectByName("Canvas");
        }

        if (!this.gameOverCanvas) {
            console.error("Canvas object not found in the scene!");
        } else {
            console.log("Canvas found successfully.");
        }
    }

    onCollisionEnter(collision: any) {
        // Get the collided object
        const collidedObject = collision.gameObject;

        // Check if the collided object is tagged as "candle"
        if (collidedObject.userData.tag === "candle") {
            console.log("Collision with Candle detected! Ending game...");
            this.endGame();
        }
    }

    // Function to handle end game logic
    private endGame() {
        // Disable the Canvas to hide all UI elements
        if (this.gameOverCanvas) {
            console.log("Disabling the Canvas...");
            this.gameOverCanvas.visible = false; // Hide the entire Canvas
        } else {
            console.error("Canvas not found! Cannot disable.");
        }

        // Disable player controls or the player object
        this.gameObject.visible = false; // Hide the player

        console.log("Player hidden, game over.");
    }
}

Key Changes:

1. Added @serializable before the declaration of gameOverCanvas, allowing the field to be serialized and visible in the editor for dragging the Canvas object.

Next Steps:

• Assign the Canvas from the inspector after making this change.
• Verify the Canvas is correctly referenced before testing your collision logic.

Let me know if you need further assistance!

3 replies left
thread_apSdGIrUwAff4TwtJnLNRT0U
Reply to this message to continue the conversation

[Nick_Romanek (0nederful)]

@needle-assistant I’m getting this error: I’m getting this error: Property ‘gameObject’ does not exist on type ‘PlayerCollisionHandler’.ts(2339)

[marcel (marwi)]

There is no onStart method. You want to use start(). If you assign the instance at runtime from code instead of from an editor you also dont need serializable.

Otherwise you need to write it like this:

@serializable(Canvas)
myCanvas?: Canvas;

If you want to assign a reference from the editor