Rectangle — различия между версиями

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Текстура)
(Добавляемые параметры)
 
(не показано 14 промежуточных версий 4 участников)
Строка 1: Строка 1:
Может использоваться для заливки области определённым цветом.
+
'''Rectangle''' - [[Object|объект]], который удобно использовать при построении окон, также может использоваться для заливки области определённым цветом.
 
{{TOC right}}
 
{{TOC right}}
 
=Параметры=
 
=Параметры=
Строка 9: Строка 9:
 
'''Группа - положение'''
 
'''Группа - положение'''
  
* '''x''' (''x'') - Горизонтальная координата центра объекта (его точки пивота) в пикселях. Отсчитывается от точки пивота сцены.
+
* '''x''' (''x'') - Горизонтальная координата центра объекта (его точки пивота) в пикселях. Отсчитывается от точки пивота сцены;
  
 
* '''y''' (''y'') - Вертикальная координата центра объекта (его точки пивота) в пикселях. Отсчитывается от точки пивота сцены.
 
* '''y''' (''y'') - Вертикальная координата центра объекта (его точки пивота) в пикселях. Отсчитывается от точки пивота сцены.
 
'''Группа - размер'''
 
'''Группа - размер'''
  
* '''w''' (''w'') - Ширина объекта в пикселях
+
* '''w''' (''w'') - Ширина объекта в пикселях;
  
* '''h''' (''h'') - Высота объекта в пикселях
+
* '''h''' (''h'') - Высота объекта в пикселях.
 
'''Группа - модификаторы'''
 
'''Группа - модификаторы'''
  
* '''alpha''' (''al'') - Прозрачность: от 0 (прозрачен) до 1 (не прозрачен).
+
* '''alpha''' (''al'') - Прозрачность: от 0 (прозрачен) до 1 (не прозрачен);
  
* '''blending''' (''bl'') - Alpha смешивание (parent - наследует alpha от родителя, blend - смешивание, add - добавление, sub - вычитание, none - ничего не происходит. (Подробнее о Alpha смешивании - [[Flyer|здесь]])).
+
* '''blending''' (''bl'') - Alpha смешивание (parent - наследует alpha от родителя, blend - смешивание, add - добавление, sub - вычитание, none - ничего не происходит. (Подробнее о Alpha смешивании - [[Flyer|здесь]]));
  
* '''angle''' (''ang'') - Угол поворота в градусах (0 - не повёрнут). Отсчитывается от оси x вниз. Вверх - идут отрицательные углы.
+
* '''angle''' (''ang'') - Угол поворота в градусах (0 - не повёрнут). Отсчитывается от оси x вниз. Вверх - идут отрицательные углы;
  
* '''scale x''' (''sx'') - Масштаб по оси x (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.).
+
* '''scale x''' (''sx'') - Масштаб по оси x (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.);
  
 
* '''scale y''' (''sy'') - Масштаб по оси y (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.).
 
* '''scale y''' (''sy'') - Масштаб по оси y (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.).
 +
 
==Дополнительные параметры==
 
==Дополнительные параметры==
  
Строка 33: Строка 34:
  
 
* '''тайлинг''' - включает возможность замостить плиткой нужный размер, да - включить тайлинг.
 
* '''тайлинг''' - включает возможность замостить плиткой нужный размер, да - включить тайлинг.
 +
 +
== Добавляемые параметры ==
 +
Открывается при нажатии правой кнопки мыши в поле параметров ректангла.
 +
 +
[[Файл:+.png]] '''Клик'''
 +
*'''объект''' - При клике на ректангл перевести объект в состояние из следующего поля.
 +
*'''состояние''' - Новое состояние для объекта из предыдущего поля.
 +
 +
[[Файл:+.png]] '''Тап'''
 +
*'''объект''' - При тапе на ректангл перевести объект в состояние из следующего поля.
 +
*'''состояние''' - Новое состояние для объекта из предыдущего поля.
  
 
==Рамка==
 
==Рамка==
  
