wiki.appsalutecreator.com - Вклад участника [ru]

Создание экранов, сцен. Работа с кнопками

2018-06-04T06:11:19Z

Anecheporenko: /* Упражнения */

{| width="100%"
| width="40%"|[[Введение в AppSalute Сreator|Урок 1]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Checkbox как машина состояний|Урок 3]]
|}
----
{{TOC right}}
----
'''Цель:'''
научиться создавать экраны, сцены, кнопки и текст.

'''Задачи:'''
* Создать три экрана с одной сценой на каждом из них.
* На экраны поместить кнопки, перехода между экранами.
* Создать надпись на экране.
* Изучить условные переходы по экранам.
* Добавить свою картинку в редактор ресурсов и на сцену.

== Создание экранов и сцен ==

Запускаем SceneEditor и загружаем проект lessons (см. предыдущий [[Введение в AppSalute Сreator|урок]]). Кликаем на первый экран проекта (lesson_1) в панели Layout мышью и нажимаем её правую кнопку. В выпадающем меню выбираем "''Создать экран после текущего элемента''":

[[Файл:lesson2_screen.png]]

В выскочившем диалоговом окошке вводим имя экрана: '''lesson_2_Main''' (помним об осмысленности имен объектов?) и нажимаем Ok. В результате этот экран появится в дереве проектов (Layout).

[[Файл:lesson2_layout1.png|right]]
Повторяя эти действия, создадим еще 2 экрана с именами '''lesson_2_Sky''' и '''lesson_2_Moon'''. При этом, каждый раз правую кнопку мыши необходимо нажимать на предыдущем экране. Если же произошла ошибка, экраны всегда можно перетащить по дереву проекта или удалить, как это было описано в предыдущем [[Введение в AppSalute Сreator|уроке]].

Теперь в каждом экране необходимо создать по одной сцене. Назовем их одинаково: '''stg_main'''.
Приставка stg обозначает stage (сцена). Впрочем, она необязательна так как тип объекта в дереве помечается соответствующей иконкой. То, что сцены имеют одинаковые имена не существенно, так как в дереве они находятся внутри разных экранов, имена которых говорят о назначении всего, что в них находится.

[[Файл:lesson2_layout2.png|right]]
Создание сцены происходит аналогично созданию экрана. Кликнем мышкой на экран '''lesson_2_Main''' и нажмем её правую кнопку. В выпавшем меню выбираем "''Создать сцену в текущем элементе''" и в появившемся окошке вводим имя stg_main, соглашаясь с размерами сцены (в пикселях), предложенными по умолчанию. Повторям эту операцию, нажимая последовательно на экраны '''lesson_2_Sky''' и '''lesson_2_Moon'''. В результате получится панель проекта, приведенная на картинке справа.

Таким образом, проект этого урока будет состоять из трех экранов Main, Sky и Moon. Заметим, что над ними остался экран первого урока. Он нам не будет мешать. Постепенно в этом проекте добавятся экраны других уроков. Напомним, что при запуске вьювера мы указываем какой экран начать проигрывать. Если с этого экрана переходов на другие экраны нет, то вьювер не относящиеся к делу экраны не заметит.

Чтобы завершить процесс подготовки сцен, поместим на каждую из них соответствующий фон.
Для этого открываем редактор ресурсов [[Файл:Resourse_editor.png]], в котором кликаем на папку lesson_2. Последние три картинки bg_1, bg_2, bg_3 по очереди [[Введение в AppSalute Сreator|перетаскиваем]] на сцены в соответствующих экранах. Соответствие между фоном и экраном предлагается определить в качестве упражнения :).

== Создание кнопок ==

Создадим теперь [[Button|кнопку]]. Для этого сделаем активной сцену '''stg_main''' в экране lesson_2_Main.
Затем откроем редактор ресурсов и перетащим на сцену картинку '''arrow_rt_norm''' из папки lesson2. Эта картинка появится на сцене и в дереве проекта под картинкой фона bg_3.
При помощи мышки, разместим её на сцене в правом нижнем углу фона.

Чтобы превратить картинку в кнопку, необходимо в её свойствах (Properties) поменять тип
с image на '''button'''. Для этого кликаем справа от поля '''тип''' и в появившейся выпадалке выбираем button. Стоит обратить внимание на разнообразие игровых объектов. Часть из них будет описана в этих уроках, описание остальных можно найти в [[Absolutist_Framework|документации]].

Следуя правилам хорошего тона переименуем объект, заменив его имя arrow_rt_normal на '''next_scr''' (следующий экран). Для этого редактируем поле имя в панели свойств (нажав после окончания Enter) или дважды кликаем в панели проекта (Layout).

Откроем в свойствах кнопки группу '''внешний вид'''. Первые два поля '''up''' и '''down''' соответствуют картинкам изображающим отжатую и нажатую кнопку. Поле up уже заполнено картинкой arrow_rt_normal, которую мы превращали в кнопку. Зададим картинку для кнопки в состоянии нажатия.
Для этого кликаем справа от поля '''down''', чтобы оно стало редактируемым.
Затем снова открываем редактор ресурсов и хватем картинку arrow_rt_down из папки lesson_2.
Однако тащим её не на область редактирования сцены, а непосредственно в поле '''down''' свойства группы "внешний вид" кнопки next_scr. После того как мышка отпущена, кликаем в произвольное место вне поля редактирования, заканчивая тем самым процесс:

[[Файл:lesson_2_btn_dn.png|600px]]

Обратим внимание, что поле редактирования должно быть активно в момент перетаскивания в него картинки. Поэтому, если редактор ресурсов еще не запущен, его необходимо сначала запустить, разместить поверх стальных окон (Always on Top), а только затем кликать в значение поля down и тащить в него картинку.

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' Имена картинок графических ресурсов в полях свойств объектов не являются простыми текстовыми надписями. С ними связывается конкретный файл из редактора ресурсов. Поэтому пытаться редактировать их руками не стоит. Эти поля нужно заполнять при помощи мышки, так как это описано выше.
</blockquote>

Чтобы кнопка выполнила полезную функцию, отредактируем у неё ещё одно поле "'''перейти на'''".
При клике справа от него выпадет список из доступных в проекте экранов. Выберем экран lesson_2_Sky.

Теперь можно протестировать, что у нас получилось.
Проверяем, что в дереве проекта активным является экран lesson_2_Main.
Сохраняем изменения в проекте [[Файл:00 8.png]] и запускаем вьювер [[Файл:00 9.png]].
Нажимая на кнопку, убеждаемся, что происходит заданный переход из одного экрана на другой.
Обращаем внимание, также на изменение вида кнопки в момент клика на неё мышки.

Как видно из списка свойств, кроме картинок up и down у кнопки есть еще поля для картинок '''over''' и '''disable'''. Первое соответствует внешнему виду в момент когда мышь находится над кнопкой (но не нажата). Если игра пректируется для мобильных устройств (телефоны, планшетники), то обычно это поле не используется. Внешний вид disable (недоступна) соответствует виду кнопки, когда в неё нельзя кликать.

== Навигация по экранам ==

Повторим проделанные выше действия с двумя оставшимися экранами (lesson_2_Sky, lesson_2_Moon) этого урока. Поместим на lesson_2_Sky кнопку, по памяти, не подглядывая в предыдущие инструкции. Пусть при клике на неё происходит переход на экран lesson_2_Moon.

Третью кнопку на экране lesson_2_Moon мы создадим новым методом.
Для этого наступим в дереве на уже существующую кнопку и нажмем правую кнопку мыши.
В выпавшем меню выберем пункт "'''Copy'''". Можно также не пользуясь меню, при активном объекте на клавиатуре нажать клавиши '''Control''' и не отпуская её '''C'''.

[[Файл:lesson_2_copy.png]]

Теперь кликнем на stg_main экрана lesson_2_Moon и нажав правую кнопку мыши выберем пункт меню "''Paste into current object''". Кнопка появится на экране и в дереве проекта.

При копировании объекты сохраняют свои свойства.
Поэтому в скопированной кнопке необходимо изменить поле "'''перейти на'''".
Давайте зациклим навигацию, сделав переходы:
Main -> Sky -> Moon -> Main -> ...

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

== Работа с текстом ==

Объекты можно создавать на сцене не только при помощи таскания картинок из
редактора ресурсов, а и прямо в дереве проекта.
Сделаем активным экран lesson_2_Sky и кликнем в нём на последний в его ветке дерева
объект (кнопка next_scr). Нажмём правую кнопку мыши и выберем пункт меню
"''Создать объект после текущего элемента...''".

[[Файл:lesson_2_create.png]]

После этого в дереве появится
объект с именем '''new_object''' типа image.
Впрочем непосредственно на сцене мы ничего не увидим кроме зеленой точки. Чтобы текст можно было перемещать, ему нужно задать ненулевой размер. Сделать это можно, отредактировав его свойства '''w''' (ширина) и '''h'''(высота) в разделе свойств объекта '''"размер"'''.После этого он будет отображаться как пустая зеленая рамка.
Тем не, менее схватимся за неё и расположим прямоугольник примерно по середине фона.
Если при попытке перетащить рамку, Вы промахнулись, то вместо неё сдвинется фон.
В этом случае, поставьте его на место и постарайтесь лучше прицелиться при хватании за рамку.

Начнем теперь менять свойства созданного объекта:
* Зададим ему тип '''[[Text|text]]''' (в списке типов его возможно придется поискать в самом низу).
* Поменяем имя, например, на '''txt_first'''.
* В поле '''текст''' введем: "''И сказал Бог: да будет свет. И стал свет.''"

<blockquote>
[[файл:Ok.png|right|32px]]
'''Совет''': для ускорения поиска нужного типа в списке типов можно нажать первую букву имени типа (t). Если пометка стала на нужное место, нажмите Enter.
</blockquote>

