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

Isomover

2017-09-22T14:47:47Z

Akarpel: /* Пример */

'''Isomover''' - [[Object|объект]] используется для осуществления движения и взаимодействия в изометрической карте.

Isomover обязательно должен быть подобъектом [[isomap]].

В проекте с картой ([[isomap]]) и движущимися по ней объектами (isomover) часто используют [[economics]] и [[eitems]] потому, что для завершения процессов часто требуется применить предмет или ресурс.

Начало движения множества изомуверов сильно нагружает систему, поэтому следует позаботиться, чтобы это происходило не в один момент времени. По возможности добавляйте небольшую и различную паузу каждому изомуверу перед стартом. 
==Основные параметры==
*'''Положение''' (''x'',''y'') - рекомендуется выносить isomover-объекты за пределы карты. Иначе, если объект должен появляться не сразу, то он будет просто стоять без движения
*'''Память''' - всегда должно быть значение 1, обязательное условие корректной работы. Это позволяет объекту двигаться последовательно, не инициализируясь после каждого движения в исходной точке
*'''тип ребра min''' (''edge_t_min'') - перемещаться по ребрам не ниже заданного, -1 не проверять
*'''тип ребра max''' (''edge_t_max'') - перемещаться по ребрам не выше заданного, -1 не проверять. Типы ребер задаются в isomap
*'''Старт''' (''start'') - точка старта, выбирается из списка точек Isomap
*'''Финиш''' (''finish'') - точка финиша, выбирается из списка точек Isomap
*'''Скорость (макс)''' (''vel_max'') - максимальная скорость, с которой передвигается объект Isomover
*'''Скорость''' (''vel'') - не использовать, вычисляется по формуле автоматически, позже будет скрыто. V = Vmax*(k+(1-k)*(P/Pmax))
*'''Жизнь (макс)''' (''pow_max'') - максимальная жизнь
*'''Жизнь''' (''pow'') - текущая жизнь, высчитывается по формуле автоматически
*'''Сохранять жизнь в опции''' (''powsave'') - если да, то объекты сцены сохранят уровень жизни при выходе со сцены и возвращении на нее
*'''Коэффициент скорости''' (''speed_k'') - коэффициент k в формуле расчета скорости. Чтобы скорость не зависела от значения жизни - указываем speed_k = 1
*'''Менять угол''' (''fixangle'') - изменение угла для предания плавности смены графики при дугообразном перемещении объекта. С появлением 3D-объектов больше не используется
*'''Тип''' (''mtype'') - объекты можно разделять на типы (люди, монстры, звери и т.д.). Взаимодействие происходит между объектами разных типов, настраивается в добавляемых параметрах
*'''Радиус''' (''mradius'') - значения радиуса. Попадание изомувера другого типа в этот радиус позволит начать взаимодействие.
*'''Цель при действии''' (''mtarget'') - мувер может быть целью взаимодействия пока сам действует
*'''Запретить действие''' (''disact'') - мувер не сможет перейти из acting_wait в acting
*'''Время появления''' (''appear_time'') - время в миллисекундах появления и исчезания изомувера (длительность перехода по alpha)
*'''Время провала''' (''fail_time'') - длительность анимации смерти объекта, по его окончанию произойдет переход в состояние ''disappear''
*'''Время паузы''' (''pause_time'') - длительность "заморозки" объекта
*'''Предмет паузы''' (''pause_item'') - предмет для включения паузы
*'''fail при 0 жизни''' (''zerofail'') - 1- при нулевом уровне жизни изомувер перейдет в fail, 0 - останется жив
*'''Не пересчитывать маршрут''' (''softrecalc'') - 1- при отключении ребер графа не произойдет пересчета маршрута, 0 - маршрут будет пересчитан
*'''Реагировать на''' (''tapreact'') - 1- на тап, 0- на клик
 