* '''бордюр верхний''' - Графический ресурс текстуры верхнего бордюра
+
* '''бордюр верхний''' - Графический ресурс текстуры верхнего бордюра;
  
* '''бордюр правый''' - Графический ресурс текстуры правого бордюра
+
* '''бордюр правый''' - Графический ресурс текстуры правого бордюра;
  
* '''бордюр нижний''' - Графический ресурс текстуры нижнего бордюра
+
* '''бордюр нижний''' - Графический ресурс текстуры нижнего бордюра;
  
* '''бордюр левый''' - Графический ресурс текстуры левого бордюра
+
* '''бордюр левый''' - Графический ресурс текстуры левого бордюра;
  
* '''нахлест бордюров''' - Нахлест текстур бордюров в пикселях
+
* '''нахлест бордюров''' - Нахлест текстур бордюров в пикселях;
  
* '''угол левый верхний''' - Графический ресурс текстуры левого верхнего угла
+
* '''угол левый верхний''' - Графический ресурс текстуры левого верхнего угла;
  
* '''угол правый верхний''' - Графический ресурс текстуры правого верхнего угла
+
* '''угол правый верхний''' - Графический ресурс текстуры правого верхнего угла;
  
* '''угол правый нижний''' - Графический ресурс текстуры правого нижнего угла
+
* '''угол правый нижний''' - Графический ресурс текстуры правого нижнего угла;
  
* '''угол левый нижний''' - Графический ресурс текстуры левого нижнего угла
+
* '''угол левый нижний''' - Графический ресурс текстуры левого нижнего угла.
  
 
==Фон==
 
==Фон==
* '''alpha''' - Прозрачность заливки (не путать с прозрачностью объекта): от 0 (прозрачен) до 1 (не прозрачен).
+
* '''alpha''' - Прозрачность заливки (не путать с прозрачностью объекта): от 0 (прозрачен) до 1 (не прозрачен);
* '''текстура заливки''' - Графический ресурс текстуры фона
+
* '''текстура заливки''' - Графический ресурс текстуры фона;
* '''цвет заливки''' (''fillCol'') - Цвет заливки объекта. Задаётся в шестнадцатиричной системе (на пример AAAAAA, ABCABC, 12F5BC)
+
* '''цвет заливки''' (''fillCol'') - Цвет заливки объекта. Задаётся в шестнадцатиричной системе (на пример AAAAAA, ABCABC, 12F5BC).
  
 
=Состояния=
 
=Состояния=
Строка 77: Строка 89:
 
<div class="tleft" style="clear:none">[[Файл:R1.jpg|300px|мини|Дерево объектов]]</div>
 
<div class="tleft" style="clear:none">[[Файл:R1.jpg|300px|мини|Дерево объектов]]</div>
 
<br clear="all" />
 
<br clear="all" />
 
+
Настроим rectangle. Зададим начальный цвет, размер, прозрачность.  
Настроим rectangle. Зададим начальный цвет, размер, прозрачность.
 
 
 
[[Файл:R3.jpg|300px|thumb|left|Настройки rectangle]]
 
 
 
<br clear="all" />
 
 
 
 
Настроим кнопки. Задаим цвет на который хотим поменять и обязательно переведём объект rectangle в состояние init для того чтобы цвет поменялся.
 
Настроим кнопки. Задаим цвет на который хотим поменять и обязательно переведём объект rectangle в состояние init для того чтобы цвет поменялся.
 
+
Увидим следующий результат во вьювере:
 
+
<div class="tleft" style="clear:none">[[Файл:R3.jpg|300px|thumb|left|Настройки rectangle]]</div>
[[Файл:R4.jpg|300px|thumb|left|Настройки кнопки]]
+
<div class="tleft" style="clear:none">[[Файл:R4.jpg|300px|thumb|left|Настройки кнопки]]</div>
 
+
<div class="tleft" style="clear:none">[[Файл:R5.jpg|300px|thumb|left|Конечный результат]]</div>
 
<br clear="all" />
 
<br clear="all" />
 