Сохраним проект и запустим вьювер. Получившийся результат выглядит не очень красиво.
Текст вписался в рамку созданного объекта и оказался сильно сжатым.
Чтобы придать ему более читаемый вид закроем вьювер и изменим у txt_first
в панели Properties ещё несколько свойств:
* размер '''w''' = 400 (это новая ширина области в которую вписывается текст);
* форматирование '''отступ''' = 10 (это расстояние в пикселях между строчками).
Можно поэкспериментировать с другими параметрами свойств, читая их краткое описание в хинте, появляющемся при наведении мышки на имя свойства.

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание:''' Описанный выше способ задания текста нельзя применять в реальных проектах. Обычно игра является мультиязычной. Поэтому, все тексты создаются в редакторе текстовых ресурсов, где переводятся на несколько языков. Соответствующий текстовый идентификатор перетаскивается аналогично картинкам в поле текстID.
</blockquote>

Более подробное описание редактора текстовых ресурсов и работу с объектом text
мы рассмотрим позже в соответствующем [[Редактор текстовых ресурсов|уроке]].
А пока вернемся к нашим кнопкам.

== Логика переходов ==

Пока кнопки, осуществлявшие переходы на следующие экраны, вели себя достаточно однообразно.
Придадим нашему приложению небольшую непредсказуемость.
Для этого активизируем второй экран (lesson_2_Sky) и кликнем на его объект '''next_scr'''.
В панели свойств этой кнопки на свойстве "'''перейти на'''" нажмём правую кнопку мыши.
В появившемся меню выберем пункт "''если был экран''".
В результате, ниже поля "перейти на" появится пара полей, объединенных свойством "если был экран".
В первом поле группы "'''был экран'''" выберем экран lesson_2_Moon, а во втором поле "'''перейти на'''" - экран lesson_2_Main:

[[файл:lesson2_cond.png]]

Активизируем в дереве проектов первый экран этого урока (lesson_2_Main),
сохраним проект и запустим вьювер. Кликая на кнопки следующего экрана,
мы первый раз пролистаем их все. Повторим этот процесс ещё раз.
Когда мы окажемся второй раз на экране с небом (lesson_2_Sky), кнопка следующего экрана
перебросит нас не на третий экран (lesson_2_Moon), как раньше, а на первый (lesson_2_Main).
После этого все время будут происходить переходы только между первым и вторым экранами.

Логика получившегося результата состоит в следующем.
Свойство '''перейти на''', находящееся в панели Properties по умолчанию,
является безусловным переходом. Если в этом поле задан конкретный экран, при клике на кнопку вьювер отправится именно туда. Однако, этот переход происходит только в тех случаях, если не заданы дополнительные условные переходы (или условие срабатывание не выполняется ни для одного из этих переходов). Иными словами, вьвер сначала попытается совершить условный переход, для которого выполнилось условие срабатывания. Если такого перехода не найдется, будет выполнен переход по умолчанию. Условные переходы мы добавляем динамически в свойства кнопки при помощи правой кнопки мыши.
В нашем случае, добавленные два поля звучат так:
Если уже '''был экран''' lesson_2_Moon, то надо '''перейти на''' экран lesson_2_Main.

Пусть проект был запущен с первого экрана lesson_2_Main. На нём мы кликнули на кнопку и оказались на следующем экране lesson_2_Sky. Кнопка этого экрана содержит условный переход. Однако, первый раз он не срабатывает, так как на экране lesson_2_Moon мы ещё не были (и соответствующее условия срабатывания не выполнено). В результате, при клике на кнопку выполняется переход по умолчанию '''перейти на''' lesson_2_Moon. Когда пролистав по кругу все экраны, мы снова оказываемся на lesson_2_Sky, условный переход уже срабатывает (мы были на экране lesson_2_Moon). Поэтому, мы отправляемся на первый экран lesson_2_Main.

Как мы видим, кнопка может выполнять достаточно сложные логические функции.
У неё много динамически добавляемых полей. Они позволяют менять другие объекты, совершать некоторые служебные действия и т.д.

== Добавление картинок в ресурсы ==

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

Делается это очень просто. В редакторе ресурсов станьте мышкой на имя папки с текущем уроком (lesson_02)
и нажмите правую кнопку. В появившемся меню выберете пункт "''Add Images...''".
Затем, найдите нужную картинку у себя на диске:

[[файл:lesson_2_addImg.png]]

Она добавится в графические ресурсы и появится в списке доступных картинок
в редакторе ресурсов. Теперь можно смело перетаскивать её на сцену.

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

== Упражнения ==

* Добавьте на все экраны кнопку в виде стрелочки влево (поместив её в левом нижнем углу). Активнее используйте копирование объектов.
* Задайте соответствующие переходы между экранами (листание в обратную сторону).
* Добавьте на последний экран любой на Ваш выбор текст; отформатируйте его.
* Сделайте логику перехода по экранам, при которой после первого экрана мы попадаем сразу на третий, если уже был второй.
* Загрузите в проект свою любимую картинку или фотографию и разместите её на любом из созданных в этом уроке экране. Если она окажется слишком большой, вспомните о модификаторах масштаба.

== Эффекты с Альфа каналом ==

В этом уроке рассмотрим эффект с альфаканалом на примере смены экранов.

1. Откройте первый экран из урока 2.

2. Выделите экран и посмотрите на его свойства. Вы увидите пункт '''анимация переходов'''.

3. Выставьте тип перехода и время растворения как показано на рисунке.

[[Файл:Lesson9_16.jpg‎]]

4. Сохраните проект и проверьте переход с этого экрана во viewer. Экран сменяется другим экраном путем плавного растворения по альфе.

=== Упражнения ===

В этом уроке мы поставили время растворения 2 секунды. Таким образом наша смена экранов выглядит как слайд-шоу. В большинстве случаев это большое время. Путем подбора времени растворения сделайте смену экранов наиболее привлекательной. Сделайте то же самое для двух остальных экранов.

----
{| width="100%"
| width="40%"|[[Введение в AppSalute Сreator|Урок 1]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Checkbox как машина состояний|Урок 3]]
|}

[[Category:Learning]]

Statesmanager

2018-02-06T13:21:52Z

Anecheporenko: /* Состояния */

[[Object|Объект]] предназначен для постановки объектов в очередь выполнения единообразными командами. Можно применять для управления отображением всплывающих окон.

=Свойства=

==Процесс==
*'''объект открытия''' (obj) - объект который будет переведён в заданное состояние, если данный объект будет первым в очереди на открытие и передадим менеджеру окон состояние ''next'';
*'''состояние открытия''' (st) - перевести выбранный объект в заданное состояние;
*'''объект back''' (obj_b) - объект который будет переведён в заданное состояние, если данный объект будет первым в очереди на закрытие и передадим менеджеру окон состояние ''back'';
*'''состояние back''' (st_b) - перевести выбранный объект в заданное состояние.

==Визуализация окон==
*'''fading_t''' - Время фейдинга для окон типа ''по альфе''. Statesmanager'у должен приходить таймер!!!

=Дополнительные параметры=
[[Файл:+.png]] '''изменить состояние объекта - очередь back пуста:'''
:'''объект''' ('' obj '') - Перевести объект в состояние из следующего поля;
:'''состояние''' ('' st '') - Новое состояние для объекта из предыдущего поля.

[[Файл:+.png]] '''изменить состояние объекта - очередь next пуста:'''
:'''объект''' ('' obj '') - Перевести объект в состояние из следующего поля;
:'''состояние''' ('' st '') - Новое состояние для объекта из предыдущего поля.

=Параметры которые мы можем считать из statesmanager=
*'''n_back''' - количество событий в очереди на закрытие (не учитывая события добавленные как попапы);
*'''n_next''' - количество событий в очереди на открытие (не учитывая события добавленные как попапы).
*'''n_popup''' - количество событий открытых как попапы.

=Состояния=
*'''add_first''' - добавить событие в начало очереди на открытие;
*'''add_first_uni''' - добавить событие в начало очереди на открытие, но если данное событие уже добавлено в очередь, то повторно оно не добавиться (удобно если окно не должно открываться дважды);
*'''add_last''' - добавить событие в конец очереди на открытие;
*'''add_last_uni''' - добавить событие в конец очереди на закрытие, но если данное событие уже добавлено в очередь, то повторно оно не добавиться;
*'''add_popup''' - добавить в очередь попапов событие, и сразу его открыть (добавляется в очередь беков на закрытие в начало). Примечание попапы добавляются в свою очередь на закрытие и открытие, параметры объекта statesmanagera (n_back и n_next) не повышаются при добавления попапа.
*'''add_popup_uni''' - добавить попап с проверкой уникальности;
*'''next''' - активировать первое событие в очереди на открытие;
*'''back''' - активировать back для текущего события в очереди на закрытие;
*'''clear''' - очищает стек очереди, очищает обе очереди (на открытие и на закрытие, включая попапы);
*'''clear_back''' - очищает стек очереди на закрытие ( чистит очередь окон на закрытие, очередь попапов не трогает);
*'''delete''' - удалить из очереди элемент с id из param;
*'''log''' - записывает в лог, три очереди ( очередь next и две очереди беков (попапы и окна)):
*'''add_state_last''' - добавить в очередь состояний вызываемых при закрытых окнах

==================================================
NEXT QUEUE
id = 15, st = open
id = 18, st = open
id = 21, st = open
id = 72, st = open
id = 68, st = open
id = 80, st = open
id = 80, st = open
id = 76, st = open
03/10/14 11:53:17.485:
==================================================
POPUP QUEUE
03/10/14 11:53:17.485:
==================================================
BACK QUEUE
id = 11, st = open

==Альтернативное описание состояний, взятое прямиком из кода==
"idle", //!< Состояние простоя
"add_first", //!< Добавить событие в начало очереди
"add_last", //!< Добавить событие в конец очереди
"add_first_uni", //!< Добавить событие в начало очереди
"add_last_uni", //!< Добавить событие в конец очереди
"next", //!< Активировать первое событие в очереди
"back", //!< Активировать back для текущего события в очереди
"clear", //!< Очистить обе очереди
"add_popup", //!< Начать ветку попапов от текущего элемента очереди. Срабатывает
//!< сразу, до зачиски всех попапов next не делает ничего, back сначала
//!< закрывает попапы
"delete", //!< Удалить из очереди элемент с id из param;
"log" //!< Вывести содержимое всех трех очередей в лог
"double_back", //!< двойной back (и отличная песня ZZ Top, к тому же)
"triple_back" //!< тройной back

=Схема работы=

1) Добавить объекты по одному в очередь

2) вызывать состояния next или back - объекты у которых вызваны состояния убираются из очереди
очередь разбирается с конца

=Пример реализации=

==Очередь из окон==
Задача: У нас открывается окно 1, после его закрытия открывается окно 2,окно 3 и т.д. (после закрытия одного окна открывается другое).

Пример: Закончили уровень, и после закрытия окна с результатами, мы должны показать два окошка с новыми задачами.

'''Реализация:'''

*'''1) Открываем окно с результатами:'''
:Из машины окна, вызываем состояние ''next'' машине обработчику менеджера окон (9win_root). Предварительно записываем состояния для закрытия и открытия данного окна(машины; состояния ''close'' и ''open'' соответственно):

::[[Файл:Statesmanager W next.png]]

:В машине обработчике менеджера окон (9win_root), в состоянии ''next'' мы задаём менеджеру окон и передаём состояние ''add_first'', а затем ''next''. То есть мы добавляем первым в очередь на открытие наше окно с результатами и его открываем:

::[[Файл:Statesmanager Next.png]]

*'''2) Добавляем в очередь окно с задачей:'''
:Из машины окна, вызываем состояние ''add'' машине обработчику менеджера окон (9win_root). Предварительно записываем состояния для закрытия и открытия данного окна(машины; состояния ''close'' и ''open'' соответственно):

::[[Файл:Statesmanager W add.png]]

:В машине обработчике менеджера окон (9win_root), в состоянии ''add'' мы задаём менеджеру окон и передаём состояние ''add_last''( то есть мы добавляем окно в конец очереди на открытие).
:[[Файл:Statesmanager.Add.png]]

*'''3) Аналогично добавляем другие задачи.'''

*'''4) Для закрытия окна с результатами уровня, мы передаём менеджеру окон состояние ''back'' (закрываем окно, первое в списке на закрытие), а затем состояние ''next'' (открываем первое окно в очереди на открытие, в нашем случае - первую добавленную задачу) '''.

[[Category:Main objects]]

Введение в AppSalute Сreator

2018-02-02T15:30:54Z

Anecheporenko: /* Введение */

{| width="100%"
| width="40%"|[[Learning|Оглавление]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Создание экранов, сцен. Работа с кнопками|Урок 2]]
|}
----
{{TOC right}}
----
'''Цель:'''
познакомиться со средой разработки игр AppSalute Сreator.

'''Задачи:'''
* проинсталлировать AppSalute Сreator;
* открыть готовый проект в редакторе сцен;
* освоить взаимодействие редактора сцен и редактора ресурсов;
* изучить основные методы редактирования сцены.

== Введение ==
Для начала работы с редактором его необходимо [[Установка и настройка|установить]], загрузив и запустив [[Downloads|инсталлятор]].
По умолчанию все необходимые программы будут размещены '''C:\Program Files\AppSalute Creator''' и материалы для уроков находятся в папке '''Мои Документы\Absolutist\Projects\lessons'''. При желании её можно в дальнейшем перенести в любое удобное место.
После инсталляции запускаем программу Scene Editor, найдя на рабочем столе или в списке приложений иконку:

[[Файл:icon_se.png]].

Для создания игр в AppSalute Сreator используются четыре взаимодействующих между собой приложения:
* [[Файл:Ico_main.png|40px]] '''[[Интерфейс ScenceEditor|Scene Editor]]''' - редактор игровых сцен (экранов), в котором происходит настройка свойств объектов и игровой логики. Это основной инструмент при разработке игры.
* [[Файл:Ico_base.png|40px]] '''[[Редактор ресурсов|Resources Editor]]''' - хранилище медиа-ресурсов (картинки, звуки, видео, анимация), использующихся в игре. Эти ресурсы при помощи мышки перетаскиваются на сцену в Scene Editor.
* [[Файл:Ico_text.png|40px]] '''[[Интерфейс TextEditor|Text Editor]]''' - хранилище всех текстовых ресурсов (надписей) на различных языках. Аналогично графике и звукам при помощи мышки они перетаскиваются в соответствующие свойства объектов, находящихся в Scene Editor. См. также [[Редактор текстовых ресурсов|Урок 6]]
* '''Viewer''' - проигрыватель созданной игры. Обычно запускается непосредственно из Scene Editor. Вы увидите, возможно сыграете, игру в том же виде, как и на любом мобильном устройстве.

[[Файл:Layout.png|right]]
Игра состоит из набора '''экранов'''. На каждом экране может находиться одна или несколько '''сцен'''.
Например, пусть на экране находится игровое поле и панель с интерфейсными кнопками. Эти две области можно оформить при помощи различных сцен. Первая сцена содержит игровые '''объекты''' редактора, например миниигры такие как puzzle и фоновую картинку. Вторая сцена содержит базовые элементы управления (кнопки, чекбоксы), универсальные машины состояний (программирующие логику) и т.д.

Так как игра обычно запускается на различных устройствах (телефон, планшетник, десктоп), важным понятием является '''лейаут''' (layout). Лейаут - размещение элементов игры на экране. Так как мониторы имеют разное разрешение в пикселях и разное соотношение высоты и ширины, для них нужны разные варианты размещения игровых объектов и интерфейса. Если игра проектируется для разных устройств, должны поддерживаться несколько лейаутов.

[[Файл:lesson_1_layouts.png|400px]]

В качестве примера справа на рисунке представлена структура некоторого проекта в лейауте с размерами экрана устройства 960x640 пикселей. На этом лейауте находятся экраны, из которых только один экран (pack1) развернут. Внутри него находятся 2 сцены (stg_list1 и stg_main1). Одна сцена (stg_list1) раскрыта и содержит три игровых объекта. Последний из них (tbk_pack1) является сложным объектом, содержащим несколько других.
Таким образом, игровой проект можно представить как '''дерево''', на различных ветках которого находятся игровые объекты.

== Редактор сцен ==

=== Открытие проекта ===

Шаг первый.
Вверху окна редактора расположено общее меню и кнопки быстрого запуска:

[[Файл:Меню.png]]

Если нажать пункт меню <tt>Project</tt> (Проект), то выпадет список команд, с помощью которых можно [[Подготовка к работе "Создание проекта"|создать новый]] или загрузить уже созданный проект, сохранить проект с указанием места сохранения и т.д.

Откроем проект, на основании которого будут проходиться эти уроки. Для этого нажмём в меню пункты <tt>Project</tt> → <tt>Open</tt> или сразу кнопку быстрого доступа [[Файл:Открыть проект.png]]. Заходим в папку '''Мои документы/Absolutist/Projects/Lessons'''.
Внутри неё кликнем на файл '''lessons.seproj'''

[[Файл:Seproj.JPG|400px]].

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

[[Файл:Экран.png|1000px]]

=== Свойства проекта ===

В правой части окна редактора расположены две панели '''Layout''' (лейаут) и '''Properties''' (свойства).
На панели Layout показано иерархическое дерево проекта, который пока состоит из одного игрового экрана lesson_1. Если кликнуть на стрелочку (или плюсик, или треугольник, в зависимости от Вашей ОС) слева от надписи lesson_1, то экран раскроется и мы увидим [[Проектирование_экранов_игры#Принципы_формирования_сцен_и_их_наполнения|сцену]], которая находится на [[Проектирование_экранов_игры|экране]]. Она называется lessons_1. Продолжая кликать на стрелочки, раскроем всю структуру этого проекта:

[[Файл:Лэйаут.png]]

Наиболее простым объектом, находящимся в дереве проекта, является статическая картинка фона, которая называется '''bg'''. Если на неё кликнуть, то ниже в панели '''Properties''' можно увидеть параметры настройки этого объекта (его свойства):

[[Файл:Свойства.png]]

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

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

=== Проигрывание проекта ===

В процессе разработки игрового проекта, игру в любой момент можно запустить в отдельном окне вьювера ('''Viewer''') для проверки. Для этого в дереве проекта (панель Layout) необходимо выбрать интересующий нас экран (с которого произойдёт запуск) и нажать кнопку [[Файл:Play111.png]] (или пункт меню <tt>Viewer</tt> → <tt>Start Viewer</tt>).

[[файл:View.png]]

В нашем случае мы увидим летающее над слонёнком солнышко. Оба объекта (и слонёнок, и солнышко) являются активными. Кликните сначала на голову слонёнка - она должна повернуться. Клик на тело слонёнка заставит его подпрыгнуть. При должной сноровке можно кликнуть также на летающее солнышко, что приведёт к кратковременному изменению его формы.

Стоит запомнить три важных правила при работе с вьювером:
* Если приложение редактировалось, то перед запуском вьювера проект необходимо сначала сохранить (меню: <tt>Project</tt> → <tt>Save Project</tt>).
* Всегда необходимо перед запуском вьювера выбирать экран, который начнёт проигрываться (сейчас такой экран пока один).
* После просмотра во вьювере игры, его необходимо закрыть, нажав (как обычно в Windows) крестик в правом верхнем углу окна.

=== Кнопки быстрого запуска ===

Приведем для справки описание кнопок быстрого доступа к некоторым командам редактора сцен (более подробная информация будет предоставлена в последующих уроках):

*[[Файл:00001.png]] — создать новый проект;
*[[Файл:Открыть проект.png]] — открыть уже созданный проект;
*[[Файл:00002.png]] — сохранить изменения в проекте;
*[[Файл:00003.png]] — нормальный вид;
*[[Файл:Play111.png]] — запустить Viewer;
*[[Файл:000004.png]] — запустить Viewer с изменением времени;
*[[Файл:000005.png]] — очистить данные;
*[[Файл:00006.png]] — вызов редактора ресурсов;
*[[Файл:00007.png]] — вызов текстового редактора;
*[[Файл:00008.png]] — анализ использованных ресурсов;
*[[Файл:00009.png]] — поиск объекта по имени или id;
*[[Файл:0000010.png]] — общие свойства объекта.

== [[Редактор ресурсов]] ==

Второе важное приложение, это редактор ресурсов.
Так как мы открыли готовый проект, то с ним уже связана база графических ресурсов.
Чтобы её увидеть, нажмите кнопку [[Файл:00006.png|20px]] (или меню: <tt>Tools</tt> → <tt>Resources Editor</tt>).
Откроется новое окно, которое, на самом деле, является независимым приложением:

[[Файл:Редактор ресурсов111.png]]

Как и в редакторе сцен, вверху окна редактора ресурсов расположено меню и кнопки быстрого доступа: создать базу ресурсов, открыть уже существующую, показать экспорт последних объектов, сохранить изменения в редакторе ресурсов, добавить картинку (png, jpeg), добавить картинку из папки, добавить анимацию, мелодию (mp3, ogg), видео (mp4).
Ниже, в левой панели, находятся папки, внутри которых можно найти различные графические ресурсы, которые мы будем использовать на протяжении этих уроков. Каждая папка названа по имени урока.
Кликнув на стрелочку (или плюсик, или треугольник) слева от папки lesson_1 мы увидим текстовый список из 8 картинок, находящихся в ранее запущенном приложении со слоненком и солнышком.

Если в дереве папок активна данная папка, то на правой панели мы видим список графических ресурсов в виде иконок. Если же в дереве кликнуть на имя конкретной картинки, то в правой панели она будет представлена в натуральную величину. Если кликнуть правой кнопкой мыши на конкретный ресурс отобразится всплывающее подменю, которое аналогично кнопкам быстрого доступа, за исключением одного пункта - <tt>Заменить изображение...</tt>. Замену изображений необходимо делать через всплывающее подменю.

Текущее приложение содержит фоновую картинку (bg), три картинки частей слонёнка (elephant_body, elephant_head_1, elephant_head_2) и 4 картинки с различным видом солнышка.

Так как редактор ресурсов является отдельным приложением, он может оказаться под окном редактора сцен. Это не всегда удобно, поэтому зайдем в пункт меню <tt>'''View'''</tt> редактора ресурсов и поставим галочку у пункта <tt>'''Always on Top'''</tt>. Теперь редактор ресурсов окажется поверх редактора сцен (как впрочем, и поверх всех остальных окон). Естественно, галочку можно в любой момент снять или свернуть окно редактора ресурсов.

Размер окна редактора ресурсов можно изменять мышкой, схватившись за правый нижний угол окна.
Правую панель, которая выводит картинки, можно “перетащить” в любое место окна редактора ресурсов (для этого необходимо потянуть за её заголовок). Чтобы вернуть панель на фиксированное место, необходимо дважды кликнуть на её заголовке.

== Редактирование сцены ==

=== Добавление на сцену ===

Разберемся, как на сцену добавляются новые объекты. Предполагается, что мы одновременно видим окна обоих редакторов. Убедимся, что в панели проекта (Layout) редактора сцен активна текущая сцена lessons_1. Не путайте её с экраном lesson_1, находящимся выше. Рядом с каждым объектом в дереве ресурсов находится иконка, отражающая тип объекта. Рядом с экраном изображено, что-то похожее на фотоаппарат, а рядом со сценой - чистый лист бумаги.

Нажав мышкой на иконку головы слонёнка в '''редакторе ресурсов''', перетащим её на сцену в '''редактор сцен''', где кнопку мышки отпустим:

[[Файл:Add picture.png|800px]]

Теперь окно редактора ресурсов можно свернуть, чтобы оно не мешало.
На сцене мы видим одного полноценного слонёнка и отдельно парящую голову.
В списке объектов (панель Layout) добавился объект elephant_head_2.
Его имя по умолчанию совпадает с именем картинки в редакторе ресурсов.
Если оно не достаточно точно выражает назначение этого объекта, то его '''необходимо'''
изменить в панели Properties (предполагается, что на дереве объектов эта голова сейчас выбрана).
Переименуем её, например, в elephant_ghost (дух слонёнка). Для этого кликнем справа от поля '''имя''' в панели Properties и введем новое название. После окончания редактирования нажимаем Enter. Одновременно с этим изменилось имя на дереве объектов (Layout).
Стоит всегда придерживаться следующего правила:

<blockquote>
[[файл:Ok.png|right|32px]]
'''Необходимо присваивать объектам в проекте осмысленные имена, отражающие их роль и функции. Это относится также к именам экранов и сцен.'''
</blockquote>

Названия объектов могут повторяться, но это плохой тон. В частности, неудачным примером названий в этом проекте служат похожие имена экрана (lesson_1) и сцены (lessons_1). Плохое имя (move) у летающего солнышка (лучше было бы fly_sun).

Обратим внимание, что добавленная голова имеет тип '''image''' (первое поле в панели Properties).
Большинство объектов в начале имеют такой тип. Далее он меняется в зависимости от функциональности объекта (подробнее об этом в следующих уроках).

<blockquote>
[[файл:Ok.png|right|32px]]
'''Совет''': Переименовывать объекты можно непосредственно в панели Layout, после двойного клика мышкой на имя этого объекта. Редактирование завершается нажатием клавиши Enter.
</blockquote>

=== Изменение положения ===

На сцене вокруг добавленной головы находится зелёная прямоугольная рамка (объект активен).
Если она красная, необходимо кликнуть на объект (голову) и он станет активным.
Заметим, что при клике на объекте меняется не только цвет рамки,
но и активный объект на дереве объектов (Layout). Соответственно в панели Properties показываются его свойства.
Стоит покликать на различные объекты на сцене и на дереве проекта, наблюдая одним глазом за их рамкой, а другим за панелями проекта и свойств. В заключении этого увлекательного упражнения необходимо снова сделать активной голову.

Активный объект можно таскать мышкой по экрану, задав ему требуемое положение (не оторвите только голову исходному слоненку). Стоит раскрыть свойство "'''положение'''" в панели Properties и понаблюдать, как при таскании головы меняются её координаты.
Начало координат (точка x=0, y=0) расположено в центре сцены. Горизонтальная ось x направлена вправо, а вертикальная ось y - вниз. Если объект находится ниже центра сцены, он будет иметь положительное значение y, а если выше, то отрицательное.
Естественно, положение объекта можно изменить и при помощи прямого редактирования полей '''x''', '''y''' свойства "'''положение'''". Перетащите голову в правый верхний угол сцены.

=== Модификаторы ===

Будем считать, что добавленная голова слона - это дух предков исходного слонёнка.
Духу положено быть полупрозрачным. Это достигается изменением
свойства '''alpha''' в группе '''модификаторы''' на панели свойств (Properties).
Изменим исходное значение 1.00 (непрозрачен) на 0.5 (полупрозрачен).
Значение alpha=0 соответствует полной невидимости объекта (возможно любое значение между 0 и 1).
Обратим внимание, что десятичная точка является именно точкой, а не запятой, как всё ещё учат на 1/6 части суши. Впрочем, если в вашей операционной системе в языковых настройках стоит русский язык, Вы увидите привычную запятую, вместо десятичной точки.

Дополнительно в разделе '''модификаторы''' можно изменить угол ('''angle''') в градусах (поставьте, например -30)
и масштаб картинки (поля '''scale x''' и '''scale y'''). Исходная картинка имеет единичный масштаб, т.е. на сцене выглядит также, как и в редакторе ресурсов. Если масштаб увеличить, то увеличится и картинка (это можно сделать независимо по ширине и высоте).
Соответственно, значение меньшее 1 (но большее нуля) её уменьшит.
Отрицательное значение масштаба переворачивает картинку. Задайте scale_x=-2 и scale_y=2.
В результате должно получиться что-то типа:

[[Файл:Mod.png|800px]]

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

=== Z - порядок объектов ===

Пришло время посмотреть, что у нас получилось. Для этого сохраняем все изменения
[[Файл:00 8.png]] (нажав кнопку Ok на выскочившем окошке).
Затем запускаем вьювер [[Файл:00 9.png]]. Понаблюдаем за солнцем. Оно движется над фоновой
картинкой "'''bg'''", но ''под'' головой духа слона (он должен, естественно, находится в верхней части сцены). Такая последовательность прорисовки связана с порядком объектов в дереве на панели Layout. Отрисовка происходит сверху вниз (сначала bg, затем move и т.д.). Это правило является иерархическим. Если на дереве находятся объекты, содержащие другие объекты, то сначала рисуется вся эта ветка дерева, а затем поверх неё рисуются нижележащие на дереве объекты на других ветках. Это же правило относится к последовательности рисования сцен. Если на экране несколько сцен, то они рисуются сверху вниз в соответствии с их порядком на дереве. Сама по себе сцена - это невидимый объект (контейнер). Поэтому, рисование сцены означает последовательное рисование всех объектов, которые в ней находятся.

Попробуем во вьювере кликнуть на солнце, когда оно оказывается под головой духа слона.
Его форма не изменяется, так как картинка головы, хотя и является полупрозрачной, по умолчанию "не прокликивается". Чтобы изменить ситуацию, закроем вьювер (крестик) и отредактируем поле свойств головы с именем "'''прокликиваемая'''", выбрав из соответствующего списка "прокликиваемая" вместо "нет". Закончив редактирование поля (нажав Enter), сохраняем проект [[Файл:00 8.png]] и снова запускаем вьювер [[Файл:00 9.png]].
Теперь дух, как и положено астральным образованиям, пропускает клик сквозь себя.

Порядок рисования объектов можно изменить, перетащив их по дереву в панели Layout.
Эта операция требует определенной сноровки. Наступим на имя объекта elephant_ghost и не отпуская мыши потащим его вверх. Когда он окажется на уровне объекта bg, отпустим мышь. Он станет подобъектом фона,
что отобразится как сдвиг elephant_ghost вправо (у объекта фона bg слева появится стрелочка). Теперь снова схватим elephant_ghost и потащим чуть вниз и влево по дереву.
Когда указатель мыши окажется между объектами bg и move, появится длинная горизонтальная полоска. В этот момент отпускаем мышь, и наш дух размещается между этими объектами.

Ниже на рисунке представлены оба варианта положения духа на дереве сцены (слева подобъект elephant_ghost в объекте bg, а справа равноправный с bg объект, но ниже по дереву и, следовательно, рисуемый позже):

[[файл:El.png]]
[[файл:El2.png]]

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

=== Удаление объектов ===

Откройте снова окно редактора ресурсов (скорее всего оно находится в свернутом состоянии в панели приложений). Расположите его над окном редактора сцен. Перетащите на сцену из папки lesson_1 какую-нибудь небольшую картинку (например, sun_1). Сверните редактор ресурсов. Новая картинка появилась на сцене и в дереве объектов панели Layout. Чтобы её удалить, нажмите правую кнопку мыши на объекте sun_1 в панели Layout. В вывалившемся меню выберете пункт '''Delete'''. Картинка исчезнет. Эквивалентно, объект можно удалить, кликнув на него в дереве и нажав на клавиатуре кнопку Del.

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

В качестве упражнения, поместите на сцену две картинки. Одну их них в дереве панели Layout перетащите на другую, сделав её подобъектом. Потаскайте мышкой по сцене обе картинки. Обратите внимание, что подобъект перемещается независимым образом. В тоже время при таскании корневого объекта начнут двигаться они оба. Координаты подобъекта задаются относительно его владельца. Поэтому при перемещении корневого объекта вместе с ним движутся и все подобъекты.
Теперь удалите сразу оба объекта, сделав активным на дереве корневой объект и нажав затем на кнопку Del (или при помощи правой кнопки мыши).

=== Другие объекты ===

На нашей сцене кроме картинок находятся еще два типа объектов - это кнопка и машина состояний. С кнопками мы будем работать уже на следующем [[Создание экранов, сцен. Работа с кнопками|уроке]], а машинам состояний посвящены сразу 3 урока, начиная с [[Checkbox как машина состояний|третьего]]. Пока наша задача состоит в их поиске в дереве проекта и первым знакомством с их свойствами.

Кликнем на стрелочку слева от объекта move в панели Layout. Под ним раскроется подобъект с именем '''sun_1'''. Это кнопка. Сам же объект move является машиной состояния. Кроме указания соответствующего типа в панели Properties (посмотрите на него!), тип объекта помечается иконкой на дереве. Для машины - это шестеренка, а кнопка - это кнопка :).

Кликнув на объект '''sun_1''', рассмотрим его свойства в панели Properties. Кроме уже знакомых по картинке (тип=image) полей, появился ряд других. Например, раскроем стрелочку свойства "'''внешний вид'''". Там находятся несколько полей, из которых заполнены '''up''' и '''down'''. В них заданы имена картинок для изображения отжатой и нажатой кнопки. Как они там оказались выясним в следующем [[Создание экранов, сцен. Работа с кнопками|уроке]].

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

[[файл:Mov prop.png]] [[файл:Move.png]]

Эта машина состояний, которая имеет одно состояние. В нём задана последовательность команд, которые управляют её движением по экрану. Сама машина в данном случае является невидимым объектом. Однако, она содержит в качестве подобъекта кнопку '''sun_1'''. Поэтому, когда машина move бегает по экрану, вместе с ней движется и кнопка. Клики на себя принимает кнопка, меняя при этом свой внешний вид. Несложно догадаться, что в результате получается солнышко.

== Упражнения ==

* Найдите две машины состояний, связанные со слонёнком, и попробуйте догадаться как они работают (ответы в следующих уроках).
* Откройте демонстрационный проект, находящийся в папке AppSaluteСreator/Projects/Demo/demо. Поиграйтесь с ним.
* Снова откройте учебный проект c которым мы работали (AppSaluteСreator/Projects/Lessons/lessons). Он нам понадобится для следующего урока.
* Затем переходите на [[Создание экранов, сцен. Работа с кнопками|урок 2]].

----
{| width="100%"
| width="40%"|[[Learning|Оглавление]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Создание экранов, сцен. Работа с кнопками|Урок 2]]
|}

[[Category:Learning]]

Создание экранов, сцен. Работа с кнопками

2018-02-02T15:02:39Z

Anecheporenko:

{| width="100%"
| width="40%"|[[Введение в AppSalute Сreator|Урок 1]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Checkbox как машина состояний|Урок 3]]
|}
----
{{TOC right}}
----
'''Цель:'''
научиться создавать экраны, сцены, кнопки и текст.

'''Задачи:'''
* Создать три экрана с одной сценой на каждом из них.
* На экраны поместить кнопки, перехода между экранами.
* Создать надпись на экране.
* Изучить условные переходы по экранам.
* Добавить свою картинку в редактор ресурсов и на сцену.

== Создание экранов и сцен ==

Запускаем SceneEditor и загружаем проект lessons (см. предыдущий [[Введение в AppSalute Сreator|урок]]). Кликаем на первый экран проекта (lesson_1) в панели Layout мышью и нажимаем её правую кнопку. В выпадающем меню выбираем "''Создать экран после текущего элемента''":

[[Файл:lesson2_screen.png]]

В выскочившем диалоговом окошке вводим имя экрана: '''lesson_2_Main''' (помним об осмысленности имен объектов?) и нажимаем Ok. В результате этот экран появится в дереве проектов (Layout).

[[Файл:lesson2_layout1.png|right]]
Повторяя эти действия, создадим еще 2 экрана с именами '''lesson_2_Sky''' и '''lesson_2_Moon'''. При этом, каждый раз правую кнопку мыши необходимо нажимать на предыдущем экране. Если же произошла ошибка, экраны всегда можно перетащить по дереву проекта или удалить, как это было описано в предыдущем [[Введение в AppSalute Сreator|уроке]].

Теперь в каждом экране необходимо создать по одной сцене. Назовем их одинаково: '''stg_main'''.
Приставка stg обозначает stage (сцена). Впрочем, она необязательна так как тип объекта в дереве помечается соответствующей иконкой. То, что сцены имеют одинаковые имена не существенно, так как в дереве они находятся внутри разных экранов, имена которых говорят о назначении всего, что в них находится.

[[Файл:lesson2_layout2.png|right]]
Создание сцены происходит аналогично созданию экрана. Кликнем мышкой на экран '''lesson_2_Main''' и нажмем её правую кнопку. В выпавшем меню выбираем "''Создать сцену в текущем элементе''" и в появившемся окошке вводим имя stg_main, соглашаясь с размерами сцены (в пикселях), предложенными по умолчанию. Повторям эту операцию, нажимая последовательно на экраны '''lesson_2_Sky''' и '''lesson_2_Moon'''. В результате получится панель проекта, приведенная на картинке справа.

Таким образом, проект этого урока будет состоять из трех экранов Main, Sky и Moon. Заметим, что над ними остался экран первого урока. Он нам не будет мешать. Постепенно в этом проекте добавятся экраны других уроков. Напомним, что при запуске вьювера мы указываем какой экран начать проигрывать. Если с этого экрана переходов на другие экраны нет, то вьювер не относящиеся к делу экраны не заметит.

Чтобы завершить процесс подготовки сцен, поместим на каждую из них соответствующий фон.
Для этого открываем редактор ресурсов [[Файл:Resourse_editor.png]], в котором кликаем на папку lesson_2. Последние три картинки bg_1, bg_2, bg_3 по очереди [[Введение в AppSalute Сreator|перетаскиваем]] на сцены в соответствующих экранах. Соответствие между фоном и экраном предлагается определить в качестве упражнения :).

== Создание кнопок ==

Создадим теперь [[Button|кнопку]]. Для этого сделаем активной сцену '''stg_main''' в экране lesson_2_Main.
Затем откроем редактор ресурсов и перетащим на сцену картинку '''arrow_rt_norm''' из папки lesson2. Эта картинка появится на сцене и в дереве проекта под картинкой фона bg_3.
При помощи мышки, разместим её на сцене в правом нижнем углу фона.

Чтобы превратить картинку в кнопку, необходимо в её свойствах (Properties) поменять тип
с image на '''button'''. Для этого кликаем справа от поля '''тип''' и в появившейся выпадалке выбираем button. Стоит обратить внимание на разнообразие игровых объектов. Часть из них будет описана в этих уроках, описание остальных можно найти в [[Absolutist_Framework|документации]].

Следуя правилам хорошего тона переименуем объект, заменив его имя arrow_rt_normal на '''next_scr''' (следующий экран). Для этого редактируем поле имя в панели свойств (нажав после окончания Enter) или дважды кликаем в панели проекта (Layout).

Откроем в свойствах кнопки группу '''внешний вид'''. Первые два поля '''up''' и '''down''' соответствуют картинкам изображающим отжатую и нажатую кнопку. Поле up уже заполнено картинкой arrow_rt_normal, которую мы превращали в кнопку. Зададим картинку для кнопки в состоянии нажатия.
Для этого кликаем справа от поля '''down''', чтобы оно стало редактируемым.
Затем снова открываем редактор ресурсов и хватем картинку arrow_rt_down из папки lesson_2.
Однако тащим её не на область редактирования сцены, а непосредственно в поле '''down''' свойства группы "внешний вид" кнопки next_scr. После того как мышка отпущена, кликаем в произвольное место вне поля редактирования, заканчивая тем самым процесс:

[[Файл:lesson_2_btn_dn.png|600px]]

Обратим внимание, что поле редактирования должно быть активно в момент перетаскивания в него картинки. Поэтому, если редактор ресурсов еще не запущен, его необходимо сначала запустить, разместить поверх стальных окон (Always on Top), а только затем кликать в значение поля down и тащить в него картинку.

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' Имена картинок графических ресурсов в полях свойств объектов не являются простыми текстовыми надписями. С ними связывается конкретный файл из редактора ресурсов. Поэтому пытаться редактировать их руками не стоит. Эти поля нужно заполнять при помощи мышки, так как это описано выше.
</blockquote>

Чтобы кнопка выполнила полезную функцию, отредактируем у неё ещё одно поле "'''перейти на'''".
При клике справа от него выпадет список из доступных в проекте экранов. Выберем экран lesson_2_Sky.

Теперь можно протестировать, что у нас получилось.
Проверяем, что в дереве проекта активным является экран lesson_2_Main.
Сохраняем изменения в проекте [[Файл:00 8.png]] и запускаем вьювер [[Файл:00 9.png]].
Нажимая на кнопку, убеждаемся, что происходит заданный переход из одного экрана на другой.
Обращаем внимание, также на изменение вида кнопки в момент клика на неё мышки.

Как видно из списка свойств, кроме картинок up и down у кнопки есть еще поля для картинок '''over''' и '''disable'''. Первое соответствует внешнему виду в момент когда мышь находится над кнопкой (но не нажата). Если игра пректируется для мобильных устройств (телефоны, планшетники), то обычно это поле не используется. Внешний вид disable (недоступна) соответствует виду кнопки, когда в неё нельзя кликать.

== Навигация по экранам ==

Повторим проделанные выше действия с двумя оставшимися экранами (lesson_2_Sky, lesson_2_Moon) этого урока. Поместим на lesson_2_Sky кнопку, по памяти, не подглядывая в предыдущие инструкции. Пусть при клике на неё происходит переход на экран lesson_2_Moon.

Третью кнопку на экране lesson_2_Moon мы создадим новым методом.
Для этого наступим в дереве на уже существующую кнопку и нажмем правую кнопку мыши.
В выпавшем меню выберем пункт "'''Copy'''". Можно также не пользуясь меню, при активном объекте на клавиатуре нажать клавиши '''Control''' и не отпуская её '''C'''.

[[Файл:lesson_2_copy.png]]

Теперь кликнем на stg_main экрана lesson_2_Moon и нажав правую кнопку мыши выберем пункт меню "''Paste into current object''". Кнопка появится на экране и в дереве проекта.

При копировании объекты сохраняют свои свойства.
Поэтому в скопированной кнопке необходимо изменить поле "'''перейти на'''".
Давайте зациклим навигацию, сделав переходы:
Main -> Sky -> Moon -> Main -> ...

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

== Работа с текстом ==

Объекты можно создавать на сцене не только при помощи таскания картинок из
редактора ресурсов, а и прямо в дереве проекта.
Сделаем активным экран lesson_2_Sky и кликнем в нём на последний в его ветке дерева
объект (кнопка next_scr). Нажмём правую кнопку мыши и выберем пункт меню
"''Создать объект после текущего элемента...''".

[[Файл:lesson_2_create.png]]

После этого в дереве появится
объект с именем '''new_object''' типа image.
Впрочем непосредственно на сцене мы ничего не увидим кроме зеленой точки. Чтобы текст можно было перемещать, ему нужно задать ненулевой размер. Сделать это можно, отредактировав его свойства '''w''' (ширина) и '''h'''(высота) в разделе свойств объекта '''"размер"'''.После этого он будет отображаться как пустая зеленая рамка.
Тем не, менее схватимся за неё и расположим прямоугольник примерно по середине фона.
Если при попытке перетащить рамку, Вы промахнулись, то вместо неё сдвинется фон.
В этом случае, поставьте его на место и постарайтесь лучше прицелиться при хватании за рамку.

Начнем теперь менять свойства созданного объекта:
* Зададим ему тип '''[[Text|text]]''' (в списке типов его возможно придется поискать в самом низу).
* Поменяем имя, например, на '''txt_first'''.
* В поле '''текст''' введем: "''И сказал Бог: да будет свет. И стал свет.''"

<blockquote>
[[файл:Ok.png|right|32px]]
'''Совет''': для ускорения поиска нужного типа в списке типов можно нажать первую букву имени типа (t). Если пометка стала на нужное место, нажмите Enter.
</blockquote>

Сохраним проект и запустим вьювер. Получившийся результат выглядит не очень красиво.
Текст вписался в рамку созданного объекта и оказался сильно сжатым.
Чтобы придать ему более читаемый вид закроем вьювер и изменим у txt_first
в панели Properties ещё несколько свойств:
* размер '''w''' = 400 (это новая ширина области в которую вписывается текст);
* форматирование '''отступ''' = 10 (это расстояние в пикселях между строчками).
Можно поэкспериментировать с другими параметрами свойств, читая их краткое описание в хинте, появляющемся при наведении мышки на имя свойства.

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание:''' Описанный выше способ задания текста нельзя применять в реальных проектах. Обычно игра является мультиязычной. Поэтому, все тексты создаются в редакторе текстовых ресурсов, где переводятся на несколько языков. Соответствующий текстовый идентификатор перетаскивается аналогично картинкам в поле текстID.
</blockquote>