==Дополнительные параметры==
[[Файл:Isomover1.png|right|300px]]
*'''Графический ресурс:'''
**вверх (''res0'') - графический ресурс движения вверх
**вверх/вправо (''res1'') - графический ресурс движения вверх/вправо
**вправо (''res2'') - графический ресурс движения вправо
**вниз/вправо (''res3'') - графический ресурс движения вниз/вправо
**вниз (''res4'') - графический ресурс движения вниз
**вниз/влево (''res5'') - графический ресурс движения вниз/влево
**влево (''res6'') - графический ресурс движения влево
**вверх/влево (''res7'') - графический ресурс движения вверх/влево. Достаточно указать первые пять ресурсов, а остальные редактор отобразит автоматически симметрично
**деятельность (''resa'') - графический ресурс для состояния acting
**иконка персонажа (''char_ico'') - иконка, которая будет находится сверху над персонажем. Изменение масштаба во время игры не влияет на масштаб иконки. Рекомендуется создавать ее с пивотом у нижней границы, тогда при масштабировании не будет образовываться зазор между иконкой и графикой объекта
**смещение иконки персонажа (''char_ico_shift'') - смещение иконки по вертикали
**рисовать при действии (''resad'') - 1- мувер рисуется при состоянии acting, 0- не рисуется
**провал (''resf'') - графический ресурс состояния fail. Может быть картинкой или анимацией
**пауза (''resp'') - графический ресурс состояния pause
**восстановление жизни (''resheal'') - графический ресурс восстановления жизни
*'''3D ресурс'''
**модель (''mdl'') - трехмерный ресурс для отображения объекта
**scale x (''mdlSx'') - масштаб по оси ''x''
**scale y (''mdlSy'') - масштаб по оси ''y''
**scale z (''mdlSz'') - масштаб по оси ''z''
*'''Звуки'''
**всплывание подложки (''snd_panel'') - звук показывающейся подложки
**исчезание подложки (''snd_panel_hide'') - звук прячущейся подложки
**переход в acting (''snd_to_acting'') - звук перехода в состояние acting
**применение предмета (''snd_item_used'') - звук применение предмета при взаимодействии
**предмет при паузе (''snd_item_pause'') - звук применение предмета при паузе
**конец паузы (''snd_pause_end'') - звук при окончании паузы
**фейл взаимодействия (''snd_fail'') - звук при переходе в fail
**успех взаимодействия (''snd_success'') - звук при переходе в win
**клик (''snd_click'') - звук при клике
*'''Коэффициент скорости'''
**вертикальное (''speed_0'') - на этот коэффициент умножается скорость при вертикальном движении
**диагональное (''speed_1'') - на этот коэффициент умножается скорость при диагональном движении
**горизонтальное (''speed_2'') - на этот коэффициент умножается скорость при горизонтальном движении
Обычно горизонтальный коэффициент равен 1.00, чуть меньше диагональный и еще меньше вертикальный. Это необходимо для создания реалистичности движения относительно перспективы. То есть объекты, двигаясь вверх, как бы отдаляются от нас в глубь, поэтому по экрану они движутся медленней
[[Файл:Isomover2.png|right]]
*'''Таймер''':
**подложка (''digBg'') - фон для цифр таймера
**цифры (''digNorm'') - набор из 10-и цифр в виде ресурса анимации (клипа)
**двоеточие (''colNorm'') - графический ресурс двоеточия
**dx (''dx'') - смещение таймера по оси ''x'' относительно пивота изомувера
**dy (''dy'') - смещение таймера по оси ''y'' относительно пивота изомувера
**dx между цифрами (''digShift'') - расстояние между цифрами таймера
**dx от (''colShift'') - отступы числовых разрядов влево и вправо от двоеточия
**жизнь (''objlife'') - здесь выбирается объект типа прогресс_бар для отображения шкалы уровня жизни. Progress_bar создается отдельным объектом
Таймер позволяет отобразить время до окончания взаимодействия объектов. Например "корабль" прибыл в "порт" и начал отгружать груз. С помощью числового таймера или progress_bar можно увидеть через сколько закончится отгрузка. На рисунке справа показано взаимодействие двух объектов с изображение шкалы жизни одного из объектов и времени до конца взаимодействия.
*'''Преследование'''
**тип (''chasetype'') - тип объекта, который можно преследовать
**радиус (''chaseradius'') - если объект указанного типа окажется в этом радиусе, то начнется преследование (например полицейская погоня)
*'''Дорожное движение'''
**радиус (''stopradius'') - объекты, которые двигались по одному ребру, останавливаются на расстоянии этого радиуса (необходимо для препятствия наслоений объектов на дороге, железнодорожных путях)
*'''восстановление жизни''':
**критический уровень (''pow_min'') - Критический уровень жизни
**предмет (''pow_item'') - Предмет восстановления
**время (''pow_time'') - Время восстановления жизни

*курсор (''curs'') - Графический ресурс курсора текущего и всех дочерних объектов
*прокликиваемая (''passClk'') - Если 1, то картинка прозрачна для клика мышкой (пропускает объектам под ней). Если 2, то картинка сама обрабатывает клик, но и пропускает его дальше" regexp="нет=0, да=1, обработать и пропустить=2
*группа (''gr'') - Группа, в которую входит текущий объект
*eitems (''eitems'') - Объект типа eitems
 

==Добавляемые параметры==
[[Файл:Isomover9.png|right|300px]]
[[Файл:+.png]] '''Взаимодействие с другими объектами''':
*тип (''mtype'') - тип объекта с которым по настроенному ниже сценарию будет происходить взаимодействие, -1 для любого типа
*min жизнь (''minlife'') - минимальное значение жизни для начала взаимодействия, -1 не проверять
*max жизнь (''maxlife'') - максимальное значение жизни для начала взаимодействия, -1 не проверять
*тип актив (''mtype_a'') - тип мувера, который активирует взаимодействие, если данный в процессе подготовки
*анимация (''res_a'') - анимация взаимодействия, например боя, разгрузки, разговора. Перетаскивается мышкой из редактора ресурсов
*старт тип (''stype'') - тип старта взаимодействия
**0 - бесконечное ожидание тапа. Переход в состояние acting не начнется, пока не произойдет тап по объекту
**1 - автоматический переход в состояние acting
**2 - время, через которое произойдет переход из acting_wait в acting после начала взаимодействия объектов
**3 - переход по значению жизни
*старт таймер (''stimer'') - время, за которое нужно активировать взаимодействие тапом
*старт изм.жизни (''slife'') - скорость изменения жизни до активации взаимодействия тапом
*старт изм.жизни другого (''slife_o'') - скорость изменения жизни враг до активации взаимодействия тапом
*предмет (''item'') - предмет, необходимый для запуска активности. Актуально, когда имеется объект economics
*иконка (''ico'') - иконка активности
*смещение иконки (''ico_shift'') - смещение иконки активности по вертикали
*актив тип (''atype'') - тип старта взаимодействия
**0 - бесконечное ожидание тапа. Переход в состояние acting не начнется, пока не произойдет тап по объекту
**1 - автоматический переход в состояние acting
**2 - время, через которое произойдет переход из acting_wait в acting после начала взаимодействия объектов
**3 - переход по значению жизни
*актив таймер (''atime'') - время, которое длится взаимодействие
*актив изменение жизни (''alife'') - скорость изменения жизни текущего объекта (ед/сек) в состоянии active
*актив изменение жизни другого (''alife_o'') - скорость изменения жизни другого объекта (ед/сек) в состоянии active

