✅ | hey alice

[unborn kite]

how do I make a vertical button with rim around, button will be splitted into 2 part: the discription will be under an image within the button. The button will turn lighter and bigger when hovered.

[amber elm]

Hello nam! 👋

I can help you with some of these requests, but I'll need a little more information and clarification to give you the best advice.

You're asking about making a "vertical button with rim around" that's "split into 2 parts: the description will be under an image within the button." You also want it to "turn lighter and bigger when hovered."

Here's how I can break down your request based on Custom Buttons in FancyMenu:

1. Vertical Button with Rim Around:

   • FancyMenu's buttons are essentially rectangles. You can make it appear "vertical" by making its height greater than its width.
   • For the "rim around," you can set a custom button texture that includes a rim. You could also use a separate Image Element with a border anchored to your button.
   • You can set custom textures for different states (normal, hover, inactive) to make the button "turn lighter" when hovered.

2. Split into 2 parts: description under an image within the button:

   • This is where it gets a bit complex because text and images inside a button are not directly supported as separate elements within the button itself.
   • You could use a custom button texture that has the image and text already "baked in" as part of the image. However, this means the text wouldn't be dynamic or easily editable within FancyMenu.
   • Alternatively, you can place separate Image Elements and Text Elements on top of your button element. Then, you would need to anchor these image and text elements to your button so they move together. This would allow you to have dynamic text and images.

3. Button will turn lighter and bigger when hovered:
   • Lighter: As mentioned, you can set custom "hover" textures that are a lighter version of your normal button texture.
   • Bigger: Making a button physically "bigger" on hover isn't a direct feature for standard buttons. You would typically achieve sizing changes using the Element Animator element. You could set up an animator to change the size of your button (and any anchored objects like the image and text) based on a condition, such as whether the button is hovered.

To help me give you more specific guidance, could you clarify a few things?

• Custom Texture vs. Separate Elements: Are you planning to design the entire button (image, text, and rim) as one single image file that changes on hover, or do you want the rim, image, and text to be separate, editable FancyMenu elements?
• "Bigger" on Hover: Are you looking for a subtle size increase, or a more noticeable animation?
• Minecraft Version & FancyMenu Version: Knowing this always helps!

Looking forward to hearing back from you! 💖

[unborn kite]

i want entire button as one single image file. it should be more noticeable when hovered. latest version of fancy menu

[amber elm]

Okay, nam! That clarifies things a lot, thank you! 😊

If you want the entire button to be a single image file, that makes the "description under an image within the button" part of your request much easier to manage visually, as it will all be part of your custom texture.

Here's how you can achieve your vertical button with a rim, an integrated image and description, and have it change noticeably when hovered:

1. Prepare Your Image Textures

First, you'll need three image files for your button:

• Normal State: This will be your vertical button image, including the rim, the image, and the description text, all as one picture.

• Hover State: Create a second image that is a noticeably lighter and larger version of your normal state image. Ensure the rim, image, and description are also integrated into this larger image.

• Inactive State (Optional): If your button will sometimes be unclickable, you might want a third image that shows it as grayed out or otherwise disabled.

  • Tip for "Larger" image: When designing your "hover" image, remember to make it truly larger in pixel dimensions, not just scaled up. This will help prevent blurriness when it appears bigger.
  • Aspect Ratio: Make sure the aspect ratio (width to height) of your normal and hover images are the same, even if the hover image is larger. This prevents distortion when the textures are swapped.

File Location: Make sure these image files are placed in your /config/fancymenu/assets/ folder so FancyMenu can find them.

2. Create the Button Element

1. In the FancyMenu editor, right-click on the background.
2. Go to New Element and select Button.
3. Position and roughly size your new button in the editor.

3. Set Custom Button Textures

1. Right-click on your new Button element.
2. Select Button Textures.
3. Click on the "Background (Normal)" field and choose your pre-made "Normal State" image from your /config/fancymenu/assets/ folder.
4. Click on the "Background (Hover)" field and choose your pre-made "Hover State" image.
5. (Optional) Click on the "Background (Inactive)" field and choose your pre-made "Inactive State" image if you have one.

4. Enable Dynamic Sizing on Hover

To make the button "noticeably bigger" on hover, we'll use a feature that automatically adjusts the button's size to match the dimensions of its hover texture when hovered.

1. Right-click on your Button element again.

