MpW
WarCraft 3

UI - Simpleframes

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

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

Содержание:
Simple frame - с англ. можно перевести как простой фрейм. это фрейм состоит из простых элементов: строка, текстура, слой.
Simple Frames - еще одна группа фреймов, отличается от функциональных фреймов. У Simple Frames мало типов, но фреймы этой группы управляют большей частью прямого игрового интерфейса, например, информацией о юнитах, способностями и кнопками предметов.
ссылка на источник - можете скачать карту-пример и посмотреть
Чем отличаются simple frames от функциональных фреймов?
  • у simple frames нет зависимости от родителя. Параметры такой фрейм наследует один раз - при создании. и все. Помните, как у функциональных фреймов: создал контейнер с кнопками. Надо спрятать / отключить / передвинуть / сделать прозрачным и др контейнер с кнопками, прячем / отключаем / перемещаем / задаем прозрачность и др родителю. А вот simple frame не наследует параметры.
  • у simple frames нет древовидной зависимости по уровню наслаивания. у них общмй уровень
  • у simple frames меньше событии в отличии от функциональных фреймов. Что это значит? Большинство пользовательских Simpleframes не борются за управление мышью.
  • Все SimpleFrames можно перенести за пределы экрана 4:3. У функциональных фреймов с этим проблемы, их нельзя создавать и перемещать за пределы экрана.
  • Контроль отображения некоторых SimpleFrames находятся у потомков. Пример: String, Texture, Layer не могут существовать как отдельные фреймы. Они прописываются в fdf-file внутри какого-нибудь главного SimpleFrame (типа SIMPLEFRAME или SIMPLEBUTTON). Их отображение происходит благодаря текстуре или тексту. А слой помогает уровень наслаивания настраивать.
  • есть какие-то конфликты между simpleframes и frames. Пример, некоторые функции взаимодействия между такими фреймами могут вызывать вылеты игры. Пример привязка фреймов, или задание подсказки итд.
  • в отличие от функциональных фреймов, пользовательские Simpleframes требует fdf, и не может быть создан прямым способом без предварительного определения SimpleFrame в таком fdf. Обычно в fdf можно задать тип фрейма. короче для работы с simpleframes нужно часто лазать в fdf-file, и задавать параметры там.
Если я пишу SIMPLEFRAME только в верхнем регистре, я говорю об этом конкретном типе, иначе я обращаюсь к группе.

Simple​Frame ​Types (типы фреймов пользовательского интерфейса)