[[Файл:Isomover3.png|right|300px]]
*объект инит (''obj'') - объект, состояние которого нужно изменить при переходе изомувера в acting_wait
*состояние инит (''st'') - новое состояние другого объекта
*объект старт (''obj_s'') - объект, состояние которого нужно изменить при переходе изомувера в acting
*состояние старт (''st_s'') - новое состояние другого объекта
*объект фейл (''obj_f'') - объект, состояние которого нужно изменить при переходе изомувера в состояние fail (проигрыш)
*состояние фейл (''st_f'') - новое состояние другого объекта
*объект успех (''obj_w'') - объект, состояние которого нужно изменить при переходе изомувера в состояние win (в случае победы)
*состояние успех (''st_w'') - новое состояние другого объекта
*дельта жизнь (''deltalife'') при успехе взаимодействия изменить значение жизни на эту величину
*переводить другой в фейл (''o_fail'') - 1- переводить цель действия в fail, 0- в idle
*переводить другой в мув (''o_move'') - при неудачном действии 1- переводить цель действия в move, 0- в idle
*можно ускорить (''canspeed'') - 1- действие можно ускорить. От этого параметра зависит, какое событие будет вызываться по клику на объект в состоянии acting
*звук ожидания (''snd_wait'') - звук, который будет воспроизводиться в состоянии acting_wait
*звук действия (''snd_act'') - звук, который будет воспроизводиться в состоянии acting
Для каждого типа объектов, с которыми взаимодействие возможно, необходимо добавить отдельный параметр "взаимодействие с другими объектами" и настроить его. Объекты инит, старт, фейл и успех вызываются при переходе текущего объекта в соответствующие состояния. Например, это может быть диалоговое окно, предлагающее продолжить взаимодействие, запуск дополнительных индикаторов, фейерверк в случае победы.

[[Файл:+.png]] '''Клик при простое''' (''nst_idle''):
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии idel
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_move''), он же '''клик при движении''':
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии move
*состояние - новое состояние объекта
[[Файл:+.png]] '''Клик при паузе''' (''nst_pause''):
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии pause (заморозка)
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_aw_n'') он же '''клик при acting_wait, если другие действия не возможны'''
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии acting_wait
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_a_1'') он же '''клик при acting, ускорение возможно'''
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии acting и ускорение возможно
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_a_2'') он же '''клик при acting, ускорение НЕвозможно'''
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии acting и ускорение не возможно
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_beact'') он же '''клик при beeng_acting'''
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии beeng_acting, когда воздействие совершалось над ним другим объектом
*состояние - новое состояние объекта
[[Файл:+.png]] '''Конец движения''' (''nst_finish''):
*объект - объект, состояние которого меняется, если изомувер закончил движение (достиг точки finish)
*состояние - новое состояние объекта
[[Файл:+.png]] '''Отправили в текущую ноду''' (''nst_place''):
*объект - объект, состояние которого меняется, если изомувер направлен в ту же ноду, в которой и находится
*состояние - новое состояние объекта
[[Файл:+.png]] '''Перешел в fail''' (''nst_gopause''):
*объект - объект, состояние которого меняется, если изомувер перешел в fail
*состояние - новое состояние объекта
[[Файл:+.png]] '''Перешел в pause''' (''nst_heal''):
*объект - объект, состояние которого меняется, если изомувер Перешел в pause
*состояние - новое состояние объекта
[[Файл:+.png]] '''Восстановил здоровье''' (''nst_low_time''):
*объект - объект, состояние которого меняется, если изомувер Восстановил здоровье
*состояние - новое состояние объекта
[[Файл:+.png]] '''Время истекло: изменить состояние объекта''' (''nst_low_time'') он же '''время на исходе: изменить состояние объекта''':
*значение, при котором срабатывает обработчик
*объект - объект, состояние которого меняется по истечению времени
*состояние - новое состояние объекта
 

==Состояния==
[[Файл:isomover_box.png|right|350px]]
*'''idle''' - дефолтное состояние, в которое isomover переходит после всех манипуляций. Недвижимым объектам следует передавать idle, чтобы они появились (нарисовались) на карте. Для движущихся объектов его практически не используют, объект сам рисуется с началом движения. 
*'''acting_wait''' - первое состояние взаимодействия (запускается первый таймер, анимация взаимодействия и ожидается старт). 
*'''acting''' - второе состояние взаимодействия (вызывается после применения предмета или клика, запускает второй таймер). 
*'''being_acted''' - в этом состоянии пребывает тот объект, над которым идет действие. Объект в этом состоянии невидим. 
*'''move''' - состояние движения от старта к финишу. 
*'''move_to_smooth''' - состояние движения от текущей ноды (или следующей, если объект идет) к финишу. 
*'''appear''' - показать по альфе за время появления. 
*'''disappear''' - скрыть по альфе за время появления. 
*'''prepare_acting''' - вызвать взаимодействие без оппонента. Перед вызовом нужно в поле param записать номер взаимодействия по порядку. 
*'''start_acting''' - продолжить взаимодействие без оппонента. Перед вызовом нужно в поле param записать номер взаимодействия по порядку.
*'''pause''' - состояние "заморозки"
 

==Особенности работы==
[[Файл:Isomover6.png|right|300px]][[Файл:Isomover8.png|left|200px]]
Движение объекта типа ''isomover'' задается с помощью отдельной машины состояний через которую происходит управление состояниями move, acting и остальными. Рассмотрим на конкретном примере. У нас есть объект '''woman''' типа ''isomover''. Необходимо, чтобы наш изомувер начал движение с точки b1 и дальше начал двигаться бесконечно по кольцу b2-b3-b4-b5. Движение задается машиной состояний ''woman_machine''. 
Для управления циклическим ходом назначим дополнительный параметр ''ww''. Название параметра должно быть уникально и не совпадать с параметрами игровых объектов. 
Для того, чтобы изомувер двигался каждый раз к новой точке, необходимо повторно инициализировать его точку финиша. Однако, если мы продолжим указывать ему состояние move для движения, то каждый раз он будет начинать движение с точки старта. Чтобы это исправить воспользуемся состоянием move_to_smooth, которое заставляет двигаться изомувер от текущей ноде к финишу, будто старт и финиш мы все время смещаем на шаг.
 Основная логика будет находиться в состоянии ''circle_moving'' нашей машины. Надо сделать так, чтобы изомувер переходил в это состояние после движения по каждому из ребер. Для этого зайдем в свойства изомувера, нажмем правой кнопкой мыши и добавим параметр '''конец движения'''. У него есть поля ''объект'' и ''свойство''. Объект - машина состояний ''woman_machine'', состояние ''circle_moving'' этой машины. Таким образом, в конце каждого акта движения изомувер будет запускать состояние, в котором мы будем менять его точку финиша и запускать его движение.
 Не забываем, что все операции с переменными должны отделяться скобками, как и сама переменная 

