How to create a interactive / playable menu screen

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Farris

I came across an amazing game and it had a playable screen. So i would like to take that idea into my game. I would like it to have a text and a playable game in the background - not the long, if you press enter it will redirect you into the real game.

Do i just create the game - menu then add the text then the button - press enter.

Thank you.
If you need more information, please comment down below.

Not quite sure what’s your question here? Add a CanvasLayer, add a Label to it and write a script that will hide that CanvasLayer once the player hits “Enter”.

What exactly are you struggling with?

njamster | 2020-07-26 15:10

Maybe if I give you the game link download,
You can start it up and see the loaded screen?
Following Link: This is the link

This should be able to give you the idea of what I’m talking about.

Farris | 2020-07-26 15:19

I get what you’re talking about. What I don’t get is what is your question. :wink: I already detailed the general approach: ‘Add a CanvasLayer, add a Label to it and write a script that will hide that CanvasLayer once the player hits “Enter”.’ Which of these steps do you need help with? What is not working?

njamster | 2020-07-26 15:48

My question is:

How do I create a interactive game menu - like in the given game link.
I would like a copy of the game in the load screen that the player can play.
But once they press enter the actual game loads.

Hope this explains.
The game that I linked to should be able to tell you what I mean.
When you open up the file of the game and play it you will see what I mean.

Thank you :slight_smile:

Farris | 2020-07-26 17:50

And I already answered that question. In both of my comments…

njamster | 2020-07-26 20:46

Ok thx…
:slight_smile:

Farris | 2020-07-26 21:00

2
:bust_in_silhouette: Reply From: njamster

1: Add a CanvasLayer node to the main-node of your game
2: Add whatever you want to display ontop of the game (e.g. a Label-node) as a child of the CanvasLayer, make sure it’s visible and positioned right
3: Attach the following script to the CanvasLayer-node that will delete the CanvasLayer (and all of its children) once the Enter-key is pressed down

extends CanvasLayer

func _input(event: InputEvent):
	if event is InputEventKey and event.scancode == KEY_ENTER and event.is_pressed():
		self.queue_free()

Thank you so much!
Will try and get back to you if I need help.

Farris | 2020-07-27 13:09

This works fantastic .
I think I will need to put the canvas layer in my menu game screen.
And when I press enter should spawn into the game.

Thank you.
Hope to hear from you soon.

Farris | 2020-07-27 13:16

This works fantastic .
I’ve done this but I don’t want the label text to follow the user.
What should I do for this to work?

Once again thank you.
Sorry I did not understand first.

Farris | 2020-07-27 19:26

I don’t want the label text to follow the user.

Simply replace the CanvasLayer-node with a Control-node.

njamster | 2020-07-27 20:14

Thank you very much!

Farris | 2020-07-27 20:42

Thank you so much for your help!

I would like to know how could I make the label / button and sprites fade in the game after the game loads up.

Thank you.

Farris | 2020-07-27 20:49

You can animate the alpha-value of their modulate-property. For example you could add a Tween-node as a child of your Label / Button / Sprite with this script:

extends Tween

func fade_out(duration := 1.0):
	interpolate_property(get_parent(),"modulate:a", null, 0.0, duration)
	start()
	yield(self, "tween_all_completed")
    get_parent().hide()

Than all you have to do is get the Tween-node and call the fade_out-method.

njamster | 2020-07-27 21:04

Thank you very much!
Will try this tomorrow since I’m not able to do so now.

I’m new to Godot and you have helped me so much!!
I really appreciate the help you have given me!

Thank you!

Farris | 2020-07-27 23:30

Hi!

Doesn’t seem to work?

Farris | 2020-08-04 12:08

Doesn’t seem to work?

What do you mean? What doesn’t work? Are you getting an error? Does it behave differently than you’d expect? Or does nothing happen at all? Have you made sure you’re actually calling the Tweens fade_out-method somewhere? How do you expect me (or anyone else) to help you based on that meager amount of information?

njamster | 2020-08-04 12:33

I Meant nothing happens at all.

Farris | 2020-08-04 12:52

Again: From where do you call the fade_out-method? Have you made sure it’s actually called (e.g. by printing something in the method or setting a breakpoint)?

njamster | 2020-08-04 12:54