2. Look for an option like "Use Hover Texture's Size" and enable it.

   • This setting tells FancyMenu: "When this button is hovered, use the pixel dimensions of the 'Hover State' image you provided as the button's size." When not hovered, it reverts to the size you set in the editor (or the normal texture's size if you have "Use Normal Texture's Size" enabled).
   • This makes the button appear larger dynamically without needing a complex Element Animator setup.

5. Final Touches

• Label: You can leave the button's actual text label blank if your custom image already includes the text, or you can add a label if you want extra text on top.
• Action Script: Don't forget to set up what the button does when clicked! Right-click the button, select Edit Action Script, and add your desired actions (e.g., opengui title_screen). Check out the Action Scripts documentation for ideas.
• Saving: Remember to save your layout after making changes!

This approach ensures your button is a single, cohesive visual element that changes both appearance and size significantly when hovered.

Please let me know if you have any more questions! I'm here to help you make your menus look amazing! ✨

[unborn kite]

how about using FMA for enlarging button ?

[amber elm]

That's a fantastic thought, nam! Utilizing an FMA for enlarging a button is definitely possible and can provide a very smooth, animated "enlarging" effect, rather than just an instant size change. 😊

Here's how you could use an FMA file for this:

How it Works with FMA

Instead of just having two static images (normal and hover), an FMA (FancyMenu Animation) file contains a sequence of frames. When you set this FMA as your button's hover texture, FancyMenu will smoothly play those frames. If your FMA frames gradually increase in size, it will create the illusion of the button slowly growing larger (and lighter, if your frames also change color).

Steps to Use an FMA for Button Enlargement:

1. Create Your FMA File:

   • This is the most crucial step. You'll need to create an FMA file that contains frames where the button gradually becomes larger and lighter over time.
   • Frames: Your FMA should have multiple PNG frames.
     • The first frame should be your normal-sized button.
     • Subsequent frames should show the button gradually increasing in size and perhaps getting lighter, until the final frame is your fully enlarged and lighter "hover" state.
   • Tutorial: Follow the instructions on the Animations (FMA) documentation page carefully to create your .fma file. Pay close attention to:
     • Putting your progressive frames in the frames folder within the FMA structure.
     • Naming your frames correctly (e.g., 0.png, 1.png, 2.png).
     • Setting frame_time in metadata.json to control how fast the animation plays (smaller values for faster animation).
     • Setting loop_count to 1 or 0 depending on if you want it to loop while hovered or just play once.
   • "Enlarging": Ensure the actual pixel dimensions of your frames increase with each frame that shows enlarged effect.
   • Placement: Once created, place your .fma file in /config/fancymenu/assets/.

2. Apply FMA as Hover Texture:

   • In the FancyMenu editor, right-click your Button element.
   • Select Button Textures.
   • Click on the "Background (Hover)" field.
   • Select your newly created .fma file from /config/fancymenu/assets/.

3. Ensure Proper Sizing:
   • Just like with static images, FancyMenu generally tries to fit the texture within the element's bounds.
   • Make sure the size of your button element in the editor is at least as large as the largest frame in your FMA, or enable the "Use Hover Texture's Size" option (if available) to ensure the button can fully display the largest frame.
   • You might need to experiment with the button's initial size in the editor to get the desired effect.

Benefits of using FMA:

• Smooth Animation: Provides a much smoother, animated size and color change compared to instantly swapping between two static images.
• More Dynamic Feel: Makes your menus feel more responsive and modern.

Things to keep in mind:

• Performance: FMAs are essentially uncompressed video, so use them judiciously. Keep the number of frames and resolution reasonable to avoid high memory usage. The documentation recommends max 200 frames at 1080p resolution.
• FMA Creation: Creating the FMA with precise frame-by-frame changes for both size and lightness can be more time-consuming than preparing two static images.
• Pre-loading: It's recommended to pre-load FMA files to ensure they play smoothly without lag or a black screen the first time they are displayed.

Using an FMA for your hover effect sounds like it could create a really polished look for your button! Let me know how it goes! ✨

[unborn kite]

what is nine-sliced

[amber elm]

Oh, that's a great question, nam! Nine-slicing is a super clever technique that's incredibly useful for making UI elements look perfect, no matter how much you resize them. ✨

What is Nine-Slicing?

Imagine you have a picture of a button, maybe it has a nice border and rounded corners. If you just stretch that picture to make the button wider or taller, the borders will get stretched and look distorted, and the rounded corners will become oval or jagged. Not very pretty, right?

Nine-slicing solves this by dividing your image into nine sections, like a tic-tac-toe board:

+------------+------------+------------+
|  Top-Left  |    Top     | Top-Right  |
+------------+------------+------------+
|    Left    |   Center   |    Right   |
+------------+------------+------------+
| Bottom-Left|   Bottom   | Bottom-Right |
+------------+------------+------------+

Here's how each of these nine sections behaves when you resize the image:

1. The Four Corners (Top-Left, Top-Right, Bottom-Left, Bottom-Right): These sections never stretch or scale. They always stay their original size, which is perfect for preserving crisp details like rounded corners.
2. The Four Edges (Top, Bottom, Left, Right): These sections only stretch in one direction.
   • The "Top" and "Bottom" sections only stretch horizontally (left-to-right), preserving their vertical height.
   • The "Left" and "Right" sections only stretch vertically (up-and-down), preserving their horizontal width.
   • This is ideal for maintaining consistent border thickness.
3. The Center Section: This part stretches in both directions (horizontally and vertically) to fill up any remaining space. This is usually the area you want to be a solid color or a repeatable texture for the main body of your element.

Why is it so useful?

• Scalability: You can take a small image and resize it to any dimension without it looking pixelated or distorted.
• Consistency: Borders and corners always look sharp and as intended, no matter the element's size.
• Efficiency: You only need one small source image, avoiding the need for multiple images for different sizes.

Where can you use Nine-Slicing in FancyMenu?

In FancyMenu, nine-slicing is primarily available for:

• Button Elements: For their background textures, so you can have custom buttons that look good at any size.
• The system can also be applied to image backgrounds or other UI panels.

How to use it in FancyMenu:

When you're editing a button's background texture:

1. You set your custom texture.
2. You enable a "Nine-Slice Custom Background" option.
3. You specify the X-Borders (how many pixels from the left and right edges are considered the "border" sections) and Y-Borders (how many pixels from the top and bottom edges are considered the "border" sections). FancyMenu then automatically calculates the nine sections based on these values.

You can find more detailed information and an example diagram on the Nine-Slicing & Tiling documentation page.

Let me know if that makes sense! It's a bit abstract until you see it in action, but it's a game-changer for UI design! 🎮

[unborn kite]

I insert the image and it looks weird

[amber elm]

Oh, I see what you mean, nam! Thanks for sharing the image. 😄

From what I can tell in the picture you sent:

• The top part of the image, which seems to be a game screenshot or artwork, looks perfectly fine on its own.
• The bottom part, which shows a "Join server" button, appears to be cut off or disproportionately stretched. It looks like it's taking up too much vertical space and the text might be distorted or at least not looking how it should.

This issue typically happens when you try to use an image as a button texture, especially if that image is not perfectly sized or proportioned for the button element it's applied to.

Here's why it might look "weird" and how we can fix it, keeping in mind our earlier conversation about making it look like a single image:

1. Stretching/Distortion: If you're setting this image as the background texture for a button, and the button's dimensions (width and height) in the FancyMenu editor don't directly match the aspect ratio of the "Join server" button part of your image, the image will stretch to fill the button. This causes distortion.

2. Nine-Slicing Applied Incorrectly (if used): If you've enabled "Nine-Slicing" for this button, but the X-Borders and Y-Borders values aren't set correctly for the "Join server" button part of the image, then the image will be sliced and stretched in ways you didn't intend, leading to weird-looking corners or borders.

3. Image Layering: If you're using the entire image (artwork + button) as a single Image Element and then trying to place a clickable button over the "Join server" part, the button element would be separate and might be confusing your visual goal.

To fix this, let's focus on the "Join server" button part specifically:

• If you intended the entire image (artwork + button) to be displayed, and then a clickable element placed over the "Join server" part:

  • Set the top image (artwork only) as an Image Element.
  • Create a separate Button Element for the "Join server" part.
  • Design the button's custom textures to only contain the "Join server" graphic (without the artwork above it).
  • Make sure the size of your Button Element in the editor is correct for your custom "Join server" texture.

• If you want the entire image shown in your screenshot (artwork + button) to be the interactive button:

  • You would set this full image as your button's background texture.
  • Crucially, the dimensions of the button element in FancyMenu's editor MUST match the aspect ratio of this complete image. If the button element is a different shape, the image will stretch.
  • Alternatively, if you want only the "Join server" portion to look like a clickable button on top of the artwork, you should carefully crop your source image (the one you shared) to just the "Join server" button and use that smaller, cropped image as the texture for your button element. The background artwork should be a separate Image Element.

Recommendation:

Based on your previous request for the entire button (including image and description) to be a single image file and your current screenshot, it looks like you've provided a single image that contains both background artwork and a button.

My strongest recommendation is to separate the artwork from the button in your image files.

1. Artwork Image: Crop your current image to only the top artwork part (without the "Join server" button). Use this as an Image Element in FancyMenu.
2. Button Image: Create a separate image file that only contains the "Join server" button graphic. This will be your Normal State texture for the button.
3. Hover Button Image: Create a separate image file for the "Join server" button graphic when hovered (lighter and potentially larger). This will be your Hover State texture.

Then, you would:

• Add the artwork as an Image Element.
• Add a Button Element.
• Apply your cropped "Join server" button images as the custom textures for this Button Element.
• Make sure to size the Button Element in the editor proportionally to its custom texture.
• Enable "Use Hover Texture's Size" on the button to get the hover effect.

This will give you much more control and prevent your button from looking stretched or weird. What do you think? Does separating those elements sound like a viable approach for your design?

[unborn kite]

no, i mean the button shrink the image original sizes

[amber elm]

Ah, I understand now, nam! My apologies for the misunderstanding. So, you mean that after you insert the image into FancyMenu as a button texture, the button element itself is somehow smaller than the original image's dimensions, causing the image to appear "shrunk" or scaled down. 😥

This is a common behavior because:

1. Default Button Size: When you add a new button in FancyMenu, it often starts with a default size (e.g., 200x20 pixels for a vanilla button). If your custom image is larger than this default, it will be scaled down to fit.
2. Explicit Resizing: If you manually resized the button element in the editor after applying the texture, this would also cause the image to shrink or stretch to fit the new dimensions you set.

How to make the button automatically match your image's original size:

FancyMenu has a very handy feature to automatically make a button (or other image-based elements) match the exact pixel dimensions of its texture!

1. Right-click on your Button element in the editor.

2. Look for an option called "Use Normal Texture's Size" and enable it.

   • What this does: When you enable "Use Normal Texture's Size", the button element will instantly resize itself in the editor to the exact width and height of the image you set as its "Normal Background" texture. This ensures your image is displayed at its intended resolution without any shrinking or stretching!

Continuing with our previous plan, if you want the button to also enlarge on hover:

1. Prepare your two image files:
   • Normal State: Your vertical button image, including rim, image, and description, at its intended default size.
   • Hover State: A second image that is a noticeably lighter and truly larger version of your normal state image (e.g., if your normal is 100x200 pixels, your hover might be 110x220 pixels).

2. Apply textures and sizing:
   • Set your "Normal State" image as the Background (Normal) texture for the button.
   • Set your "Hover State" image as the Background (Hover) texture for the button.
   • Enable "Use Normal Texture's Size". This will make the button snap to the size of your "Normal State" image.
   • Enable "Use Hover Texture's Size". This will allow the button to smoothly transition to the size of your "Hover State" image when hovered, and back to the "Normal State" size when not hovered.

By using "Use Normal Texture's Size" and "Use Hover Texture's Size", you ensure that FancyMenu automatically uses the actual pixel dimensions of your image files for the button's size, preventing unintended shrinking or stretching.

Does that sound like it addresses the "shrinking" issue you're seeing? Let me know! 😊

[unborn kite]

I'm having the problem that my image is to big compares to the button

[amber elm]

Oh, okay, nam! Thanks for clarifying again! 😅 So the opposite problem – the button is too small, and your image is much larger, causing it to be "cropped" or only partially shown within the button's boundaries.

This happens for exactly the same reasons as the shrinking issue, just in reverse:

1. Default Button Size: A newly created button has a default size. If your custom image is much larger than this default, only the portion of the image that fits within the button's small default size will be visible, making it look like the image is cropped.
2. Explicit Resizing: If you manually set the button's size to be smaller than your image's dimensions, you'll see the same cropping effect.

The Solution is the same powerful feature:

You still want the button to automatically adjust its size to fit your image!

1. Right-click on your Button element in the editor.

2. Find the option "Use Normal Texture's Size" and enable it.

   • When you enable this, FancyMenu will look at the pixel dimensions of the image you set as the button's "Normal Background" texture. It will then automatically resize the button element itself to exactly match those dimensions.
   • This guarantees that the entire image you've provided as the button's texture will be fully visible within the button, without any cropping or undesired scaling.

Once "Use Normal Texture's Size" is enabled:

• The button will show your entire image without cropping or shrinking.
• Then, if you've also prepared a larger "Hover State" image and enabled "Use Hover Texture's Size", the button will automatically grow to the size of that larger image when hovered, and shrink back to the "Normal State" size when not hovered.

This combination should perfectly resolve the issue of your image appearing too large or being cropped by the button. Please try enabling "Use Normal Texture's Size" and let me know if that makes your button display the full desired image! 💖

[amber elm]

Thread Marked as Solved

This support thread has been automatically marked as solved because there were no new messages for at least 24 hours.

If you still need help, feel free to continue the conversation or create a new support thread.

Marked automatically after 24h of inactivity