===Пример===
Два изомувера (police_car и werewolf) совершают циклическое движение по определенному маршруту, заданному с помощью машин состояний (car_machine и werewolf_machine соответственно). Когда объекты оказываются в радиусе (достаточном для активации добавляемого параметра '''"Взаимодействие с другими объектами"'''), объект '''police_car''' начинает взаимодействовать с объектом '''werewolf'''. По истечению времени воздействия объект '''police_car''' переходит в состояние '''fail'''. Если кликнуть на процесс взаимодействия объектов, то объект '''police_car''' перейдет в состояние '''win'''.
*'''Пример:
S:\!MOBILE\!!!EditorGames\Wiki_sample\Isomap.rar

[[Category:Main objects]]
[[Category:Game mechanic]]

Isomover

2017-09-22T14:21:12Z

Akarpel: /* Пример */

'''Isomover''' - [[Object|объект]] используется для осуществления движения и взаимодействия в изометрической карте.

Isomover обязательно должен быть подобъектом [[isomap]].

В проекте с картой ([[isomap]]) и движущимися по ней объектами (isomover) часто используют [[economics]] и [[eitems]] потому, что для завершения процессов часто требуется применить предмет или ресурс.

Начало движения множества изомуверов сильно нагружает систему, поэтому следует позаботиться, чтобы это происходило не в один момент времени. По возможности добавляйте небольшую и различную паузу каждому изомуверу перед стартом. 
==Основные параметры==
*'''Положение''' (''x'',''y'') - рекомендуется выносить isomover-объекты за пределы карты. Иначе, если объект должен появляться не сразу, то он будет просто стоять без движения
*'''Память''' - всегда должно быть значение 1, обязательное условие корректной работы. Это позволяет объекту двигаться последовательно, не инициализируясь после каждого движения в исходной точке
*'''тип ребра min''' (''edge_t_min'') - перемещаться по ребрам не ниже заданного, -1 не проверять
*'''тип ребра max''' (''edge_t_max'') - перемещаться по ребрам не выше заданного, -1 не проверять. Типы ребер задаются в isomap
*'''Старт''' (''start'') - точка старта, выбирается из списка точек Isomap
*'''Финиш''' (''finish'') - точка финиша, выбирается из списка точек Isomap
*'''Скорость (макс)''' (''vel_max'') - максимальная скорость, с которой передвигается объект Isomover
*'''Скорость''' (''vel'') - не использовать, вычисляется по формуле автоматически, позже будет скрыто. V = Vmax*(k+(1-k)*(P/Pmax))
*'''Жизнь (макс)''' (''pow_max'') - максимальная жизнь
*'''Жизнь''' (''pow'') - текущая жизнь, высчитывается по формуле автоматически
*'''Сохранять жизнь в опции''' (''powsave'') - если да, то объекты сцены сохранят уровень жизни при выходе со сцены и возвращении на нее
*'''Коэффициент скорости''' (''speed_k'') - коэффициент k в формуле расчета скорости. Чтобы скорость не зависела от значения жизни - указываем speed_k = 1
*'''Менять угол''' (''fixangle'') - изменение угла для предания плавности смены графики при дугообразном перемещении объекта. С появлением 3D-объектов больше не используется
*'''Тип''' (''mtype'') - объекты можно разделять на типы (люди, монстры, звери и т.д.). Взаимодействие происходит между объектами разных типов, настраивается в добавляемых параметрах
*'''Радиус''' (''mradius'') - значения радиуса. Попадание изомувера другого типа в этот радиус позволит начать взаимодействие.
*'''Цель при действии''' (''mtarget'') - мувер может быть целью взаимодействия пока сам действует
*'''Запретить действие''' (''disact'') - мувер не сможет перейти из acting_wait в acting
*'''Время появления''' (''appear_time'') - время в миллисекундах появления и исчезания изомувера (длительность перехода по alpha)
*'''Время провала''' (''fail_time'') - длительность анимации смерти объекта, по его окончанию произойдет переход в состояние ''disappear''
*'''Время паузы''' (''pause_time'') - длительность "заморозки" объекта
*'''Предмет паузы''' (''pause_item'') - предмет для включения паузы
*'''fail при 0 жизни''' (''zerofail'') - 1- при нулевом уровне жизни изомувер перейдет в fail, 0 - останется жив
*'''Не пересчитывать маршрут''' (''softrecalc'') - 1- при отключении ребер графа не произойдет пересчета маршрута, 0 - маршрут будет пересчитан
*'''Реагировать на''' (''tapreact'') - 1- на тап, 0- на клик
 

==Дополнительные параметры==
[[Файл:Isomover1.png|right|300px]]
*'''Графический ресурс:'''
**вверх (''res0'') - графический ресурс движения вверх
**вверх/вправо (''res1'') - графический ресурс движения вверх/вправо
**вправо (''res2'') - графический ресурс движения вправо
**вниз/вправо (''res3'') - графический ресурс движения вниз/вправо
**вниз (''res4'') - графический ресурс движения вниз
**вниз/влево (''res5'') - графический ресурс движения вниз/влево
**влево (''res6'') - графический ресурс движения влево
**вверх/влево (''res7'') - графический ресурс движения вверх/влево. Достаточно указать первые пять ресурсов, а остальные редактор отобразит автоматически симметрично
**деятельность (''resa'') - графический ресурс для состояния acting
**иконка персонажа (''char_ico'') - иконка, которая будет находится сверху над персонажем. Изменение масштаба во время игры не влияет на масштаб иконки. Рекомендуется создавать ее с пивотом у нижней границы, тогда при масштабировании не будет образовываться зазор между иконкой и графикой объекта
**смещение иконки персонажа (''char_ico_shift'') - смещение иконки по вертикали
**рисовать при действии (''resad'') - 1- мувер рисуется при состоянии acting, 0- не рисуется
**провал (''resf'') - графический ресурс состояния fail. Может быть картинкой или анимацией
**пауза (''resp'') - графический ресурс состояния pause
**восстановление жизни (''resheal'') - графический ресурс восстановления жизни
*'''3D ресурс'''
**модель (''mdl'') - трехмерный ресурс для отображения объекта
**scale x (''mdlSx'') - масштаб по оси ''x''
**scale y (''mdlSy'') - масштаб по оси ''y''
**scale z (''mdlSz'') - масштаб по оси ''z''
*'''Звуки'''
**всплывание подложки (''snd_panel'') - звук показывающейся подложки
**исчезание подложки (''snd_panel_hide'') - звук прячущейся подложки
**переход в acting (''snd_to_acting'') - звук перехода в состояние acting
**применение предмета (''snd_item_used'') - звук применение предмета при взаимодействии
**предмет при паузе (''snd_item_pause'') - звук применение предмета при паузе
**конец паузы (''snd_pause_end'') - звук при окончании паузы
**фейл взаимодействия (''snd_fail'') - звук при переходе в fail
**успех взаимодействия (''snd_success'') - звук при переходе в win
**клик (''snd_click'') - звук при клике
*'''Коэффициент скорости'''
**вертикальное (''speed_0'') - на этот коэффициент умножается скорость при вертикальном движении
**диагональное (''speed_1'') - на этот коэффициент умножается скорость при диагональном движении
**горизонтальное (''speed_2'') - на этот коэффициент умножается скорость при горизонтальном движении
Обычно горизонтальный коэффициент равен 1.00, чуть меньше диагональный и еще меньше вертикальный. Это необходимо для создания реалистичности движения относительно перспективы. То есть объекты, двигаясь вверх, как бы отдаляются от нас в глубь, поэтому по экрану они движутся медленней
[[Файл:Isomover2.png|right]]
*'''Таймер''':
**подложка (''digBg'') - фон для цифр таймера
**цифры (''digNorm'') - набор из 10-и цифр в виде ресурса анимации (клипа)
**двоеточие (''colNorm'') - графический ресурс двоеточия
**dx (''dx'') - смещение таймера по оси ''x'' относительно пивота изомувера
**dy (''dy'') - смещение таймера по оси ''y'' относительно пивота изомувера
**dx между цифрами (''digShift'') - расстояние между цифрами таймера
**dx от (''colShift'') - отступы числовых разрядов влево и вправо от двоеточия
**жизнь (''objlife'') - здесь выбирается объект типа прогресс_бар для отображения шкалы уровня жизни. Progress_bar создается отдельным объектом
Таймер позволяет отобразить время до окончания взаимодействия объектов. Например "корабль" прибыл в "порт" и начал отгружать груз. С помощью числового таймера или progress_bar можно увидеть через сколько закончится отгрузка. На рисунке справа показано взаимодействие двух объектов с изображение шкалы жизни одного из объектов и времени до конца взаимодействия.
*'''Преследование'''
**тип (''chasetype'') - тип объекта, который можно преследовать
**радиус (''chaseradius'') - если объект указанного типа окажется в этом радиусе, то начнется преследование (например полицейская погоня)
*'''Дорожное движение'''
**радиус (''stopradius'') - объекты, которые двигались по одному ребру, останавливаются на расстоянии этого радиуса (необходимо для препятствия наслоений объектов на дороге, железнодорожных путях)
*'''восстановление жизни''':
**критический уровень (''pow_min'') - Критический уровень жизни
**предмет (''pow_item'') - Предмет восстановления
**время (''pow_time'') - Время восстановления жизни

*курсор (''curs'') - Графический ресурс курсора текущего и всех дочерних объектов
*прокликиваемая (''passClk'') - Если 1, то картинка прозрачна для клика мышкой (пропускает объектам под ней). Если 2, то картинка сама обрабатывает клик, но и пропускает его дальше" regexp="нет=0, да=1, обработать и пропустить=2
*группа (''gr'') - Группа, в которую входит текущий объект
*eitems (''eitems'') - Объект типа eitems
 

==Добавляемые параметры==
[[Файл:Isomover9.png|right|300px]]
[[Файл:+.png]] '''Взаимодействие с другими объектами''':
*тип (''mtype'') - тип объекта с которым по настроенному ниже сценарию будет происходить взаимодействие, -1 для любого типа
*min жизнь (''minlife'') - минимальное значение жизни для начала взаимодействия, -1 не проверять
*max жизнь (''maxlife'') - максимальное значение жизни для начала взаимодействия, -1 не проверять
*тип актив (''mtype_a'') - тип мувера, который активирует взаимодействие, если данный в процессе подготовки
*анимация (''res_a'') - анимация взаимодействия, например боя, разгрузки, разговора. Перетаскивается мышкой из редактора ресурсов
*старт тип (''stype'') - тип старта взаимодействия
**0 - бесконечное ожидание тапа. Переход в состояние acting не начнется, пока не произойдет тап по объекту
**1 - автоматический переход в состояние acting
**2 - время, через которое произойдет переход из acting_wait в acting после начала взаимодействия объектов
**3 - переход по значению жизни
*старт таймер (''stimer'') - время, за которое нужно активировать взаимодействие тапом
*старт изм.жизни (''slife'') - скорость изменения жизни до активации взаимодействия тапом
*старт изм.жизни другого (''slife_o'') - скорость изменения жизни враг до активации взаимодействия тапом
*предмет (''item'') - предмет, необходимый для запуска активности. Актуально, когда имеется объект economics
*иконка (''ico'') - иконка активности
*смещение иконки (''ico_shift'') - смещение иконки активности по вертикали
*актив тип (''atype'') - тип старта взаимодействия
**0 - бесконечное ожидание тапа. Переход в состояние acting не начнется, пока не произойдет тап по объекту
**1 - автоматический переход в состояние acting
**2 - время, через которое произойдет переход из acting_wait в acting после начала взаимодействия объектов
**3 - переход по значению жизни
*актив таймер (''atime'') - время, которое длится взаимодействие
*актив изменение жизни (''alife'') - скорость изменения жизни текущего объекта (ед/сек) в состоянии active
*актив изменение жизни другого (''alife_o'') - скорость изменения жизни другого объекта (ед/сек) в состоянии active

[[Файл:Isomover3.png|right|300px]]
*объект инит (''obj'') - объект, состояние которого нужно изменить при переходе изомувера в acting_wait
*состояние инит (''st'') - новое состояние другого объекта
*объект старт (''obj_s'') - объект, состояние которого нужно изменить при переходе изомувера в acting
*состояние старт (''st_s'') - новое состояние другого объекта
*объект фейл (''obj_f'') - объект, состояние которого нужно изменить при переходе изомувера в состояние fail (проигрыш)
*состояние фейл (''st_f'') - новое состояние другого объекта
*объект успех (''obj_w'') - объект, состояние которого нужно изменить при переходе изомувера в состояние win (в случае победы)
*состояние успех (''st_w'') - новое состояние другого объекта
*дельта жизнь (''deltalife'') при успехе взаимодействия изменить значение жизни на эту величину
*переводить другой в фейл (''o_fail'') - 1- переводить цель действия в fail, 0- в idle
*переводить другой в мув (''o_move'') - при неудачном действии 1- переводить цель действия в move, 0- в idle
*можно ускорить (''canspeed'') - 1- действие можно ускорить. От этого параметра зависит, какое событие будет вызываться по клику на объект в состоянии acting
*звук ожидания (''snd_wait'') - звук, который будет воспроизводиться в состоянии acting_wait
*звук действия (''snd_act'') - звук, который будет воспроизводиться в состоянии acting
Для каждого типа объектов, с которыми взаимодействие возможно, необходимо добавить отдельный параметр "взаимодействие с другими объектами" и настроить его. Объекты инит, старт, фейл и успех вызываются при переходе текущего объекта в соответствующие состояния. Например, это может быть диалоговое окно, предлагающее продолжить взаимодействие, запуск дополнительных индикаторов, фейерверк в случае победы.

[[Файл:+.png]] '''Клик при простое''' (''nst_idle''):
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии idel
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_move''), он же '''клик при движении''':
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии move
*состояние - новое состояние объекта
[[Файл:+.png]] '''Клик при паузе''' (''nst_pause''):
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии pause (заморозка)
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_aw_n'') он же '''клик при acting_wait, если другие действия не возможны'''
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии acting_wait
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_a_1'') он же '''клик при acting, ускорение возможно'''
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии acting и ускорение возможно
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_a_2'') он же '''клик при acting, ускорение НЕвозможно'''
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии acting и ускорение не возможно
*состояние - новое состояние объекта
[[Файл:+.png]] '''Изменить состояние объекта''' (''nst_beact'') он же '''клик при beeng_acting'''
*объект - объект, состояние которого меняется, если изомувер был нажат в состоянии beeng_acting, когда воздействие совершалось над ним другим объектом
*состояние - новое состояние объекта
[[Файл:+.png]] '''Конец движения''' (''nst_finish''):
*объект - объект, состояние которого меняется, если изомувер закончил движение (достиг точки finish)
*состояние - новое состояние объекта
[[Файл:+.png]] '''Отправили в текущую ноду''' (''nst_place''):
*объект - объект, состояние которого меняется, если изомувер направлен в ту же ноду, в которой и находится
*состояние - новое состояние объекта
[[Файл:+.png]] '''Перешел в fail''' (''nst_gopause''):
*объект - объект, состояние которого меняется, если изомувер перешел в fail
*состояние - новое состояние объекта
[[Файл:+.png]] '''Перешел в pause''' (''nst_heal''):
*объект - объект, состояние которого меняется, если изомувер Перешел в pause
*состояние - новое состояние объекта
[[Файл:+.png]] '''Восстановил здоровье''' (''nst_low_time''):
*объект - объект, состояние которого меняется, если изомувер Восстановил здоровье
*состояние - новое состояние объекта
[[Файл:+.png]] '''Время истекло: изменить состояние объекта''' (''nst_low_time'') он же '''время на исходе: изменить состояние объекта''':
*значение, при котором срабатывает обработчик
*объект - объект, состояние которого меняется по истечению времени
*состояние - новое состояние объекта
 

==Состояния==
[[Файл:isomover_box.png|right|350px]]
*'''idle''' - дефолтное состояние, в которое isomover переходит после всех манипуляций. Недвижимым объектам следует передавать idle, чтобы они появились (нарисовались) на карте. Для движущихся объектов его практически не используют, объект сам рисуется с началом движения. 
*'''acting_wait''' - первое состояние взаимодействия (запускается первый таймер, анимация взаимодействия и ожидается старт). 
*'''acting''' - второе состояние взаимодействия (вызывается после применения предмета или клика, запускает второй таймер). 
*'''being_acted''' - в этом состоянии пребывает тот объект, над которым идет действие. Объект в этом состоянии невидим. 
*'''move''' - состояние движения от старта к финишу. 
*'''move_to_smooth''' - состояние движения от текущей ноды (или следующей, если объект идет) к финишу. 
*'''appear''' - показать по альфе за время появления. 
*'''disappear''' - скрыть по альфе за время появления. 
*'''prepare_acting''' - вызвать взаимодействие без оппонента. Перед вызовом нужно в поле param записать номер взаимодействия по порядку. 
*'''start_acting''' - продолжить взаимодействие без оппонента. Перед вызовом нужно в поле param записать номер взаимодействия по порядку.
*'''pause''' - состояние "заморозки"
 

==Особенности работы==
[[Файл:Isomover6.png|right|300px]][[Файл:Isomover8.png|left|200px]]
Движение объекта типа ''isomover'' задается с помощью отдельной машины состояний через которую происходит управление состояниями move, acting и остальными. Рассмотрим на конкретном примере. У нас есть объект '''woman''' типа ''isomover''. Необходимо, чтобы наш изомувер начал движение с точки b1 и дальше начал двигаться бесконечно по кольцу b2-b3-b4-b5. Движение задается машиной состояний ''woman_machine''. 
Для управления циклическим ходом назначим дополнительный параметр ''ww''. Название параметра должно быть уникально и не совпадать с параметрами игровых объектов. 
Для того, чтобы изомувер двигался каждый раз к новой точке, необходимо повторно инициализировать его точку финиша. Однако, если мы продолжим указывать ему состояние move для движения, то каждый раз он будет начинать движение с точки старта. Чтобы это исправить воспользуемся состоянием move_to_smooth, которое заставляет двигаться изомувер от текущей ноде к финишу, будто старт и финиш мы все время смещаем на шаг.
 Основная логика будет находиться в состоянии ''circle_moving'' нашей машины. Надо сделать так, чтобы изомувер переходил в это состояние после движения по каждому из ребер. Для этого зайдем в свойства изомувера, нажмем правой кнопкой мыши и добавим параметр '''конец движения'''. У него есть поля ''объект'' и ''свойство''. Объект - машина состояний ''woman_machine'', состояние ''circle_moving'' этой машины. Таким образом, в конце каждого акта движения изомувер будет запускать состояние, в котором мы будем менять его точку финиша и запускать его движение.
 Не забываем, что все операции с переменными должны отделяться скобками, как и сама переменная 

===Пример===
Два изомувера (police_car и werewolf) совершают циклическое движение по определенному маршруту, заданному с помощью машин состояний (car_machine и werewolf_machine соответственно). Когда объекты оказываются в радиусе (достаточном для активации добавляемого параметра '''"Взаимодействие с другими объектами"'''), объект '''police_car''' начинает взаимодействовать с объектом '''werewolf'''. По истечению времени воздействия объект '''police_car''' переходит в состояние '''lose'''. Если кликнуть на процесс взаимодействия объектов, то объект '''police_car''' перейдет в состояние '''win'''. Эти состояния указаны в машине состояний '''"win_lose"'''.
*'''Пример:
S:\!MOBILE\!!!EditorGames\Wiki_sample\Isomap.rar

