Creating Menus for A Little Alchemy Style Game

How do I make a menu for a Little Alchemy Style Game
I don’t now necessarily how to make, but mostly 4 things, Click to Spawn, Drag to Spawn, scrolling in the menu, and adding new items to the menu.
Q: How to make the click to spawn: So, I need the items in the menu to be clicked, and then it needs to spawn a Separate sprite, as I can’t have the menu items to be Draggable, but the actual items that you use have to be draggable to make new items)
Q: How to make the Drag to Spawn: Basically, the same as Click to Spawn, but I need it where you can click and if you move your mouse to the “playing field” it will spawn the item at where you let go of your mouse, it will spawn there (instead of 0, 0 if you do the click)
Q: if you need to add new items to the menu without it being shown if you haven’t made it yet, how do you hide it and then show it when you discover it, same with the text that tells you the name of the item.
Q: When you get a lot of items, how do you make it possible to scroll through that menu so that you can actually use all the items you created, same with the text next to the item that tells you the name of the item.

Welcome. Do you have a scene created or an image of your UI? It would help you get a better and quicker reply. It doesn’t need to be pretty. A scribble on a napkin would be enough for people to get a better idea of your vision.

People here tend to prefer to answer 1 question at a time. It’s easier. We don’t always have the time or knowledge to answer every question.

You’re new here. Don’t worry about it. Just remember it for the next time. We’re friendly people. Be patient. Someone here will help you.

I can send I can screenshot of what my UI currently looks like
ScreenshotUI

Though the items in the menu are not in a separate UI Layer yet, as I’m unsure if I should do that

Do you plan to use a different object for each item or the same object with a different animation. It can be easier to use 1 object that has all the animations and then change the animation as needed. It’s a bit of a personal choice. A single object helps when the objects are the same size and there is only 1 image per item. If you use different objects, you can put the m into a group(s) and get some of the same benifits.

I am using separate items (mostly for organization).

I played around with your concept. I did something similar playing around with the classic Pipe game.
This is only 1 way. It might not be the best. It might be buggy. It’s a start. Look at it and then either I or someone else can help with them. It still needs checks and balances.

Try me: You can drag onto the scene, drag after dropped. Press space to add “Fire” and scroll the menu with the wheel mouse.
https://gd.games/instant-builds/6c95e620-b0d0-4658-8c34-fe57993ffb2d

Source: (click the green [code] button and [download zip])
https://github.com/doug13579/gdevelop-my-little-alchemy-menu

If you put your menu on a layer, you can scroll the layer. This uses the mouse wheel.

You can add an object from a group with the name in a string or an expression that returns a string

Dragging to create a new object is more complex. The item objects use a Boolean variable to tell if an object is being dragged. It is set to true by default. They also have the drag behavior. The items in the menu need to have their behavior disabled also the objects in the menu have their dragging Boolean set to false.

This is to delete the object if it’s dragged from the scene onto the menu.

Edit: the mouse wheel does not work with the web preview. The web page scrolls but you should be able to understand the concept. Just move the layer up and down with something that checks for the limits.

Edit: I would change the dragging, so it moved the item to a layer that was higher than everything else and then change it to the base layer when dropped. As is, the items go behind other items. Using a higher layer is easier than messing with the z-order.

Something like:

I am a bit confused, and I made the items in the menu and the items that you will actually use to make new items separate sprites, because I need the in the menu to not be Draggable, and the items that you actually use Draggable

Honestly, I feel like using a single object would be much easier. You could change the animation. The issue with multiple objects is that currently there isn’t an easy way to make changes to every object. You need to change each one separately. The benefit though is it’s easier to handle interactions with multiple objects.

In my example, at the beginning it disables the drag behavior for the objects already in the scene. Meaning in the menu. It also sets the dragging Boolean to false. I wouldn’t recommend a set of objects for the menu and a set for the scene. That’s too many objects. You’ll be spending a lot of time tweaking each object. And finding the right object will be a pain.

Believe me, you want to keep the number of objects to a minimum otherwise anytime you need to add a variable or behavior, you’ll have to change every object one at a time.

If you where to use 1 object then you would just need to change the animation. You could also add more animations as you go on with variables.

You would use the regular add object and then set animation by name.

This is just a recommendation. It’s your project. I watched a video of Little Chemestry and there are a lot of items. I’ll help if I can, either way. It’s your project.

It’s late for me. Maybe, tomorrow I’ll modify my example just for fun to use 1 object. It’s a fun challenge. I might troll the forum tonight but I’m done with my PC for the night.

I am gonna change to one object, but basically for the one object, I would have to set animations for all the objects already in the scene to each animation, and then do the draggable code, or would that change it

Yes, set the animation for any object that is on the scene with the instance property panel. To create a copy you could use a scene string variable to store the animation name of the currently picked object.

This is just a test I made using my current scene.
This creates a guard when it’s touched and changes the animation to its animation.

You would use the basic create an object instead of create by name. Most of the other events should be the same.

How would change the animation for all beginning items that are in the menu?

If they’re all ready in the menu you use the instance panel. Although, you need to set it by number.

What Do you mean by using the instance panel?

To change the animation of objects already in the scene you use the panel that allows you to set the instance position, angle, variables and other settings and set the animation to the animation number as in the image in my previous post.

Number 10

https://wiki.gdevelop.io/gdevelop5/interface/scene-editor/#instance-properties-panel