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

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

Содержание:
источник <= отсюда можно скачать карту пример. дабы не прикладывать копию
Tasyen - автор статьи
МрачныйВорон - переводчик

Вступление

В этом уроке я хочу показать вам слайдеры (Sliders, по-другому слайдер называют ползунком), флажки (Checkboxes) и прикрепление меток (Labels) к слайдерам и флажкам. Ползунки используются для управления полями камеры cam. Флажок блокирует текущие настройки, предотвращая изменение ползунков, пока он установлен. А метки будут отображать информацию о фреймах, к которым они прикреплены.
Мы уже разбирались, что такое slider и checkbox. Поэтому объяснения я пропустил.

What is a Label? (Что такое метка?)

Label не является frameType, его тип - «TEXT», эти «TEXT» -фреймы используются для отображения текста, но также занимают место и могут вызывать события фрейма при щелчке или наведении на них мышью.
Label просто отображает текст в окне и служит в основном для информационных целей (вывод сообщений, подпись других элементов интерфейса). Свойства метки во многом схожи с таковыми у кнопки. Однако у меток нет опции command.
В варкрафте очень много Labels. Примером может служить ORIGIN_FRAME_UNIT_PANEL_BUFF_BAR_LABEL

Writing the toc (написание toc-файла)

По умолчанию не загружен главный фрейм типа Slider. Сначала нам нужно создать файл toc, загружающий необходимый fdf-файл, содержащий ползунки.
Мы создаем новый toc-файл с именем «templates.toc». Его содержанием должен быть текст в следующем поле. Убедитесь, что вы добавили пустую строку в конце (на ptr мои tocs не удалось загрузить без этой пустой строки). Текст toc-files не чувствителен к регистру.
UI\FrameDef\Glue\standardtemplates.fdf
UI\FrameDef\UI\escmenutemplates.fdf
UI\FrameDef\Glue\battlenettemplates.fdf
После того, как вы создали "templates.toc", написали его содержимое и сохранили. Импортируйте toc-файл в свою карту, оставив путь как есть.
Теперь нам нужно загрузить toc-файл в карту, я предпочту узнать, удалось ли мне выполнить загрузку, поэтому пишу дополнительную функцию, сообщающую мне об этом.
fdf код
function LoadToc takes string s returns nothing
   if BlzLoadTOCFile(s) then
       call BJDebugMsg("Loaded: "+s)
   else
       call BJDebugMsg("Failed to Load: "+s)
   endif
endfunction 
Это код, который вызовет custom LoadToc function, которая загрузит tocFile, размещенный в «war3mapimported \\ templates.toc» (в jass нужно написать \\, чтобы иметь \).
call LoadToc("war3mapimported\\templates.toc")
Теперь, когда toc загружен, мы можем приступить к созданию ползунков. В этом уроке я использую «EscMenuSliderTemplate». Кому интересны характеристики камеры, чтобы понимать о каких характеристиках камеры идет речь. есть ссылка
Я планировал создать 3 ползунка, позволяющих изменять
  • cam-distance (расстояние камеры)
  • cam angle of attack (угол атаки камеры)
  • cam rotation (угол поворота камеры)

Distance Slider + Label

Начнем с 1 slider и его label (text).
Этот код ниже создает slider и label.
Родителем sliders является gameUI, а родителем labels - slider. Поскольку slider является родителем label, label разделяет многие действия, применяемые к ползунку, такие как видимость, масштабирование ...
jass код
function CreateSliderDistance takes nothing returns nothing
   local framehandle fh = BlzCreateFrame("EscMenuSliderTemplate",  BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), 0, 0)
   local framehandle label = BlzCreateFrame("EscMenuLabelTextTemplate",  fh, 0, 0)
   call BlzFrameSetPoint(label, FRAMEPOINT_LEFT, fh, FRAMEPOINT_RIGHT, 0, 0)
   call BlzFrameSetAbsPoint(fh, FRAMEPOINT_LEFT, 0.02, 0.5) //below the menu, quest buttons

   //call BlzFrameSetSize(fh, 0.139, 0.012) //default size in the fdf.

   call BlzFrameSetMinMaxValue(fh, 400, 3000) //limits user can choose; 400 to 3000
   call BlzFrameSetValue(fh, 1650) //starting value, should be used after one changed min max
   call BlzFrameSetStepSize(fh, 50) //value change from the previous value; how accurate the user can pick values.
endfunction
Это функция, которая будет постоянно выполняться таймером. Он часто считывает текущее выбранное значение и устанавливает расстояние камеры на это значение. Он также обновляет текст labels, чтобы мы знали выбранное значение.
Мы читаем слайдер, используя BlzGetFrameByName, используя имя фрейма (EscMenuSliderTemplate) и его CreateContex (0).
jass код
function UpdateCam takes nothing returns nothing
   call SetCameraField(CAMERA_FIELD_TARGET_DISTANCE, BlzFrameGetValue(BlzGetFrameByName("EscMenuSliderTemplate", 0)), 0)
  call BlzFrameSetText(BlzGetFrameByName("EscMenuLabelTextTemplate", 0), "Distance: " + R2SW(BlzFrameGetValue(BlzGetFrameByName("EscMenuSliderTemplate", 0)), 1, 1))