Результат во вьювере:
 
 
[[Файл:R5.jpg|300px|thumb|left|Конечный результат]]
 
 
<br clear="all" />
 
 
 
==Текстура==
 
==Текстура==
  
Строка 109: Строка 108:
 
В поля границ перетаскиваем из базы ресурсов, заранее подготовленную графику, правого, левого края, углов и т.д. Центральную часть прямоугольника мы можем получить перетянув нужную текстуру в поле "текстура заливки", или подбором цвета заливки в формате RGB.
 
В поля границ перетаскиваем из базы ресурсов, заранее подготовленную графику, правого, левого края, углов и т.д. Центральную часть прямоугольника мы можем получить перетянув нужную текстуру в поле "текстура заливки", или подбором цвета заливки в формате RGB.
  
Пример графики, которая использовалась:
+
Размеры получившейся формочки можем регулировать. При этом рамка будет подгоняться четко по контуру. Для наилучшего результата рекомендуется в редакторе ресурсов сделать бордеры = 0.
  
[[Файл:Rect23.jpg]]
+
Результат во вьювере:
  
Размеры получившейся формочки можем регулировать. При этом рамка будет подгоняться четко по контуру. Для наилучшего результата рекомендуется в редакторе ресурсов сделать бордеры = 0.
+
[[Файл:Rect23.jpg|400px]] [[Файл:Rect3.jpg|300px]]
 +
 
 +
Еще один пример создания окна при помощи объекта Rectangle:
 +
 
 +
<div class="tleft" style="clear:none">[[Файл:Rect3_1.jpg|300px|thumb|left|Вид окна на сцене]]</div>
 +
<div class="tleft" style="clear:none">[[Файл:Rect2_1.jpg|300px|thumb|left|Конечный результат]]</div>
 +
<div class="tleft" style="clear:none">[[Файл:Rect1.jpg|220px|thumb|left|Настройки rectangle]]</div>
 +
<br clear="all" />
 +
== Отсечение зоны видимости предмета ==
 +
 
 +
Возможно получить эффект выезда / заезда предметов относительно некоторой границы. Для этого нужно создать новый ректангл, размер которого совпадает с размером зоны видимости (окна). В этот ректангл в дереве проекта помещаем объект, который будет двигаться.
 +
У ректангла выставляем параметр отсечение. Если не используется фон ректангла ему желательно установить альфу 0.
 +
 
 +
[[Файл:Rectanglt.png]] [[Файл:Rect.png]]
  
Результат во вьювере:
+
В результате при передвижении объекта за границу ректангла он будет постепенно уходить из видимости.
  
[[Файл:Rect3.jpg|300px]]
+
[[Category:Main objects]]

Текущая версия на 10:14, 26 сентября 2018

Rectangle - объект, который удобно использовать при построении окон, также может использоваться для заливки области определённым цветом.

Параметры

Общие параметры (см. описание Object)

Основные параметры

Группа - положение

  • x (x) - Горизонтальная координата центра объекта (его точки пивота) в пикселях. Отсчитывается от точки пивота сцены;
  • y (y) - Вертикальная координата центра объекта (его точки пивота) в пикселях. Отсчитывается от точки пивота сцены.

Группа - размер

  • w (w) - Ширина объекта в пикселях;
  • h (h) - Высота объекта в пикселях.

Группа - модификаторы

  • alpha (al) - Прозрачность: от 0 (прозрачен) до 1 (не прозрачен);
  • blending (bl) - Alpha смешивание (parent - наследует alpha от родителя, blend - смешивание, add - добавление, sub - вычитание, none - ничего не происходит. (Подробнее о Alpha смешивании - здесь));
  • angle (ang) - Угол поворота в градусах (0 - не повёрнут). Отсчитывается от оси x вниз. Вверх - идут отрицательные углы;
  • scale x (sx) - Масштаб по оси x (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.);
  • scale y (sy) - Масштаб по оси y (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.).

Дополнительные параметры

  • прокликиваемость - Если 1, то кнопка прозрачна для клика мышкой (пропускает объектам под ней). Если 2, то кнопка сама обрабатывает клик, но и пропускает его дальше.
  • тайлинг - включает возможность замостить плиткой нужный размер, да - включить тайлинг.