Типы главных фреймов в warcraft 3 для Simpleframes: 
SIMPLEBUTTON
SIMPLECHECKBOX
SIMPLEFRAME
SIMPLESTATUSBAR
Они определены в fdf, как Frames. Начало двух таких определений Simpleframe.
пример fdf-кода 
Frame "SIMPLEFRAME" "SimpleInfoPanelIconDamage" {...
Frame "SIMPLEBUTTON" "UpperButtonBarButtonTemplate" {...

Special Children (специальный фрейм-потомок)

SimpleFrames имеет 2 специальных типа фрейма, которые не могут быть настоящими главными фреймами. Во время игры эти типы могут существовать только как дочерние элементы любого Simpleframe. 
String
Texture
Эти 2 типа являются простыми фреймами, что означает, что для вычисления можно использовать natives. Но их определение (описание) отличается от других, внутри fdf
пример fdf-кода 
String "SimpleInfoPanelTitleTextDisabledTemplate" INHERITS "SimpleInfoPanelTitleTextTemplate" {...
Texture "InfoPanelIconBackdrop" INHERITS "InfoPanelIconTemplate" {...
Внутри игры к этим фреймам можно будет получить доступ:
триггеры 
BlzGetFrameByName("SimpleInfoPanelTitleTextDisabledTemplate", createcontext)
BlzGetFrameByName("InfoPanelIconBackdrop", createcontext)
Внутри fdf такая строка / текстура может быть определена вне Simpleframes, чтобы иметь основу для наследования. Но создать их можно только как часть Simpleframe во время игры.

Warning (предупреждение)

Игра не любит, если вы используете эти natives от фреймы на строках(String)/текстурах(Texture), игра вылетает: 
BlzFrameSetVisible
BlzFrameIsVisible
BlzFrameSetAlpha
BlzFrameSetLevel​

Anchor (Якорь, привязка)

переводчик: рассматриваем fdf-функцию с названием Anchor. Она используется только у simpleframes. Эта функция привязывает потомка к родителю, как это делает нативка SetPoint.
Оно привязывает дочерние фреймы к родителям.
Anchor - это: «SetPoint pointA, parent, pointA, x, y,»
автор хайва утверждает, что Anchor использовать может не тольку одну SetPoint, но и SetAllPoints.
Установите для TOPLEFT координаты x = 0,1, y= 0,05; передвиньте TOPLEFT относительного изначальной точки в TOPLEFT со смещением x+0,1 и y+0,05.
Anchor, как и другие SetPoint, требует, чтобы прикрепленный фрейм занимал часть экрана, имея как минимум ширину или высоту, или и то, и другое.
В противном случае может случиться так, что Текстура / Строка присоединяться к родителю. Без точки крепления Строка / Текстура будет центрироваться по родительскому элементу или к этому родительскому элементу (который может быть Экраном 4: 3, когда SimpleFrames создаются для ORIGIN_FRAME_GAME_UI ), если прямой родитель не работает.

String (строка)

Для Simpleframes дочерние элементы String отображают текст на экране. Одна строка может отображать одну строку текста или огромные стены текста на нескольких строках, вплоть до всего экрана и выше. Я не буду много рассказывать о текстовой разметке для String, больше похоже на TEXT, который должен быть отдельной темой.
Перед обычным TEXT фрейм String имеет преимущество. Один раз мне нужно было создать некликабельный текст. Мне нужно было создать текст над кнопкой, показывающий число зарядов кнопки или кол-во перезарядки. TEXT имеет невидимую прямоугольную рамку, клик по которой происходит не по кнопке, а по ней. TEXT будет мешать кликать. С String такого не замечаешь. Примечание: однако, TEXT можно сделать некликабельным, его нужно просто отключить BlzFrameSetEnable(frame, false). Когда я писал об этом, не знал.
Рекомендуется создавать и размещать пораньше StringFrames, пример с событием «Истекло время 0». Раньше могло случиться так, что StringFrame смещается или не отображает текст, пока пользователь не изменит разрешение.

String pdf-функции

Функции String могут использовать и функции Text. Так что многие из них мы изучали ранее
String
String имеет другое ключевое слово для установки шрифта, а не TEXT.
Пример:
String "UpperButtonBarButtonTextTemplate" {
    Font "MasterFont",0.01,
    FontColor 1.0 1.0 1.0,
}
NormalText DisabledText HighlightText
String имеет свой Control:
NormalText активный режим (имеет свой цвет, шрифт)
DisabledText отключенный (во время паузы цвет мб поменяться)
HighlightText при наводке курсора мь цвет меняется шрифт и пр
Пример:
String "UpperButtonBarButtonTextTemplate" {
    Font "MasterFont",0.01,
    FontColor 1.0 1.0 1.0,
}

String "UpperButtonBarButtonDisabledTextTemplate" INHERITS "UpperButtonBarButtonTextTemplate" {
    FontColor 0.4 0.4 0.4,
}

String "UpperButtonBarButtonHighlightTextTemplate" INHERITS "UpperButtonBarButtonTextTemplate" {
    FontColor 1.0 0.83 0.07,
}

Frame "SIMPLEBUTTON" "UpperButtonBarQuestsButton" INHERITS "UpperButtonBarButtonTemplate" {
        SetPoint TOPLEFT,"UpperButtonBarFrame",TOPLEFT,0.002,0,
        NormalText "UpperButtonBarButtonTextTemplate" "KEY_QUESTS",
        DisabledText "UpperButtonBarButtonDisabledTextTemplate" "QUESTS",
        HighlightText "UpperButtonBarButtonHighlightTextTemplate" "KEY_QUESTS",
}
TextLength
Устанавливает длину текста
TextLength integer

String Example (Примеры со строками)

Один определяет SIMPLEFRAME, имеющий сильного дочернего элемента, который дочерний показывает текст. Если вы пропустили Anchor, тогда ширина и высота должны быть привязаны к родительскому «TestString», что в противном случае не удалось бы.
fdf код 
Frame "SIMPLEFRAME" "TestString" {
    Width 0.0001,
    Height 0.0001,
    DecorateFileNames,
    String "TestStringValue" {
        Anchor TOPLEFT, 0, 0,
        Font "InfoPanelTextFont", 0.01,
    }
}
Код Lua, создающий SIMPLEFRAME сверху и устанавливающий текст. Сначала печатается некоторый текст отладки, чтобы можно было понять, что код действительно работает. После этого загружается toc, загружающий fdf с помощью Simpleframe. Затем создается Simpleframe, устанавливается его точка и устанавливается текст дочернего элемента String
lua код 
do
    local real = MarkGameStarted
  function MarkGameStarted()
        real()
    print("Start")
    BlzLoadTOCFile("war3mapImported\\your.toc")

    local parent = BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0)
    local frame = BlzCreateSimpleFrame("TestString", parent, 0)

    BlzFrameSetAbsPoint(frame, FRAMEPOINT_CENTER, 0.4, 0.5)

    BlzFrameSetText(BlzGetFrameByName("TestStringValue", 0), "Test Text")

    print("Done")
  end
end
Теоретически шрифт также можно установить внутри кода с помощью BlzFrameSetFont. По какой-то странной причине это не работает для типа фрейма «TEXT» (V1.31.1).
BlzFrameSetFont(stringFrame, "fonts\\dfst-m3u.ttf", 0.016, 0)
BlzFrameSetFont(stringFrame, "fonts\\nim_____.ttf", 0.013, 0)
BlzFrameSetFont(stringFrame, "fonts\\thowr___.ttf", 0.012, 0)
Использование этой native BlzFrameSetFont для задания размера шрифта, сильно отличающимся от исходного, может нарушить отображаемый текст.
тут для разных языков разные шрифты, можете посмотреть в UI/warskins.txt. Я выдрал только часть кода, остальное не стал копировать
fonts - default
MasterFont=Fonts\BLQ55Web.ttf
MasterFontBold=Fonts\BLQ85Web.ttf
MessageFont=Fonts\BLQ55Web.ttf
ChatFont=Fonts\BLQ55Web.ttf
EscMenuTextFont=Fonts\BLQ55Web.ttf
InfoPanelTextFont=Fonts\BLQ55Web.ttf
TextTagFont=Fonts\BLQ55Web.ttf
fonts - ruRU
MasterFont:ruRU=Fonts\NimrodMT.ttf
MasterFontBold:ruRU=Fonts\NimrodMT.ttf
MessageFont:ruRU=Fonts\NimrodMT.ttf
ChatFont:ruRU=Fonts\NimrodMT.ttf
EscMenuTextFont:ruRU=Fonts\NimrodMT.ttf
InfoPanelTextFont:ruRU=Fonts\NimrodMT.ttf
TextTagFont:ruRU=Fonts\NimrodMT.ttf

Texture (Текстура)

Текстура - это визуальная часть Simpleframes (Images). Если у текстуры не задан собственный размер, будет копировать размер родительского фрейма.

Texture pdf-функции

File
При установке изображения внутри fdf используются:
File FilePath,
Пример:
Texture "SimpleReplayPanelBackdrop" {
   File "ReplayPanelBackdrop",
   Width 0.256,
   Height 0.256,
   Anchor BOTTOMRIGHT,0.008,-0.0025,
}
AlphaMode
Текстура может иметь AlphaMode для изменения использования альфа / непрозрачности.
определения взяты из вики, ссылка снизу. Но мб не точное определение
AlphaMode "ALPHAKEY", //1-битный альфа-канал, который интерпретирует альфа-канал как прозрачный или непрозрачный. 
AlphaMode "ADD", //Uses alpha channel and dodges whites  
AlphaMode "DISABLE", //игнорирует альфа-канал
AlphaMode "BLEND", //использует альфа-канал
AlphaMode "MOD",​ //игнорирует альфа-канал и умножает изображение.
Можно заглянуть в wow ui wiki для получения дополнительной информации, но будьте осторожны, некоторые из них могут работать не так, как ожидалось, или вообще не работать. Причина, по которой можно смотреть WOW, заключается в следующем. Wow и warcraft 3 - оба от Blizzard, и у них общие части исходного кода, частью которого является система пользовательского интерфейса.
моды текстуры:
DISABLE - моде делает текстуру непрозрачной (выключает альфа-канал, если был он вообще задан в фотошопе)
BLEND - обычное изображение с сохранением прозрачности (если в фотошопе задан альфа-канал, то ваша картинка может быть прозрачна полностью или частично). Этот мод разбирали уже тут
ALPHAKEY - однобитный альфа канал, который интерпретирует два значения (либо прозрачный - 0, либо непрозрачный - 1). Напомню, что прозрачность задается в диапазонах 0-255 или 0-100%. Но эта модификация либо ее исключает, или она прозрачна. Не могу сказать, что это за мод и найти этому применение.
ADD - этот мод добавляет прозрачность темным участкам. К примеру, черный цвет картинки уже делает прозрачной. Чем темнее оттенки цветов, тем прозрачнее они становятся. Белый цвет игнорируется. Этот мод разбирали уже тут
MOD - ??? МОД: игнорирует альфа-канал и умножает изображение. Не могу сказать, что это за мод.
При использовании BlzFrameSetTexture AlphaMode перезаписывается.
TextCoord
Можно взять только часть заданного изображения и отобразить ее в пространстве, занимаемом текстурой, это влияет на заданное изображение в формате fdf как по коду. TextCoord не имеет ничего общего с занимаемым пространством на экране. TexCoord влево, вправо, вверх, вниз
TexCoord 0, 1, 0, 0.125, (возьмите общий x от 0 до 12,5% из верхней части файла изображения)
TexCoord 0.0, 0.5, 0.0, 0.5, (верхняя левая часть) см. изображение ниже только часть значка Паладина.
Также можно создать плитку с помощью TextCoord, чтобы заполнить заданное пространство экрана кадра копиями этого изображения. Это также делается с помощью TexCoord, задавая числа больше 1 для правого и нижнего края. TexCoord 0, 2, 0, 2,
NormalTexture DisabledTexture PushedTexture CheckedTexture UseHighlight
В SimlpeFrames эти все перечисленные функции заменяют нам Control:
NormalTexture file-texture активная картинка
DisabledTexture file-texture выключенная картинка (пример во время паузы)
PushedTexture file-texture картинка при прожатии
CheckedTexture file-texture галочка при SimpleCheckBox
UseHighlight file-texture свечение при наводки курсора
Пример:
Texture "UpperMenuButtonBackground" {
    File "UpperMenuButtonTexture",
    TexCoord 0.0, 0.6640625, 0.0, 0.171875,
}
Texture "UpperMenuButtonPushedBackground" {
    File "UpperMenuButtonTexture",
    TexCoord 0.0, 0.6640625, 0.25, 0.421875,
}
Texture "UpperMenuButtonDisabledBackground" {
    File "UpperMenuButtonTexture",
    TexCoord 0.0, 0.6640625, 0.5, 0.671875,
}
Texture "UpperMenuButtonHighlight" {
    File "UpperMenuButtonTexture",
    TexCoord 0.0, 0.6640625, 0.75, 0.921875,
    AlphaMode "ADD",
}

Frame "SIMPLEBUTTON" "UpperButtonBarButtonTemplate" {
    DecorateFileNames,
    Width 0.085,
    Height 0.022,
    ButtonPushedTextOffset 0.001 -0.001,
    NormalTexture "UpperMenuButtonBackground",
    PushedTexture "UpperMenuButtonPushedBackground",
    DisabledTexture "UpperMenuButtonDisabledBackground",
    UseHighlight "UpperMenuButtonHighlight",
}

Texture example (Примеры с текстурами)

Как и в случае со String, это пример того, как можно отобразить на экране только одну текстуру. Один определяет SIMPLEFRAME с шириной и высотой, а текстуру, которая копирует, имитирует SIMPLEFRAME, если не указано иное. 
Frame "SIMPLEFRAME" "TestTexture"{
    Width 0.04,
    Height 0.04,
    Texture "TestTextureValue" {
    }
}
Мы загружаем toc, в котором упоминается fdf, с помощью SIMPLEFRAME и создаем главный фрейм «TestTexture». После этого установите текстуру ребенка на Икону Паладина и поместите SIMPLEFRAME в центр экрана.
lua код 
do
    local real = MarkGameStarted
  function MarkGameStarted()
        real()
    BlzLoadTOCFile("war3mapImported\\your.toc")
    --без родителя нельзя создать типы фреймов String или Texture. Скрыть/показать и др действия
     local frame = BlzCreateSimpleFrame("TestTexture", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), 0)
    BlzFrameSetTexture(BlzGetFrameByName("TestTextureValue", 0), "ReplaceableTextures\\CommandButtons\\BTNHeroPaladin", 0, true)
    BlzFrameSetAbsPoint(frame, FRAMEPOINT_CENTER, 0.4, 0.3)
  end
end

Texture Coloring

Текстуру можно раскрасить во время игры с помощью перечисленных natives:
BlzConvertColor takes integer a, integer r, integer g, integer b - вводите alpha (0-255), red (0-255), green (0-255), blue (0-255), и эта функция возвращает 16-ричный цветовой код.
BlzFrameSetVertexColor takes framehandle frame, integer color - эта функция подкрашивает текст в нужный цветовой код
BlzFrameSetVertexColor(texture, BlzConvertColor(255, 255, 255, 1)) - чтобы получить. будет отображать текстуру без синего цвета. при использовании этой линии на текстуре архимага она станет желтоватой, как на изображении ниже

Изменить цвет HighLight кнопки

кратко: эффекту HIGHLIGHT нельзя изменить цвет. Это можно сделать только с Texture. Иногда хотелось изменить цвет эффекта. Нашел выход, мы создадим Texture поверх кнопки. Однако, имелись некоторые проблемы с ALPHAMODE “ADD”. Он просто не работал. После некоторых попыток пришел к некоторым выводам
Можно менять динамично изображение триггером через BlzFrameSetTexture
---@param frame framehandle
---@param texFile string
---@param flag integer
---@param blend boolean
---@return nothing
function BlzFrameSetTexture(frame, texFile, flag, blend) end    -- (native)
но так вот никак не добавить AlphaMode в игре нашей текстуре. Пробовал менять параметр flag. Пробовал через fdf-пустышки менять. Ничего не помогало. Короче, вывод один, в fdf-file нужно указывать File и AlphaMode.
пример создания текстуры HighLight
fdf-file Texture 
fdf-file. тут нужно сразу вписывать File и AlphaMode.
//для изменения цвета подсветки
Frame "SIMPLEFRAME" "ParentTextureHighLight" {
    Width 0.0001,
    Height 0.0001,
    Texture "TextureHighLight" {
        File "UI\Glues\ScoreScreen\scorescreen-tab-hilight.blp",
        AlphaMode "ADD",
    }
}
lua-code (не полный)
текстуру натягивают на кнопку. вы можете показывать текстуру при наведении, и менять цвет текстуры в промежутке нажатия-отпускания кнопки. 
    --подсветка текстуры
    --в качестве основы взял ScoreScreenTabButtonTemplate
     --без родителя нельзя создать типы фреймов String или Texture.
    local TextureHighLightParentFrame = BlzCreateSimpleFrame("ParentTextureHighLight", gameUI, 0)
    local TextureHighLight = BlzGetFrameByName("TextureHighLight", 0)
    BlzFrameSetAllPoints(TextureHighLight, TextureHighLightParentFrame)
    BlzFrameSetAllPoints(TextureHighLightParentFrame, button)
    BlzFrameSetLevel(TextureHighLightParentFrame, 3)
    --можно менять цвет подсветке ARGB. Каждый параметр задается 1-255
    BlzFrameSetVertexColor(TextureHighLight, BlzConvertColor(255, 255, 255, 255))

Layer (слой)

Слой - это функция fdf для SimpleFrame, которую можно использовать для установки порядка строки / текстуры внутри SimpleFrame. Внутри слоя можно определить только строку и текстуру.

Layer pdf-функции

((кат Layer
Blizzard использовала 2 слоя в своем fdf для warcraft 3. 
Layer "BACKGROUND" {...
Layer "ARTWORK" {...
"ARTWORK" отображается над "BACKGROUND". Слои SimpleFrame выше, оба находятся над более низким SimpleFrame.
Судя по wow ui wiki, их должно быть больше, но мне не удалось их создать. Вероятно, их нет в warcraft 3 (V1.31.1). Теоретически можно было подумать, что слой HIGHLIGHT реализован через ключевое слово UseHighlight <texture> для SIMPLEBUTTON.
fdf-код 
Frame "SIMPLEFRAME" "TestTextureLayer" {
    Width 0.1,
    Height 0.1,
 
    Layer "ARTWORK" {
        Texture {
            Width 0.05,
            Height 0.05,
            Anchor BOTTOMLEFT, 0, 0,
            File "ReplaceableTextures\CommandButtons\BTNHeroMountainKing",
        }
        Texture {
            Width 0.05,
            Height 0.05,
            Anchor BOTTOMRIGHT, 0, 0,
            File "ReplaceableTextures\CommandButtons\BTNHeroBloodElfPrince",
        }
    }
 
    Layer "BACKGROUND" {
        Texture {
            Width 0.1,
            Height 0.1,
            Anchor CENTER, 0, 0,
            File "ReplaceableTextures\CommandButtons\BTNHeroPaladin",
        }
    }
}
lua код 
do
    local real = MarkGameStarted
  function MarkGameStarted()
        real()
    BlzLoadTOCFile("war3mapImported\\templates.toc")
     local frame = BlzCreateSimpleFrame("TestTextureLayer", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), 0)
    
    BlzFrameSetAbsPoint(frame, FRAMEPOINT_CENTER, 0.4, 0.3)
  end
end

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