[UB2] Документация по Unbound 2.0

MatroseFuchs · 24 апр 2019, 09:24:25

Системный уровень

Вычисляемые выражения

Unbound предоставляет возможность работать с так называемыми вычисляемыми выражениями (не путать с s-expressions). Это выражения, которые вычисляются на этапе исполнения. Содержимое выражения заключено в " ". Для удобства будем называть их просто expression, если речь будет идти об s-expressions, то это будет явно выделено.

Выражения предназначены для несложной обработки данных, формирования значения свойств или параметров вызова метода. В выражениях можно использовать variables и events, объявленные в scope, а также числовые, строковые, логические литералы и использовать операторы.

(tf
    (text = "' ' + tankmanName + ' — '")
)

(mc forsage_progress_bar
	(style (position  = "absolute"))
	...
)

Такие выражения будут вычислены при исполнении верстки, непосредственно при вызове методов. Выражение можно использовать как для вызова метода, как пример gotoAndStop, так и вызове s-expression как пример (element …)

(def element AircraftForsage(activeSquadron:number) layout=true
	(scope
		(event evForsageFinishedAnimate)
	...
)

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

Т.к за основу взят синтаксис action script, в выражениях можно использовать соответствующие операторы.

Скрытый текст


(text = "2 + 4")
(text = "name + 'HorScrlBar'") # аналогично: -, /, *, %


(text = "keyCode == 13") # аналогично: >, <, >=, <=, !=


(text = "isFocused && keyCode == 13") # аналогично: !, ||, &, ~, |


(width = "400 >> 1") # аналогично: <<


(scope
    (var testDict:dict = "{
        'up' : 'bitmap:button_black_bg',
        'hover' : 'bitmap:button_black_bg_hover',
        'down' : 'bitmap:button_black_press'
    }")
)
(text = "testDict['up']")


(text = "(count1 + count2) + '/' + (total1 + total2)")


(bind class "currStateClass ? currStateClass.style ? currStateClass.style : [] : []")


(text = "(str)count + '/' + (str)total")

Грамматика

Скрытый текст

root	ternary_expr
ternary_expr	logical_or ('?' expression ':' ternar_expr)?
logical_or	logical_and ('\|\|' logical_and)*
logical_and	inclusive_or ('&&' inclusive_or)*
inclusive_or	exclusive_or ('\|' exclusive_or)*
exclusive_or	exclusive_or ('\|' exclusive_or)*
exclusive_or	and ('^' and)*
and	equality ('&' equality)*
equality	relational ([== !=] relational)?
shift	additive ([<< >>] additive)?
additive	multiplicative ([+ -] multiplicative)*
multiplicative	cast ([* / %] cast)*
cast	'(' TYPE_NAME ')' cast \| unary
unary	postfix \| [- !] cast
postfix	primary ('[' ternary_expr ']' \| '(' ')' \| '(' argument_list ')' \| '.' IDENTIFIER)*
argument_list	assignment (',' assignment)*
assignment	IDENTIFIER '=' ternar_expr \| ternar_expr
primary	IDENTIFIER \| constant \| '(' expression ')'
constant	IDENTIFIER \| TYPE_NAME \| STR \| NUMBER \| HEX \| BOOLEAN \| LIST \| MAP
LIST	'[' ']' \| '[' ternary_expr (',' ternary_expr)* ']'
MAP	'{' '}' \| '{' IDENTIFIER ':' ternary_expr (',' IDENTIFIER ':' ternary_expr)* '}'
IDENTIFIER	$?[a-zA-Z]+[a-zA-Z0-9]*
NUMBER	[0-9]+ (.[0-9]+)?
PERCENT	[0-9]+ (.[0-9]+)? '%'
STRING	'/'' .* '/''
BOOL	true \| false

Также в expressions можно вызывать функции.

(bind text "toUpper('Skorpion G')")

MatroseFuchs · 24 апр 2019, 12:57:52

Базовая функциональность

Базовая функциональность определяет базовые возможности фреймворка:

формирование сцены (создание и добавление sprites, textfields, symbols, blocks)
scope, bindings system
построение definitions - element, css, animation, macro, constant.
holders глобальных данных (enums, глобальные константы, глобальные указатели на объекты, глобальные методы)

Build stage

Дисплей обджект (DO) - это общее наименование всех экранных объектов. Они отоборажаются по списку (дисплей лист) в порядке вызова, в координатах [х:0;у:0]. Наполнение и отображение, а так же набор свойств у разных диспл.обдж разный.

Основной возможностью языка разметки unbound является создание, конфигурация и добавление instance of display objects (DO) в соответствующий target-объект в display list'е . Target-объектом является родительский DO для текущего фрагмента верстки Все DOs разделяются на 2 группы по наличию/отсутствию layout system. Layout system отвечает за позиционирование DO на сцене.

(block
    (tf
    )
)

где нода block является target-объектом для DO tf.

Display objects list

методы верхнего уровня	описание
sprite	Создание экземпляра Sprite
symbol	Создание экземпляра Symbol (MovieClip or Sprite) по имени из библиотеки
tf	Создание экземпляра текстового блока TextField
element	Создание экземпляра элемента описанного в верстке
block	Создает дочерний DO

Для всех отображаемых объектов доступны некоторые свойства, такие как:

Название свойства	Описание	Формат
height	высота объекта в px или %	:number
width	ширина объекта в px или %	:number
x	позиция по оси X в px или %	:number
y	позиция по оси Y в px или %	:number
scaleX	горизонтальный множитель	:number
scaleY	вертикальный множитель	:number
alpha	прозрачность объекта от 0 до 1	:number
rotation	поворот в градусах	:number

Пример создания Sprite размером 500x500px с координатами [x=100; y=200] и прозрачностью 50%

(sprite
    (width = 500)
    (height = 500)
    (x = 100px)
    (y = 200px)
    (scaleX = 2)
    (alpha = 0.5)
    (rotation = 45)
)

Определение элемента

Верхнеуровневым DO верстки является element. Element – именованный параметризированный фрагмент верстки на базе спрайта. Element может иметь Scope, который содержит данные, доступные в теле element. Работа с элементом разделяется на 2 стадии: definition и create instance. Для определения элемента используется метод def.

(def element CommanderPersonalInfo() layout=true
)

Создание экземпляра:

(element CommanderPersonalInfo)

Scope

Scope - это хранилище данных и событий, доступных в теле определения элемента. Scope может иметь только Element, остальные DO могут работать только со scope родительского Element.

В scope должны быть объявлены все переменные и события, которые используются в теле element. Попытка обращения к несуществующему свойству или событию вызывает ошибку: access of undefined scope event 'nameEvent'

методы верхнего уровня	описание
scope	Метод возвращает scope элемента для дальнейшей работы.

(scope
    (var lvlVal:str = '')
    (var title:str = '')
    (var cost:str = '')
    (var text:str = '')
    (var lvlTextColor:number = 0xffcac8c1)
    (var imageUrl:str = '')
)

Байндинги

Общее описание

Байндинги отвечают за простую синхронизацию данных (свойство, вызов метода, диспатч события). Существует три элемента синхронизации

свойство
вызов метода
событие

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

методы верхнего уровня	описание
scope -> object
bind	запись значения в свойство объекта
bindcall	вызов метода у объекта
object -> scope
sync	значение переменной в scope-е синхронизируется с значением свойства объекта
dispatch	событие в scope-е синхронизируется с событием у объекта (диспатчится событие в scope-е по событию от объекта)

Все байндинги имеют общие свойства:

watch - следить ли за изменением значения свойств scope-а, которые используются в выражениях
init - производить ли действие (соответствующее типу байндинга) при инициализации байндинга
on - событие target-объекта, по которому будет срабатывать байндинг
enabled - можно использовать для включения и выключения срабатывания, может принимать выражения типа (enabled = "$event.buttonIdx == 1")

и общие методы:

event - добавляет произвольное событие в качестве триггера к байндингу

Bind

Синтаксис:

(bind scopeVar|property "scopeVar|$target|$event.field" [init=false|true] [watch=false|true] [on='scopeEventName|flashEventName|cppEventName']|[(event "scopeEventName")] [(enabled "expression")]), по-умолчанию init=true watch=true

Синхронизировать можно как переменную из scope, так и свойство target-объекта.

Для синхронизирования переменной из scope, bind нужно поместить в scope.

(scope
    (var count:number = 30)
    (var total:number = 100)
    (var percent:number = 0)
    (bind percent "count / total")
)

Для синхронизации свойства target-объекта, bind должен вызываться в target-объекте, свойство которого мы синхронизируем.
```
(scope
    (var vehicleType:str = 'vehicleHeavy')
)
(tf
    (bind text "vehicleType")
)
```

В обоих случаях изменение любой переменной из выражения приводит к его вычислению, а результат записывается в синхронизируемую переменную или свойство. Управлять этим поведением можно через параметр watch=true|false.

Второй способ вызвать синхронизирование выражения - подписаться на событие. Поддерживается 2 способа для подписки на событие

Передать в аргумент on имя ивента как строку. Используется для подписки на флешовые события или события, которые распространяются из core c++. Если в этом ивенте есть аргументы, к ним можно получить доступ через объект $event. На момент выполнения выражения в bind все переменные должны уже быть известны. Но в $event аргументы попадут, если распространится событие. Так как события никакого еще не было, но на старте $event не определен, для этого у всех типов биндингов существует параметр init=true|false, которое позволяет настроить выполнение выражения при инициализации.
```
(tf
    (class GrandTitleTextStyle)
    (text = 'default text')
    (bind text "$event.localX" init=false on='click')
)
```

Передавать из scope объект event

(scope
    (event onCustomEvent)
)
(tf
    (bind text "$event.localY" (event "onCustomEvent"))
    (dispatch onCustomEvent on='click')
)

Примечание:

Подписаться на событие конкретного экземпляра элемента можно в его скоупе. Тогда передавать event нужно с использованием аргумента on.

Пример:

(element ButtonPrimary
    (scope
        (bind label "$event.localX+ $event.localY" init=false on='evBtnLeftClickEvent')
    )
)

Управлять исполнением синхронизации можно через вложенную конструкцию enabled, которая принимает выражение, результатом которого должно быть булевское значение. В свою очередь, если требуется подписать изменение enabled на event или выражение, нужно использовать bind.

Скрытый текст


(scope
    # Объявляем event
    (event changedToogle)
  
  
    # Объявляет булевскую переменную - условие для отключения/включение условия выполнения конструкции bind   
    (var toogleFlag:bool = true)     
    (bind toogleFlag "!toogleFlag" watch=false init=false (event "changedToogle"))
)
# Создаем кнопку, по клику которой будем выводить координату мыши
(element ButtonPrimary
    (scope
        # Подписываем переменную скоупа label на синхронизацию по клику на кнопку. Условие выполнения подписки - если toogleFlag имеет значение true
        (bind label "'localX: ' + $event.localX" init=false on='evBtnLeftClickEvent' (bind enabled "toogleFlag"))
    )
)
# Создаем кнопку, по клику которой диспатчится событие, которое переключает флаг toogleFlag.
(element ButtonPrimary
    (scope
        (bind label "'toogleFlag: ' + toogleFlag")
        (dispatch changedToogle on='evBtnLeftClickEvent')
    )
)

Инкрементальный счетчик по событию

Параметры watch= и init= блока bind :

watch - подписывать или нет на событие изменения переменных в выражении
init - производить ли рассчет выражения при создании переменной

(def element TestElement() layout=true
    (scope
        (var counter:number = 100)
        (bind counter "counter-10" watch=false init=false (event "evMouseClick")) #при watch=false возможно вычисление по событию
    )
    (style (backgroundColor = 0xFF00FF00) (width = 200) (height = 100) )
    (macro trace "counter")
)

Bindcall

Синтаксис:

(bindcall functionName "scopeVar|$target"* [init=false|true] [watch=false|true] [on='scopeEventName|flashEventName|cppEventName']|[(event "scopeEventName")] [(enabled "expression")]), по умолчанию init=false watch=true

Используется для вызова метода у target-объекта по условиям (событие, изменение аргумента).

Пример использования при подписке вызов метода у DO:

(mc 'CloseBtnCrossAnim'
    (bindcall gotoAndPlay "stateFrame")
)

Таким образом, при изменении переменной stateFrame будет вызван метод gotoAndPlay.

Другой пример - вызов методов у контроллеров:

(controller $Animation
    (bindcall play duration=0.2 from={alpha:0} to={alpha:0.5} (event "evBtnOverEvent") (bind enabled "_isPressed"))
)

Поведение параметров event, enabled такое же, как у конструкции bind.

Dispatch

Синтаксис:

(dispatch scopeEventName delay=0.1 on='flashEventName|scopeEventName|cppEventName'|[(event "scopeEventName")] [args="{key1: value1, ...}"] [dir=0|1|2] [(enabled "expression")]), по умолчанию dir=0

Рассылка события по событию, которое генерируется scaleform или core c++ unbound. Перед тем как рассылать событие, его нужно объявить в scope.

(scope
    (event onClick)
)
(dispatch onClick on='click')

Передача аргументов

При рассылке события можно передавать аргументы. Аргументы передаются как dict. По умолчанию если не задан параметр args, то все свойства исходного event'a (тот ивент, который выступает тригером) передаются в рассылаемый event.

(scope
    (event onClick)
) 
(element ButtonPrimary
    (dispatch onClick on='click')
)
(trace "$event" init=false (event "onClick"))

Результат в ub_player_errors.log:

========================================================================
-------------------------------------------
UBTRACE: {altKey:false,bubbles:true,buttonDown:false,buttonIdx:0,cancelable:false,clickCount:0,commandKey:false,controlKey:false,ctrlKey:false,currentTarget:°FЧ',delta:0,eventPhase:2,localX:41,localY:18,mouseIdx:0,nestingIdx:0,relatedObject:[null],shiftKey:false,stageX:41,stageY:18,target:°FЧ',type:click}

Если же передать аргументы, то передача свойств исходного ивента не происходит.

Задержка рассылки события

Для решения вопросов отложенной рассылки события необходимо добавить параметр delay

(scope
    (event onClick)
    (var argument:number = 100)
)
(element ButtonPrimary
    (dispatch onClick delay=0.15 args="{param: argument}" on='click')
)
 
(macro eventChecker "onClick")
(trace "$event" init=false (event "onClick"))

Результат в ub_player_errors.log:

========================================================================
-------------------------------------------
UBTRACE: {param:100}

Направление распространения события

Направлением распространения event можно управлять параметром dir. Поддерживаются 3 значения:

0 - event распространяется внутри element. По умолчанию dir=0.

1 - event распространяется от ребенка к родителю.

Скрытый текст


(def element TestView() layout = true  
    (scope
       (event onClick)
    )
  
    (element ChildElement)
  
    (tf
        (class HeroTitleYellowTextStyle)
        (text = 'default text')
        (bind text "$event.key" init=false (event "onClick"))
    )
)
  
(def element ChildElement() layout=true
    (scope
        (event onClick)
    )
    (element ButtonPrimary
        (dispatch onClick args={key: 100} dir=1 on='click')
    )
)

Примечание:

Важно помнить о том, что прежде чем использовать event, он должен быть объявлен в scope. Даже несмотря на то, что в scope определении element ChildElement event уже объявлен, его нужно также объявить и в TestView.

2 - event распространяется от родителя к ребенку.

Скрытый текст


(def element TestView() layout = true  
    (scope
       (event onClick)
    )
  
    (element ChildElement)
  
    (element ButtonPrimary
        (dispatch onClick args={key: 100} dir=2 on='click')
    )
)
  
(def element ChildElement() layout=true
    (scope
        (event onClick)
    )
  
    (tf
        (class HeroTitleYellowTextStyle)
        (text = 'default text')
        (bind text "$event.key" init=false (event "onClick"))
    )
)

Разделение событий

В приведенных примерах вложенный элемент распространяет событие и на сцене в родителе был только один экземпляр. Но часто бывают случаи, когда несколько одинаковых элементов лежат на одном уровне вложенности. Тогда отличить, от кого именно пришло событие, будет сложно. Рассмотрим пример:

Скрытый текст


(def element TestView() layout = true  
    (scope
       (event onClick)
    )
  
    (element ChildElement id=0)
    (element ChildElement id=1)
    (element ChildElement id=2)
    (element ChildElement id=3)
  
    (tf
        (class HeroTitleYellowTextStyle)
        (text = 'default text')
        (bind text "'click button id=' + $event.buttonId" init=false (event "onClick"))
    )
)
  
(def element ChildElement(id:number) layout=true
    (scope
        (event onClick)
    )
    (element ButtonPrimary
        (scope
            (label = "'button_' + id")
        )
        (dispatch onClick args="{buttonId: id}" dir=1 on='click')
    )
)

на сцене 4 экземпляра ChildElement, и каждый из них распространяет событие onClick. Текстовый блок будет ловить события от каждого элемента. Конечно, можно проверять id кнопки в выражении bind. Но также для этого можно передиспатчивать события из scope вложенного элемента в уникальное событие родителя.

Скрытый текст


(def element TestView() layout = true  
    (scope
       (event onClickChild1)
    )
  
    (element ChildElement id=0
        (scope
            (dispatch onClickChild1 on='onClick')
        )
    )
    (element ChildElement id=1)
    (element ChildElement id=2)
    (element ChildElement id=3)
  
    (tf
        (class HeroTitleYellowTextStyle)
        (text = 'default text')
        (bind text "'click button id=' + $event.buttonId" init=false (event "onClickChild1"))
    )
)
  
(def element ChildElement(id:number) layout=true
    (scope
        (event onClick)
    )
    (element ButtonPrimary
        (scope
            (label = "'button_' + id")
        )
        (dispatch onClick args="{buttonId: id}" dir=1 on='click')
    )
)

Т.е. событие onClickChild1 синхронизируется с событием onClick только у кнопки с id=0, поэтому поле text у текстового блока будет обновляться только при клике на эту кнопку.

Dispatch при enabled=true

Не срабатывает событие при переключении enabled в true, но продолжает срабатывать при переключении trigger в true.

Скрытый текст


(def element MainTestElement() layout=true
    (scope
        (event evMouseClick)
        (event evTestEvent)
        (event evTestTriggerEvent)
  
        (var count:number = "0")
        (bind count "count+1" watch=false init=false (event "evMouseClick"))
  
        (var testCount:number = "count" watch=false init=false (event "evTestEvent"))
        (var testTriggerCount:number = "count" watch=false init=false (event "evTestTriggerEvent"))
    )
    (style
        (width = 500px)
        (height = 300px)
        (backgroundColor = 0x88FF00FF)
    )
  
    (dispatch evMouseClick on='click')
  
    (dispatch evTestEvent (bind enabled "count%2 == 0" )) # не будет срабатывать
    (dispatch evTestTriggerEvent (bind trigger "count" )) # будет срабатывать
  
    (macro trace "'count: ' + count")
    (macro trace "'must always be zero:' + testCount")
    (macro trace "'must be triggered:' + testTriggerCount")
)

Dispatch property change event

Побочным результатом изменений в dispatch стал контроль за событием изменения выражения

(dispatch evUpdateMouse (bind enabled "isActive") (bind trigger "isActive"))

При таком порядке биндингов сначала пересчитается enabled и событие сработает только при isActive=true.

Контроллеры

Сontroller - это атомарная функциональность над target-объектом. Позволяет расширить функционал за счет выполнения кастомной логики над объектом.

Controller реализуется на С++.

методы верхнего уровня	описание
controller	Метод возвращает style текущего DO для дальнейшей работы

(controller $Animation
    (play duration=0.2 to="{
    alpha:(isMouseOver ? 1.0 : 0.0),
    visible:(isMouseOver ? true : false)
    }")
)

Стилизация display object.

Elements и blocks имеют Style, что позволяет настраиваить их визуальное представление, например, изменять размеры, накладывать фильтры и т.д.

top-level methods
style	Метод возвращает style текущего DO для дальнейшей работы

У каждого блока свой набор пропертей style. Так, например, блоку tf можно задавать font, size и color.

(tf
    (style
        (fontFamily = $TitleFont)
        (fontSize = 36)
        (textColor = 0xf5eed5)
    )
)

Также через изменение свойств style: paddings, margins, position, flow и т.п, - можно управлять позиционированием блока.

(block
    (style
        (position = "absolute")
        (bottom = 18px)
        (paddingLeft = 24px)
        (paddingRight = 24px)
    )
)

Style обладают только объекты с layout-system, а именно element с параметром layout=true и различного рода блоки, унаследованные от BaseBlock в c++. Обращение к свойством style у DO без layout system приводит к ошибке: access of undefined method 'style' through a reference with type element

MatroseFuchs · 24 апр 2019, 13:58:56

Декларативный язык разметки и S-выражения

Верстка состоит из S-выражений. Существует 4 вида s-выражения, каждый из которых предназначен для конкретного действия:

Call method

(<method name> <positional argument value>* <named argument>*
    <nested s-expression>+
)
<named argument> := <argument name> = <argument value>

(bind isEnabled "$event.enabled" init=false
    (event "isEnableChanged")
)

bind - <method name>

isEnabled, "$event.enabled" - <positional argument value>*

init=false - <named argument>*

(event "isEnableChanged") - <nested s-expression>+

Add definition

(def <definition type> <difinition name> (<declaration argument>*) <named argument>*
    <nested s-expression>+
)
<declaration argument> := <argument name> : <argument type> [ = <default value> ]
<named argument> := <argument name> = <argument value>

По сути является частным случаем s-выражения-метода и введен только ради особого синтаксиса декларации параметров.

(def element TestView(name:str = '', count:number) layout=true
    (block      
    )
)

задать значение свойства

(<property name> = <property value>)

(style
    (width = 100px)
)
  
(tf
    (text = 'Hello world!')
)

взять значение свойства

(.<property name>
    <nested s-expression>+
)

(.graphics
    (lineStyle 1 0xffffdc84 1)
    (beginFill "0xff414141" "0")
    (drawRect 0 0 450 64)
    (endFill)
)

На этих 4 типах выражений и строится вся разметка.

Скрытый текст


# definition
(def element CommanderPersonalInfo(name:str = '') layout=true
    (mc 'ResearchPageBGFlags'
        # set property
        (name = 'flags')
  
  
        # call method with argument
        (gotoAndStop "nation")
    )
  
    (block
        # get property
        (.graphics
            # nested s-expressions
            (beginFill "0xFF0000" "1")
            (drawCircle 40 40 10)
            (endFill)
        )
    )
)

Макросы

Макрос - именованный параметризированный фрагмент верстки, который подставляется в место вызова на этапе парсинга.

Макросы реализованы на уровне AST (Abstract syntax tree).

Определение макроса:

(def macro <macro name> (<declaration argument>*)
    <nested s-expression>+
)
<declaration argument> := <argument name> : <argument type> [ = <default value> ]

(def macro StatusesVehicleTypes(width:number=100%, height:number=100%, renderer:str='VehicleTypeItem', name:str='statusesVehicleTypes')
    (element List "name" "renderer" "width" "height"
        (scope
            (containerFlow = "Flow.HORIZONTAL")
            (listVscrollPolicy = 'off')
            (listHscrollPolicy = 'off')
        )
    )
)

Использовать макрос можно с помощью ключевого слова macro.

(macro <macro name> <positional argument value>* <named argument>*)

(macro StatusesVehicleTypes 160 height=32)

Несмотря на то что это выглядит как обычный вызов метода, это не так. Подстановка макроса происходит на этапе парсинга.

В определении макроса можно использовать макросы, определенные ранее. Подстановка происходит рекурсивно.

(def macro ComponentStateBase (statesDict:expression)
    (macro ComponentStateBaseScope "statesDict")
    (macro ComponentStateBaseContent)
)

Исполнение верстки

Движок, исполняющий верстку, максимально абстрагирован от каких-либо конкретных функциональностей. В нем нет знания о спрайтах, скоупах и т д.

Здесь есть такое понятие, как таргет-объект. Это текущий объект, над которым выполняются действия, описанные s-выражениями. S-выражения различаются по типам (метод, сеттер, геттер) и не более (даже definition на этом уровне будет просто методом).

Первое исполнение верстки происходит после загрузки текста файла в фреймворк. После парсинга файла - мы имеем список s-выражений, которые содержатся в файле (как правило, это дефенишины, задания глобальных констант). Для исполнения этого списка s-выражений создается фейковый объект (хотя по факту этим методам он не нужен).

Другим частым случаем запуска движка на исполнение списка s-выражений является построение дефинишина, здесь создается соответствующий дефинишину объект и s-выражения, которые содержатся в теле дефинишина, исполняются над ним.

По ходу исполнения s-выражений таргет-объект меняется. Это происходит при исполнении вложенных s-выражений, для них таргет-объектом будет объект, который вернуло родительское s-выражение. Если s-выражение ничего не вернуло или вернуло не объект, то вложенные s-выражения исполняться не будут. Возвращать значения (в том числе объекты) могут методы и геттеры.

На примере подробно расписано, как меняется таргет-объект:

Скрытый текст


# метод def не возвращает ничего, поэтому его вложенные s-выражения не будут исполнены
# метод def их сохранит для дальнейшего использования при построении дефинишина
# s-выражения в теле дефинишина CommanderPersonalInfo будут исполнены над объектом sprite
# при построении элемента CommanderPersonalInfo
(def element CommanderPersonalInfo (command:str, toggle:bool = false) layout=true
    # target-object - Sprite
    # метод tf создаст TextField, добавит его в display list к текущему target-объекту
    # вернет созданный объект
    (tf
        # target-object - TextField, который вернул метод tf
        # style возвращает StylePreset для target-object
        # у style будет задано значение 100 свойству width
        (style
            (width = 100px)
        )
    )
  
  
    # метод mc создаст объект класса ResearchPageBGFlags из библиотеки по linkage,
    # добавит его в display list к текущему target-объекту, которым сейчас является Sprite
    # вернет созданный объект
    (mc 'ResearchPageBGFlags'
        # target-object - ResearchPageBGFlags (унаследованый от MovieClip)
        # вызван метод gotoAndStop c строковым аргументом 'ussr'
        (gotoAndStop 'ussr')
    )

Типы данных

В верстке введена строгая типизация (параметры definitions, свойства скоупа), проверка типов происходит на этапе исполнения (кроме макросов, для них на этапе подстановки, т е на этапе парсинга)

Введение типизации позволяет лучше контролировать ошибки.

тип	описание	синтаксис	комментарии
number	number	12.34	для типа number можно уточнить единицы
	percent	12.34%
	pixels	12px
bool	boolean expression	true / false
str	string	'text123'	single quotes
dict	dictionary	{a : 1, b: 2}
array	array	[1, 2, 3]
expression	вычиляемое выражение	"a ? 1 : 2"	в двойных кавычках константа не может быть определена внутри выражения
gfx	указатель на любой GFx::Value	нет	константа не может быть определена в верстке и в выражениях
cpp	сложный объект, такой как коллекции или сущность	нет

Примечание:

Важной особенностью при работе со строковыми литералами и переменными является то, что одинарные кавычки можно не использовать, т.к. парсер при разборе интерпретирует значения как строку. Поэтому существует двойственность при объявлении строковых переменных.

Скрытый текст


# Инициализация строкой переменной переменной
(var vehicleName:str = Skorpion)
  
  
# Объявление ключа в dict'e
(var testDict:dict = "{
    up : 'bitmap:button_black_bg',
    hover : 'bitmap:button_black_bg_hover',
    down : 'bitmap:button_black_press'
}")
(trace "toUpper(testDict['up'])")

Эта особенность проявляется и при использовании bindings конструкций (bind, bindcall, sync, dispatch), например:

# Dispatch события evBtnUpEvent
(dispatch evBtnUpEvent on=mouseUp)

Первым аргументом toplevel функция dispatch ожидает строку, но явно обозначать, что это строка, не требуется.

Enums

В выражениях можно использовать перечисления, которые заданы в core c++ части Unbound.

enum name

свойства

описание

пример

комментарии

Flow

HORIZONTAL

VERTICAL - значение по умолчанию

TILE_HORIZONTAL

TILE_VERTICAL

REVERSE_HORIZONTAL

REVERSE_VERTICAL

Свойства определяют то, как будут выстраиваться вложенные display objects.

(block 
    (style
        (flow = "Flow.HORISONTAL")
    )
)
  
  
# Эквивалент записи выше
(hblock
)

Для block с выставленным в стиле свойством flow существуют алиасы:

block - вертикальный блок
hblock - горизонтальный блок
vtile - вертикальный tile блок
htile - горизонтальный tile блок
reverse - вертикальный блок с обратным порядком элементов в блоке
hreverse - горизонтальный блок с обратным порядком элементов в блоке

У block параметр flow = Flow.VERTICAL

Easing

line

elastic_in

elastic_out

bounce_in

bounce_out

back_in

back_out

cubic_in

cubic_out

quint_in

quint_out

expo_in

expo_out

expo_in_out

sine_in

sine_out

sine_in_out

Types of easing for animation.

(controller $Animation
    (play duration=0.3 to={alpha:0} easing="Easing.cubic_out")
)

MatroseFuchs · 26 апр 2019, 16:16:21

Конструкции языка разметки

Constant

Константы имеют такое же назначение, как и в других языках, и служат для хранения неизменяемых значений.

В unbound можно использовать 2 типа constant:

Глобальные констатнты
Для объявления глобальной константы используется функция (def. В поле аргумента передается содержимое, которое может принимать переменная при объявлении.

# объявление
(def constant C_ALLY 0xFF80c0ff)
...
# использование
(style 
    (width = "32px")
    (height = "32px")
    (backgroundColor = "C_ALLY")
)

Скрытый текст


# объявление
(def constant ModuleNames   [   
                            'engine',
                            'maingun',
                            'atba',
                            'aviation',
                            'airdefence',
                            'none',
                            'torpedoes',
                            'wheel',
                            'none',
                            'none',
                            'fire',
                            'flood'
                           ]
)
...
# использование
(var damagedModuleName:str = "(moduleState == 3 ? 'module_dead_' : 'module_crit_') + ModuleNames[$index]")

Скрытый текст


(def constant BTN_PRIMARY {
        up : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg', scale9: "Rect(15, 7, 135, 5)"} },
        hover : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_hover', scale9: "Rect(15, 7, 135, 5)"} },
        down : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_press', scale9: "Rect(15, 7, 135, 5)"} },
        disabled : {font: ButtonTextDisabledStyle, image: {source: 'bitmap:button_normal_bg_disabled', scale9: "Rect(15, 7, 135, 5)"} },
        disabledOverlay : {style: 'BtnNormalDisabledOverlayStyle'},
        focusOverlay : {image: {source: 'bitmap:button_normal_focus', scale9: "Rect(15, 7, 135, 5)"}},
        upSelected : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_press', scale9: "Rect(15, 7, 135, 5)"} },
        hoverSelected : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_press', scale9: "Rect(15, 7, 135, 5)"} },
        downSelected : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_press', scale9: "Rect(15, 7, 135, 5)"} }
    }
)
(macro ComponentStateBase "BTN_PRIMARY")

Локальные константы
Эти константы объявляются в scope element и могут быть использованы только в element'е.

Скрытый текст


(def element TestView() layout = true
    (scope
        (const STATE_AVAILABLE:number = 0)
        (const STATE_UNAVAILABLE:number = 1)
        (const STATE_LOCKED:number = 2)
  
  
        (var currentState:number = 1)
    )
  
    (tf
        (bind class "currentState == STATE_AVAILABLE ? 'EpicTitleYellowTextStyle' : 'GrandTitleYellowTextStyle'")
        (text = 'Hello Unbound!!!')
    )
)

MatroseFuchs · 29 апр 2019, 12:25:35

Controllers

Контроллер -- сущность, выполняющая один тип действий с заданным объектом. У контроллеров $Instance, $FxInstance и $Repeat - объект указывается в поле renderer; контроллер $Animation направлен на родительский объект; контроллер $Sector сам является объектом.

$Instance

Добавляет на сцену экземляр element'a.

Скрытый текст


(controller $Instance renderer='PlayerListTextLine' layout=false
    (args entityId="13123")
    (exprs
        (scope
            (bind width "290")
            (bind isAlive "isAlive")
            (bind isSelf "isSelf")
        )
    )
    (bind enabled "isBoolTrue")
)

renderer задаёт элемент, с которым контроллер будет производить операции. Доступен для биндинга.
layout отвечает за то, будет ли работать layout система. Значение по умолчанию false
args при вызове передаёт в рендерер значение из скоупа, в котором находится.
exprs выполняется на стороне рендерера, но имеет доступ к родительскому скоупу. Может содержать выражения и биндинги. Через этот атрибут позволяет слушать в ребенке переменные из родительского скоупа.
enabled задаёт выражение для срабатывания контроллера. Контроллер сработает, если выражение == true.
trigger задаёт выражение для срабатывания контроллера. Контроллер сработает, если выражение изменит значение.
event, аналог enabled, но реагирует на Events

В некоторых случаях не требуется выделять отдельный элемент, тогда блоки можно вложить в атрибут (exprs и выставить layout=true у контроллера.

Скрытый текст


(controller $Instance layout=true
    (exprs
        (tf
            (name = 'level')
            (class HeroTitleTextStyle)
            (selectable = false)
            (bind text "parentLevel")
        )
    )
)

Скрытый текст


(controller $Instance renderer='OwnHealthBar'
       (args _entityId="entityId")
       (bindcall recreate (bind trigger "entityId"))        
)

recreate - метод, который пересоздает инстанс

$FxInstance

Временно добавляет на сцену экземпляр элемента, который будет удалён со сцены через «lifetime» секунд.

Скрытый текст


(controller $FxInstance renderer='DamageDangerFX' lifetime=5
    (args data="$event")
    (bindcall create (event "$datahub.getEntity(entityId).damageDanger.evDamage"))
)

Скрытый текст


(controller $FxInstance renderer='LevelView' lifetime=2
    (args textStyle='HeroTitleTextStyle')
    (exprs
        (scope
            (level = "parentLevel")
            (radius = 40)
        )
    )
    (bindcall create (event "onClick"))
)

Скрытый текст


(def element LevelView(textStyle:str = 'MainTextStyle') layout=true
    (scope
        (event __onParamChange)
        (var radius:number = 13              
            (dispatch __onParamChange on='evChanged')
        )
        (var color:number = 0xfff2ad
            (dispatch __onParamChange on='evChanged')
        )
  
  
        (var index:number = "$index")
    )
  
    (style
        (bind width "radius * 2")
        (bind height "radius * 2")
        (align = "center|middle")
    )
    (.graphics
        (bindcall clear init=true (event "__onParamChange"))
        (bindcall lineStyle 1 "color" 0.3 init=true watch=false (event "__onParamChange"))
        (bindcall drawCircle "radius" "radius" "radius" init=true watch=false (event "__onParamChange"))
        (bindcall endFill init=true (event "__onParamChange"))
    )
    (scope
        (var level:number = 0)
    )
    (tf
        (name = 'level')
        (bind class "textStyle")
        (bind text "level" init=false)
        (selectable = false)
    )
)

renderer, args, exprs, enabled, layout - поведение аналогично поведению в $Instance контроллере
bindcall create - определяет эвент (событие) срабатывания для контроллера. Контроллер вызывается когда в скоупе ловится указанное событие. В примере выше мы обращаемся напрямую к $datahub, поэтому переменную или эвент отдельно для этого события можно не заводить (но так делать не рекомендуется, т.к. компонента на момент инициализации может не оказаться и подписка не произойдёт. Лучше объявлять entity, component и уже обращаться к эвенту внутри переменной-компонента).
lifetime определяет время жизни элемента на сцене. Если не задано - значение по умолчанию 15 секунд.

$Repeat

Создает указанное число копий рендерера.

(controller $Repeat renderer='MapMarkerItem'
    (bind count "collection.items.length" (event "collection.evAdded"))
    (args size="size" mapScale="mapScale" scaleRatio="scaleRatio")
)

Скрытый текст


(scope
    (event onClick)
    (var countRenderers:number = 5)
)
  
(controller $Repeat layout=true
    (bind count "countRenderers")
    (exprs
        (element ButtonPrimary
            (scope
                (label = "'button_' + $index")
            )
            (dispatch onClick args="{index : $index}" on='click')
        )  
    )
  
    (bindcall removeChildAt "$event.index" init=false (event "onClick"))
)

renderer, args, exprs, enabled, layout - поведение аналогично поведению в $Instance контроллере
count задаёт число копий рендерера. Может быть любым expression'ом. В примере выше -- counter равен количеству элементов в коллекции collection.
removeChildAt(index) - удаляет со сцены рендерер по index
$index - целое число, номер ребенка по порядку от 0 до конечного элемента. У первого созданного элемента будет $index=0 и т.д. Автоматически находится в скоупе ребенка с момента создания.

$Animation

Анимирует родительский display object или значение переменной в скоупе.

Доступные методы контроллера с примерами заполнения параметров:

play - запуск одной анимации

Скрытый текст


(play
    duration=1.0  # продолжительность анимации в секундах. Обязательный параметр и должен быть больше ноля.
    to={ alpha:1, y:0, visible:true }  # финальные значения анимации. Обязательный параметр, если не передано имя анимации name(см. ниже), в противном случае пустой по умолчанию.
    from={ alpha:0, y:50, visible:false }  # стартовые значения анимации. Если не указать -- анимация начнется с тех значений, которые находятся в скоупе. Параметр пустой по умолчанию.
    name='AnimX'  # имя заранее объявленной анимации. Например: (def animation AnimX() from={x:0} to={x:300}). Пустое по умолчанию.
    delay=2.0  # указывает задержку перед проигрыванием анимации. По умолчанию равно 0.0.
    easing="Easing.quint_out"  # функция изменения анимации. Параметр пустой по умолчанию (соответсвует Easing.line).
    repeatCount=1  # количество повторений анимаций. Внимание! Параметр задает количество дополнительныйх повторений, т.е. если repeatCount=0, анимация проиграется один раз. -1 - анимация будет проигрываться постоянно. По умолчанию равно 0.
    reverse=false  # условия отыгрывания анимации в обратную сторону, to → from (при условии наличия обоих полей, либо наличии name). По умолчанию равно false.
    callbacks="{  # коллбеки анимаици. По умолчанию коллбеки не заданы.
        onComplete: onCompleteEvent,  # срабатывает, когда анимация закончилась
        onStart: onStartEvent,  # срабатывает, когда анимация стартует
        onRepeat: onRepeatEvent,  # срабатывает каждый раз, когда анимация начинается с начала. В коллбек передается параметр repeatCount - количество оставшихся повторений.
        onUpdate: onUpdateEvent,  # срабатывает каждый раз, когда анимация меняет значение параметра. В коллбек передается dict с текущими значениями параметров переданных в 'to' и 'from'.
    }"
    id='anmId'  # id анимации, по которому ее можно будет остановить через метод stop. По умолчанию id="".
)

Скрытый текст


(scope
    (var longTapArc:number = 0)
    (controller $Animation
        (bindcall play  duration= 0.5
                        from    = { longTapArc:0 }
                        to      = { longTapArc:360 }
                        (bind enabled "keyState == Key.DOWN")
        )
    )
)

если (keystate == Key.DOWN), то изменяет значение longTapArc с 0 до 360 за 0.5сек

Скрытый текст


(block
    (visible = "tacticalMap")
    (style 
        (height = 100)
        (width = 100)
        (backgroundColor = C_ALLY)
    )

    (controller $Animation
        (bindcall play 
            duration=0.15
            delay="tacticalMap ? 0.1 : 0"
            easing="Easing.cubic_out" 
            from={ alpha:0, y:50, visible:false } 
            to={ alpha:1, y:0, visible:true } 
            reverse="!tacticalMap"
            (bind trigger "tacticalMap")
        )
    )
)

если переменная tacticalMap меняет значение - отыгрывает появление, если tacticalMap меняет значение на первоначальное - отыгрывается исчезновение.

bindcall указывает, что запустить анимацию следует в соответствии с условиями, указанными в bind enabled, bind trigger или event.
duration указывает длительность анимации в секундах.
delay указывает задержку перед проигрыванием анимации.
from стартовые значения анимации. Если не указать - анимация начнется с тех значений, которые находятся в скоупе.
to финальные значения анимации. Обязательное поле.
reverse условия отыгрывания анимации в обратную сторону, to → from (при условии наличия обоих полей).
trigger условия срабатывания анимации, когда значение условия меняется. Отличие от enabled в том, что enabled срабатвает только когда выражение == toBoolean(true). ВАЖНО! На момент запуска delay -- контроллер уже принял в себя значения всех переменных на всех позициях. Если на момент окончания задержки значения переменных изменились - контроллер об этом не узнает.

killAll - свойство, при старте анимации уничтожает все активные анимации у объекта

Скрытый текст


(controller $Animation
        (bindcall play  duration = "HEALTH_ANI_MIN"
                        killAll=true
                        watch = false
                        easing="Easing.quad_in"
.....
)

Доступные изинги:

https://easings.net/

параметр easing принимает следующие значения:

Скрытый текст


Easing.line
Easing.elastic_in
Easing.elastic_out
Easing.bounce_in
Easing.bounce_out
Easing.back_in
Easing.back_out
Easing.quad_in
Easing.quad_out
Easing.cubic_in
Easing.cubic_out
Easing.quint_in
Easing.quint_out

Примеры:

Пример запуска анимации по клику на кнопку и отображение в текстовом блоке изменяющихся значений. Анимация переменной в scope :

Скрытый текст


(scope
    # Объявить переменную, которую хотим анимировать
    (var animationVariable:number = 0)
  
  
    # Event для вызова метода play
    (event playAnimationEvent)
  
    # Контроллер обязательно должен быть расположен в scope
    (controller $Animation
        (bindcall play
            duration = 10
            from     = "{animationVariable:0}"
            to       = "{animationVariable:360}"
            easing   = "Easing.cubic_out"
            (event "playAnimationEvent")
        )
    )
)
  
(tf
    (class HeroTitleYellowTextStyle)
    (bind text "animationVariable")
)
  
(element ButtonPrimary
    (scope
        (label = 'Play')
        (dispatch playAnimationEvent on='evBtnLeftClickEvent')
    )
)

Пример анимации свойств стилей

Скрытый текст


(scope
    (event playAnimationEvent)
    (var triggerAnimation:bool = false)
    (bind triggerAnimation "!triggerAnimation" init=false watch=false (event "playAnimationEvent"))
)
  
(block
    (style
        (position = "absolute")
        (width = 50)
        (height = 30)
        (top = 100)
        (left = 100)
        (backgroundColor = 0xFFFF0000)
        (alpha = 0)
    )
  
    (controller $Animation
        (bindcall play
            duration=2
            easing="Easing.cubic_out"
            from="{alpha:0, top:100, width: 50, height: 30}"
            to="{ alpha:1, top:200, width: 100, height: 50 }"
            reverse="!triggerAnimation"
            (bind trigger "triggerAnimation")
        )
    )
)
  
(element ButtonPrimary
    (scope
        (label = 'Play')
        (dispatch playAnimationEvent on='evBtnLeftClickEvent')
    )
)

trigger - условие срабатывания анимации, когда значение условия меняется на противоположное. Отличие от enabled в том, что enabled срабатывает только когда выражение true.

Trigger vs Enabled

(controller $Animation
        (bindcall play  duration = "HEALTH_ANI_MIN"
                        enabled="isEnabled"
.....
)
 
(controller $Animation
        (bindcall play  duration = "HEALTH_ANI_MIN"
                        trigger="isTarget == 'ally'"
.....
)

trigger - условие срабатывания анимации, когда значение условия меняется на противоположное. Отличие от enabled в том, что enabled срабатывает только когда выражение true.

Внимание!

Особенность работы контроллера с параметром delay. Значения анимируемых переменных в параметре to вычитываются контроллером без учета delay. Поэтому если на момент окончания задержки значения переменных изменились контроллер об этом не узнает.

$Sector

Рисует сектор используя flash.display.Graphics target объекта

Скрытый текст


(def element SectorControllerSample() layout=true
    (x = 10)
    (y = 10)
    (scope
        (var _circOffset:number = 30)
        (var _circArc:number = 60)
        (var _circRad:number = 200)
        (var _circInRad:number = 50)
        (var _circColor:number = 0xffff0000)
        (var _circGradient:array = [0xffff0000, 0xffff00ff, 0xffffff00])
        (var _circAlphas:array = [1, 0.5, 0.5])
        (var _circRatios:array = [0, 127, 255])
        (var _lineThickness:number = 10)
        (var _lineColor:number = 0xffffffff)
        (var _lineAlpha:number = 0.5)
    )
  
    (block
        (mc 'flash.display.Sprite'
            (controller $Sector
                (offset="_circOffset")
                (color="_circColor" )
                (arc="_circArc" )
                (radius="_circRad" )
                (colors="_circGradient" )
                (alphas="_circAlphas")
                (ratios="_circRatios")
                (lineThickness="_lineThickness")
                (lineColor="_lineColor")
                (lineAlpha="_lineAlpha")
                (innerRadius="_circInRad")
            )
        )
    )
)

$Tooltip

В общем случае, тултип – это элемент, который показывается надо всей остальной вёрсткой. Примеры:

всплывающая подсказка: появляется при наведении мыши на некоторый блок, пропадает, когда мышь уходит.
контекстное меню: появляется по клику на блоке, пропадает, если кликнуть на экране за пределами меню.

Например,

Скрытый текст


(controller $Tooltip
    (renderer='SimpleTooltip')
    (showAnimation={duration:0.15, from:{alpha:0, scaleX:0.7, scaleY:0.7}, to:{alpha:1, scaleX:1, scaleY:1}}) # same one is used for hiding
    (bindcall show on='rollOver')
    (bindcall hide on='rollOut')
    (offset={x:0, y:20})
    (align="bottom|right")
    (position="trackMouse")
)

Элемент и аргументы

Как реализуется: в блок включаем controller $Tooltip, задаём ему название элемента и аргументы для всплывающей подсказки:

Скрытый текст


(controller $Tooltip
    renderer=...        # Имя элемента для тултипа, агрументы и выражения -- так же, как и для
    (args ...)          # любого контроллера.
    (exprs ...)
 
    cache=true|false    # Кэшировать ли тултип (по умолчанию true). Кэш локальный (т.е. каждый
                        # контроллер кэширует только свой тултип, и кэш сбрасывается, если
                        # контроллер умирает).
    priority=0          # Если на одном элементе несколько тултипов, то тот, у которго больше
                        # приоритет, будет скрывать тултипы с меньшим приоритетом.
    ...
)

Положение

Задаётся тип точки привязки ("position"):

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

Потом – выравнивание ("align") и сдвиг ("offset") относительно этой точки, и минимальное расстояние до границы экрана ("screenBoundsOffset").

Если тултип подъезжает к границе экрана (с учетом "screenBoundsOffset"), то он упрётся в эту границу и не будет смещаться... при условии, если он не перекроет точку приязки. То есть, если тултип имеет выравнивание "outerLeft|bottom" (слева и снизу от точки привязки) – то при приближении к нижней границе экрана он может в неё упереться – и не перекрыть точку. А вот при выравнивании "innerLeft|outerBottom" (под точкой привязки, у левого её края) тултип не может просто упереться в нижний край: точка привязки будет перекрыта. Поэтому он "перепрыгивает" на противоположную сторону от точки привязки, т.е. меняет выравнивание на "innerRight|outerBottom". Пины тултипа (см. ниже) при этом тоже поменяются.

Примеры "упирания" и "перепрыгивания" см. Sandbox/Unbound2/TooltipSamples.

Скрытый текст


(controller $Tooltip
    ...
    position="trackMouse|atMouse|border|borderNoTrack" 
                                    # Тултип едет за мышью, остаётся в точке, где мышь была в момент открытия тултипа,
                                    # прилип к краю родительского элемента (и ездит вместе с ним), или встал в точке,
                                    # где родительский элемент был в момент открытия. По умолчанию -- "trackMouse".
 
    # В какую сторону тултип смещен от мыши или от края элемента (по умолчанию "outerRight|outerBottom").
    align="innerLeft|left|innerRight|right|center innerTop|top|innerBottom|bottom|middle"
 
    offset={x: ..., y: ...} # На сколько он смещен по x и y.
 
    # На какое расстояние тултип может подъезжать к краю экрана (либо одинаковое значение по всем
    # краям, либо для каждого края своё).
    screenBoundsOffset=value|{left: ..., top: ..., right: ..., bottom: ...} 
    ...
)

Пины

Также тултип может иметь пины (стрелочки от края тултипа к точке привязки); нужный пин (левый, правый, верхний или нижний) выбирается автоматически. Правда, с пинами есть сложности, на них не работают отступы (маржины и паддинги). Если нужен отступ – то приходится добавлять в пин фон нужного размера с прозрачной заливкой (например, цветом 0x00000001). А отрицательный отступ (т.е. наложение стрелочки на тело тултипа) и вовсе можно задать только с помощью параметра pinOffset.

Скрытый текст


(controller $Tooltip
    ...
    (pinLeft='...')     # Имена элементов с пинами (стрелочками от края тултипа к точке привязки).
    (pinTop='...')
    (pinRight='...')
    (pinBottom='...')
    (pinOffset=...)     # Смещение пина относительно точки привязки (т.е. на сколько пикселей пин наезжает на тело тултипа)
    ...
)

Другой способ сделать "пины" – это подписать элемент тултипа на событие evPinPositionChanged, и переключать подложку в зависимости от того, какую стрелочку нужно показать. Это работает надёжнее и даёт больше контроля, чем задание стрелочек в отдельных элементах.

Скрытый текст


(def element TooltipWithSwitchingBackground() layout=true
    (scope
        (event evPinPositionChanged)    # Хоть ивент и приходит извне (от controller $Tooltip) -- но его всё равно
                                        # надо явно прописать в скоупе, иначе будет выдана ошибка :(
    )
 
    (controller $Instance
        (bind renderer
            "$event.pinPosition == 'left' ? # Или 'right', 'top' и 'bottom'
                        'TooltipBackgroundLeft' : 'TooltipBackgroundRight'"
            init=false (event "evPinPositionChanged")
        )
    )
    ...

Появление/пропадание и анимация

Здесь указываем, по каким событиям и с какой анимацией тултип появляется и пропадает. Анмация настраивается так же, как в controller $Animation.

Скрытый текст


(controller $Tooltip
    ...
    showAnimation={duration: ..., delay: ..., easing: ..., from: {...}, to: {...}}
    hideAnimation={...}     # Если не задан hideAnimation -- то используется та же анимация,
                            # что на showAnimation (только реверсированная). Анимировать можно
                            # все параметры, которые поддерживает controller $Animation.
 
    (bindcall show animation={duration: ..., delay: ..., easing: ..., , from: {...}, to: {...}} on='rollOver')
    # Настройки анимации в биндинге (если они есть) имеют приоритет над глобальными.
 
    (bindcall hide on='rollOut')    # Если анимация hide не задана -- используется та же, что в bindcall show.
                                    # Если надо убрать анимацию -- задайте animation={}. Также можно
                                    # подписывать и на любой (event ...).
    ...
)

События

Контроллер тултипа бросает события при появлении, исчезновении, или клике за пределами тултипа.

Скрытый текст


(controller $Tooltip
    ...
    (bind ... on='evStartShow')
    (bind ... on='evShow')
    (bind ... on='evStartHide')
    (bind ... on='evHide')
    (bindcall ... on='evClickOutside')
    ...
)

Те же самые события могут направляться не только контроллеру тултипа, но и его элементу (renderer'у). Для этого события с таким же именами нужно вручную определить в скоупе рендерера; контроллер их там найдёт (так же, как прописывается событие evPinPositionChanged – см. выше).

scroll_bar

Элементы полосы прокрутки

Полоса прокрутки состоит из 4 элементов: "трэка", по которому перемещается "тумб", и кнопок слева и справа от "трэка":

(scroll_bar
    ...
    (btn_decr = 'имя элемента')
    (track = 'имя элемента')
    (thumb = 'имя элемента')
    (btn_incr = 'имя элемента')
    ...
)

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

Каждый из 4 элементов в простейшем случае может быть просто закрашенным блоком с заданной высотой и шириной (но трэк и тумб автоматически растянутся под размер и диапазон области прокрутки). Можно прописать автоматическое изменение стиля элемента при наведении мыши и при нажатии. Для этого прописываем четыре стиля:

Скрытый текст


(def css SBLeftBtnUpStyle()
    (backgroundImage='url:../battle_hud/central_log/lower_log_bg_left.png')
    (scale9grid = "rect(4, 4, 1, 4)")
    (alpha=0.5)
)
(def css SBLeftBtnHoverStyle()
    (alpha=0.7)
)
(def css SBLeftBtnPressStyle()
    (alpha=1)
)
(def css SBLeftBtnDisabledStyle()
    (alpha=0.2)
)

собираем их в dict,

(def constant SB_LEFT_BTN {
    up : 'SBLeftBtnUpStyle',
    over : 'SBLeftBtnHoverStyle',
    down : 'SBLeftBtnPressStyle',
    disabled : 'SBLeftBtnDisabledStyle' }
)

и подписываем элемент на событие stateChanged:

(def element SBLeftBtn() layout=true
    (style
        (width = 12px)
        (height = 13px)
    )
    (bind class "SB_LEFT_BTN[$event.state]" init=false on='stateChanged')
)

а потом подсовываем этот элемент в scroll_bar:

(scroll_bar
    (btn_decr = 'SBLeftBtn')
    ...

Имейте в виду, что какой-то элемент должен ловить события мыши – то он должен быть залит каким-то цветом или изображением (а вот альфу ему можно поставить в 0). Т.е., если нужно сделать прозрачный трэк – то ему всё равно надо указывать непрозрачную заливку, а потом писать (alpha=0).

Параметры и события полосы прокрутки

Скрытый текст


(scroll_bar
    ...
    (orientation="Flow.VERTICAL") # Направление.
 
    (value=10)                  # Текущее положение (левый край "тумба").
    (minimum=0)                 # Минимум.
    (maximum=50)                # Максимум.
    (thumbSize=70)              # Размер "тумба".
 
    (singleStep=1)              # На сколько меняется значение при нажатии
                                # "вверх" или "вниз".
 
    (scrollDuration=500)        # Длительность анимации прокрутки, в миллисекундах.
 
    (alignThumbToBorders=true)  # Если true -- "тумб" начинается в положении
                                # value; если false -- он центрирован относительно
                                # этого положения.
 
    # События при прокрутке:
    (dispatch ... args="{value:$event.newValue}" on='valueChanged')
    (dispatch ... args="{value:$event.newValuePerc}" on='valuePercentChanged')
    ...
)

Когда scroll_bar работает в составе scrollArea, задавать надо только orientation, прочие параметры устанавливаются автоматически (и на события scrollArea тоже сама подписывается).

Кстати, если поставить параметр alignThumbToBorders в false и не задавать btn_decr и btn_incr (задать только трэк и тумб) – то получится слайдер.

scrollArea

Область, которая умеет показывать контент бОльшего размера, и прокручивать его.

Скрытый текст


(scrollArea
    (style
        (width=...)
        (height=...)
        ...
    )
 
    (content
        ... # тут какие-то блоки
    )
 
    (horizontalSlider='имя элемента')   # Указанный элемент должен содержать scroll_bar.
    (verticalSlider='имя элемента')     # Параметры scroll_bar настроятся автоматически.
                                        # Если scroll_bar не задан -- то прокрутка работать не
    (vscrollPolicy = 'on|off|auto')     # будет (даже колёсиком); если нужно
                                        # убрать полосу, но оставить прокрутку --
    (hscrollPolicy = 'on|off|auto')     # элемент можно сделать невидимым.
 
    (drag=true|false)                   # Можно ли прокручивать перетаскиванием
    ...                                 # контента (по умолчанию true).
)

Область прокрутки можно двигать колёсиком мыши (если зажать шифт – то по горизонтали); но scroll_bar для этого всё равно должен быть задан, т.к. именно он отвечает за параметры прокрутки и скорость анимации.

Тени и анимация области прокрутки

Можно задать четыре тени, и настроить анимацию при появлении/пропадании теней и при наведении мыши на область прокрутки:

Скрытый текст


(scrollArea
    ...
    (leftShadow='имя элемента')     # Альфу на этих элементах трогать нельзя, т.к. её будет менять
    (rightShadow='имя элемента')    # анимация. Если тень должна быть полупрозрачная (с альфой
    (topShadow='имя элемента')      # меньше 1) -- то в элементе нужно сделать вложенный блок.
    (bottomShadow='имя элемента')   # Тень скрывается, если область докручена до конца (т.е. если
                                    # прокрутить до упора вверх -- то верхняя тень не отображается).
 
    (activeControlsAlpha=1)         # Прозрачность полос прокрутки и теней при наведении мыши.
    (inactiveControlsAlpha=0.5)     # Прозрачность, когда мышь ушла.
    (animationDuration=0.2)         # За какое время будет меняться прозрачность.
    (animationEasing="Easing.cubic_out")
    ...
)

Методы для прокрутки

Скрытый текст


(scrollArea
    (bindcall scrollToBegin animated=true (event "..."))        # По умолчанию animated=true.
    (bindcall scrollToEnd animated=false (event "..."))         # Если есть обе полосы прокрутки -- то
                                                                # можно использовать "hScrollTo.../vScrollTo...".
 
    (bindcall scrollLeft (event "..."))                         # Прокручивает на одну строчку (аналогично
    (bindcall scrollRight (event "..."))                        # нажатию кнопки "влево" или "вправо").
    (bindcall scrollUp ...)
    (bindcall scrollDown ...)
 
    (bindcall scrollTo index=... animated=true (event "..."))   # Прокрутка до элемента с заданным индексом.
    (repeatController='имя контроллера')                        # Для этого в scrollArea должен быть контроллер
                                                                # с соответствующим именем:
                                                                # "(controller $Repeat name='...')".
...
)

Динамическая прокрутка

Если в content поместить controller $Repeat, то контроллер может создавать свои элементы динамически, по мере того, как scrollArea прокручивает до них. Для этого контроллеру надо указать, какие размеры имеют его элементы:

Скрытый текст


(scrollArea
    ...
    (repeatController='имя контроллера')    # Название контроллера, который создаёт
                                            # элементы динамически.
    (scrollPerItem=false|true)              # Прокручивать до границы элемента (т.е. не разрешать
                                            # останавливать прокрутку на середине элемента).
                                            # По умолчанию false.
 
    (content
        (controller $Repeat renderer='...' name='имя контроллера' count=...
            (itemWidth=...)                 # Размеры элементов по умолчанию. Если размеры
            (itemHeight=...)                # не задавать -- то контроллер работает как обычный
                                            # "статический", т.е. создаёт все свои элементы сразу.
 
            (reuseElements=true|false)      # При прокрутке, когда элемент уходит из видимой области,
                                            # его можно переставить в начало. Работает быстрее, чем
                                            # если уничтожать "пропавшие" элементы, а "появившиеся"
                                            # создавать заново. По умолчанию true.
 
            (itemOffset="value|{left:..., right:...}") # На каком расстоянии от границы
                                            # видимой области начинать создавать элементы.
                                            # Если при быстрой прокрутке видны пропуски
                                            # (элементы не успевают создаваться) -- то значение
                                            # можно увеличить.
            ...
        )
    )
)

MatroseFuchs · 29 апр 2019, 12:31:15

Element

Объект верхнего уровня. Имеет собственное имя, может быть вызван (в том числе извне документа, в котором находится) и переиспользован (с помощью Controllers или прямого объявления). Имеет свой обособленный scope, в который может принимать извне присланные значения. Элемент может быть 2 видов: участвовать в layout (иметь стили) и не участвовать. Это регулируется свойством layout=true или использование алиаса def layout:

Скрытый текст


(def element PlaneMarker() layout=true
    # Direct call
    (element PlaneIcon)
)
  
#или
  
#(def layout PlaneMarker()
#    (element PlaneIcon)
#)
  
(def element PlaneIcon()
    (symbol "(isConsumable ? 'catapult': 'fighter') + '_c'"
        (scaleX = 1)
        (scaleY = 1)
    )  
)
(block
     (element DangerItemContainer "dangersCollectionPath")
)

MatroseFuchs · 29 апр 2019, 12:41:41

Event

Событие - объект который генерируется и рассылается по какому-либо действию пользователя (например клик мыши, нажатие клавиши и т.п.). Для распространения события используется метод dispatch.

Событие либо происходит (что эквивалентно bool == true) либо отсутствует. Событие может срабатывать по различным условиям, а ловить (или слушать) событие могут как родители, так дети и сиблинги. Для этого нужно объявить это же событие в скоупах всех элементов, где планируется их ловить.

(event valChanged)

(event evKilled)
...
(dispatch evKilled args={} dir="EventDirection.DOWN" (event $datahub.getEntity(entityId).health.evKilled))

event это событие по которому происходит dispatch.

dir задаёт направление события по иерархии. По умолчанию dispatch отсылает событие только в рамках самого элемента. Чтобы отправить событие в родителя - нужно в dir указать EventDirection.UP. В ребёнка - EventDirection.DOWN. В сиблингов - достаточно просто объявить эвент в нужном сиблигне, а dir можно не указывать. Для dir в hud_replaces заведён dict со значениями. По умолчанию dir=0.

(def constant EventDirection {  NONE:  0,
                                UP:    1,
                                DOWN:  2
})

События в unbound могут генерироваться:

Из core C++ части. Например в блоке slider генерируется event valueChanged когда изменяется его value.
```
(dispatch valChanged on='valueChanged' dir=1)
```

Из Scaleform части. Например событие клика по display object'у

(block
    (style
        (width = 100)
        (height = 100)
        (backgroundColor = 0xff00ff00)
    )
    (bind alpha "0.5" init=false on='click')
)

Различия использования подписки на события с помощью on и event

Биндинг-конструкции могут подписываться на события двумя способами:

Передача имени события в аргумент on.
```
(bind eventArgs "$event" init=false on='eventScope')
```
Передача вложенного объекта event
```
(trace "$event" init=false (event "eventScope"))
```

Событие может быть сгенерировано:

в scalefom, например событие мыши click или событие клавиатуры keyDown
в core c++ части unbound, например блок slider генерирует событие sliderPositionChanged когда изменятся положение ползунка
в верстке, т.е. событие объявлено в scope элемента и генерируется в его определении.
```
(def element TestView() layout = true entrance=true
    (scope
        (event eventScope)
    )
  
    (element Button
        (dispatch eventScope on='click')
    )
)
```
Но по сути своей это не генерация события, а превращение из события scalefom/core c++ (в данном примере 'click') в событие скоупа (в данном пример eventScope)

Рассмотрим различия между этими двумя способами.

Если событие генерируется в scaleform или в core c++ unbound, то подписаться можно только с использованием аргумента on.

Скрытый текст


(def element TestView() layout = true entrance=true
    (scope
        (event eventScope)
    )
  
    (block
        (style
            (width = 100px)
            (height = 100px)
            (backgroundColor = 0xffff0000)
        )
        (bind alpha "0.5" init=false on='click')
    )
  
    (video original_widht=1920 original_height=1080
        (style
            (width = 320px)
            (height = 180px)
        )
  
        (source = "R.videos.Logo_All" )
        (trace "$event" init=false on='metaDataChanged')
    )
)

Если событие объявлено в scop'e элемента, то существует 2 случая подписки в зависимости от расположения подписки.

Подписку в scope можно осуществлять и через on и через event

Скрытый текст


(def element TestView() layout = true entrance=true
    (scope
        (event eventScope)
  
        (var eventArgs:dict = null)
        (bind eventArgs "$event" init=false (event "eventScope"))
        # (bind eventArgs "$event" init=false on='eventScope')
    )
  
    (element Button
        (scope
            (label = 'dispatch scope event')
        )
        (dispatch eventScope on='click')
    )
  
    (trace "eventArgs" init=false)
)

Подписку вне скоупа можно осуществлять только через event

Скрытый текст


(def element TestView() layout = true entrance=true
    (scope
        (event eventScope)
    )
  
    (element Button
        (scope
            (label = 'dispatch scope event')
        )
        (dispatch eventScope on='click')
    )
  
    (trace "$event" init=false (event "eventScope"))
)

Таким образом подписываться через аргумент on можно на те события которые генерирует target-объект.

Отдельно рассмотрим случай подписки на события scop'а при создании элемента.

(element Button
    (scope
        (label = 'default text')
        (bind label 'leftClick' init=false on='evBtnLeftClickEvent')
        (bind label 'rightClick' init=false on='evBtnRightClickEvent')
    )
)

События 'evBtnLeftClickEvent' и 'evBtnRightClickEvent' генерируются в определении element'а Button.

Если использовать конструкцию event, то события должны быть объявлены в родительском скоупе

Скрытый текст


(def element TestView() layout = true entrance=true
    (scope
        (event eventScope)
    )
  
    (element Button
        (scope
            (label = 'default text')
            (bind label "'keyCode: ' + $event.keyCode" init=false (event "eventScope"))
        )
    )
  
    (dispatch eventScope on='stageKeyUp')
)

MatroseFuchs · 29 апр 2019, 12:47:33

Функции для вычисляемых выражений

Список глобальных функцией представлен в таблице.

Функция	Описание	Пример
abs(number)	Математический модуль
ceil(number)	Наибольшее цело число от данного
countdownFormat(numberSeconds, numberOfDigits, isShowMinutes)	Форматирует переданное число секунд в формат min:secongs Если минут 0, отображается 00	"countdownFormat(125, 0, true)"
floor(number)	Наименьшее цело число от данного
formatFloatingPoint(number, numberOfDigits=1)	Округление дробной части до numberOfDigits знака после запятой. По умолчанию numberOfDigits = 1 Не учитывает региональные настройки формата. Нет разделителя разрядов.	"formatFloatingPoint(1.193454334123)" # result 1.2 "formatFloatingPoint(0.423456, 3)" # result 0.423
formatSeparator(number)	Группировка целочисленной части на группы по 3 цифры, разделенных пробелами. Округление дробной части до второго знака. Не учитывает региональные настройки формата. Целые числа отображаются без дробной части, а дробные - с 2 знаками после запятой.	"formatSeparator(1103569353.789254232)" # result 110 123 123 123.79 Примеры: 999.595 => "999.60" 999.59 => "999.59" 1000.5 => "1 000.50" 999 => "999" 1 999.0 => "1 999" 999.001 => "999.00"
max(x, y)	Максимальное из двух чисел. return x > y ? x : y	(var test: number = "max(smth, smth2)")
min(x, y)	Минимальное из двух чисел. return x < y ? x : y	(var test:number = "min(smth, smth2)")
pow(basis, exponent)	Возведение числа basis в степень exponent
radToGrad(radNumber)	Перевод из радиан в градусы
round(number)	Математическое округление до целого числа	"round(0.423456)" # 0
subst(str, array_values, dict_values)	Подстановка переданных аргументов в плейсхолдеры	"subst('first number is %d, second is %d', [50, 51])" subst('%(min)d - %(max)d', [], {min:1, max:2})
tan(radNumber)	Тангенс угла в радианас
toLower(str)	Преобразует прописные символы в строчные
toUpper(str)	Преобразует строчные символы в прописные
tr	Локализация строк по IDS

MatroseFuchs · 21 май 2019, 15:09:30

Layout

Unbound имеет layout system, которая занимается позиционированием блоков, расположенных в одном контейнере по определенным параметрам. Для включения layout system используется атрибут layout=true|false определения element'a. Описание element c атрибутом layout=true эквивалентно def layout

Атрибут объекта «элемент». Используется чаще всего для разметки несокльких элементов друг относительно друга. Т.е. второй дочерний элемент будет построен следом за первым и т.д. Координаты всех дочерних элементов относительны друг друга, т.е. все DisplayObject знаю о размерах друг друга и выстраиваются соответственно. Удобно применять для проектирования сложных объектов, состоящих из нескольких объектов.

Так же позволяет использовать атрибут style для изменения внешнего вида и динамического изменения параметров блоков.

Пример:

Скрытый текст


(def element TestView() layout = true
    (block
        (style
            (width = 1024px)
            (height = 768px)
            (backgroundColor = 0xff191711)
            (marginLeft = 200px)
        )
        (tf
            (style
                (textColor = 0xffffffff)
            )
            (text = 'SandBox')
        )
    )
)
  
#or
  
(def layout TestView()
    (block
        (style
            (width = 1024px)
            (height = 768px)
            (backgroundColor = 0xff191711)
            (marginLeft = 200px)
        )
        (tf
            (style
                (textColor = 0xffffffff)
            )
            (text = 'SandBox')
        )
    )
)

Скрытый текст


(controller $Instance renderer='SimpleElement'
    (args "150")    # Передаём в скоуп вызываемого элемента число
)
...
(def element SimpleElement(posX:number) layout=true     #   Объявляем элемент, объявляем переменную и её тип, 
                                                            в которую помещается принятое число и указываем, 
                                                            что элемент имеет layout
    (scope
        (var posY:number = 150)
        (var isVisible:boolean = true)
    )

    (hblock                                  # в рамках блока дочерние объекты должны стакаться горизонтально
        (bind visible "isVisible")           # условия видимости блока
        (style
            (x = posX)
            (y = posY)
        )

        (block
            (style
                (width = 100px)
                (height = 20%)
                (backgroundColor = "0xFF000000")    # COLOR CODE → 0xAARRGGBB
            )
        )

        (tf
            (style
                (textColor = "0xFF00FF00")
                (textSize = 16)
            )
            (text = 'Hello world!')
        )
    )
)

Позиционирование блоков

Layout system'a позиционирует блоки согласно значения свойства position. Position может принимать следующие значения:

flow - layout system'а позиционирует вложенные блоки один за другим (положение одного блока зависит от положения предыдущего), по умолчанию position="flow"
absolute - layout system'а исключает блок из потока (списка позиционирования).

Для позиционирования блоков относительно друг друга при position="flow" можно использовать следующие свойства стиля:

paddingLeft / paddingRight / paddingTop / paddingBottom - отступ слева / справа / сверху/ снизу для вложенных блоков.

Скрытый текст


(def element TestView() layout = true
    (style
        (width = 1024px) # ширина элемента
        (height = 768px) # высота элемента
        (backgroundColor = 0xff191711)
        (paddingLeft = 20px) # отступ слева в пикселях для вложенного блока
        (paddingTop = 10%)   # отступ сверху в процентах от текущей высоты для вложенного блока
    )
  
  
    # Координаты вложенного блока равны x:20px (paddingLeft родительского блока), y: 768 * 0.1 = 76.8 (10% от высоты родительского блока)  
    (block
        (style
            (width = 100px)
            (height = 100px)
            (backgroundColor = 0xff0000ff)
        )
    )
      
    # Координаты вложенного блока равны x:20px (paddingLeft родительского блока), y: 76.8 (y-координата блока выше) + 100 (высота блока выше) = 176.8
    (block
        (style
            (width = 100px)
            (height = 100px)
            (backgroundColor = 0xffff0000)
        )
    )
)

Если нужно задать сразу все 4 параметра можно использовать следующую конструкцию:

(style
    (padding = [5, 10, 15, 20]) # [paddingLeft, paddingTop, paddingRight, paddingBottom]
)

marginLeft / marginRight / marginTop / marginBottom - отступ слева / справа / сверху/ снизу для текущего блока

Скрытый текст


(def element TestView() layout = true
    (style
        (width = 1024px)
        (height = 768px)
        (backgroundColor = 0xff191711)
    )
      
    # Координаты блока x:10px (marginLeft текущего блока), y:20px (marginTop текущего блока)
    (block
        (style
            (width = 100px)
            (height = 100px)
            (backgroundColor = 0xff0000ff)
            (marginLeft = 10px)
            (marginTop = 20px)
        )
    )
  
    # Координаты блока x:20px (marginLeft текущего блока), y:20px (y-координата блока выше) + 100px (высота блока выше) + 5px (margineTop текущего блока) = 125px
    (block
        (style
            (width = 50px)
            (height = 50px)
            (backgroundColor = 0xffff0000)
            (marginLeft = 20px)
            (marginTop = 5px)
        )
    )
)

Если нужно задать сразу все 4 параметра можно использовать следующую конструкцию

(style
    (margin = [5, 10, 15, 20]) # [marginLeft, marginTop, marginright, bottom]
)

Примечание:
Главное отличие margins от paddings в том, что параметры paddings устанавливаются в родительском блоке и влияют на позиционирование вложенных блоков. Margins же влияют на позиционирование текущего блока.

gap, hgap, vgap - отступ по горизонтали / вертикали между каждым вложенным блоком

Скрытый текст


(def element TestView() layout = true
    (style
        (width = 1024px)
        (height = 768px)
        (backgroundColor = 0xff191711)
        (vgap = 20px)
        (paddingTop = 40px)
        (paddingLeft = 40px)
    )
      
    # Координаты блока x:40px (paddingLeft родительского блока), y: 40px (paddingTop родительского блока)
    (block
        (style
            (width = 20px)
            (height = 20px)
            (backgroundColor = 0xffff0000)
        )
    )
  
    # Координаты блока x:40px (paddingLeft родительского блока), y: 40px (y-координата блока выше) + 20px (высота блока выше) + 20px (vgap) = 80px
    (block
        (style
            (width = 30px)
            (height = 30px)
            (backgroundColor = 0xff00ff00)
        )
    )
      
    # Координаты блока x:40px (paddingLeft родительского блока), y: 80px (y-координата блока выше) + 30px (высота блока выше) + 20px (vgap) = 130px
    (block
        (style
            (width = 40px)
            (height = 40px)
            (backgroundColor = 0xff0000ff)
        )
    )
)

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

Пример использования:

Скрытый текст


(def element TestView() layout = true
    (style
        (width = 1024px)
        (height = 768px)
        (backgroundColor = 0xff191711)
        (paddingLeft = 100px)
        (paddingTop = 100px)
    )
      
    # Блок в котором layout system'а располагает элементы по горизонтали друг за другом, если следующий блок не влазит, то блок переносится на ниже.
    # Ширина блока 80px, суммарная ширина всех вложенных блоков 20px + 30px + 40px = 90px, поэтому третий блок будет расположен ниже остальных.
    # Параметр gap=10px поэтому, расстояние между блоками по вертикали и горизонтали будет 10px
    (htile
        (style
            (width = 80px)
            (gap = 10px)
            (backgroundColor = 0x44ffffff)
        )
        (block
            (style
                (width = 20px)
                (height = 20px)
                (backgroundColor = 0xffff0000)
            )
        )
  
        (block
            (style
                (width = 30px)
                (height = 30px)
                (backgroundColor = 0xff00ff00)
            )
        )
  
        (block
            (style
                (width = 40px)
                (height = 40px)
                (backgroundColor = 0xff0000ff)
            )
        )
    )
)

В результате получим:

align - позиционирование всех вложенных блоков как единого блока. Может принимать следующие значения:
left - выравнивание контента по левому краю
right - выравнивание контента по правому краю
top - выравнивание контента по верхнему краю
bottom - выравнивание контента по нижнему краю
center - выравнивание контента по центру по горизонтали
middle - выравнивание контента по центру по вертикали

Пример выравнивания блока по левому краю:
Скрытый текст
```
(def element TestView() layout = true
    (style
        (width = 1024px)
        (height = 768px)
        (backgroundColor = 0xff191711)
        (align = "left")
    )
      
    (block
        (style
            (width = 20px)
            (height = 20px)
            (backgroundColor = 0xffff0000)
        )
    )
)
```
Можно использовать несколько значений одновременно разделенных "|". Например если требуется выровнять по центру и по вертикали и по горизонтали. Пример:
```
(align = "center | middle")
```

Для позиционирования блоков при position="absolute" вышеперечисленные свойства не применяются, нужно использовать следющие:

left / right / top / bottom - отступ от левого / правого / верхнего / нижнего края контейнера, в котором находится блок

Пример использования:

Скрытый текст


(def element TestView() layout = true
    (style
        (width = 400px)
        (height = 200px)
        (backgroundColor = 0xff191711)
        (align = "center|middle")
    )
  
    (block
        (style
            (width = 20px)
            (height = 20px)
            (backgroundColor = 0xffff0000)
        )
    )
  
    # Удаляем из списка позиционирования layout system'ы. Блок имеет координаты x:40px (параметр left текущего блока), y:50px (параметр top текущего блока)
    (block
        (style
            (position = "absolute")
            (width = 30px)
            (height = 30px)
            (left = 40px)
            (top = 50px)
            (backgroundColor = 0xff00ff00)
        )
    )
  
    (block
        (style
            (width = 40px)
            (height = 40px)
            (backgroundColor = 0xff0000ff)
        )
    )
)

В результате получим

hcenter / vcenter- отступ от центра по горизонтали / по вертикали

Скрытый текст


(def element TestView() layout = true
    (style
        (width = 400px)
        (height = 200px)
        (backgroundColor = 0xff191711)
    )
  
    (block
        (style
            (width = 20px)
            (height = 20px)
            (backgroundColor = 0xffff0000)
        )
    )
  
    # Удаляем из списка позиционирования layout system'ы. Отступы от центра по вертикали и горизонтали равны 0, поэтому блок расположен точно по центру
    (block
        (style
            (position = "absolute")
            (width = 30px)
            (height = 30px)
            (hcenter = 0px)
            (vcenter = 0px)
            (backgroundColor = 0xff00ff00)
        )
    )
  
    (block
        (style
            (width = 40px)
            (height = 40px)
            (backgroundColor = 0xff0000ff)
        )
    )
)

В результате получим

Примечание:

Размер блока у которого параметр position="flow" равны размерам вложенных в него блоков.

Размер блока у которого параметр position="absolute" по умолчанию равны 0.

MatroseFuchs · 22 май 2019, 14:11:55

Macro

Макрос - именованный параметризированный фрагмент верстки, который место вызова заменяет на содержимое макроса на этапе разбора. Тем не менее не может работать со скоупом родителя и переменные для работы нужно передавать как при вызове элемента. Позволяет переиспользовать одинаковые блоки кода несколько раз.

Вот одно из самых распространенных использований:

Скрытый текст


# объявление
(def macro trace(expr:expression)
    (block
        (tf
            (class $TextHUD16Bold)
            (bind text "expr")
        )
    )
)
...
# использование
(macro trace expr="variable")

Пример использования:

Скрытый текст


# Определение макроса
(def macro trace(expr:expression)
    (block
        (style
            (backgroundColor = "0x50000000")
        )
        (tf
        (class $TextHUD16Bold)
            (style (textColor = "0xFFFF00FF"))
            (autoSize='left')
            (bind text "expr")
        )
    )
)

После того как макрос был определен, его можно вызывать в любом месте.

Пример:

# Вызов макроса
(macro trace expr="variable")

Этот механизм используется для автогенерации scope, который будет связан с python.

Пример:

Скрытый текст


(def macro ButtonModel()
    (scope
        (event onClicked)
  
        (var rawLabel:str = '')
        (var label:str = '')
        (var isEnabled:bool = true)
        (var icon:gfx = null)
        (var iconAfterText:bool = true)
    )
)

MatroseFuchs · 22 май 2019, 14:19:47

Scope

Scope - это хранилище данных, находящихся в распоряжении элемента. Не наследуетcя от родительских элементов. В разметке используется строгая типизация - все используемые переменные и их типы, а также events должны быть объявлены до момента использования в вычисляемом выражении, либо переданы из внешнего scope при вызове элемента.

Может содержать

переменные (var)
объявление события
вызов bind
dispatch события
$Animation контроллер для анимации переменных в scope

Примечание: если вы отправляли переменные без имени - список отправки и список получения должны быть согласованными, т.е. первая отправляемая переменная попадает в первую объявленную переменную.

Пример:

Скрытый текст


# Объявление элемента с аргументом level
(def element LevelView(textStyle:str = 'MainTextStyle') layout=true
    (scope
        # Объявление эвента
        (event __onParamChange)
  
  
        # Объявление переменных со значением по умолчанию и dispatch события '__onParamChange' на изменение значения.
        # Событие 'evChanged' - внутреннее события core unbound.
        (var radius:number = 13              
            (dispatch __onParamChange on='evChanged')
        )
        (var color:number = 0xfff2ad
            (dispatch __onParamChange on='evChanged')
        )
    )
  
  
    (style
        (bind width "radius * 2")
        (bind height "radius * 2")
        (align = "center|middle")
    )
    (.graphics
        (bindcall clear init=true (event "__onParamChange"))
        (bindcall lineStyle 1 "color" 0.3 init=true watch=false (event "__onParamChange"))
        (bindcall drawCircle "radius" "radius" "radius" init=true watch=false (event "__onParamChange"))
        (bindcall endFill init=true (event "__onParamChange"))
    )
    (scope
        # Объявление переменной со значением по умолчанию
        (var level:number = 0)
    )
    (tf
        (name = 'level')
        (class "textStyle")
        (bind text "level" init=false)
        (selectable = false)
    )
)

Скрытый текст


(def element PlaneMarker()
    (scope
        (var entity:cpp = "$datahub.getEntity(13426)")
        (var iconHeight:number = "30")
        (var barHeight:number = 4)
    )

    (element PlaneIcon "iconHeight") # send variable to first position
)

(def element PlaneIcon ( planeIconHeight:number ) # Recieve and declare type of variable,
                                                    which automatically get into scope.

    (symbol "(isConsumable ? 'catapult': 'fighter') + '_c'"
        (bind scaleX "isSelected ? 2 : 1")
        (bind scaleY "isSelected ? 2 : 1")
    )
)

Scope можно описывать в разных частях элемента (пример: переменная level). В итоге при исполнении все части объединятся в один scope. Отображение содержимого scope:

(trace "$scope")

UBTRACE: Scope:
        Events: __onParamChange
        Vars:
                color : 1.67738e+07
                level : 0
                radius : 13

Примечание:

Переменные, переданные в элемент как аргументы определения, НЕ попадают в scope. В примере выше переменной textStyle нет в scope.

При создании экземпляра элемента можно изменять его значения переменных scope:

Создание экземляра элемента

(element LevelView 'PromoTitleTextStyle'
    (scope
        (level = 10)
        (radius = 40)
    )
)

Переменные scope при вызове элемента можно синхронизировать с переменными родительского scope

Создание экземляра элемента

(scope
    (var parentLevel:number = 15)
)
  
(element LevelView 'PromoTitleTextStyle'
    (scope
        (bind level "parentLevel")
    )
)

Переменным при прямом вызове можно давать имена, поэтому нет необходимости устанавливать их последовательно.

(element MinimapBG  _boolEnter="boolEnterParent" _scaleRatio="scaleRatioParent)
...
(def element MinimapBG (_scaleRatio:number, _boolEnter:bool))

или через контроллер $ Instance:

Скрытый текст


(controller $Instance renderer='MinimapBG'
    (args
        _boolEnter  = "boolEnterParent"
        _scaleRatio = "scaleRatioParent"
    )
)
...
(def element MinimapBG (_scaleRatio:number, _boolEnter:bool))

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

Скрытый текст


(element MinimapBG 
    (scope 
        (bind scaleRatio="scaleRatioParent")
    )
)
...
(def element MinimapBG ()
    (scope
        (var scaleRatio:number = 0)
    )
)

или через контроллер $ Instance:

Скрытый текст


(controller $Instance renderer='MinimapBG'
    (exprs
        (scope
            (bind scaleRatio="scaleRatioParent")
        )
    )
)
...
(def element MinimapBG ()
    (scope
        (var scaleRatio:number = 0)
    )
)

MatroseFuchs · 22 май 2019, 14:22:55

toplevel def

(def) или Definition

Конструкция (def object Name) позволяет объявить глобальный объект, доступный для вызова из всей области в рамках рабочих каталогов.

Внимание!

Имя объекта должно быть уникальным. Не важно в одном или разных файлах эти объявления сделаны. Иначе будет ошибка и только первый объект будет создан

(def element TestView())
  
(def element TestView())
  
  
ERROR: Duplicate element definition: 'TestView'

MatroseFuchs · 22 май 2019, 14:36:37

datahub

Datahub - это среда для передачи данных из Game Logic в Unbound.

$datahub object

Объект $datahub - это точка входа для использования datahub в разметке. Для доступа к datahub в *.unbound используйте ключевое слово "$datahub" внутри eval-выражения:

(scope)
    (var myEntity:cpp = "$datahub.getEntity(123)")
(scope)

Entity object

Сущности (Entities) хранятся в коллекциях (Collections), а также могут быть получены по идентификатору из объекта $datahub. Вы можете получить доступ к компонентам объекта с синтаксисом .dot, то есть:

(scope
    (var myEntity:cpp = "$datahub.getEntity(123)")
    (var goodComponent:cpp = "myEntity.goodComponent")
)

Component object

Компоненты - это объекты, содержащие реальные данные. Вы можете получить доступ к свойствам компонента с помощью синтаксиса .dot, то есть:

(scope
    (var myEntity:cpp = "$datahub.getEntity(123)")
    (var goodComponent:cpp = "myEntity.goodComponent")
    (var propertyOfGoodComponent:int = "goodComponent.someProperty")
)

MatroseFuchs · 22 май 2019, 14:38:19

Debug

Выводит в лог сообщение об ошибке.

Активация:

Перед запуском клиента в редакторе открыть актуальный файл "Мир Кораблей\bin\<current_build_number>\res\ engine_config.xml"

Скрытый текст
Добавить ключ "engine_config.xml/debug/enableUbPlayerViewLogger = true"
```
<enableUbPlayerViewLogger>true</enableUbPlayerViewLogger>
```
Скрытый текст

Логирование:

лог файл находится в каталоге "Мир Кораблей\profile\ub_player_errors.log"

Скрытый текст

Screenshot 2022-10-27 152553.png

MatroseFuchs · 22 май 2019, 15:07:39

UI Widgets

Symbol

Добавление на сцену MovieClip по его имени (linkage). Используется в объявлениях элемента с параметром layout=false. Т.е. создается display object без layout system'ы.

Пример использования:

(def element TestView() layout=false
    (symbol 'linkageName')
)

(symbol " 'torpedo_markers_ally_c' ")

Sprite

Добавление на сцену экземпляра класса Sprite. Используется в объявлениях элемента с параметром layout=false.

Пример использования:

Скрытый текст


(def element TestView() layout=false
    (sprite
        (y = 140)
        (tf
            (text = 'hello unbound')
        )
    )
)

MC

Добавление на сцену экземпляра класса MovieClip по его имени (linkage). Используется в объявлениях элемента с параметром layout=true. (т.е. поддержка layout system и styles)

Пример использования:

(def element TestView() layout=true
    (mc 'FWCloseButtonSlimMC'
        (name = 'closeBtnCrossAnim')
        (bindcall gotoAndPlay "stateFrame")
    )
)

TextField

Добавление на сцену экземпляра класса TextField. Поддерживается во всех элементов с layout=true|false. Для задания текста используется свойство text или htmlText. Если будет задан text и htmlText, применится только последнее действие.

Пример использования:

(tf
    (text = 'Hello world!')
)

Скрытый текст


(tf
    (style
        (width = 400)
        (height = 100)
        (textColor = 0xff0000)
        (fontFamily = $TitleFont)
        (fontSize = 56)
        (textAlign = "right")
        (leading = 10)
        (letterSpacing = 10)
    )
    (multiline = true)
    (autoSize = 'left')
    (selectable = false)
    (text = 'Hello unbound!!!')
)

Для случая когда текст слишком большой и не влазит в текстовое поле, существует свойство elideMode. Если elideMode=true, то текст обрезается под размер всего блока и последние 3 символа заменяются на ".". При каждом обрезании текста генерируются event textElideStatus в аргументе передается статус: обрезан текст или нет.

Скрытый текст


(tf
    (class HeroTitleTextStyle)
    (style
        (width = 200)
        (elideMode = true)
    )
    (text = 'Any long text')
    (trace "$event.value" init=false on='textElideStatus')
)

substitute

substitute - метод textblock'а, который позволяет заменять подстроки на картинки.

init=true - обязательный аргумент

(tf
    (class $TextDefault19NM)
    (bindcall substitute imageOffset="_frameTextCount"
                        substitutionMap={'[test_icon]' : 'icon_ground_radar_ally' }
                        sourceText='radar: [test_icon] mouse: [KEY_LEFTMOUSE]'
                        postfix='_bg'
                        init=true
    )
)

Element

Block

Добавляет на сцену контейнер-экземпляр класса Sprite, Все вложенные блоки будут добавляться в этот контейнер и позиционироваться друг за другом взависимости от значения свойства стиля flow.

Для block существуют aliases:

block - вертикальный блок, дочерние элементы расположены сверху вниз
hblock - горизонтальный блок, дочерние элементы расположены слева направо
vtile - вертикальный tile блок, дочерние элементы расположены сверху вниз, оборачиваются на нижней границе родителя
htile - горизонтальный tile блок, дочерние элементы расположены слева направо, оборачиваются на правой границе родителя
reverse - вертикальный блок с обратным порядком элементов в блоке, дочерние элементы расположены снизу вверх
hreverse - горизонтальный блок с обратным порядком элементов в блоке, дочерние элементы расположены справа налево

Пример:

Скрытый текст


(hblock
    (block
        (style
            (height = 100px)
            (width = 100px)
            (backgroundColor = "0xFF00FF00")
        )
    )
  
    (block
        (style
            (height = 100px)
            (width = 100px)
            (marginLeft = 10px)
            (backgroundColor = "0xFFFFFFFF")
        )
    )
)

backgroundImage

Добавляет на сцену экземпляр класса Bitmap.

передать путь до файла (для этого используется R-class - ресурсный менеджер)
передать текстуру из атласа - экземпляр класса BitmapData
url адрес до изображения в сети

Если блоку не заданы размеры в style, то после загрузки изображения размеры блока станут такими же как размеры изображения.

(bind backgroundImage "markerIcon")
----------------
(style
	(bind backgroundImage "'bitmap:' + toLower(markerIcon)")
)
----------------
(block
	(style
		(backgroundImage = 'url:../aircraft/icon_lock.png')
	)
)

Slider

Компонент, предоставляющий собой обычный Slider.

Имеет ряд переменных скоупа для настройки:

value (number) - текущее значение слайдера в единицах (не процент);
minimum (number) - минимальное значение;
maximum (number) - максимальное значение.
enabled (true/false) - доступен ли слайдер.

Может отправлять событие:

evValueChanged - изменилось значение слайдера.

Значения параметров по умолчанию указаны в примере ниже:

Скрытый текст


(def element Slider (_value:number, _min:number, _max:number, _enabled:bool=true) layout=true
    (scope
        (var enabled:bool = "_enabled")

        (event evValueChanged)
        (var value:number = "$event.value" init=false watch=false (event "evValueChanged"))
    )

    (mc slider_default
        (bind minimum "_min")
        (bind maximum "_max")
        (bind value "_value")
        (bind enabled "enabled")
        (dispatch evValueChanged args="{value: $event.value}" dir=1 on='valueChange')
    )
)

MatroseFuchs · 22 май 2019, 15:18:43

Styles and CSS

Общее описание

Блоки поддерживают настройку параметров layout'а через style. Каждый блок обладает своим набором параметров стиля.

Настройка стиля у блока tf:

(tf
    (style
        (fontSize = 32)
        (textColor = 0xFFFFFFFF)
    )
    (text = 'Hello world!!!')
)

Настройка стиля у блока block:

(block
    (style
        (backgroundColor = 0xffff0000)
        (width = 100px)
        (height = 100px)
    )
)

Настройка стиля у блока mc:

Скрытый текст


(mc 'Window_BG'
    (style
        (width=100)
        (height=50)
        ...
    )
)

Стили можно описывать в отдельном определении. И передавать как параметр в блок в свойство class.

(def element TestView() layout = true
    (block
        (class BlockStyle)
    )
)
  
(def css BlockStyle()
    (backgroundColor = 0xffff0000)
    (width = 100px)
    (height = 100px)
)

Значение для свойства class может быть вычислено в выражении, таким образом можно стилизовать блоки в зависимости от условий.

Скрытый текст


(def element TestView() layout = true
    (scope
        (event onClick)
        (var switcher:bool = false)
        (bind switcher "!switcher" init=false watch=false (event "onClick"))
    )
      
    (block
        (bind class "switcher ? 'BlockStyle_1' : 'BlockStyle_2'")
    )
  
    (element ButtonPrimary
        (scope
            (label = 'change style')
        )
        (dispatch onClick on='click')
    )
)
  
(def css BlockStyle_1()
    (backgroundColor = 0xffff0000)
    (width = 100px)
    (height = 100px)
)
  
(def css BlockStyle_2()
    (backgroundColor = 0xff00ff00)
    (width = 120px)
    (height = 130px)
    (alpha = 0.5)
)

Если к блоку будет применено несколько стилей с одинаковыми свойствами, то последующие будут перезаписывать значения предыдущих. Важен порядок применения.

(block
    (class BlockStyle_1)
    (class BlockStyle_2)
)

Примечание:

Но если изменить свойство стиля непосредственно в style и передать css как параметр с тем же свойством. То порядок расположения применения стилей не важен. Блок style выполнится последним.

Скрытый текст


(def element TestView() layout = true
    (block
        (style
            (backgroundColor = 0xffff0000)
            (width = 100px)
            (height = 100px)
        )
        (class BlockStyle_2)
    )
)
  
(def css BlockStyle_2()
    (backgroundColor = 0xff00ff00)
    (width = 120px)
    (height = 130px)
    (alpha = 0.5)
)

Таблица стилей

Виды блоков:

базовые блоки: tf, mc, image, text_input.
контейнер-блоки (наследуются от базового блока): block (и все алиасы hblock, vtile, gtile, reverse, hreverse), list, view_holder, slider, scroll_bar, progress. scrollArea.

свойство	аналог css	кто поддерживает свойство	принимаемые значения	пример возможных значений
width	width	все блоки	number, %, px	10px; 10%
minWidth	min-width	все блоки	number, %, px	100px; 50%
maxWidth	max-width	все блоки	number, %, px	100px; 50%
height	height	все блоки	number, %, px	10px; 10%
minHeight	min-height	все блоки	number, %, px	100px; 50%
maxHeight	max-height	все блоки	number, %, px	100px; 50%
position	position	все блоки	absolute, flow	absolute
left	left	все блоки	number, %, px	10px; 10%
right	right	все блоки	number, %, px	10px; 10%
top	top	все блоки	number, %, px	10px; 10%
bottom	bottom	все блоки	number, %, px	10px; 10%
center	смещение от центра	все блоки	number, %, px	-170
hcenter	смещение от центра по горизонтали	все блоки	number, %, px	10px; 10%
vcenter	смещение от центра по вертикали	все блоки	number, %, px	10px; 10%
marginLeft	margin-left	все блоки	number, %, px	10px
marginRight	margin-right	все блоки	number, %, px	10px
marginTop	margin-top	все блоки	number, %, px	10px
marginBottom	margin-bottom	все блоки	number, %, px	10px
paddingLeft	padding-left	контейнер-блоки	number, %, px	10px
paddingRight	padding-right	контейнер-блоки	number, %, px	10px
paddingTop	padding-top	контейнер-блоки	number, %, px	10px
paddingBottom	padding-bottom	контейнер-блоки	number, %, px	10px
padding	padding	контейнер-блоки	number, %, px	10px
backgroundColor	background-color	контейнер-блоки	0xARGB	0x1000ff00
backgroundImage	background-image	контейнер-блоки	str, 'url: {url}', 'bitmap: {linkage}', 'symbol: {linkage}'	backgroundImage = 'url:..\icons\ico.png'
backgroundSize	background-size background-repeat	контейнер-блоки	fill; crop; cover; repeat; autosize	backgroundSize = "crop"
flow	flex-direction	контейнер-блоки	Flow.HORISONTAL, Flow.VERTICAL, Flow.TILE_HORIZONTAL, Flow.TILE_VERTICAL	flow = "Flow.HORISONTAL"
align	justify-content align-items	контейнер-блоки	left, right, bottom, top, center, middle	align = "middle\|right"
alpha	opacity	все блоки	number от 0 до 1	1; 0; 0.4
fontSize	font-size	tf	number	36
leading	междустрочный интервал	tf	number
letterSpacing	letter-spacing	tf	number	2
fontFamily	font-family	tf	str
textColor	color	tf	0xRGB	0xCFC7A8
textAlign	text-align	tf	left; right; center	textAlign = "center"
multiline	white-space	tf	bool	true; false
ubScaleX	transform: scaleX()	все блоки	number	изменяет scale блока по горизонтали 1.25
ubScaleY	transform: scaleY()	все блоки	number	изменяет scale блока по вертикали 1.25
rotation	поворот блока если его позиция absolute	все блоки с позицией absolute	number (значения угла поворота в градусах)	(style (rotation = 30) )
pivotX	нулевая точка по X используется для поворота, скейла, абсолютной позиции	все блоки с позицией absolute	number, %, px	(style (pivotX = 50%) ) или (style (pivotX = 100px) )
pivotY	нулевая точка по Y используется для поворота, скейла, абсолютной позиции	все блоки с позицией absolute	number, %, px	(style (pivotY = 10%) ) или (style (pivotY = 20px) )
scaleX	масштаб по оси X может быть отрицательным, применяется к блоку и его чайлдам	все блоки	double	(style (scaleX = 1.2) )
scaleY	масштаб по оси Y может быть отрицательным, применяется к блоку и его чайлдам	все блоки	double	(style (scaleY = -1.0) )

BackgroundSize

(def element NationFlagsSmall () layout=true
    (style
        (bind backgroundImage "'url:../nation_flags/small/flag_USA.png'" init=false)
        (backgroundSize = "fill")
        (width = 117)
        (height = 72)
    )
)

cover - растягиваем текстуру по размеру контейнера с сохранением пропорций текстуры, чтобы она заполняла всю площадь, с обрезанием текстуры за пределами контейнера.
crop - обрезаем изображение по размеру контейнера.
fill - растягиваем изображение по размеру контейнера без сохранения пропорций.
align - позиционируем изображение по центру контейнера с обрезанием текстуры за пределами контейнера.

BackgroundRepeatX и BackgroundRepeatY

(block
    (style
        (width = 42) (height = 42)
        (backgroundImage = 'url:../service_kit/icons/icon_warning_red.png')
        (backgroundRepeatX = true)
        (backgroundRepeatY = false)
    )
)

Повторение изображение по горизонтали и/или вертикали. По-умолчанию отключено.

substitute

substitute - метод textblock'а, который позволяет заменять подстроки на картинки.

init=true - обязательный аргумент

(tf
    (class $TextDefault19NM)
    (bindcall substitute imageOffset="_frameTextCount"
                        substitutionMap={'[test_icon]' : 'icon_ground_radar_ally' }
                        sourceText='radar: [test_icon] mouse: [KEY_LEFTMOUSE]'
                        postfix='_bg'
                        init=true
    )
)

Outline

Возможность задать стиль обводки для текста.

Внимание!

Нельзя использовать для большого числа разнообразного по размеру текста - быстро заполняется текстура с глифами и будет влиять на производительность.
Нежелательно применять анимацию со scale к такому тексту - могут быть артефакты и др.

(tf
    (class $TextDefault)
    (style
        (outlineColor = 0x08222A) #цвет обводки
        (outlineAlpha = 0.4) #прозрачность обводки
        (outlineThickness = 1) #толщина обводки
        (outlineScaled = false) #влияет ли скейл на толщину обводки. При анимации скейла текста всегда выставлять в false
    )
     
    (text = 'The quick brown fox jumps over the lazy dog. 1234567890?!-+')
)

scale9grid

набор параметров идентичен background9Slice в unbound1

(def element TestElement() layout=true
    (mc wows_logo
        (style
            (width = "500")
            (height = "500")
            (scale9grid = "rect(30)")
        )
    )
)

MatroseFuchs · 24 май 2019, 16:31:15

CSS Tips and Tricks

Использование объекта стилей (аналог css-классов)

Создание объекта стилей:

(def css SomeStyleObject()
    (position = "absolute")
    (width = 100%)
    (height = 100%)
)

Вызов:

(block
    (class SomeStyleObject)
)

Пример реализации псевдокласса hover

Скрытый текст


(def element SomeElement() layout=true
    (scope
        # Объявляем ивенты:
        (event evBtnOverEvent)
        (event evBtnOutEvent)
        ...
    )
    ...
    # Привязываем ивенты:
    (dispatch evBtnOverEvent args="{}" on=rollOver)
    (dispatch evBtnOutEvent args="{}" on=rollOut)
    ...
    (block
        (style
            # Привязываем изменение стилей к ивентам:
            (bind alpha 1 (event "evBtnOverEvent"))
            (bind alpha 0.7 (event "evBtnOutEvent"))
        )
    )
)

Срабарывание ховера при наведении на конкретную область, а не на весь блок

Если нужно задать определенныую область в качестве hitArea, то добавьте block с name='hoverArea' и передайте имя блока в свойство hitArea элемента parentElement с помощью объекта $target.

Скрытый текст


(def element parentElement() layout=true
    (style
        (width = 100px)
        (height = 100px)
        ...
    )
  
  
    (block
        (name = 'hoverArea')
        (style
            (width = 50px)
            (height = 50px)
            ...
        )
    )
    (hitArea = "$target.hoverArea")
    # Ховер на родительском блоке отработает только при наведении на 'hoverArea'
)

Изменение стилей в зависимости от ширины/высоты экрана (аналог медаизапросов)

Скрытый текст


(def element SomeElement() layout=true
    (scope
        # Записываем значение высоты экрана в переменную
        (var viewSizeHeight:number = "viewSize.height")
        (bind viewSizeHeight "viewSize.height" (event "viewResized"))
    )
    (style
        ...
        # Делаем проверку и задаём нужное значение у свойства
        (bind bottom 0 (bind enabled "viewSizeHeight < 800"))
        (bind bottom 27px (bind enabled "viewSizeHeight > 800"))
    )
)

MatroseFuchs · 27 окт 2022, 12:37:30

Live coding

Перезагрузка файлов *.unbound в бою.

Активация:

Перед запуском клиента в редакторе открыть актуальный файл "Мир Кораблей\bin\<current_build_number>/res/engine_config.xml"

Скрытый текст
Добавить ключ "engine_config.xml/debug/enableUbPlayerReload = true"
```
<enableUbPlayerReload>true</enableUbPlayerReload>
```
Скрытый текст

Использование:

в бою сочетание клавиш Ctrl+F5

MatroseFuchs · 27 фев 2024, 09:26:41

Drag & Drop

Позволяет блоку, содержащему controller $Draggable перемещаться в блоки, содержащие controller $Droppable
controller $Draggable - текущий элемент/блок становится перетаскиваемым.
controller $Droppable - текущий элемент/блок становится слотом для перетаскиваемых элементов

Скрытый текст


(def element DraggableObj () layout=true
	(scope
		...
	)
	(style ...)
	
	(block
		(style ...)
		
		(controller $Draggable
			(slotId = ...) #str, number
			#(bind slotId "...")

			(args
				#аргуметы, которые полетят в $Droppable с событием evDragStarted
				...
			)

			(dispatch evBitmapCreated	init=false on='evBitmapCreated') # Сгенерирована битмапка элемента, курсор находится на определённом расстоянии от точки захвата элемента
			(dispatch evDragStarted		init=false on='evDragStarted') # Элемент захвачен и начал перемещаться
			(dispatch evDragEnded		init=false on='evDragEnded') # Перемещение элемента было прервано/завершено
		)
	)

)

(def element DroppableSlot () layout=true
	(scope
		...
		(var draggableData:dict = {})
		(var isDragActive:bool = false)
		(var isDraggingChild:bool = false)
	)
	(style ...)

	(block
		(style ...)

		(controller $Droppable
			(slotIds = [...]) # Список id элементов, которые могут быть перемещены сюда
			#(bind slotIds "[...]")

			(bind isDraggingChild "$event.dragChildStatus" init=false on='evDragStarted') # Записываем в переменную перемещается ли элемент, который находится в данном слоте
			(bind draggableData "$event.args" init=false on='evDragStarted') # Достаём аргуметы, которые прилетели в $Droppable с событием evDragStarted

			(dispatch evDragStarted		init=false on='evDragStarted') # Началось перемещение подходящего по slotIds элемента
			(dispatch evDraggableOver	init=false on='evDraggableOver') # Перемещаемый элемент (битмапка) находится над слотом
			(dispatch evDraggableOut	init=false on='evDraggableOut') # Перемещаемый элемент (битмапка) ушел с зоны слота
			(dispatch evDragFinished	init=false on='evDragFinished') # Перемещение завершено, с событием прилетает параметр isSuccess, приземлился ли перемещаемый элемент в этот слот
		)
	)
)

[UB2] Документация по Unbound 2.0

Рекомендуемые комментарии

Вычисляемые выражения

Рассказать о публикации

Ссылка на публикацию

Build stage

Определение элемента

Scope

Байндинги

Общее описание

Bind

Синтаксис:

Bindcall

Синтаксис:

Dispatch

Синтаксис:

Передача аргументов

Задержка рассылки события

Результат в ub_player_errors.log:

Направление распространения события

Разделение событий

Dispatch при enabled=true

Контроллеры

Стилизация display object.

Рассказать о публикации

Ссылка на публикацию

Макросы

Исполнение верстки

Типы данных

Enums

Рассказать о публикации

Ссылка на публикацию

Constant

Рассказать о публикации

Ссылка на публикацию

Controllers

$Instance

$FxInstance

$Repeat

$Animation

$Sector

$Tooltip

Элемент и аргументы

Положение

Пины

Появление/пропадание и анимация

События

scroll_bar

scrollArea

Рассказать о публикации

Ссылка на публикацию

Element

Рассказать о публикации

Ссылка на публикацию

Event

Рассказать о публикации

Ссылка на публикацию

Функции для вычисляемых выражений

Рассказать о публикации

Ссылка на публикацию

Layout

Позиционирование блоков

Рассказать о публикации

Ссылка на публикацию

Macro

Рассказать о публикации

Ссылка на публикацию

Scope

Рассказать о публикации

Ссылка на публикацию

toplevel def

(def) или Definition

Рассказать о публикации

Ссылка на публикацию

datahub

$datahub object

Entity object

Component object

Рассказать о публикации

Ссылка на публикацию