WarCraft 3

SLIDER/Scrollbar

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

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

Содержание:

Ползунок (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

Содержание

413

ОЖИДАНИЕ РЕКЛАМЫ...

Комментарии пока отсутcтвуют.

Чтобы оставить комментарий, пожалуйста, войдите на сайт.

SLIDER/Scrollbar

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

Содержание:

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

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

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

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

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

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

Вход

Регистрация на сайте

Переместить ресурс

Создание задания

Выбор проекта для репоста

Управление интересами

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