Более подробное описание редактора текстовых ресурсов и работу с объектом text
мы рассмотрим позже в соответствующем [[Редактор текстовых ресурсов|уроке]].
А пока вернемся к нашим кнопкам.

== Логика переходов ==

Пока кнопки, осуществлявшие переходы на следующие экраны, вели себя достаточно однообразно.
Придадим нашему приложению небольшую непредсказуемость.
Для этого активизируем второй экран (lesson_2_Sky) и кликнем на его объект '''next_scr'''.
В панели свойств этой кнопки на свойстве "'''перейти на'''" нажмём правую кнопку мыши.
В появившемся меню выберем пункт "''если был экран''".
В результате, ниже поля "перейти на" появится пара полей, объединенных свойством "если был экран".
В первом поле группы "'''был экран'''" выберем экран lesson_2_Moon, а во втором поле "'''перейти на'''" - экран lesson_2_Main:

[[файл:lesson2_cond.png]]

Активизируем в дереве проектов первый экран этого урока (lesson_2_Main),
сохраним проект и запустим вьювер. Кликая на кнопки следующего экрана,
мы первый раз пролистаем их все. Повторим этот процесс ещё раз.
Когда мы окажемся второй раз на экране с небом (lesson_2_Sky), кнопка следующего экрана
перебросит нас не на третий экран (lesson_2_Moon), как раньше, а на первый (lesson_2_Main).
После этого все время будут происходить переходы только между первым и вторым экранами.

