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

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Добавляемые параметры)
 
(не показано 6 промежуточных версий 4 участников)
Строка 1: Строка 1:
Может использоваться для заливки области определённым цветом.
+
'''Rectangle''' - [[Object|объект]], который удобно использовать при построении окон, также может использоваться для заливки области определённым цветом.
 
{{TOC right}}
 
{{TOC right}}
 
=Параметры=
 
=Параметры=
Строка 34: Строка 34:
  
 
* '''тайлинг''' - включает возможность замостить плиткой нужный размер, да - включить тайлинг.
 
* '''тайлинг''' - включает возможность замостить плиткой нужный размер, да - включить тайлинг.
 +
 +
== Добавляемые параметры ==
 +
Открывается при нажатии правой кнопки мыши в поле параметров ректангла.
 +
 +
[[Файл:+.png]] '''Клик'''
 +
*'''объект''' - При клике на ректангл перевести объект в состояние из следующего поля.
 +
*'''состояние''' - Новое состояние для объекта из предыдущего поля.
 +
 +
[[Файл:+.png]] '''Тап'''
 +
*'''объект''' - При тапе на ректангл перевести объект в состояние из следующего поля.
 +
*'''состояние''' - Новое состояние для объекта из предыдущего поля.
  
 
==Рамка==
 
==Рамка==
Строка 97: Строка 108:
 
В поля границ перетаскиваем из базы ресурсов, заранее подготовленную графику, правого, левого края, углов и т.д. Центральную часть прямоугольника мы можем получить перетянув нужную текстуру в поле "текстура заливки", или подбором цвета заливки в формате RGB.
 
В поля границ перетаскиваем из базы ресурсов, заранее подготовленную графику, правого, левого края, углов и т.д. Центральную часть прямоугольника мы можем получить перетянув нужную текстуру в поле "текстура заливки", или подбором цвета заливки в формате RGB.
  
Пример графики, которая использовалась:
+
Размеры получившейся формочки можем регулировать. При этом рамка будет подгоняться четко по контуру. Для наилучшего результата рекомендуется в редакторе ресурсов сделать бордеры = 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" />
 +
== Отсечение зоны видимости предмета ==
  
[[Файл:Rect23.jpg]]
+
Возможно получить эффект выезда / заезда предметов относительно некоторой границы. Для этого нужно создать новый ректангл, размер которого совпадает с размером зоны видимости (окна). В этот ректангл в дереве проекта помещаем объект, который будет двигаться.
 +
У ректангла выставляем параметр отсечение. Если не используется фон ректангла ему желательно установить альфу 0.
  
Размеры получившейся формочки можем регулировать. При этом рамка будет подгоняться четко по контуру. Для наилучшего результата рекомендуется в редакторе ресурсов сделать бордеры = 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

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