endfunction
Теперь мы создаем другую функцию, которая запустит таймер, выполняющий обновление, и вызовет функции, выполняющие создание и загрузку.
jass уол
function CreateCamControll takes nothing returns nothing
   call LoadToc("war3mapimported\\templates.toc")
   call CreateSliderDistance()
   call TimerStart(CreateTimer(), 0.4, true, function UpdateCam)
endfunction

Create other Sliders (Создать другие слайдеры)

Теперь, когда первый слайдер удался, мы добавляем еще два слайдера с метками. Разница между новыми слайдерами и первым слайдером заключается в создании контекста и измененных настройках слайдера. Нам нужно использовать уникальные номера createcontext для фреймов с одинаковыми именами, чтобы иметь доступ ко всем из них с помощью BlzGetFrameByName.
jass код
function UpdateCam takes nothing returns nothing
   call SetCameraField(CAMERA_FIELD_TARGET_DISTANCE, BlzFrameGetValue(BlzGetFrameByName("EscMenuSliderTemplate", 0)), 0)
   call SetCameraField(CAMERA_FIELD_ANGLE_OF_ATTACK, BlzFrameGetValue(BlzGetFrameByName("EscMenuSliderTemplate", 1)), 0)
   call SetCameraField(CAMERA_FIELD_ROTATION, BlzFrameGetValue(BlzGetFrameByName("EscMenuSliderTemplate", 2)), 0)
  call BlzFrameSetText(BlzGetFrameByName("EscMenuLabelTextTemplate", 0), "Distance: " + R2SW(BlzFrameGetValue(BlzGetFrameByName("EscMenuSliderTemplate", 0)), 1, 1))
   call BlzFrameSetText(BlzGetFrameByName("EscMenuLabelTextTemplate", 1), "Angle of Attack: " + R2SW(BlzFrameGetValue(BlzGetFrameByName("EscMenuSliderTemplate", 1)), 1, 1))
   call BlzFrameSetText(BlzGetFrameByName("EscMenuLabelTextTemplate", 2), "Rotation: " + R2SW(BlzFrameGetValue(BlzGetFrameByName("EscMenuSliderTemplate", 2)), 1, 1))
endfunction

function CreateSliderAngleOfAttack takes nothing returns nothing
  local framehandle fh = BlzCreateFrame("EscMenuSliderTemplate",  BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), 0, 1) //we use CreateContext 1, so the new slider will not overwrite the one saved in slot 0. CreateContext defines the integer the new frame and its children will use in the frame storage. We can read the frame storage with BlzGetFrameByName
   local framehandle label = BlzCreateFrame("EscMenuLabelTextTemplate",  fh, 0, 1)
   call BlzFrameSetPoint(label, FRAMEPOINT_LEFT, fh, FRAMEPOINT_RIGHT, 0, 0)
   call BlzFrameSetAbsPoint(fh, FRAMEPOINT_LEFT, 0.02, 0.475) //below the menu, quest buttons

   call BlzFrameSetMinMaxValue(fh, 0, 360) //limits user can choose
   call BlzFrameSetValue(fh, 304) //startin value
   call BlzFrameSetStepSize(fh, 2) //
endfunction

function CreateSliderRotation takes nothing returns nothing
  local framehandle fh = BlzCreateFrame("EscMenuSliderTemplate",  BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), 0, 2) //CreateContext 2
   local framehandle label = BlzCreateFrame("EscMenuLabelTextTemplate",  fh, 0, 2)
   call BlzFrameSetPoint(label, FRAMEPOINT_LEFT, fh, FRAMEPOINT_RIGHT, 0, 0)
   call BlzFrameSetAbsPoint(fh, FRAMEPOINT_LEFT, 0.02, 0.45) //below the menu, quest buttons

   call BlzFrameSetMinMaxValue(fh, 0, 360) //limits user can choose
   call BlzFrameSetValue(fh, 90) //startin value
   call BlzFrameSetStepSize(fh, 5) //

endfunction

function CreateCamControl takes nothing returns nothing
  call LoadToc("war3mapimported\\templates.toc") //use the custom function to load the Toc, the custom function prints success/fail loading the toc.
   call CreateSliderAngleOfAttack()
   call CreateSliderRotation()
   call CreateSliderDistance()
   call TimerStart(CreateTimer(), 0.4, true, function UpdateCam)
endfunction
Отлично, теперь мы можем изменять все 3 ползунка в реальном времени в пользовательском интерфейсе.
Но после того, как я испортил настройки камеры, точнее перевернул сверх-ногами, может произойти такая глупость.
Может быть, было бы хорошо добавить кнопку сброса, чтобы вернуть ползунки к значениям по умолчанию. Также может быть хорошо иметь возможность блокировать изменения текущих выбранных настроек, если вы нашли хорошую настройку и хотите защитить ее от простых ошибочных щелчков. Давайте добавим флажок, который можно щелкнуть, при установленном флажке текущие значения ползунков изменить нельзя. Также мы добавляем кнопку, которая сбрасывает ползунки и настройки камеры.