Логика получившегося результата состоит в следующем.
Свойство '''перейти на''', находящееся в панели Properties по умолчанию,
является безусловным переходом. Если в этом поле задан конкретный экран, при клике на кнопку вьювер отправится именно туда. Однако, этот переход происходит только в тех случаях, если не заданы дополнительные условные переходы (или условие срабатывание не выполняется ни для одного из этих переходов). Иными словами, вьвер сначала попытается совершить условный переход, для которого выполнилось условие срабатывания. Если такого перехода не найдется, будет выполнен переход по умолчанию. Условные переходы мы добавляем динамически в свойства кнопки при помощи правой кнопки мыши.
В нашем случае, добавленные два поля звучат так:
Если уже '''был экран''' lesson_2_Moon, то надо '''перейти на''' экран lesson_2_Main.

Пусть проект был запущен с первого экрана lesson_2_Main. На нём мы кликнули на кнопку и оказались на следующем экране lesson_2_Sky. Кнопка этого экрана содержит условный переход. Однако, первый раз он не срабатывает, так как на экране lesson_2_Moon мы ещё не были (и соответствующее условия срабатывания не выполнено). В результате, при клике на кнопку выполняется переход по умолчанию '''перейти на''' lesson_2_Moon. Когда пролистав по кругу все экраны, мы снова оказываемся на lesson_2_Sky, условный переход уже срабатывает (мы были на экране lesson_2_Moon). Поэтому, мы отправляемся на первый экран lesson_2_Main.

Как мы видим, кнопка может выполнять достаточно сложные логические функции.
У неё много динамически добавляемых полей. Они позволяют менять другие объекты, совершать некоторые служебные действия и т.д.

== Добавление картинок в ресурсы ==

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

Делается это очень просто. В редакторе ресурсов станьте мышкой на имя папки с текущем уроком (lesson_02)
и нажмите правую кнопку. В появившемся меню выберете пункт "''Add Images...''".
Затем, найдите нужную картинку у себя на диске:

[[файл:lesson_2_addImg.png]]

Она добавится в графические ресурсы и появится в списке доступных картинок
в редакторе ресурсов. Теперь можно смело перетаскивать её на сцену.

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

== Упражнения ==

* Добавьте на все экраны кнопку в виде стрелочки влево (поместив её в левом нижнем углу). Активнее используйте копирование объектов.
* Задайте соответствующие переходы между экранами (листание в обратную сторону).
* Добавьте на последний экран любой на Ваш выбор текст; отформатируйте его.
* Сделайте логику перехода по экранам, при которой после первого экрана мы попадаем сразу на третий, если уже был второй.
* Загрузите в проект свою любимую картинку или фотографию и разместите её на любом из созданных в этом уроке экране. Если она окажется слишком большой, вспомните о модификаторах масштаба.