[[Category:Main objects]]
[[Category:Game mechanic]]

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

2017-09-22T13:37:42Z

Akarpel: /* Модификаторы */

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

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

== Введение ==

Для создания игр в 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) является сложным объектом, содержащим несколько других.
Таким образом, игровой проект можно представить как '''дерево''', на различных ветках которого находятся игровые объекты.

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

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

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

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

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

[[Файл:Меню.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 и т.д.). Это правило является иерархическим. Если на дереве находятся объекты, содержащие другие объекты, то сначала рисуется вся эта ветка дерева, а затем поверх неё рисуются нижележащие на дереве объекты на других ветках. Это же правило относится к последовательности рисования сцен. Если на экране несколько сцен, то они рисуются сверху вниз в соответствии с их порядком на дереве. Сама по себе сцена - это невидимый объект (контейнер). Поэтому, рисование сцены означает последовательное рисование всех объектов, которые в ней находятся.

Попробуем во вьювере кликнуть на солнце, когда оно оказывается под головой духа слона.
Его форма не изменяется, так как картинка головы, хотя и является полупрозрачной, по умолчанию "не прокликивается". Чтобы изменить ситуацию, закроем вьювер (крестик) и отредактируем поле свойств головы с именем "'''прокликиваемая'''", поставив вместо 0 значение 1. Закончив редактирование поля (нажав 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]]

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

