# Menu - Selection

**URL:** <https://forum.defold.com/t/menu-selection/44105>\
**Category:** Questions\
**Created:** [February 21, 2019, 7:33am UTC](https://forum.defold.com/t/menu-selection/44105 "2019-02-21T07:33:08Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hakiim.episal](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hakiim.episal/32/13562_2.png) [@hakiim.episal](https://forum.defold.com/u/hakiim.episal)\
**Post date:** [February 21, 2019, 7:33am UTC](https://forum.defold.com/t/menu-selection/44105/1 "2019-02-21T07:33:09Z")

</div>

Hello everyone.  
Currently I am trying to implement a cursor to select the button and would like to have the cursor to be controlled using keys. However I have no idea to do so because based on my understanding the button is implemented using click and touch. Please refer to the image shown below.  
Would you guys be able to provide some guides?  
Thank you.

 ![menu](https://forum-defold-uploads.b-cdn.net/original/2X/b/bf7a1f561b44c38419b1d0fbb0edce1b1f31e100.jpeg)

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 21, 2019, 7:42am UTC](https://forum.defold.com/t/menu-selection/44105/2 "2019-02-21T07:42:54Z")

</div>

> [@hakiim.episal](#):
>
> based on my understanding the button is implemented using click and touch

You are free to implement buttons and selections in any way you want. We do not decide for you how that is supposed to be done. Are you perhaps using a library or something?

Either way, add key up/down triggers and move the cursor up and down among your list of menu options. And space/enter to select the choice that is currently selected. Run the same code as if the button would have been pressed using the mouse/touch.

---

<div class="post-metadata">

**Author:** ![hakiim.episal](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hakiim.episal/32/13562_2.png) [@hakiim.episal](https://forum.defold.com/u/hakiim.episal)\
**Post date:** [February 21, 2019, 7:52am UTC](https://forum.defold.com/t/menu-selection/44105/3 "2019-02-21T07:52:28Z")

</div>

I do not know about library sir. But the cursor can be done using an image? or it has to be the actual cursor?

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [February 21, 2019, 8:27am UTC](https://forum.defold.com/t/menu-selection/44105/4 "2019-02-21T08:27:48Z")

</div>

Do you want to replicate the FF7 menu style? That can all be done with images and a few lines of code.

---

<div class="post-metadata">

**Author:** ![hakiim.episal](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hakiim.episal/32/13562_2.png) [@hakiim.episal](https://forum.defold.com/u/hakiim.episal)\
**Post date:** [February 21, 2019, 8:30am UTC](https://forum.defold.com/t/menu-selection/44105/5 "2019-02-21T08:30:12Z")

</div>

yes sir Pkeod, would you be able to show me the code? Thank you

---

<div class="post-metadata">

**Author:** ![TheKing0x9](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/theking0x9/32/13588_2.png) [@TheKing0x9](https://forum.defold.com/u/TheKing0x9)\
**Post date:** [February 21, 2019, 9:25am UTC](https://forum.defold.com/t/menu-selection/44105/6 "2019-02-21T09:25:41Z")

</div>

If you need it using keys as an input, it won’t be difficult.  
Just do something like this

> local b = {–all my nodes}  
> local offset = vmath.vector3(-50, 0, 0) --distance of cursor from the buttons  
> local cursor = gui.get\_node(“cursor”)  
> – set self.index to 1 in init  
> local function index(increment)  
> if self.index \> #b then  
> self.index = 1  
> else if self.index \< 0 then  
> self.index = #b  
> end
> 
> if increment then  
> self.index = self.index + 1  
> Else  
> self.index = self.index - 1  
> end  
> return self.index  
> end
> 
> – in input  
> if action\_id == hash(“up”) then  
> gui.set\_position(cursor, gui.get\_position(b[index(true)]) + offset)  
> elseif action\_id == hash(“down”) then  
> gui.set\_position(cursor, gui.get\_position(b[index(false)]) + offset)  
> end

(typing from mobile, so may have errors)  
BTW am I the only one not seeing the write code button while replying 🤔

---

<div class="post-metadata">

**Author:** ![hakiim.episal](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hakiim.episal/32/13562_2.png) [@hakiim.episal](https://forum.defold.com/u/hakiim.episal)\
**Post date:** [February 21, 2019, 9:30am UTC](https://forum.defold.com/t/menu-selection/44105/7 "2019-02-21T09:30:52Z")

</div>

okay thank you very much, I will try

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [February 21, 2019, 9:30am UTC](https://forum.defold.com/t/menu-selection/44105/8 "2019-02-21T09:30:53Z")

</div>

![retromenu](https://forum-defold-uploads.b-cdn.net/original/2X/b/bf16da4495aa50f021745ddcddd7ee11ec4dd699.png)

Here’s a rough, hard coded menu recreation. For educational use only. If you do this kind of style then you can move a cursor around different marker nodes at irregular positions or spaced however you want. There’s room to improve and make the idea more generic too, such as make it so you design menus based on JSON data and it builds the menu and its trees of options automatically by cloneing GUI nodes and setting them up.

[retromenu\_example.zip](https://forum-defold-uploads.b-cdn.net/original/2X/7/73cf1af72417763b7ca33e64597f6767f6d5366f.zip) (142.0 KB)

---

<div class="post-metadata">

**Author:** ![hakiim.episal](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hakiim.episal/32/13562_2.png) [@hakiim.episal](https://forum.defold.com/u/hakiim.episal)\
**Post date:** [February 21, 2019, 9:32am UTC](https://forum.defold.com/t/menu-selection/44105/9 "2019-02-21T09:32:03Z")

</div>

thank you very much sir for your time. I am really appreciate it.

---

<div class="post-metadata">

**Author:** ![hakiim.episal](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hakiim.episal/32/13562_2.png) [@hakiim.episal](https://forum.defold.com/u/hakiim.episal)\
**Post date:** [February 21, 2019, 9:54am UTC](https://forum.defold.com/t/menu-selection/44105/10 "2019-02-21T09:54:47Z")

</div>

@TheKing0x9 @Pkeod I will study the code that you guys have provided. I will share what I have learned once I have understand it sir. Thank you. 👍

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [February 21, 2019, 12:54pm UTC](https://forum.defold.com/t/menu-selection/44105/11 "2019-02-21T12:54:44Z")

</div>

[game.zip](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/2X/5/5b15d029bd4d942581b18a40225d35dc8970d41a.zip) (141.9 KB)

Here’s a slight fix, I realized I moved the input around without updating the game.project. 🙂

---

<div class="post-metadata">

**Author:** ![hakiim.episal](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hakiim.episal/32/13562_2.png) [@hakiim.episal](https://forum.defold.com/u/hakiim.episal)\
**Post date:** [February 21, 2019, 1:10pm UTC](https://forum.defold.com/t/menu-selection/44105/12 "2019-02-21T13:10:20Z")

</div>

thank you so much sir for your time

---

<div class="post-metadata">

**Author:** ![hakiim.episal](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hakiim.episal/32/13562_2.png) [@hakiim.episal](https://forum.defold.com/u/hakiim.episal)\
**Post date:** [February 21, 2019, 2:28pm UTC](https://forum.defold.com/t/menu-selection/44105/13 "2019-02-21T14:28:14Z")

</div>

I have studied the code. I will try my best to explain each line of code based on my understanding. It may not perfect because I myself is a newcomer to Lua language and using Defold Engine. Thank you very much @Pkeod @TheKing0x9 for providing the code for myself to learn. And last but not least @britzl, thank you. Hope someone will find these information useful. 👍

1. the cursor is set the position to 1.The self.node\_cursor = gui.get\_node(“cursor”), find the data named as “cursor” at the gui and set it on the self.node\_cursor. Applies the same for the data named as “text\_newgame” and “text\_continue”.

self.node\_cursor=gui.get\_node(“cursor”)  
self.node\_text\_newgame = gui.get\_node(“text\_newgame”)  
self.node\_text\_continue = gui.get\_node(“text\_continue”)  
end

1. if statement. if self.up means going up, decreases the value of self.cursor\_position hold. then play the sound of cursor move. If the value of self.cursor\_position is less than 1, set its value to 2. if the value of self.cursor\_position is greater than 2,set its value to 1.

3.This is where the cursor is automatically set to the node named as New Game. That is why it is always point at “New Game”, because at init, the self.cursor\_position is set as 1. if the value of self.cursor\_position hold is 1, the cursor will point at “New Game”. Then when the value of self.cursor\_position hold is 2, the cursor will point at “Continue?”.

```
if self.cursor_position == 1 then
    local position = gui.get_position(self.node_text_newgame)
    gui.set_position(self.node_cursor, position)
    end
     if self.cursor_position == 2 then
		local position = gui.get_position(self.node_text_continue)
		gui.set_position(self.node_cursor, position)
	end	

    self.up = false
    self.down = false
     end

```

4.Skip to the enter code. If the certain key is set as enter, then check if the value of self.cursor\_position holds is 1, play the sound cursor\_accept. Change the screen to game. Means its time to play game. Elseif the value of self.cursor\_position holds is 2, play the sound cursor\_accept. Change the screen to continue. Means load the game data based on the last save point. For an example, in Final Fantasy 7, if you guys saves at Gold Saucer area, then it loads at Gold Saucer area and so on.

```
function on_input(self, action_id, action)
	if action.released and action_id == hash("up") then
		self.up = true
	end
	if action.released and action_id == hash("down") then
		self.down = true
	end
	if action.released and action_id == hash("enter") then
		if self.cursor_position == 1 then 
		print(self.cursor_position)
		msg.post("/audio#cursor_accept", "play_sound")
		msg.post("main:/loader#script", "goto_game")
	elseif self.cursor_position == 2 then 
			print(self.cursor_position)
			msg.post("/audio#cursor_accept", "play_sound")
			msg.post("main:/loader#script", "goto_continue")
		end
	end
end

```