=== Упражнения ===

В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) после запуска видео через 10 секунд оно автоматически становилось на паузу;

b) чтобы видео запускалось сразу после загрузки экрана.

== Эффекты с Альфа каналом ==

В этом уроке рассмотрим эффект с альфаканалом на примере смены экранов.

1. Откройте первый экран из урока 2.

2. Выделите экран и посмотрите на его свойства. Вы увидите пункт '''анимация переходов'''.

3. Выставьте тип перехода и время растворения как показано на рисунке.

[[Файл:Lesson9_16.jpg‎]]

4. Сохраните проект и проверьте переход с этого экрана во viewer. Экран сменяется другим экраном путем плавного растворения по альфе.

=== Упражнения ===

В этом уроке мы поставили время растворения 2 секунды. Таким образом наша смена экранов выглядит как слайд-шоу. В большинстве случаев это большое время. Путем подбора времени растворения сделайте смену экранов наиболее привлекательной. Сделайте то же самое для двух остальных экранов.

----
{| width="100%"
| width="40%"|[[Введение в AppSalute Сreator|Урок 1]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Checkbox как машина состояний|Урок 3]]
|}

[[Category:Learning]]

Работа с эффектами

2018-02-02T15:02:12Z

Anecheporenko:

{| width="100%"
| width="40%"|[[Настройка миниигр|Урок 8]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
|}
----
{{TOC right}}

'''Цель:''' изучить возможности редактора на примере применения различных эффектов.

'''Задачи:'''
* Создать экран, на котором можно освоить работу с патиклами (объект flyer) и масками ;
* Создать экран и настроить просмотр Видео
* Настроить появление сцены с проявлением по альфе, переходи на следующий экран с проявлением по альфе
* Настроить фоновую музыку.

== Партиклы (Particles) ==

'''Создание экрана и сцены в игровом проекте'''

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.3, создать экран Lesson_09.

4. В экране Lesson_09 создать новую сцены 09 , в которую (через Resources Editor) добавить графические ресурсы из папки Sources\Lesson_09 (см. подготовка к работе «Создание проекта»).

[[Файл:Lesson9_1.jpg|350px]]

'''Настройка объектов, работа с маской'''

В этом уроке поработаем над использованием объекта flyer (Particles). Параллельно с этим научимся пользоваться хитрым приемом "маска". В редактор ресурсов вы подгрузили уже знакомую вам графику "лунного пейзажа" и две части слоненка.

1. Разместим их на сцене как показано на рисунке.

[[Файл:Lesson9_2.jpg|350px]]

2. Сделаем из головы слоненка машину состояний. Голова должна вертеться из стороны в сторону с интервалом в 1 секунду. Запишем в состояниях машины следующие параметры.

[[Файл:Lesson9_3.jpg|350px]]

3. Посмотрите результат с помощью программы viewer. Слоненок будет мотать головой.

4. Теперь мы хотим, чтобы клик на слоненка вызывал какое-то действие, например, чтобы шел снег. Можно сделать из туловища машину состояний, но туловище маленькое, а нам нужен именно весь слоненок. Для этого нам понадобится маска. Из редактора ресурсов перетащим на сцену графический ресурс mask и переместим ее на слоненка. Маска очень маленькая, чтобы закрывать всего слоненка, поэтому воспользуемся модификаторами. Увеличим маску и сделаем ей прозрачность (alpha) 0,01.

[[Файл:Lesson9_4.jpg|350px]]

На сцене вы можете увидеть вокруг слоненка рамку от маски. Саму маску не видно из-за прозрачности. Стоит обратить внимание на то, что прозрачность мы сделали 0,01. Если бы она была равна 0, то маска не воспринимала бы клик, а была бы полностью прозрачной.

5. Как вы уже догадались, маска у нас будет машиной состояний, включающей другой объект. Этим другим объектом будет flyer. Флаеры (патиклы) используются для создания эффектов, когда один маленький объект размножается и совершает какие-либо действия, при этом все его частички ведут себя подобно.

Перетащим из редактора ресурсов на сцену графический ресурс snow и разместим его на сцене посередине по оси x (x=0) и вверху, немного за сценой (y=-320). Сделайте объекту тип flyer.

6. Параметры флаера настроим немного позже, а сейчас вернемся к нашей маске. Сделайте маске тип machine. И введите следующие параметры.

[[Файл:Lesson9_5.jpg|350px]]

В первом состоянии (начальном) машина передает объекту snow состояние end, а во втором - beg. У флаера есть два состояния end и beg, в которых он выключен и включен соответственно. Чтобы без нашего желания флаер не запускался, в свойствах snow в поле "состояние" запишем его начальное состояние end.

[[Файл:Lesson9_6.jpg]]

Подробно о свойствах флаера можно почитать [[Flyer|тут]]. Для того чтобы из него получился снег запишите следующие свойства.

[[Файл:Lesson9_7.jpg]]

7. Сохраните проект и проверьте его выполнение в программе viewer. При клике на слоненка начинает идти снег, а при повторном клике снег исчезает.

8. Следующей нашей задачей будет создание разлетающегося кольца из звездочек вокруг желтой звезды на сцене, при клике на эту звезду. Представьте, что эта сцена у вас сейчас на экране мобильного телефона, а вам нужно дотронуться до звезды. Звезда очень маленькая, как следствие - по ней трудно попасть. Здесь нам на помощь опять явится маска. Снова перетащите ресурс mask на сцену из редактора ресурсов, переименуйте его в star_mask и поместите точно над звездой.

9. Растягивать маску не нужно, она таких размеров, как нам нужно. В свойствах star_mask в модификаторах задайте alpha=0,01.

10. Добавьте на сцену ресурс star из редактора ресурсов и поместите его точно на звезду.

[[Файл:Lesson9_8.jpg]]

11. Объекту star_mask нужно изменить тип на machine, а объекту star на flyer.

[[Файл:Lesson9_9.jpg]]

12. Задайте машине star_mask следующие состояния.

[[Файл:Lesson9_10.jpg]]

13. Флаеру star пропишите следующие свойства.

[[Файл:Lesson9_11.jpg]]

14. Сохраните проект и проверьте его выполнение в программе viewer. При клике на звезду флаер будет вести себя как взрыв сверхновой (или салют).

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_09, создать новый экран Lesson_09.1

2. Создать новую сцену с названием .

3. Скопировать все объекты из сцены 09 (экрана Lesson_09).

4. Вставить скопированые объекты в новую сцену (экрана Lesson_09.1).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) снег шел при клике на любую область экрана;
b) изменить параметры флаера snow таким образом, чтобы он выглядел как дождь;
с) поиграйтесь с параметрами флаера, чтобы прочувствовать зависимость поведения флаера от его параметров.

== Использование Видео ==

'''Создание экрана и сцены в игровом проекте'''

1. Создайте еще один экран Lesson_9.2 после экрана Lesson_9.1.

2. Добавьте сцену 09.

3. Загрузите на сцену ресурсы к этому уроку из редактора ресурсов (bg, play).

'''Настройка объектов, работа с видео'''

1. Создайте на сцене новый объект и сделайте ему тип video. Переименуйте его в video.

[[Файл:Lesson9_12.jpg|350px]]

2. Из ресурса play сделайте машину состояний. Пропишите машине следующие состояния.

[[Файл:Lesson9_13.jpg]]

3. Объекту video выставляем следующие параметры.

[[Файл:Lesson9_14.jpg]]

Обратите внимание, что id видео перетаскивается мышкой из редактора ресурсов.

4. Сохраните проект и посмотрите результат в программе viewer.

== Звуки ==

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

1. Вернитесь к экрану Lesson_09.

2. Создайте на сцене 09 новый объект и назовите его music.

[[Файл:Lesson9_12.jpg]]

3. Сделайте из объекта music машину состояний и пропишите следующие состояния.

[[Файл:Lesson9_15.jpg]]

Согласно этих состояний, сразу после запуска экрана начинает играть музыка music_gaming_04. Через 60 секунд после начала машина идет в состояние stop, где дается команда mus_stop и проигрывание музыки останавливается. Музыку можно не останавливать, тогда она будет играть по кругу.

=== Упражнения ===

В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) после остановки проигрывания музыки можно кликом на слоненка снова ее запустить;

b) чтобы музыка останавливалась кликом на слоненка.

----
{| width="100%"
| width="40%"|[[Настройка миниигр|Урок 8]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
|}

[[Category:Learning]]

Настройка миниигр

2018-02-02T14:52:22Z

Anecheporenko: /* Настройка объектов */

{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}
----
{{TOC right}}

'''Цель:''' изучить настройки объектов, реализующих различные минигры.

'''Задачи:'''
* создать уровень игры с объектом, содержащим тип механики Puzzle
* создать уровень игры с объектом, содержащим тип механики Patchwork

== Puzzle ==

=== Создание экрана и сцены в игровом проекте ===

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_07.1, создать экран Lesson_08.

[[Файл:08 1.png]]

4. В экране Lesson_08 создать новые сцены 08 и Buttons, в которую (через ResourcesEditor) добавить графические ресурсы (Level_01, hint_normal в папку 05 и hint_normal, ico_R_normal2 в папку Buttons) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»).

[[Файл:08 2.png]] [[Файл:08 3.png]]

=== Настройка объектов, создание машин состояний ===