Добавляемые параметры

Открывается при нажатии правой кнопки мыши в поле параметров ректангла.

+.png Клик

  • объект - При клике на ректангл перевести объект в состояние из следующего поля.
  • состояние - Новое состояние для объекта из предыдущего поля.

+.png Тап

  • объект - При тапе на ректангл перевести объект в состояние из следующего поля.
  • состояние - Новое состояние для объекта из предыдущего поля.

Рамка

  • бордюр верхний - Графический ресурс текстуры верхнего бордюра;
  • бордюр правый - Графический ресурс текстуры правого бордюра;
  • бордюр нижний - Графический ресурс текстуры нижнего бордюра;
  • бордюр левый - Графический ресурс текстуры левого бордюра;
  • нахлест бордюров - Нахлест текстур бордюров в пикселях;
  • угол левый верхний - Графический ресурс текстуры левого верхнего угла;
  • угол правый верхний - Графический ресурс текстуры правого верхнего угла;
  • угол правый нижний - Графический ресурс текстуры правого нижнего угла;
  • угол левый нижний - Графический ресурс текстуры левого нижнего угла.

Фон

  • alpha - Прозрачность заливки (не путать с прозрачностью объекта): от 0 (прозрачен) до 1 (не прозрачен);
  • текстура заливки - Графический ресурс текстуры фона;
  • цвет заливки (fillCol) - Цвет заливки объекта. Задаётся в шестнадцатиричной системе (на пример AAAAAA, ABCABC, 12F5BC).

Состояния

  • init - применяет цвет указаный в цвет заливки

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

Примеры применения объекта

Заливка

Можно объект применять для заливки сплошным цветом области сцены или для придания оттенка объекту.

К примеру надо оттенять разными цветами.

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

Экран с объектами
Дерево объектов


Настроим rectangle. Зададим начальный цвет, размер, прозрачность. Настроим кнопки. Задаим цвет на который хотим поменять и обязательно переведём объект rectangle в состояние init для того чтобы цвет поменялся. Увидим следующий результат во вьювере:

Настройки rectangle
Настройки кнопки
Конечный результат


Текстура

Настройки объекта Rectangle

Очень часто при создании приложения в нем присутствуют различные формы-окна, например: диалоговые окна, различные подложки под объекты. Можно сделать их цельной графикой, но тогда размер этой графики будет довольно большим и мы потеряем производительность. Можно сделать подложку, растянув маленьких кусочек графики (scale) до нужных размеров, то тогда мы теряем четкость текстуры и границ. В этом случае полезным будет объект rectangle.

Предположим, что нам нужно сделать большую подложку под какое-то диалоговое окно с красивой рамочкой.

Создаем на сцене новый объект с типом rectangle. Настроим свойства как показано на рисунке справа. В поля границ перетаскиваем из базы ресурсов, заранее подготовленную графику, правого, левого края, углов и т.д. Центральную часть прямоугольника мы можем получить перетянув нужную текстуру в поле "текстура заливки", или подбором цвета заливки в формате RGB.

Размеры получившейся формочки можем регулировать. При этом рамка будет подгоняться четко по контуру. Для наилучшего результата рекомендуется в редакторе ресурсов сделать бордеры = 0.

Результат во вьювере:

Rect23.jpg Rect3.jpg

Еще один пример создания окна при помощи объекта Rectangle:

Вид окна на сцене
Конечный результат
Настройки rectangle


Отсечение зоны видимости предмета

Возможно получить эффект выезда / заезда предметов относительно некоторой границы. Для этого нужно создать новый ректангл, размер которого совпадает с размером зоны видимости (окна). В этот ректангл в дереве проекта помещаем объект, который будет двигаться. У ректангла выставляем параметр отсечение. Если не используется фон ректангла ему желательно установить альфу 0.

Rectanglt.png Rect.png

В результате при передвижении объекта за границу ректангла он будет постепенно уходить из видимости.