Анимация пунктов меню

International Pусский (Russian)
1

Добрый вечер, подскажите как сделать анимацию или где можно посмотреть , типу когда наводишь курсор мыши и этот пункт меню становиться выделенным , а то сколько пересмотрел видео и нигде не могу найти как это делается

добавил фото для примера

Снимок экрана 2025-01-14 223051
Снимок экрана 2025-01-14 223051811×178 140 KB

2

Привет! в Widget у некоторых элементов есть в Details Event On Hovered можешь нажать и написать небольшой код. Если в Option будет Hovered то там должен показываться и текстура или дефаулт значение, можешь поменять и посмотреть это ли ты искал

1 Like
3

Я задала вопрос АИ студия Гугл вот ответ : Добрый вечер! Ваша задача - сделать визуальную обратную связь при наведении курсора мыши на элемент меню. Вот несколько способов, как это можно реализовать в Unreal Engine, и где искать примеры:

1. Использование Widget Blueprint:

  • Стиль Normal/Hovered/Pressed: Это самый простой способ. В Widget Blueprint для каждой кнопки (или другого интерактивного элемента) есть секция “Style”. Там вы можете настроить внешний вид элемента в разных состояниях:

    • Normal: Обычное состояние.

    • Hovered: Состояние, когда курсор мыши наведен на элемент.

    • Pressed: Состояние, когда кнопка нажата.

Вы можете изменить:

  • Цвет текста
  • Цвет фона
  • Изображение фона
  • Размер шрифта
  • и т.д.

Просто настройте стиль Hovered так, чтобы элемент выглядел выделенным (например, более яркий цвет фона, другой шрифт, обводка).

  • Event OnMouseEnter/OnMouseLeave: Для более сложного поведения можно использовать события:

    • OnMouseEnter: Вызывается, когда курсор мыши входит в область элемента.

    • OnMouseLeave: Вызывается, когда курсор мыши покидает область элемента.

В этих событиях вы можете прописать логику изменения внешнего вида элемента (например, проигрывание анимации, изменение масштаба, появление дополнительных элементов и т.д.).

2. Анимации в Widget Blueprint:

  • Timeline: Вы можете создать анимацию в Widget Blueprint с помощью Timeline. Например, анимация изменения цвета фона, масштаба или положения элемента.

    • Создайте анимацию (Add Animation).

    • Добавьте трек Timeline.

    • Добавьте трек, который будет изменять нужный параметр элемента (например, трек для изменения цвета фона).

    • Настройте Timeline (длительность, кривые изменения значений).

    • В событиях OnMouseEnter и OnMouseLeave вызывайте воспроизведение анимации (Play Animation/Reverse Animation).

  • Transitions: В более новых версиях Unreal Engine есть возможность использовать Transitions (переходы) между разными стилями элемента. Это позволяет создавать плавные анимации изменения внешнего вида при наведении курсора.

Где искать примеры и документацию:

  • Unreal Engine Documentation: https://docs.unrealengine.com/ Обязательно посмотрите раздел про UI и Widget Blueprints. Там есть примеры, как настраивать стили и анимации.

  • YouTube Tutorials: Поиск по запросам:

    • “Unreal Engine UMG Hover Effect”

    • “Unreal Engine Widget Blueprint Animation”

    • “Unreal Engine UI Button Hover”

  • Unreal Engine Marketplace: Ищите бесплатные или платные UI-пакеты. Многие из них содержат готовые примеры с анимацией наведения курсора.

  • Unreal Engine Learning Portal: https://www.unrealengine.com/en-US/learn Там есть курсы и туториалы про UI.

Конкретные шаги (простой пример):

  1. Создайте Widget Blueprint.

  2. Добавьте кнопку (Button) или другой интерактивный элемент (Text, Image, etc.).

  3. В Details panel кнопки найдите секцию “Style”.

  4. Разверните секцию “Normal”.

  5. Разверните секцию “Hovered”.

  6. В секции “Hovered” измените цвет фона (Background Color) или другой параметр, чтобы элемент выглядел выделенным при наведении курсора.

Важно:

  • Убедитесь, что Widget Blueprint добавлен на экран (например, в Event BeginPlay вашего PlayerController создайте Widget Blueprint и добавьте его в Viewport).

  • Убедитесь, что на элементе UI включена интерактивность (IsFocusable).

  • Иногда может потребоваться настроить порядок отрисовки элементов UI (ZOrder), чтобы выделение было видно.

Надеюсь, это поможет! Если возникнут конкретные вопросы, или нужна более подробная помощь по какому-либо способу - спрашивайте.

11.9s