1. В сцене 08 изменить название графического ресурса hint_normal на applause и в общих настройках элемента удалить саму графику через модификаторы → res.

[[Файл:08 4.png]]

2. Графическое изображение level_01 перевести в тип [[Puzzle|puzzle]] и установить такие настройки:

[[Файл:08 5.png]]

3. Объект applause перевести в тип машина и прописать ему состояния on и off.

4. В состоянии on добавить команду play (проиграть звук) и в списке команды выбрать snd (короткий звук), подгружаемый с помощью ResourcesEditor из папки ресурсов Level_08;

[[Файл:08 6.png]]

5. Создать новое состояние с именем off. В общих настройка свойства элемента изначально установить состояние off.

[[Файл:08 7.png]] [[Файл:08 8.png]]

6. Далее перейти к сцене Buttons, перевести графические объекты hint_normal, ico_R_normal2 в тип button, в свойстве элемента установить такие настройки:

[[Файл:08 9.png]] [[Файл:08 10.png]]

''Кнопка R (переиграть)'' — кнопка, запускающая игру Puzzle сначала. В общих настройках свойства элемента устанавливаем, в какое начало должна возвращать кнопка (в нашем случае перейти на экран Lesson_08).Для данной игры, мы сделали переход на экран <tt>Lesson_08</tt>, который запускает игру сначала. Но в дальнейшем, чтобы не переводить все объекты в начальное состояние правильнее будет, в графе '''«изменить состояние»''' выбрать объект <tt>Level_01</tt> и указать ему состояние <tt>mix</tt>, которое означает, что игра возвращается в состояние перемешивания картинок, а не запускает всю игру заново.

7. В объекте (кнопке) hint_normal нажать правой кнопкой и выбрать изменить состояние объекта → потом выбрать объект level_01 и вписать состояние hint, которое означает, что при нажатии кнопки, в качестве подсказки, игра покажет картинку в собранном виде.

[[Файл:08 11.png]] [[Файл:08 12.png]]

''hint'' – кнопка, реализующая подсказку на экране поиска.

8. Вернуться на сцену 08 к объекту level_01 и в общих настройках свойства элемента изменить состояние объекта → выбрать объект applause и вписать состояние on.

[[Файл:08 13.png]]

9. Проверить выполнение задачи с помощью проигрывателя сцен Viewer.

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_08, создать новый экран Lesson_08.1

2. Создать новые сцены (с названием 08.1 и Buttons).

3. Скопировать все объекты из сцены 08 (экрана Lesson_08) и Buttons (экрана Lesson_08).

4. Вставить скопированые объекты в новую сцену 08.1 и Buttons (экрана Lesson_08.1).

[[Файл:08 15.png]]

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) заменить звук аплодисментов другим аудиофайлом, имеющимся в базе ресурсов;

b) в пазле изменить количество разбиваемых частей на шесть (3х2), добавить сетку, изменить перестановку ячеек на смешивание по alpha, изменить время смешивания на 500 миллисекунд;

c) при нажатии hint (подсказки) изменить время показа подсказки на 2 секунды, изменить время финального показа пазла на 3 секунды, установить время закрытия пазла 500 миллисекунд.

6. Сделать счетчик подсказок, используя объект '''[[Store|Store]]''' создать возможность совершать покупки подсказок за реальные деньги.

Щелкнув правой кнопкой мыши по экрану Lesson_08.1 создадим новый экран '''lessons_8_1_1'''. Добавим в него сцены str_8_1 и Button_8_1. В сцену str_8_1 поместим объекты из экрана Lesson_08.1: level_01, applause; оставим их без изменения. В сцену Button_8_1 скопируем из Lesson_08.1 кнопки hint_normal и ico_R_normal2 и создадим новый объект, поменяв ему тип на '''counter''' (счетчик) и названия на '''hint'''. Добавим ресурс из базы ресурсов — анимацию file1 (brown_big). Счетчик hint будет считывать купленные подсказки.

[[Файл:Hint counter na max.png]]

В hint_normal добавим подобъект, сделаем его машиной и назовем '''hint_m'''.

Щелкнув правой кнопкой мыши на сцену Button_8_1 создадим новые сцены store и error, которые, соответственно, будут предназначены для совершения покупок — начисления подсказок и окна с ошибкой при невозможности купить подсказку.

В сцену store добавим две машины: '''buy''' и '''store'''; в error - машину '''error'''.

[[Файл:8 1 1 .PNG]]

Для машины buy зададим состояния, при котором значении параметра hint=1, то есть она начисляет подсказку:

[[Файл:Buy na max.png]]

Соответственно в машине store зададим считывания со счетчика и прозрачность экрана:

[[Файл:Store.PNG]]

Машина error будет отвечать за вывод ошибки при неудачной покупке, то есть задает прозрачность экрана с ошибкой

[[Файл:Error.PNG]]

Вернемся к машине hint_m сцены Button_8_1 и пропишем для нее состояния. Машина отвечает за начисление подсказки при удачной покупке

[[Файл:Hint m.PNG|800px]]

'''Совершение покупки'''

Для того что бы покупку можно было совершить необходимо задать в глобальных свойствах возможность совершения покупки. Для этого на сцене в глобальном экране opt добавим новый элемент, которому изменим тип на store. В свойствах объекта store кликнем правой кнопкой мыши на свойстве wallet, вставляем новое свойство — '''in-app покупка'''. Добавляем поля для покупки: внутренний id, и выбираем расходуемая.

[[Файл:Store2.PNG]]

'''Описание объекта Store'''

Объект '''Store''' необходим для описания InApp покупок (позволяют продавать отдельные бонусы, паки и т.п.) в игре.

Основные параметры объекта Store

''id покупки'' – внутренний id покупки.

''Расходуемая'' – 1 – покупка расходуемая, 0 – покупка раз и навсегда, если параметр не указан, по-умолчанию покупка – одноразовая.

''объект (restore)'' – объект - Слушатель восстановления покупки. Этому объекту будет сообщено об успехе восстановления этой покупки покупки.
состояние (restore) – это состояние будет установлено объекту при успешном восстановлении этой покупки.

'''Для того, чтобы объект Store работал во Вьювере, нужно подкорректировать файл app.icf'''

1. Найти файл app.icf в папке с вашим проектом.

2. Открыть его и найти тег [Game].

3. В теге Game добавить строку purchaseEverything=1.

4. Сохранить файл

<pre>

[Game]
purchaseEverything=1
DispFixRot="Landscape"
# comments and whitespace stripped by deployment tool
debug="Absolutist-2253"
show_build_date=1
AppTitle="Viewer"
DebuggerIP="127.0.0.1"
DebuggerPort=5322

</pre>

'''Оформление'''

Теперь перейдем к оформлению. Для того что бы на экране появлялось окно с предложением о покупке подсказке необходимо его создать. В начальный момент оно должно быть невидимым и прокликиваем, это состояние задано в машине store. Создадим в ней 5 подобъектов.

1.1. Первые два переименуем в '''black''' и '''rec''', изменим им тип на '''[[Rectangle|Rectangle]]'''.

Откроем объект black, пропишем ему свойствах, оставив его пустым рамку, и цвет фона

[[Файл:Black.PNG]]

Для объекта rec зададим рамку и текстуру заливки. Для этого из базы ресурсов мышкой перетащим соответствующие элементы. Ресурсы для графики находятся в предыдущем уроке. Чтобы прямоугольник отображался правильно, задайте ему ненулевые размеры.

[[Файл:Rec.PNG]]

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

1.2. Третьему элементу поменяем тип на text с текстом

[[Файл:Text.PNG]]

1.3. Четвертый и пятый объекты сделаем кнопками, и назовем их '''ok''' – купить подсказку, '''no''' – отказаться от покупки.

Для кнопки ok из базы ресурсов выберем внешний вид

[[Файл:Ok1.PNG]]

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

[[Файл:Ok2.PNG]]

Аналогично поступим с кнопкой no. Добавим графический ресурс и свойство «изменить состояние объекта», которое будет закрывать окно с предложением о покупке

[[Файл:No1.PNG]] [[Файл:No2.PNG]]

2. Таким же само сделаем со сценой error. В ней создадим четыре объекта: два rectangle: '''rec_error''' – пустой, '''black_error''' — оформленный в такую же рамку; кнопку '''buy''', которая будет делать активным состояние error; текстовый объект '''text_error''' с текстом «error!»

[[Файл:Buy1.PNG]]

Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим вьювер.

[[Файл:Снимок1.PNG]]

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

== Patchwork ==

=== Создание экрана и сцены в игровом проекте ===

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.1, создать экран Lesson_08.2.

[[Файл:Lesson8_1.jpg|right]]

4. В экране Lesson_08.2 создать новую сцену 08, в которую (через ResourcesEditor) добавить графические ресурсы (bg_game, panel_down, btb_replay_normal) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»). В редактор ресурсов добавить графику нашего будущего Patchwork: level_17, level_17_mask.

=== Настройка объектов ===

1. Создадим на сцене 08 еще два объекта. Для этого нажмем правой кнопкой мыши по сцене и выберем "Создать объект в текущем элементе".

[[Файл:Lesson8_2.jpg]]

2. Переименуем один из созданных объектов в Patchwork, а другой в table.

[[Файл:Lesson8_3.jpg]]

[[Файл:Lesson8_4.jpg|right]]

3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.
4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 100х100 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

[[Файл:Lesson8_5.jpg]]

Кнопку поместим в левый нижний угол. Добиваемся такого расположения объектов, как показанно на рисунке.

[[Файл:Lesson8_6.jpg]]

5. Настроим наши объекты. Для кнопки btb_replay_normal в поле "перейти на" укажите текущий экран Lesson_8.2.

[[Файл:правка_намба_1.png|200px]]

Для таблицы измените следующие параметры

[[Файл:lesson8_table_setup.png|200px]]

Для Patchwork устанавливаем следующие настройки. Обратите внимание, что поля "карт.спереди" и "шаблон" заполняются перетаскиванием графического ресурса из редактора ресурсов.

[[Файл:Lesson8_9.jpg]]

6. Для корректной работы вашего Patchwork необходимо, чтобы таблица находилась выше Patchwork по дереву объектов.

[[Файл:Lesson8_10.jpg]]

7. Проверьте выполнение задачи с помощью проигрывателя сцен Viewer.

[[Файл:Lesson8.3.Fin.png]]

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_08.2, создать новый экран Lesson_08.3

2. Создать новую сцену с названием game.

3. Скопировать все объекты из сцены 08 (экрана Lesson_08.2).

4. Вставить скопированые объекты в новую сцену game (экрана Lesson_08.3).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) заменить картинку пэчворка и маски на другую, имеющуюся в базе ресурсов;

b) изменить настройки кнопки рестарта таким образом, чтобы не переходить на экран Lesson_08.3, а сразу передавать пэчворку состояние mix.
----
{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}

[[Category:Learning]]

Файл:Lesson8.3.Fin.png

2018-02-02T14:52:05Z

Anecheporenko:

Настройка миниигр

2018-02-02T14:47:26Z

Anecheporenko: /* Настройка объектов */

{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}
----
{{TOC right}}

'''Цель:''' изучить настройки объектов, реализующих различные минигры.

'''Задачи:'''
* создать уровень игры с объектом, содержащим тип механики Puzzle
* создать уровень игры с объектом, содержащим тип механики Patchwork

== Puzzle ==