Checkbox and Reset

Создание CheckBox, блокирующего ползунки.
jass код
//The function beeing executed when the checkbox is checked/UnChecked.
function CheckBoxLockSliders takes nothing returns nothing
   local boolean enable = (BlzGetTriggerFrameEvent() == FRAMEEVENT_CHECKBOX_UNCHECKED) //calc the new state,
   if GetLocalPlayer() == GetTriggerPlayer() then //only do stuff for local player
       call BlzFrameSetEnable(BlzGetFrameByName("EscMenuSliderTemplate", 0), enable)
       call BlzFrameSetEnable(BlzGetFrameByName("EscMenuSliderTemplate", 1), enable)
       call BlzFrameSetEnable(BlzGetFrameByName("EscMenuSliderTemplate", 2), enable)
   endif
endfunction

function CreateCheckbox takes nothing returns nothing
   local trigger trig = CreateTrigger()
  local framehandle fh = BlzCreateFrame("QuestCheckBox",  BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), 0, 3) //CreateContext 3 would not be needed for the checkbox cause it uses different names, but we want to use the same labelFrame Type.
   local framehandle label = BlzCreateFrame("EscMenuLabelTextTemplate",  fh, 0, 3)
   call BlzFrameSetPoint(label, FRAMEPOINT_LEFT, fh, FRAMEPOINT_RIGHT, 0, 0)
   call BlzFrameSetAbsPoint(fh, FRAMEPOINT_LEFT, 0.15, 0.40)
   call BlzFrameSetText(label, "Lock Sliders")
   call TriggerAddAction(trig, function CheckBoxLockSliders)
   call BlzTriggerRegisterFrameEvent(trig, fh, FRAMEEVENT_CHECKBOX_CHECKED) //execute function when checking the box
   call BlzTriggerRegisterFrameEvent(trig, fh, FRAMEEVENT_CHECKBOX_UNCHECKED) //executed when unchecking
endfunction
Код, обрабатывающий кнопку сброса настроек камеры. это функция, которая выполняется при нажатии кнопки, и функция, создающая кнопку.
jass код
function ResetSliders takes nothing returns nothing
   if GetLocalPlayer() == GetTriggerPlayer() then
       call BlzFrameSetValue(BlzGetFrameByName("EscMenuSliderTemplate", 0), 1650)
       call BlzFrameSetValue(BlzGetFrameByName("EscMenuSliderTemplate", 1), 304)
       call BlzFrameSetValue(BlzGetFrameByName("EscMenuSliderTemplate", 2), 90)
   endif

   call BlzFrameSetEnable(BlzGetTriggerFrame(), false)//this button loses focus
   call BlzFrameSetEnable(BlzGetTriggerFrame(), true)
endfunction

function CreateResetButton takes nothing returns nothing
   local trigger trig = CreateTrigger()
  local framehandle fh = BlzCreateFrame("ScriptDialogButton",  BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), 0, 0) //CreateContext 0, we can reuse it cause it has unique names compread to the sliders and labels.
   call BlzFrameSetSize(fh, 0.09, 0.024) //default size is to big
   call BlzFrameSetAbsPoint(fh, FRAMEPOINT_RIGHT, 0.15, 0.40)
   call BlzFrameSetText(fh, "Reset Cam")
   call TriggerAddAction(trig, function ResetSliders)
   call BlzTriggerRegisterFrameEvent(trig, fh, FRAMEEVENT_CONTROL_CLICK)
endfunction
Нам также необходимо обновить функцию создания CreateCamControl.
hass код
function CreateCamControl takes nothing returns nothing
  call LoadToc("war3mapimported\\templates.toc") //use the custom function to load the Toc, the custom function prints success/fail loading the toc.
   call CreateSliderAngleOfAttack()
   call CreateSliderRotation()
   call CreateSliderDistance()
   call CreateCheckbox()
   call CreateResetButton()
   call TimerStart(CreateTimer(), 0.4, true, function UpdateCam)
endfunction
Теперь созданные фреймы должны выглядеть так.
Если хотите разобраться как устроены стандартные фреймы типа слайдеры, чебоксы или метки, можете заглянуть в fdf. но теперь вам не нужно его искать, если вы хотите посмотреть определение слайдера.
fdf код для sliders
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",
        }
    }
}
fdf код для laber
Frame "TEXT" "EscMenuLabelTextTemplate" {
    DecorateFileNames,
    FrameFont "EscMenuTextFont", 0.011, "",
    FontJustificationH JUSTIFYLEFT,
    FontJustificationV JUSTIFYMIDDLE,
    FontFlags "FIXEDSIZE",
    FontColor 0.99 0.827 0.0705 1.0,
    FontHighlightColor 1.0 1.0 1.0 1.0,
    FontDisabledColor 0.2 0.2 0.2 1.0,
    FontShadowColor 0.0 0.0 0.0 0.9,
    FontShadowOffset 0.002 -0.002,
}

Содержание
`
ОЖИДАНИЕ РЕКЛАМЫ...