2017-09-22T13:37:25Z

Akarpel: /* Добавление на сцену */

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

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

== Введение ==

Для создания игр в 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) является сложным объектом, содержащим несколько других.
Таким образом, игровой проект можно представить как '''дерево''', на различных ветках которого находятся игровые объекты.

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

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

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

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

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

[[Файл:Меню.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|600px]]

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

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

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

Попробуем во вьювере кликнуть на солнце, когда оно оказывается под головой духа слона.
Его форма не изменяется, так как картинка головы, хотя и является полупрозрачной, по умолчанию "не прокликивается". Чтобы изменить ситуацию, закроем вьювер (крестик) и отредактируем поле свойств головы с именем "'''прокликиваемая'''", поставив вместо 0 значение 1. Закончив редактирование поля (нажав 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]]

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

2017-09-22T13:36:56Z

Akarpel: /* Открытие проекта */

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

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

== Введение ==

Для создания игр в 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) является сложным объектом, содержащим несколько других.
Таким образом, игровой проект можно представить как '''дерево''', на различных ветках которого находятся игровые объекты.

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

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

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

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

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

[[Файл:Меню.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|600px]]

Теперь окно редактора ресурсов можно свернуть, чтобы оно не мешало.
На сцене мы видим одного полноценного слонёнка и отдельно парящую голову.
В списке объектов (панель 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|600px]]

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

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

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