=== Создание экрана и сцены в игровом проекте ===

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_07.1, создать экран Lesson_08.

[[Файл:08 1.png]]

4. В экране Lesson_08 создать новые сцены 08 и Buttons, в которую (через ResourcesEditor) добавить графические ресурсы (Level_01, hint_normal в папку 05 и hint_normal, ico_R_normal2 в папку Buttons) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»).

[[Файл:08 2.png]] [[Файл:08 3.png]]

=== Настройка объектов, создание машин состояний ===

1. В сцене 08 изменить название графического ресурса hint_normal на applause и в общих настройках элемента удалить саму графику через модификаторы → res.

[[Файл:08 4.png]]

2. Графическое изображение level_01 перевести в тип [[Puzzle|puzzle]] и установить такие настройки:

[[Файл:08 5.png]]

3. Объект applause перевести в тип машина и прописать ему состояния on и off.

4. В состоянии on добавить команду play (проиграть звук) и в списке команды выбрать snd (короткий звук), подгружаемый с помощью ResourcesEditor из папки ресурсов Level_08;

[[Файл:08 6.png]]

5. Создать новое состояние с именем off. В общих настройка свойства элемента изначально установить состояние off.

[[Файл:08 7.png]] [[Файл:08 8.png]]

6. Далее перейти к сцене Buttons, перевести графические объекты hint_normal, ico_R_normal2 в тип button, в свойстве элемента установить такие настройки:

[[Файл:08 9.png]] [[Файл:08 10.png]]

''Кнопка R (переиграть)'' — кнопка, запускающая игру Puzzle сначала. В общих настройках свойства элемента устанавливаем, в какое начало должна возвращать кнопка (в нашем случае перейти на экран Lesson_08).Для данной игры, мы сделали переход на экран <tt>Lesson_08</tt>, который запускает игру сначала. Но в дальнейшем, чтобы не переводить все объекты в начальное состояние правильнее будет, в графе '''«изменить состояние»''' выбрать объект <tt>Level_01</tt> и указать ему состояние <tt>mix</tt>, которое означает, что игра возвращается в состояние перемешивания картинок, а не запускает всю игру заново.

7. В объекте (кнопке) hint_normal нажать правой кнопкой и выбрать изменить состояние объекта → потом выбрать объект level_01 и вписать состояние hint, которое означает, что при нажатии кнопки, в качестве подсказки, игра покажет картинку в собранном виде.

[[Файл:08 11.png]] [[Файл:08 12.png]]

''hint'' – кнопка, реализующая подсказку на экране поиска.

8. Вернуться на сцену 08 к объекту level_01 и в общих настройках свойства элемента изменить состояние объекта → выбрать объект applause и вписать состояние on.

[[Файл:08 13.png]]

9. Проверить выполнение задачи с помощью проигрывателя сцен Viewer.

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_08, создать новый экран Lesson_08.1

2. Создать новые сцены (с названием 08.1 и Buttons).

3. Скопировать все объекты из сцены 08 (экрана Lesson_08) и Buttons (экрана Lesson_08).

4. Вставить скопированые объекты в новую сцену 08.1 и Buttons (экрана Lesson_08.1).

[[Файл:08 15.png]]

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) заменить звук аплодисментов другим аудиофайлом, имеющимся в базе ресурсов;

b) в пазле изменить количество разбиваемых частей на шесть (3х2), добавить сетку, изменить перестановку ячеек на смешивание по alpha, изменить время смешивания на 500 миллисекунд;

c) при нажатии hint (подсказки) изменить время показа подсказки на 2 секунды, изменить время финального показа пазла на 3 секунды, установить время закрытия пазла 500 миллисекунд.

6. Сделать счетчик подсказок, используя объект '''[[Store|Store]]''' создать возможность совершать покупки подсказок за реальные деньги.

Щелкнув правой кнопкой мыши по экрану Lesson_08.1 создадим новый экран '''lessons_8_1_1'''. Добавим в него сцены str_8_1 и Button_8_1. В сцену str_8_1 поместим объекты из экрана Lesson_08.1: level_01, applause; оставим их без изменения. В сцену Button_8_1 скопируем из Lesson_08.1 кнопки hint_normal и ico_R_normal2 и создадим новый объект, поменяв ему тип на '''counter''' (счетчик) и названия на '''hint'''. Добавим ресурс из базы ресурсов — анимацию file1 (brown_big). Счетчик hint будет считывать купленные подсказки.

[[Файл:Hint counter na max.png]]

В hint_normal добавим подобъект, сделаем его машиной и назовем '''hint_m'''.

Щелкнув правой кнопкой мыши на сцену Button_8_1 создадим новые сцены store и error, которые, соответственно, будут предназначены для совершения покупок — начисления подсказок и окна с ошибкой при невозможности купить подсказку.

В сцену store добавим две машины: '''buy''' и '''store'''; в error - машину '''error'''.

[[Файл:8 1 1 .PNG]]

Для машины buy зададим состояния, при котором значении параметра hint=1, то есть она начисляет подсказку:

[[Файл:Buy na max.png]]

Соответственно в машине store зададим считывания со счетчика и прозрачность экрана:

[[Файл:Store.PNG]]

Машина error будет отвечать за вывод ошибки при неудачной покупке, то есть задает прозрачность экрана с ошибкой

[[Файл:Error.PNG]]

Вернемся к машине hint_m сцены Button_8_1 и пропишем для нее состояния. Машина отвечает за начисление подсказки при удачной покупке

[[Файл:Hint m.PNG|800px]]

'''Совершение покупки'''

Для того что бы покупку можно было совершить необходимо задать в глобальных свойствах возможность совершения покупки. Для этого на сцене в глобальном экране opt добавим новый элемент, которому изменим тип на store. В свойствах объекта store кликнем правой кнопкой мыши на свойстве wallet, вставляем новое свойство — '''in-app покупка'''. Добавляем поля для покупки: внутренний id, и выбираем расходуемая.

[[Файл:Store2.PNG]]

'''Описание объекта Store'''

Объект '''Store''' необходим для описания InApp покупок (позволяют продавать отдельные бонусы, паки и т.п.) в игре.

Основные параметры объекта Store

''id покупки'' – внутренний id покупки.

''Расходуемая'' – 1 – покупка расходуемая, 0 – покупка раз и навсегда, если параметр не указан, по-умолчанию покупка – одноразовая.

''объект (restore)'' – объект - Слушатель восстановления покупки. Этому объекту будет сообщено об успехе восстановления этой покупки покупки.
состояние (restore) – это состояние будет установлено объекту при успешном восстановлении этой покупки.

'''Для того, чтобы объект Store работал во Вьювере, нужно подкорректировать файл app.icf'''

1. Найти файл app.icf в папке с вашим проектом.

2. Открыть его и найти тег [Game].

3. В теге Game добавить строку purchaseEverything=1.

4. Сохранить файл

<pre>

[Game]
purchaseEverything=1
DispFixRot="Landscape"
# comments and whitespace stripped by deployment tool
debug="Absolutist-2253"
show_build_date=1
AppTitle="Viewer"
DebuggerIP="127.0.0.1"
DebuggerPort=5322

</pre>

'''Оформление'''

Теперь перейдем к оформлению. Для того что бы на экране появлялось окно с предложением о покупке подсказке необходимо его создать. В начальный момент оно должно быть невидимым и прокликиваем, это состояние задано в машине store. Создадим в ней 5 подобъектов.

1.1. Первые два переименуем в '''black''' и '''rec''', изменим им тип на '''[[Rectangle|Rectangle]]'''.

Откроем объект black, пропишем ему свойствах, оставив его пустым рамку, и цвет фона

[[Файл:Black.PNG]]

Для объекта rec зададим рамку и текстуру заливки. Для этого из базы ресурсов мышкой перетащим соответствующие элементы. Ресурсы для графики находятся в предыдущем уроке. Чтобы прямоугольник отображался правильно, задайте ему ненулевые размеры.

[[Файл:Rec.PNG]]

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

1.2. Третьему элементу поменяем тип на text с текстом

[[Файл:Text.PNG]]

1.3. Четвертый и пятый объекты сделаем кнопками, и назовем их '''ok''' – купить подсказку, '''no''' – отказаться от покупки.

Для кнопки ok из базы ресурсов выберем внешний вид

[[Файл:Ok1.PNG]]

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

[[Файл:Ok2.PNG]]

Аналогично поступим с кнопкой no. Добавим графический ресурс и свойство «изменить состояние объекта», которое будет закрывать окно с предложением о покупке

[[Файл:No1.PNG]] [[Файл:No2.PNG]]

2. Таким же само сделаем со сценой error. В ней создадим четыре объекта: два rectangle: '''rec_error''' – пустой, '''black_error''' — оформленный в такую же рамку; кнопку '''buy''', которая будет делать активным состояние error; текстовый объект '''text_error''' с текстом «error!»

[[Файл:Buy1.PNG]]

Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим вьювер.

[[Файл:Снимок1.PNG]]

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

== Patchwork ==

=== Создание экрана и сцены в игровом проекте ===

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.1, создать экран Lesson_08.2.

[[Файл:Lesson8_1.jpg|right]]

4. В экране Lesson_08.2 создать новую сцену 08, в которую (через ResourcesEditor) добавить графические ресурсы (bg_game, panel_down, btb_replay_normal) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»). В редактор ресурсов добавить графику нашего будущего Patchwork: level_17, level_17_mask.

=== Настройка объектов ===

1. Создадим на сцене 08 еще два объекта. Для этого нажмем правой кнопкой мыши по сцене и выберем "Создать объект в текущем элементе".

[[Файл:Lesson8_2.jpg]]

2. Переименуем один из созданных объектов в Patchwork, а другой в table.

[[Файл:Lesson8_3.jpg]]

[[Файл:Lesson8_4.jpg|right]]

3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.
4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 100х100 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

[[Файл:Lesson8_5.jpg]]

Кнопку поместим в левый нижний угол. Добиваемся такого расположения объектов, как показанно на рисунке.

[[Файл:Lesson8_6.jpg]]

5. Настроим наши объекты. Для кнопки btb_replay_normal в поле "перейти на" укажите текущий экран Lesson_8.2.

[[Файл:правка_намба_1.png|200px]]

Для таблицы измените следующие параметры

[[Файл:lesson8_table_setup.png|200px]]

Для Patchwork устанавливаем следующие настройки. Обратите внимание, что поля "карт.спереди" и "шаблон" заполняются перетаскиванием графического ресурса из редактора ресурсов.

[[Файл:Lesson8_9.jpg]]

6. Для корректной работы вашего Patchwork необходимо, чтобы таблица находилась выше Patchwork по дереву объектов.

[[Файл:Lesson8_10.jpg]]

7. Проверьте выполнение задачи с помощью проигрывателя сцен Viewer.

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_08.2, создать новый экран Lesson_08.3

2. Создать новую сцену с названием game.

3. Скопировать все объекты из сцены 08 (экрана Lesson_08.2).

4. Вставить скопированые объекты в новую сцену game (экрана Lesson_08.3).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) заменить картинку пэчворка и маски на другую, имеющуюся в базе ресурсов;

b) изменить настройки кнопки рестарта таким образом, чтобы не переходить на экран Lesson_08.3, а сразу передавать пэчворку состояние mix.
----
{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}

[[Category:Learning]]

Файл:Lesson8 table setup.png

2018-02-02T14:46:57Z

Anecheporenko: