MpW
WarCraft 3

SLIDER/Scrollbar

Добавлен , опубликован

Основы Интерфейса

Содержание:
Ползунок (Slider) - это фрейм для пользовательского ввода. Это позволяет пользователю выбирать значение между верхним и нижним пределом. Вы можете определить пределы для каждого слайдера по своему усмотрению. Значение Sliders является локальным, и может отличаться для всех игроков.
В fdf по умолчанию существует 2 слайдера mainFrame. EscMenuSliderTemplate и StandardSliderTemplate. Оба файла находятся в формате fdf и не загружаются по умолчанию.
Заглянул я в интернете что пишут про slider. Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную.
Вы когда-нибудь делали презентацию? там каждая страница - слайд, и на презентации пультом переключали на след страницу. Только здесь в варкрафте ничего такого нет, нет никаких сменяющих изображении (слайдов) наш slider больше напоминает Scrollbar.
Scrollbar (полоса прокрутки) - аналогично как и в Slider. Только вместо ползунка (Slider) используют bar (полосу) для прокрутки значения.
в реальной жизни можно встретить Scrollbars

Чем отличаются Slider и Scrollbar?

В варкрафте существуют два типа фрейма: SLIDER и SCROLLBAR. Если заглянуть в fdf-files, то они используют одни и те же fdf-функции, между ними нет никаких отличии. Да, мы щас будем думать, что в Slider перемещают ползунок (point), в Scrollbar полосу (bar). Но в варкрафте нет никакой полосы или ползунка, это кнопка button. Более того, у них значок кнопки похож на ползунка, полосы в игре я не видел. В кнопке можно изменить размеры backdrop кнопки, и перерисовать текстуру хоть в точку, хоть в полосу. В близзард используют эти типы для определенных моментов поведения: для горизонтальных перемещении используется слайдер, чаще всего для настроек. Для прокрутки описания текста, области используют scrollbar, чаще всего используются в вертикальном положении, но можно и в горизонтальных. То есть явных отличии нет.

fdf - функции ​Slider/​Scrollbar

SliderInitialValue
SliderInitialValue integer,
Пример:
SliderInitialValue 2, слайдер стартует с этим значением при его создании
Slider начинает именно с этим значением.
SliderMaxValue
SliderMaxValue integer,
Пример:
SliderMaxValue 100,
По умолчанию 100 - максимальное значение. Максимальное количество выбирается
SliderMinValue
SliderStepSize integer,
Пример:
SliderMinValue 0,
По умолчанию 0. Минимальное число по выбору.
SliderLayoutHorizontal
SliderLayoutHorizontal,
Этот флаг устанавливается горизонтальное положение слайдера
По умолчанию ползунок перемещается слева (минимум) вправо (максимум).
SliderLayoutVertical
SliderLayoutVertical,
Этот флаг устанавливает вертикальное положение слайдера
Ползунок перемещается снизу (мин.) Наверх (макс.)
SliderStepSize
SliderStepSize integer,
Пример:
SliderStepSize 1,
Насколько точно пользователь может выбирать значения.
Переводчик: насколько я понимаю, это значение влияет на шаг смещения. Короче, насколько может сместится ползунок на 1 шаг.
SliderThumbButtonFrame
SliderThumbButtonFrame "FrameName",
Фрейм BUTTON, используемый для перемещения значения SLIDER / SCROLLBAR.
Переводчик: эта функция указывает на кнопку. Это кнопочка будет являться ползунком/полосой
Пример:
SliderThumbButtonFrame "EscMenuScrollThumbButton",
Я нашел фрейм в fdf-file, оказывается вешают на кнопку BUTTON
SliderThumbButtonFrame "EscMenuScrollThumbButton",
Frame "BUTTON" "EscMenuScrollThumbButton" {
    Width 0.016,
    Height 0.016,

    ControlBackdrop "EscMenuScrollThumbButtonBackdrop",
    Frame "BACKDROP" "EscMenuScrollThumbButtonBackdrop" {
        DecorateFileNames,
        BackdropBlendAll,
        BackdropBackground  "EscMenuSliderThumbButton",
    }
}
в ui/war3skins.txt нашел эту переменную
EscMenuSliderThumbButton=UI\Widgets\EscMenu\Orc\orc-slider-knob.blp
видимо этот ползунок, где то в настройках игры используется. Там никогда игра не паузится, и картинка не Disabled. Короче, у нвшей кнопки BUTTON нет второй Disabled
Возьмем другой пример:
SliderThumbButtonFrame "EscMenuScrollThumbButton",
Взято из fdf-file:
SliderThumbButtonFrame "EscMenuThumbButtonTemplate",
Frame "BUTTON" "EscMenuThumbButtonTemplate" {
    Width 0.016,
    Height 0.016,

    ControlBackdrop "EscMenuThumbButtonBackdropTemplate",
    Frame "BACKDROP" "EscMenuThumbButtonBackdropTemplate" {
        DecorateFileNames,
        BackdropBlendAll,
        BackdropBackground  "EscMenuSliderThumbButton",
    }

    ControlDisabledBackdrop "EscMenuThumbButtonDisabledBackdrop",
    Frame "BACKDROP" "EscMenuThumbButtonDisabledBackdrop" {
            DecorateFileNames,
            BackdropBlendAll,
            BackdropBackground  "EscMenuSliderDisabledThumbButton",
    }
}
в ui/war3skins.txt нашел переменные:
EscMenuSliderThumbButton=UI\Widgets\EscMenu\Orc\orc-slider-knob.blp
EscMenuSliderDisabledThumbButton=UI\Widgets\EscMenu\Human\slider-knobdisabled.blp
в пути
UI\Widgets\EscMenu\Human\slider-knob.blp
ScrollBarDecButtonFrame
ScrollBarDecButtonFrame "FrameName",
боковой фрейм BUTTON для обработки щелчка Dec.
Пример:
ScrollBarDecButtonFrame "EscMenuScrollBarDecButton",
в fdf-file найден button-фрейм EscMenuScrollBarDecButton:
ScrollBarDecButtonFrame "EscMenuScrollBarDecButton",
Frame "BUTTON" "EscMenuScrollBarDecButton" {
    Width 0.015,
    Height 0.015,
    ControlBackdrop "EscMenuScrollBarDecButtonBackdrop",
        Frame "BACKDROP" "EscMenuScrollBarDecButtonBackdrop" {
            BackdropBackground  "UI\Widgets\Glues\SinglePlayerSkirmish-ScrollBarDownButton.blp",
            BackdropBlendAll,
    }
}
под UI\Widgets\Glues\SinglePlayerSkirmish-ScrollBarDownButton.blp
ScrollBarIncButtonFrame
ScrollBarIncButtonFrame "FrameName",
боковой фрейм BUTTON для обработки щелчка In.
Пример:
ScrollBarIncButtonFrame "StandardScrollBarIncButton",
в fdf-file найден button-фрейм EscMenuScrollBarDecButton:
ScrollBarIncButtonFrame "StandardScrollBarIncButton",
Frame "BUTTON" "StandardScrollBarIncButton" {
    Width 0.015,
    Height 0.015,
    ControlBackdrop "StandardScrollBarIncButtonBackdrop",
    Frame "BACKDROP" "StandardScrollBarIncButtonBackdrop" {                    
            BackdropBackground  "UI\Widgets\Glues\GlueScreen-Scrollbar-UpArrow.blp",
            BackdropBlendAll,
    }
}
под UI\Widgets\Glues\GlueScreen-Scrollbar-UpArrow.blp

нативки для работы с sliders

---@param frame framehandle
---@param value real
---@return nothing
function BlzFrameSetValue(frame, value) end	-- (native)


---@param frame framehandle
---@return real
function BlzFrameGetValue(frame) end	-- (native)

---@param frame framehandle
---@param minValue real
---@param maxValue real
---@return nothing
function BlzFrameSetMinMaxValue(frame, minValue, maxValue) end	-- (native)


---@param frame framehandle
---@param stepSize real
---@return nothing
function BlzFrameSetStepSize(frame, stepSize) end	-- (native)

пример Slider с импортом fdf

Использовал готовый шаблон EscMenuSliderTemplate
код 
Frame "SLIDER" "EscMenuSliderTemplate" {
      Height 0.012,
    Width 0.139,
    SliderLayoutHorizontal,

    ControlBackdrop "EscMenuScrollBarBackdropTemplate",
    Frame "BACKDROP" "EscMenuScrollBarBackdropTemplate" {
        DecorateFileNames,
        BackdropTileBackground,
        BackdropBackground  "EscMenuSliderBackground",
        BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
        BackdropCornerSize  0.006,
        BackdropBackgroundSize 0.006,
        BackdropBackgroundInsets 0.0025 0.0025 0.0025 0.0025,
        BackdropEdgeFile  "EscMenuSliderBorder",
        BackdropBlendAll,
    }

    ControlDisabledBackdrop "EscMenuScrollBarDisabledBackdrop",
    Frame "BACKDROP" "EscMenuScrollBarDisabledBackdrop" {
        DecorateFileNames,
        BackdropTileBackground,
        BackdropBackground  "EscMenuSliderBackground",
        BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
        BackdropCornerSize  0.006,
        BackdropBackgroundSize 0.006,
        BackdropBackgroundInsets 0.0025 0.0025 0.0025 0.0025,
        BackdropEdgeFile  "EscMenuSliderDisabledBorder",
        BackdropBlendAll,
    }

    SliderThumbButtonFrame "EscMenuThumbButtonTemplate",
    Frame "BUTTON" "EscMenuThumbButtonTemplate" {
        Width 0.016,
        Height 0.016,

        ControlBackdrop "EscMenuThumbButtonBackdropTemplate",
        Frame "BACKDROP" "EscMenuThumbButtonBackdropTemplate" {
            DecorateFileNames,
            BackdropBlendAll,
            BackdropBackground  "EscMenuSliderThumbButton",
        }

        ControlDisabledBackdrop "EscMenuThumbButtonDisabledBackdrop",
        Frame "BACKDROP" "EscMenuThumbButtonDisabledBackdrop" {
            DecorateFileNames,
            BackdropBlendAll,
            BackdropBackground  "EscMenuSliderDisabledThumbButton",
        }
    }
}
вызвал кодом jass:
код 
local framehandle fh = BlzCreateFrame("EscMenuSliderTemplate", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0),0, 0)
call BlzFrameSetSize(fh, 0.2, 0.03)
call BlzFrameSetAbsPoint(fh, FRAMEPOINT_CENTER, 0.4, 0.3)
Когда зажимаете за ползунок-кнопку и начинаете двигать, срабатывает событие FRAMEEVENT_SLIDER_VALUE_CHANGED о том, что изменилось значение ползунка BlzGetTriggerFrameValue().
Давайте-ка попробуем другой пример. А что если сделать кнопки In/Dec. Теперь у нас три кнопки Button: ползунок и две In/Dec
fdf код 
Frame "SCROLLBAR" "BattleNetScrollBarTemplate" {
    Width 0.0165,
    SliderLayoutVertical,

    ControlBackdrop "StandardScrollBarBackdrop",
    Frame "BACKDROP" "StandardScrollBarBackdrop" {
        BackdropTileBackground,
        BackdropBackground  "UI\Widgets\Glues\GlueScreen-Scrollbar-BackdropBackground.blp",
        BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
        BackdropCornerSize  0.008,
        BackdropBackgroundInsets 0.004 0.004 0.004 0.004,
        BackdropEdgeFile  "UI\Widgets\Glues\GlueScreen-Scrollbar-BackdropBorder.blp",
        BackdropBlendAll,
    }

    ScrollBarIncButtonFrame "BattleNetScrollBarIncButton",
    Frame "BUTTON" "BattleNetScrollBarIncButton" {
        Width 0.015,
        Height 0.015,
        ControlBackdrop "BattleNetScrollBarIncButtonBackdrop",
        Frame "BACKDROP" "BattleNetScrollBarIncButtonBackdrop" {                    
            BackdropBackground  "UI\Widgets\Glues\GlueScreen-Scrollbar-UpArrow.blp",
            BackdropBlendAll,
        }
    }

    ScrollBarDecButtonFrame "BattleNetScrollBarDecButton",
    Frame "BUTTON" "BattleNetScrollBarDecButton" {
        Width 0.015,
        Height 0.015,
        ControlBackdrop "BattleNetScrollBarDecButtonBackdrop",
        Frame "BACKDROP" "BattleNetScrollBarDecButtonBackdrop" {
            BackdropBackground  "UI\Widgets\Glues\GlueScreen-Scrollbar-DownArrow.blp",
            BackdropBlendAll,
        }
    }

    SliderThumbButtonFrame "BattleNetThumbButton",
    Frame "BUTTON" "BattleNetThumbButton" {
        Width 0.01,
        Height 0.01,
        ControlBackdrop "BattleNetThumbButtonBackdrop",
        Frame "BACKDROP" "BattleNetThumbButtonBackdrop" {
            BackdropBackground  "UI\Widgets\Glues\SinglePlayerSkirmish-ScrollBarKnob.blp",
            BackdropBlendAll,
        }
    }
}
Кодом jass вызвали:
код 
    local framehandle fh = BlzCreateFrame("BattleNetScrollBarTemplate", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0),0, 0)
    call BlzFrameSetSize(fh, 0.03, 0.2)
    call BlzFrameSetAbsPoint(fh, FRAMEPOINT_CENTER, 0.4, 0.3)

пример Slider без импорта FDF

Ползунок в вертикальном положении с событием изменения значения. Внутри события отображается новое выбранное значение в виде сообщения. Это работает из коробки.
lua код 
do
    local real = MarkGameStarted
 function MarkGameStarted()
        real()
    -- create a vertical slider by inheriting from a Scrollbar. It will use esc menu textures
    local sliderFrame = BlzCreateFrameByType( "SLIDER", "TestSlider", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI,0), "QuestMainListScrollBar", 0 )
    -- clear the inherited attachment
    BlzFrameClearAllPoints(sliderFrame)
    -- set pos and size
    BlzFrameSetAbsPoint(sliderFrame, FRAMEPOINT_TOPLEFT, 0.40, 0.30 )
    BlzFrameSetSize(sliderFrame, 0.012, 0.06 )
    -- define the area the user can choose from
    BlzFrameSetMinMaxValue(sliderFrame, 0, 1000)
    -- how accurate the user can choose value
    BlzFrameSetStepSize(sliderFrame, 1)
   
    local trigger = CreateTrigger()
   
    -- register the Slider Event
    BlzTriggerRegisterFrameEvent(trigger, sliderFrame, FRAMEEVENT_SLIDER_VALUE_CHANGED)

    -- this happens when the Slider is pushed
    TriggerAddAction(trigger, function()
        local frame = BlzGetTriggerFrame()
        print(BlzFrameGetName(frame), "new Value", BlzGetTriggerFrameValue())
    end)
 end
end
Ползунок в горизонтальном положении с фреймом TEXT справа, отображающий текущее значение. Пока мышь указывает на ползунок, вращение курсора мыши приводит к измененному значению, для этого необходимо, чтобы на карте был импортирован Templates.toc с EscMenuTemplates.fdf, на котором выполняется этот код Lua. ТОС.

Образцы для sliders/scrollbars

вот шаблоны
Примеры со sliders

Содержание
20 ноя 2021
  • Размещен: 20.11.2021 22:43:13
  • Создан: 20.11.2021 22:43:13
  • Обновлен: 20.11.2021 22:43:13
381
`
ОЖИДАНИЕ РЕКЛАМЫ...
Чтобы оставить комментарий, пожалуйста, войдите на сайт.