Попробуем во вьювере кликнуть на солнце, когда оно оказывается под головой духа слона.
Его форма не изменяется, так как картинка головы, хотя и является полупрозрачной, по умолчанию "не прокликивается". Чтобы изменить ситуацию, закроем вьювер (крестик) и отредактируем поле свойств головы с именем "'''прокликиваемая'''", поставив вместо 0 значение 1. Закончив редактирование поля (нажав 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]]

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

2017-09-22T13:36:40Z

Akarpel: /* Открытие проекта */

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

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

== Введение ==

Для создания игр в 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) является сложным объектом, содержащим несколько других.
Таким образом, игровой проект можно представить как '''дерево''', на различных ветках которого находятся игровые объекты.

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

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

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

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

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

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

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

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

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

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

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

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

В правой части окна редактора расположены две панели '''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|600px]]

Теперь окно редактора ресурсов можно свернуть, чтобы оно не мешало.
На сцене мы видим одного полноценного слонёнка и отдельно парящую голову.
В списке объектов (панель 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|600px]]

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

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

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

Попробуем во вьювере кликнуть на солнце, когда оно оказывается под головой духа слона.
Его форма не изменяется, так как картинка головы, хотя и является полупрозрачной, по умолчанию "не прокликивается". Чтобы изменить ситуацию, закроем вьювер (крестик) и отредактируем поле свойств головы с именем "'''прокликиваемая'''", поставив вместо 0 значение 1. Закончив редактирование поля (нажав 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]]

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

2017-09-22T13:36:24Z

Akarpel: /* Открытие проекта */

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

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

== Введение ==

Для создания игр в 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) является сложным объектом, содержащим несколько других.
Таким образом, игровой проект можно представить как '''дерево''', на различных ветках которого находятся игровые объекты.

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

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

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

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

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

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

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

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

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

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

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

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

В правой части окна редактора расположены две панели '''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|600px]]

