Rectangle — различия между версиями
Avereskun (обсуждение | вклад) (→Применение) |
Agava (обсуждение | вклад) (→Добавляемые параметры) |
||
(не показаны 24 промежуточные версии 6 участников) | |||
Строка 1: | Строка 1: | ||
− | + | '''Rectangle''' - [[Object|объект]], который удобно использовать при построении окон, также может использоваться для заливки области определённым цветом. | |
+ | {{TOC right}} | ||
+ | =Параметры= | ||
− | + | '''Общие параметры''' | |
+ | (см. описание [[Object|Object]]) | ||
− | == | + | ==Основные параметры== |
+ | '''Группа - положение''' | ||
− | * '''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|здесь]])); |
− | * '''scale x''' (''sx'') - Масштаб по оси x (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.) | + | * '''angle''' (''ang'') - Угол поворота в градусах (0 - не повёрнут). Отсчитывается от оси x вниз. Вверх - идут отрицательные углы; |
+ | |||
+ | * '''scale x''' (''sx'') - Масштаб по оси x (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.); | ||
* '''scale y''' (''sy'') - Масштаб по оси y (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.). | * '''scale y''' (''sy'') - Масштаб по оси y (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.). | ||
− | * '''тайлинг''' - включает возможность замостить плиткой нужный размер. | + | ==Дополнительные параметры== |
− | + | ||
+ | * '''прокликиваемость''' - Если 1, то кнопка прозрачна для клика мышкой (пропускает объектам под ней). Если 2, то кнопка сама обрабатывает клик, но и пропускает его дальше. | ||
+ | |||
+ | * '''тайлинг''' - включает возможность замостить плиткой нужный размер, да - включить тайлинг. | ||
+ | |||
+ | == Добавляемые параметры == | ||
+ | Открывается при нажатии правой кнопки мыши в поле параметров ректангла. | ||
+ | |||
+ | [[Файл:+.png]] '''Клик''' | ||
+ | *'''объект''' - При клике на ректангл перевести объект в состояние из следующего поля. | ||
+ | *'''состояние''' - Новое состояние для объекта из предыдущего поля. | ||
+ | |||
+ | [[Файл:+.png]] '''Тап''' | ||
+ | *'''объект''' - При тапе на ректангл перевести объект в состояние из следующего поля. | ||
+ | *'''состояние''' - Новое состояние для объекта из предыдущего поля. | ||
+ | |||
==Рамка== | ==Рамка== | ||
− | * бордюр верхний - Графический ресурс текстуры верхнего бордюра | + | * '''бордюр верхний''' - Графический ресурс текстуры верхнего бордюра; |
− | * бордюр правый - Графический ресурс текстуры правого бордюра | + | * '''бордюр правый''' - Графический ресурс текстуры правого бордюра; |
− | * бордюр нижний - Графический ресурс текстуры нижнего бордюра | + | * '''бордюр нижний''' - Графический ресурс текстуры нижнего бордюра; |
− | * бордюр левый - Графический ресурс текстуры левого бордюра | + | * '''бордюр левый''' - Графический ресурс текстуры левого бордюра; |
− | * нахлест бордюров - Нахлест текстур бордюров в пикселях | + | * '''нахлест бордюров''' - Нахлест текстур бордюров в пикселях; |
− | * угол левый верхний - Графический ресурс текстуры левого верхнего угла | + | * '''угол левый верхний''' - Графический ресурс текстуры левого верхнего угла; |
− | * угол правый верхний - Графический ресурс текстуры правого верхнего угла | + | * '''угол правый верхний''' - Графический ресурс текстуры правого верхнего угла; |
− | * угол правый нижний - Графический ресурс текстуры правого нижнего угла | + | * '''угол правый нижний''' - Графический ресурс текстуры правого нижнего угла; |
− | * угол левый нижний - Графический ресурс текстуры левого нижнего угла | + | * '''угол левый нижний''' - Графический ресурс текстуры левого нижнего угла. |
==Фон== | ==Фон== | ||
− | * '''alpha''' - Прозрачность заливки (не путать с прозрачностью объекта): от 0 (прозрачен) до 1 (не прозрачен) | + | * '''alpha''' - Прозрачность заливки (не путать с прозрачностью объекта): от 0 (прозрачен) до 1 (не прозрачен); |
− | * '''текстура заливки''' - Графический ресурс текстуры фона | + | * '''текстура заливки''' - Графический ресурс текстуры фона; |
− | * '''цвет заливки''' (''fillCol'') - Цвет заливки объекта. Задаётся в шестнадцатиричной системе(на пример AAAAAA, ABCABC, 12F5BC) | + | * '''цвет заливки''' (''fillCol'') - Цвет заливки объекта. Задаётся в шестнадцатиричной системе (на пример AAAAAA, ABCABC, 12F5BC). |
=Состояния= | =Состояния= | ||
Строка 52: | Строка 75: | ||
* '''init''' - применяет цвет указаный в '''цвет заливки''' | * '''init''' - применяет цвет указаный в '''цвет заливки''' | ||
− | После задания цвета другим объектом(кнопкой, машиной) обязательно необходимо объект rectangle перевести в состояние init для того чтобы он поменял цвет. | + | После задания цвета другим объектом (кнопкой, машиной) обязательно необходимо объект rectangle перевести в состояние init для того чтобы он поменял цвет. |
− | = | + | =Примеры применения объекта= |
==Заливка== | ==Заливка== | ||
Строка 63: | Строка 86: | ||
Для этого поставим на сцену кнопку и поверх неё поставим объект rectangle и зададим у него прозрачность. | Для этого поставим на сцену кнопку и поверх неё поставим объект rectangle и зададим у него прозрачность. | ||
Также добавим несколько кнопок, которые будут менять цвет объекту rectangle. | Также добавим несколько кнопок, которые будут менять цвет объекту rectangle. | ||
− | + | <div class="tleft" style="clear:none">[[Файл:R2.jpg|300px|мини|Экран с объектами]]</div> | |
− | [[Файл:R2.jpg|300px| | + | <div class="tleft" style="clear:none">[[Файл:R1.jpg|300px|мини|Дерево объектов]]</div> |
− | |||
− | [[Файл:R1.jpg|300px| | ||
− | |||
− | < | ||
− | |||
− | |||
− | |||
− | |||
− | |||
<br clear="all" /> | <br clear="all" /> | ||
− | + | Настроим rectangle. Зададим начальный цвет, размер, прозрачность. | |
Настроим кнопки. Задаим цвет на который хотим поменять и обязательно переведём объект 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" /> | ||
+ | ==Текстура== | ||
− | + | [[Файл:Rect1.jpg|thumb|250px|right|Настройки объекта Rectangle]] | |
− | + | Очень часто при создании приложения в нем присутствуют различные формы-окна, например: диалоговые окна, различные подложки под объекты. Можно сделать их цельной графикой, но тогда размер этой графики будет довольно большим и мы потеряем производительность. Можно сделать подложку, растянув маленьких кусочек графики (scale) до нужных размеров, то тогда мы теряем четкость текстуры и границ. В этом случае полезным будет объект rectangle. | |
− | + | Предположим, что нам нужно сделать большую подложку под какое-то диалоговое окно с красивой рамочкой. | |
− | + | Создаем на сцене новый объект с типом rectangle. | |
+ | Настроим свойства как показано на рисунке справа. | ||
+ | В поля границ перетаскиваем из базы ресурсов, заранее подготовленную графику, правого, левого края, углов и т.д. Центральную часть прямоугольника мы можем получить перетянув нужную текстуру в поле "текстура заливки", или подбором цвета заливки в формате 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" /> | <br clear="all" /> | ||
− | + | == Отсечение зоны видимости предмета == | |
− | |||
− | |||
− | + | Возможно получить эффект выезда / заезда предметов относительно некоторой границы. Для этого нужно создать новый ректангл, размер которого совпадает с размером зоны видимости (окна). В этот ректангл в дереве проекта помещаем объект, который будет двигаться. | |
+ | У ректангла выставляем параметр отсечение. Если не используется фон ректангла ему желательно установить альфу 0. | ||
− | + | [[Файл:Rectanglt.png]] [[Файл:Rect.png]] | |
− | + | В результате при передвижении объекта за границу ректангла он будет постепенно уходить из видимости. | |
− | [[ | + | [[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, то кнопка сама обрабатывает клик, но и пропускает его дальше.
- тайлинг - включает возможность замостить плиткой нужный размер, да - включить тайлинг.
Добавляемые параметры
Открывается при нажатии правой кнопки мыши в поле параметров ректангла.
- объект - При клике на ректангл перевести объект в состояние из следующего поля.
- состояние - Новое состояние для объекта из предыдущего поля.
- объект - При тапе на ректангл перевести объект в состояние из следующего поля.
- состояние - Новое состояние для объекта из предыдущего поля.
Рамка
- бордюр верхний - Графический ресурс текстуры верхнего бордюра;
- бордюр правый - Графический ресурс текстуры правого бордюра;
- бордюр нижний - Графический ресурс текстуры нижнего бордюра;
- бордюр левый - Графический ресурс текстуры левого бордюра;
- нахлест бордюров - Нахлест текстур бордюров в пикселях;
- угол левый верхний - Графический ресурс текстуры левого верхнего угла;
- угол правый верхний - Графический ресурс текстуры правого верхнего угла;
- угол правый нижний - Графический ресурс текстуры правого нижнего угла;
- угол левый нижний - Графический ресурс текстуры левого нижнего угла.
Фон
- alpha - Прозрачность заливки (не путать с прозрачностью объекта): от 0 (прозрачен) до 1 (не прозрачен);
- текстура заливки - Графический ресурс текстуры фона;
- цвет заливки (fillCol) - Цвет заливки объекта. Задаётся в шестнадцатиричной системе (на пример AAAAAA, ABCABC, 12F5BC).
Состояния
- init - применяет цвет указаный в цвет заливки
После задания цвета другим объектом (кнопкой, машиной) обязательно необходимо объект rectangle перевести в состояние init для того чтобы он поменял цвет.
Примеры применения объекта
Заливка
Можно объект применять для заливки сплошным цветом области сцены или для придания оттенка объекту.
К примеру надо оттенять разными цветами.
Для этого поставим на сцену кнопку и поверх неё поставим объект rectangle и зададим у него прозрачность. Также добавим несколько кнопок, которые будут менять цвет объекту rectangle.
Настроим rectangle. Зададим начальный цвет, размер, прозрачность.
Настроим кнопки. Задаим цвет на который хотим поменять и обязательно переведём объект rectangle в состояние init для того чтобы цвет поменялся.
Увидим следующий результат во вьювере:
Текстура
Очень часто при создании приложения в нем присутствуют различные формы-окна, например: диалоговые окна, различные подложки под объекты. Можно сделать их цельной графикой, но тогда размер этой графики будет довольно большим и мы потеряем производительность. Можно сделать подложку, растянув маленьких кусочек графики (scale) до нужных размеров, то тогда мы теряем четкость текстуры и границ. В этом случае полезным будет объект rectangle.
Предположим, что нам нужно сделать большую подложку под какое-то диалоговое окно с красивой рамочкой.
Создаем на сцене новый объект с типом rectangle. Настроим свойства как показано на рисунке справа. В поля границ перетаскиваем из базы ресурсов, заранее подготовленную графику, правого, левого края, углов и т.д. Центральную часть прямоугольника мы можем получить перетянув нужную текстуру в поле "текстура заливки", или подбором цвета заливки в формате RGB.
Размеры получившейся формочки можем регулировать. При этом рамка будет подгоняться четко по контуру. Для наилучшего результата рекомендуется в редакторе ресурсов сделать бордеры = 0.
Результат во вьювере:
Еще один пример создания окна при помощи объекта Rectangle:
Отсечение зоны видимости предмета
Возможно получить эффект выезда / заезда предметов относительно некоторой границы. Для этого нужно создать новый ректангл, размер которого совпадает с размером зоны видимости (окна). В этот ректангл в дереве проекта помещаем объект, который будет двигаться. У ректангла выставляем параметр отсечение. Если не используется фон ректангла ему желательно установить альфу 0.
В результате при передвижении объекта за границу ректангла он будет постепенно уходить из видимости.