Теперь окно редактора ресурсов можно свернуть, чтобы оно не мешало.
На сцене мы видим одного полноценного слонёнка и отдельно парящую голову.
В списке объектов (панель 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|600px]]

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

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

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

Попробуем во вьювере кликнуть на солнце, когда оно оказывается под головой духа слона.
Его форма не изменяется, так как картинка головы, хотя и является полупрозрачной, по умолчанию "не прокликивается". Чтобы изменить ситуацию, закроем вьювер (крестик) и отредактируем поле свойств головы с именем "'''прокликиваемая'''", поставив вместо 0 значение 1. Закончив редактирование поля (нажав 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]]

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

2017-09-22T13:36:11Z

Akarpel: /* Открытие проекта */

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

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

== Введение ==

Для создания игр в 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) является сложным объектом, содержащим несколько других.
Таким образом, игровой проект можно представить как '''дерево''', на различных ветках которого находятся игровые объекты.

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

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

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

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

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

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

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

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

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

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

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

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

В правой части окна редактора расположены две панели '''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|600px]]

Теперь окно редактора ресурсов можно свернуть, чтобы оно не мешало.
На сцене мы видим одного полноценного слонёнка и отдельно парящую голову.
В списке объектов (панель 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|600px]]

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

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

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

Попробуем во вьювере кликнуть на солнце, когда оно оказывается под головой духа слона.
Его форма не изменяется, так как картинка головы, хотя и является полупрозрачной, по умолчанию "не прокликивается". Чтобы изменить ситуацию, закроем вьювер (крестик) и отредактируем поле свойств головы с именем "'''прокликиваемая'''", поставив вместо 0 значение 1. Закончив редактирование поля (нажав 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]]

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

2017-09-22T13:33:56Z

Akarpel:

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

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

== Введение ==

Для создания игр в 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) является сложным объектом, содержащим несколько других.
Таким образом, игровой проект можно представить как '''дерево''', на различных ветках которого находятся игровые объекты.

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

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

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

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

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

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

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

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

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

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

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

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

В правой части окна редактора расположены две панели '''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|600px]]

Теперь окно редактора ресурсов можно свернуть, чтобы оно не мешало.
На сцене мы видим одного полноценного слонёнка и отдельно парящую голову.
В списке объектов (панель 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|600px]]

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

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

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

Попробуем во вьювере кликнуть на солнце, когда оно оказывается под головой духа слона.
Его форма не изменяется, так как картинка головы, хотя и является полупрозрачной, по умолчанию "не прокликивается". Чтобы изменить ситуацию, закроем вьювер (крестик) и отредактируем поле свойств головы с именем "'''прокликиваемая'''", поставив вместо 0 значение 1. Закончив редактирование поля (нажав 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]]

Файл:Play111.png

2017-09-22T12:59:09Z

Akarpel:

Файл:Move.png

2017-09-22T12:53:28Z

Akarpel:

Файл:Mov prop.png

2017-09-22T12:53:00Z

Akarpel:

Файл:El2.png

2017-09-22T12:52:42Z

Akarpel:

Файл:El.png

2017-09-22T12:52:35Z

Akarpel:

Файл:Mod.png

2017-09-22T12:52:08Z

Akarpel:

Файл:Add picture.png

2017-09-22T12:51:36Z

Akarpel:

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

2017-09-22T12:51:12Z

Akarpel:

Файл:000012.png

2017-09-22T12:50:31Z

Akarpel:

Файл:0000010.png

2017-09-22T12:50:21Z

Akarpel:

Файл:00009.png

2017-09-22T12:50:13Z

Akarpel:

Файл:00008.png

2017-09-22T12:50:05Z

Akarpel:

Файл:00007.png

2017-09-22T12:49:57Z

Akarpel:

Файл:00006.png

2017-09-22T12:49:49Z

Akarpel:

Файл:000005.png

2017-09-22T12:49:41Z

Akarpel:

Файл:000004.png

2017-09-22T12:49:34Z

Akarpel:

Файл:00003.png

2017-09-22T12:49:25Z

Akarpel:

Файл:00002.png

2017-09-22T12:49:17Z

Akarpel:

Файл:00001.png

2017-09-22T12:48:59Z

Akarpel:

Файл:1.png

2017-09-22T12:46:19Z

Akarpel: Akarpel загрузил новую версию Файл:1.png

Файл:View.png

2017-09-22T12:45:45Z

Akarpel:

Файл:Play.png

2017-09-22T12:45:25Z

Akarpel: Akarpel загрузил новую версию Файл:Play.png

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

2017-09-22T12:45:03Z

Akarpel:

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

2017-09-22T12:44:41Z

Akarpel:

Файл:Экран.png

2017-09-22T12:43:48Z

Akarpel:

Файл:Открыть проект.png

2017-09-22T12:43:10Z

Akarpel:

Файл:Меню.png

2017-09-22T12:42:24Z

Akarpel: