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

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

2013-03-05T11:59:45Z

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

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

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

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

== Puzzle ==

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

== Patchwork ==

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

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

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

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

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

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

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

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

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

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

[[Файл:Lesson8_4.jpg|right]]
3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.

4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 100х100 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2013-03-05T11:58:07Z

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

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

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

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

== Puzzle ==

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

== Patchwork ==

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

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

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

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

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

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

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

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

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

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

[[Файл:Lesson8_4.jpg|right]]
3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.

4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 100х100 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2013-03-05T11:54:34Z

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

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

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

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

== Puzzle ==

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

== Patchwork ==

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

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

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

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

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

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

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

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

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

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

[[Файл:Lesson8_4.jpg|right]]
3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.

4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 100х100 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2013-03-05T11:24:17Z

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

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

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

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

== Puzzle ==

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

== Patchwork ==

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

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

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

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

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

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

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

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

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

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

[[Файл:Lesson8_4.jpg|right]]
3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.

4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 100х100 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Движение машин: жучки, ключи и многое другое

2013-03-05T11:05:15Z

Imarunenko: /* Вращение вокруг пивота */

{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}
----
{{TOC right}}

'''Цель:''' изучить процессы движения и способы взаимодействия машин.

'''Задачи:'''
* реализовать разными методами "ход конем";
* организовать циклическое движение по квадрату;
* разобраться с понятием точки пивота;
* научиться согласовывать поступательное и вращательное движение;
* рассмотреть способ применения одного предмета на другой.

== Процессы и движение ==

До сих пор мы ограничивались только одной командой процессов - '''wait''' (ожидание).
В этом уроке мы рассмотрим другие процессы. Существуют следующие команды движения (изменения объекта):
* '''move''' - движение по прямой
* '''rot''' - вращение
* '''scale''' - изменение размера
* '''alpha''' - изменение прозрачности
* '''phys''' - движение в силовом поле.

В каждой команде достаточно много параметров. Например, можно сдвинуться (move)
по горизонтали на '''dx''' пикселей за время '''t'''. Вместо времени можно указать скорость '''v''' в пикселях в секунду.
Можно двигаться в определенную целевую точку с координатами ('''tx''', '''ty''') и т.д.

=== Ход конем ===

[[файл:lady_bug_64.png|right]]
Рассмотрим простой пример в котором объект движется сначала вверх на 100 пикселей, а затем вправо на 200.
В качестве такого объекта будем использовать ladybug (божья коровка или для краткости жучок),
картинку которой можно найти в редакторе ресурсов в папке этого урока.
Как обычно, перетаскиваем её на сцену, переименовываем и превращаем в машину состояний.
Организуем сначала движние нашего жучка при помощи трёх состояний:

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

Первое, стартовое состояние является запускающим. Если кликнуть на жучка, то он начнет своё движение.
Когда перемещение по вертикали заканчивается (состояние up), жучок переходит в третье состояние (right), в котором движется вправо.
Закончив движение, он возвращается в стартовое состояние и ждет очередного клика.

Координатная ось Y (вертикальная) на сцене направлена вниз, а ось X (горизонтальная) -- вправо.
Поэтому, чтобы жучок начал двигаться вверх, его смещение должно быть отрицательным.
В нашем случае это dy=-100. Эти 100 пикселей объект должен пройти за одну секунду (t=1000).
В конце выполнения команды move происходит переход в следующее состояние, имя которого задается в поле "'''go'''".

При движении вправо, происходит смещение на 200 пикселей.
Чтобы скорость движения вверх и вправо была постоянной, необходимо соответственно увеличить
время движения (t=2000).

Точно такое же движение можно организовать в рамках одного, а не двух состояний.
Поместите на сцену еще одного жучка, дайте ему другое имя и задайте следующую машину состояний:

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

Команды move в состоянии way выполняются последовательно.
Сначала отрабатывает нулевой move, а затем первый.

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

=== Последовательно и параллельно ===

И так, в рамках данного состояния все команды процессов с одинаковым названием выполняются '''последовательно'''.
При этом команды с разными именами выполняются '''параллельно'''.

[[файл:Def_procesess1.png|right]]
Пусть в состянии есть несколько команд move и несколько команд rot (вращения):
* move0 move1 rot0 move2 rot1 rot2
Независимо от их чередования, они выстраиваются в параллельные списки процессов:
* move0 rot0
* move1 rot1
* move2 rot2
Эти списки начинают одновременно выполняться сверху вниз:
отрабатывают команды move и одновременно с ними комананды rot.

Заставим нашего жучка при совершении хода конем поворачиваться на 360 градусов.
Для этого поместим третью машину со следующими состояниями:

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

Запустите проект во вьювере.
Одновременно с выполнением двух команд move будет выполняться одна команда rot.
Время выполнения rot равно суммарному времени двух команд move (t=3000=1000+2000).
В результате, к концу движения, жучок поворачивается на da=360 градусов ('''da''' - изменение угла).

Переход в следующее состояние '''go''' в данном случае можно было бы поставить не в команду '''rot''',
а в последнюю команду '''move'''. Однако приведенное решение лучше, так как
гарантирует, что переход произойдет только, когда жучок полностью развернется.
Хотя суммарное время move совпадает с временем rot, реальное компьютерное время
выполнения этих команд может немного отличаться. В результате, если выйти из
состояния по окончанию движения, можно получить не до конца развернувшегося жучка.

=== Циклическое движение ===

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

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

Четыре команды move выполняются одна за одной.
Затем вьювер натыкается на параметр loop=1 и еще раз выполняет
это движение с самого начала. Последняя команда move служит для перехода в стартовое состояние
ожидания клика.

Заметим, что нельзя было для перехода использовать '''wait'''.
Она, как и остальные команды процессов, запустилась бы параллельно с командами
и сработала бы сразу. В результате ни какого движения не получилось бы!

Если параметр loop=-1, то движение будет бесконечным.
Этого же можно было добиться, поставив вместо loop=-1 параметр go с переходом в это же состояние (перезапустить состояние).

=== Управление командами ===

Кроме команды зацикливания данного процесса, можно из одних команд запускать другие (начинать процессы другого типа). Например, пусть жучок движется вправо в течении 1 секунды и вращается 2 секунды.
Команда move закончится раньше команды rot.
Пусть затем, закончив полный оборот (на уже остановившемся объекте), он начинает снова двигаться вправо. Реализуется это так:

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

Команда '''rot''' зациклена (loop=-1). Кроме этого, она имеет параметр move=0
в котором задается номер команды move которую надо запустить на выполнение после окончания вращения.

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

=== Вращение вокруг пивота ===

При вращении (команда '''rot''') машина вращается вокруг, так называемой,
'''точки пивота''' (''pivot'' - штырь, болт; опорная точка).
В примерах выше эта точка находилась в центре картинки.
Изменим теперь её положение и посмотрим к какому эффекту это приведет.

Откроем редактор ресурсов и в папке этого урока найдем солнышко.
Сделаем четыре действия:
# Кликнем на имя солнышка (sun_1) в дереве на левой панели
# Под этой панелью поставим галочку в чекбоксе ''Edit pivot''.
# Схватимся мышкой за красный крестик в центре солнышка на правой панели и перетащим этот крестик влево.
# Уберем галочку в чекбоксе ''Edit pivot'':

[[файл:lesson_5_pivot.png|600px]]

Теперь перетащим солнышко на сцену этого урока (лучше для него создать отдельный экран).
Уменьшим его размеры модификаторами scale x и scale y, поставив там значение 0.5.
Превратим солнышко в такую машину:

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

Сохранив проект и запустив вьювер, мы увидим, что солнышко начало вращаться
по окружности. Машина по прежнему вращается вокруг точки пивота.
Однако теперь эта точка смещена в центр окружности.

В качестве упражнения попробуйте организовать вращение, подобное вращению Земли и Луны
(Земля вращается по окружности, а Луна вращается по окружности меньшего радиуса вокруг Земли).
Для этого Вам потребуется "Луну" сделать подобъектом "Земли" и правильно выставить
положение "Луны" относительно "Земли".
<blockquote>
[[файл:Ok.png|right|32px]]
'''Внимание!''' Если объект помещен в группу, то координаты его пивота изменяются относительно точки пивота того объекта, чьим подобъектом он является.
</blockquote>
Поэкспериментируйте. Можно использовать следующие картинки:

[[файл:eath.png]] [[файл:moon.png]]

== Как ездят кареты ==

=== Подготовка ===

Если Вы уже организовали движение Земли и Луны, то сложное движение,
возникающие при наличие подобъектов, не должно вызывать затруднений.
В этом примере мы покажем как согласовывать поступательное и
вращательное движение на примере кареты с двумя колёсами.
Разместим все три объекта (карету и её два колеса) на сцене
и сделаем колеса подобъектами кареты.
Превратим их все в машины состояний:

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

Пусть при клике на карету она проезжает некоторое расстояние по горизонтали и останавливается.
Сделайте самостоятельно такую машину и протестируйте её.
Карета должна перемещаться, а колеса, являясь её подобъектами, двигаться вместе с ней.
Однако, они пока не вращаются. Если в ресурсах не окажется колеса и кареты,
можно загрузить их непосредственно из этого урока:

[[файл:kareta.png]] [[файл:koleso.png]]

=== Немного математики ===

Разберемся как согласовать ''поступательную'' скорость кареты и ''угловую'' скорость вращения колес. Последняя должна быть подобрана таким образом, чтобы движение
выглядело естественным (колеса не проскальзывали вперед или назад).

Посмотрите на формулы возле рисунка кареты. В первой из них приводится связь длины окружности L колеса и его радиуса r. Ниже - коэффициент 57.3 перевода числа пи из углов в радианы (пи - это 3.1415.. в радианах или 180 градусов). Во второй колонке даны определения поступательной и угловой скорости (изменение расстояния или угла за некоторое время t).
Наконец, в третей колонке дана ключевая для нашей задачи формула, связывающая радиус '''r''', линейную '''v''' и угловую скорости '''w'''. Попробуйте её самостоятельно вывести, из предположения, что за одно и тоже время длина смещения кареты должна совпадать с длиной окружности обода колеса.
При этом поступательная скорость '''v''' измеряется в пикселях за секунду, а угловая скорость '''w''' в градусах за секунду.

=== Машины ===

Запрограммируем теперь карету и колеса так, что бы после клика начинала двигаться карета
и вращаться колеса. Когда карета останавливается, то и колеса должны переставать крутится.
Колеса сделаем одинаковыми простыми машинами с двумя состояниями, которые назовем '''off''' (неподвижны) и '''on''' (крутятся):

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

Заметим, что в состояниях колес нет команды draw, так как колесо всегда рисуется при помощи одной картинки, она берется по умолчанию, из той, которая была перетащена на сцену (свойство '''res''').
Угловая скорость '''v''' (в формулах она была обозначена как w) в команде rot измеряется в градусах в секунду. Поэтому v=180 означает, что колесо будет делать полный оборот (360 градусов) за 2 секунды.

Обратим внимание, что раньше вращение мы задавали двумя параметрами: изменением угла '''da''' за время '''t'''. Так как сейчас время вращения колеса не фиксируется (этим занимается карета),
то указан только один параметр: угловая скорость v.

Так как колеса одинаковые, то имеет смысл создать сначала одно колесо, запрограммировать его, а затем скопировать, получив готовое второе колесо. Его надо будет только затем мышкой перетащить на нужное место.
Не забываем также переименовать машины (в нашем случае это '''koleso1''' и '''koleso2''').

Карета должна при клике запускать на вращение колеса (переводя в состояние on),
а при остановке их останавливать:

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

Проверьте что параметр v=66 в команде move состояния run кареты, угловая скорость колес v=180 в команде rot состояния on согласуются с радиусом колеса r=21. Радиус колеса равен половине ширины его картинки (свойство "размер"). Если Ваше колесо имеет другой размер, пересчитайте поступательную скорость по приведенной выше формуле.

== Как открыть замок ключом ==

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

=== Постановка задачи ===

Рассмотрим простой пример подобного взаимодействия объектов.
Создайте новый экран и сцену на нём, так как предыдущий экран должен быть уже
забит различными насекомыми.
Перетащите на сцену из редактора ресурсов очередного жука, саквояж и ключ.
Лучше их перетаскивать именно в таком порядке.
Если порядок получился другой, мышкой в дереве проекта упорядочите
эти объекты, так чтобы последовательность рисования была: жук, затем саквояж, затем ключ.
Расположите эти объекты примерно в центре сцены и сделайте их машинами состояний.
Поменяйте их имена на '''ladybug''' (божья коровка), '''bag''' (саквояж) и '''key''' (ключ).

[[файл:lesson_5_key1.png|300px]]

Наша задача состоит в организации взаимодействия ключа, саквояжа и жука при котором,
работают такие правила:
* если схватить ключ мышкой, он будет таскаться по сцене в определенных границах;
* если отпустить ключ над саквояжем, саквояж должен "растаять", уменьшив свою прозрачность, а ключ уменьшиться в размерах, сжавшись в точку;
* одновременно с этим, из-под саквояжа начинает вверх бежать жук;
* когда жук заканчивает движение, саквояж появляется на своем месте, ключ также появляется на исходном месте, увеличившись из точки до начального размера, а жук исчезает, спрятавшись под саквояж.

=== Ключ ===

Запрограммируем сначала машину для ключа:

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

Три состояния соответствуют трём режимам функционирования ключа:
* '''drag''' - в этом, стартовом состоянии мы таскаем ключ по экрану
* '''open''' - открываем саквояж и уменьшаемся до 0
* '''back''' - восстанавливаем размер и возвращаемся в исходное положение на экране

Второе состояние состояние '''open''' не должно вызвать особых затруднений.
В команде '''set''' меняется состояние объекта '''bag''' (саквояж) на open.
В этот момент саквояж должен изобразить своё открытие.
В команде процессов '''scale''' происходит за время t=500 миллисекунд уменьшение масштаба рисования
ключа (его размера) до ''целевых значений'' tx, ty которые выбраны близкими к нулю.
После этого ключ переходит в третье состояние back.

В состоянии back он снова меняет свой масштаб, но уже к исходному значению 1
по ширине и высоте.
Кроме этого появилась новая команда '''init'''. Это команда инициализации
или переустановки свойств данной машины. В нашем случае, мы меняем её координаты
на значения x=0 и y=250 пикселей. Как и команда '''set''', команда '''init''' выполняется сразу при входе в состояние, поэтому ключ начнет увеличиваться уже с исходной позиции.
Желательно, на сцене ему сразу задать в свойствах положение x=0, y=250,
чтобы туда в дальнейшем он и возвращался.

Разберемся теперь с системой координат на сцене.

=== Координаты на сцене ===

Если сцена создавалась по умолчанию, то она имеет ширину 960 пикселей,
а высоту - 640. Начало отсчёта координат на сцене расположено в её центре.
Ось x, по которой откладывается горизонтальная координата объекта направлена вправо,
а ось Y для вертикальной координаты - вниз:

[[файл:lesson_5_key2.png|600px]]

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

Заметим, что координата объекта определяется его точкой пивота.
Для трех объектов, находящихся сейчас на сцене точка пивота должна
совпадать с центрами картинок.

Таким образом, когда мы задали в команде init положение для ключа x=0, y=250,
мы поместили его по середине, в нижней части сцены.

=== Драг энд дроп ===

[[файл:lesson_5_key3_drag.png|right]]
Осталось разобраться с ещё двумя новыми командами,
которые появились в состоянии drag.
Первая команда '''drag''' (таскать) означает, что данную машину в этом состоянии
разрешено мышкой таскать по экрану.
При этом могут быть заданы координаты области за которую объект вытащить нельзя.
Эта область определяется двумя точками - верхним левым углом с координатами (x1,y1)
и правым нижним углом с координатами (x2,y2).

В нашем случае эти точки почти совпадают с углами сцены.
На самом деле область разрешенного таскания чуть меньше размера сцены.
Сделано это для того, чтобы ключ нельзя было даже краешком вытащить за сцену.
Правый нижний угол сцены имеет координаты (x2, y2)=(480, 320)=(960/2, 640/2).
Ширина ключа 128 пикселей (см. свойство размер).
Поэтому, чтобы правая сторона ключа не выехала за сцену, для координаты y1
мы берем значение 416 = 480-128/2 (сужаем границу таскания на половину ширины ключа). Аналогично считаются остальные координаты области разрешенного таскания.

Наконец, команда '''drop''' (бросить), регулирует, что должно произойти при бросании ключа
(отпускания мышки) если оно произошло на объекте '''obj'''.
В данном случае происходит переход в новое состояние (поле '''go''').

=== Саквояж и жук ===

Создадим теперь машину для саквояжа.
Она будет иметь два состояния open и close:

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

В состоянии close в команде '''init''' саквояж переустанавливает свою прозрачность в единичное значение (непрозрачен) al=1.00. Это необходимо, что бы появиться на экране после исчезновения.
Сам процесс исчезновения задается командой процесса '''alpha''' в состоянии open.
Эта команда меняет текущую прозрачность объекта до целевого значения ta=0 (полностью прозрачен) за время t=500 миллисекунд (пол секунды).
Кроме этого в этом состоянии меняется состояние жука (команда '''set'''), который должен из под саквояжа начать бежать.

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

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

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

== Что дальше? ==

Мы разобрали много команд и их параметров.
Однако это далеко не все возможности машин состояний.
Стоит прочитать документ [[Machine]] в котором описан весь язык машин.
Чем больше Вы создадите машин с различным поведением, тем увереннее будете с ними работать.

В заключение приведем несколько общих советов:
* Проектируйте сначала логику поведения машин на бумаге.
* Давайте осмысленные названия для машин и их состояний.
* Обязательно документируйте машины, описывая их поведение на естественном языке.
* Копируйте однотипные машины для сокращения времени по их программированию.
* При сложном взаимодействии нескольких машин, вводите управляющую машину (возможно невидимую), в которой концентрируйте основную логику поведения.
* Не увлекайтесь длинными состояниями с множеством команд процессов. Иногда поведение становится понятнее, если состояние разбить на несколько последовательных состояний.
* Смело спрашивайте совета у более опытных дизайнеров. Они в своё время поступали именно так.

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

* создайте движение Земли по окружности, а Луны также по окружности, но вокруг Земли;
* сделайте движение кареты бесконечным так, что после того как она уезжает за правый край экрана, она появлялась из-за левого края;
* заставьте жука начинать бежать, только когда саквояж полностью уменьшиться (set на выходе из состояния).
* организуйте так, чтобы при перетаскивании ключа в область саквояжа, жук развернулся на 180 градусов и двигался вниз, обратно под саквояж.

----
{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}

Движение машин: жучки, ключи и многое другое

2013-03-05T11:03:44Z

Imarunenko: /* Вращение вокруг пивота */

{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}
----
{{TOC right}}

'''Цель:''' изучить процессы движения и способы взаимодействия машин.

'''Задачи:'''
* реализовать разными методами "ход конем";
* организовать циклическое движение по квадрату;
* разобраться с понятием точки пивота;
* научиться согласовывать поступательное и вращательное движение;
* рассмотреть способ применения одного предмета на другой.

== Процессы и движение ==

До сих пор мы ограничивались только одной командой процессов - '''wait''' (ожидание).
В этом уроке мы рассмотрим другие процессы. Существуют следующие команды движения (изменения объекта):
* '''move''' - движение по прямой
* '''rot''' - вращение
* '''scale''' - изменение размера
* '''alpha''' - изменение прозрачности
* '''phys''' - движение в силовом поле.

В каждой команде достаточно много параметров. Например, можно сдвинуться (move)
по горизонтали на '''dx''' пикселей за время '''t'''. Вместо времени можно указать скорость '''v''' в пикселях в секунду.
Можно двигаться в определенную целевую точку с координатами ('''tx''', '''ty''') и т.д.

=== Ход конем ===

[[файл:lady_bug_64.png|right]]
Рассмотрим простой пример в котором объект движется сначала вверх на 100 пикселей, а затем вправо на 200.
В качестве такого объекта будем использовать ladybug (божья коровка или для краткости жучок),
картинку которой можно найти в редакторе ресурсов в папке этого урока.
Как обычно, перетаскиваем её на сцену, переименовываем и превращаем в машину состояний.
Организуем сначала движние нашего жучка при помощи трёх состояний:

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

Первое, стартовое состояние является запускающим. Если кликнуть на жучка, то он начнет своё движение.
Когда перемещение по вертикали заканчивается (состояние up), жучок переходит в третье состояние (right), в котором движется вправо.
Закончив движение, он возвращается в стартовое состояние и ждет очередного клика.

Координатная ось Y (вертикальная) на сцене направлена вниз, а ось X (горизонтальная) -- вправо.
Поэтому, чтобы жучок начал двигаться вверх, его смещение должно быть отрицательным.
В нашем случае это dy=-100. Эти 100 пикселей объект должен пройти за одну секунду (t=1000).
В конце выполнения команды move происходит переход в следующее состояние, имя которого задается в поле "'''go'''".

При движении вправо, происходит смещение на 200 пикселей.
Чтобы скорость движения вверх и вправо была постоянной, необходимо соответственно увеличить
время движения (t=2000).

Точно такое же движение можно организовать в рамках одного, а не двух состояний.
Поместите на сцену еще одного жучка, дайте ему другое имя и задайте следующую машину состояний:

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

Команды move в состоянии way выполняются последовательно.
Сначала отрабатывает нулевой move, а затем первый.

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

=== Последовательно и параллельно ===

И так, в рамках данного состояния все команды процессов с одинаковым названием выполняются '''последовательно'''.
При этом команды с разными именами выполняются '''параллельно'''.

[[файл:Def_procesess1.png|right]]
Пусть в состянии есть несколько команд move и несколько команд rot (вращения):
* move0 move1 rot0 move2 rot1 rot2
Независимо от их чередования, они выстраиваются в параллельные списки процессов:
* move0 rot0
* move1 rot1
* move2 rot2
Эти списки начинают одновременно выполняться сверху вниз:
отрабатывают команды move и одновременно с ними комананды rot.

Заставим нашего жучка при совершении хода конем поворачиваться на 360 градусов.
Для этого поместим третью машину со следующими состояниями:

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

Запустите проект во вьювере.
Одновременно с выполнением двух команд move будет выполняться одна команда rot.
Время выполнения rot равно суммарному времени двух команд move (t=3000=1000+2000).
В результате, к концу движения, жучок поворачивается на da=360 градусов ('''da''' - изменение угла).

Переход в следующее состояние '''go''' в данном случае можно было бы поставить не в команду '''rot''',
а в последнюю команду '''move'''. Однако приведенное решение лучше, так как
гарантирует, что переход произойдет только, когда жучок полностью развернется.
Хотя суммарное время move совпадает с временем rot, реальное компьютерное время
выполнения этих команд может немного отличаться. В результате, если выйти из
состояния по окончанию движения, можно получить не до конца развернувшегося жучка.

=== Циклическое движение ===

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

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

Четыре команды move выполняются одна за одной.
Затем вьювер натыкается на параметр loop=1 и еще раз выполняет
это движение с самого начала. Последняя команда move служит для перехода в стартовое состояние
ожидания клика.

Заметим, что нельзя было для перехода использовать '''wait'''.
Она, как и остальные команды процессов, запустилась бы параллельно с командами
и сработала бы сразу. В результате ни какого движения не получилось бы!

Если параметр loop=-1, то движение будет бесконечным.
Этого же можно было добиться, поставив вместо loop=-1 параметр go с переходом в это же состояние (перезапустить состояние).

=== Управление командами ===

Кроме команды зацикливания данного процесса, можно из одних команд запускать другие (начинать процессы другого типа). Например, пусть жучок движется вправо в течении 1 секунды и вращается 2 секунды.
Команда move закончится раньше команды rot.
Пусть затем, закончив полный оборот (на уже остановившемся объекте), он начинает снова двигаться вправо. Реализуется это так:

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

Команда '''rot''' зациклена (loop=-1). Кроме этого, она имеет параметр move=0
в котором задается номер команды move которую надо запустить на выполнение после окончания вращения.

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

=== Вращение вокруг пивота ===

При вращении (команда '''rot''') машина вращается вокруг, так называемой,
'''точки пивота''' (''pivot'' - штырь, болт; опорная точка).
В примерах выше эта точка находилась в центре картинки.
Изменим теперь её положение и посмотрим к какому эффекту это приведет.

Откроем редактор ресурсов и в папке этого урока найдем солнышко.
Сделаем четыре действия:
# Кликнем на имя солнышка (sun_1) в дереве на левой панели
# Под этой панелью поставим галочку в чекбоксе ''Edit pivot''.
# Схватимся мышкой за красный крестик в центре солнышка на правой панели и перетащим этот крестик влево.
# Уберем галочку в чекбоксе ''Edit pivot'':

[[файл:lesson_5_pivot.png|600px]]

Теперь перетащим солнышко на сцену этого урока (лучше для него создать отдельный экран).
Уменьшим его размеры модификаторами scale x и scale y, поставив там значение 0.5.
Превратим солнышко в такую машину:

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

Сохранив проект и запустив вьювер, мы увидим, что солнышко начало вращаться
по окружности. Машина по прежнему вращается вокруг точки пивота.
Однако теперь эта точка смещена в центр окружности.

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

[[файл:eath.png]] [[файл:moon.png]]

== Как ездят кареты ==

=== Подготовка ===

Если Вы уже организовали движение Земли и Луны, то сложное движение,
возникающие при наличие подобъектов, не должно вызывать затруднений.
В этом примере мы покажем как согласовывать поступательное и
вращательное движение на примере кареты с двумя колёсами.
Разместим все три объекта (карету и её два колеса) на сцене
и сделаем колеса подобъектами кареты.
Превратим их все в машины состояний:

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

Пусть при клике на карету она проезжает некоторое расстояние по горизонтали и останавливается.
Сделайте самостоятельно такую машину и протестируйте её.
Карета должна перемещаться, а колеса, являясь её подобъектами, двигаться вместе с ней.
Однако, они пока не вращаются. Если в ресурсах не окажется колеса и кареты,
можно загрузить их непосредственно из этого урока:

[[файл:kareta.png]] [[файл:koleso.png]]

=== Немного математики ===

Разберемся как согласовать ''поступательную'' скорость кареты и ''угловую'' скорость вращения колес. Последняя должна быть подобрана таким образом, чтобы движение
выглядело естественным (колеса не проскальзывали вперед или назад).

Посмотрите на формулы возле рисунка кареты. В первой из них приводится связь длины окружности L колеса и его радиуса r. Ниже - коэффициент 57.3 перевода числа пи из углов в радианы (пи - это 3.1415.. в радианах или 180 градусов). Во второй колонке даны определения поступательной и угловой скорости (изменение расстояния или угла за некоторое время t).
Наконец, в третей колонке дана ключевая для нашей задачи формула, связывающая радиус '''r''', линейную '''v''' и угловую скорости '''w'''. Попробуйте её самостоятельно вывести, из предположения, что за одно и тоже время длина смещения кареты должна совпадать с длиной окружности обода колеса.
При этом поступательная скорость '''v''' измеряется в пикселях за секунду, а угловая скорость '''w''' в градусах за секунду.

=== Машины ===

Запрограммируем теперь карету и колеса так, что бы после клика начинала двигаться карета
и вращаться колеса. Когда карета останавливается, то и колеса должны переставать крутится.
Колеса сделаем одинаковыми простыми машинами с двумя состояниями, которые назовем '''off''' (неподвижны) и '''on''' (крутятся):

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

Заметим, что в состояниях колес нет команды draw, так как колесо всегда рисуется при помощи одной картинки, она берется по умолчанию, из той, которая была перетащена на сцену (свойство '''res''').
Угловая скорость '''v''' (в формулах она была обозначена как w) в команде rot измеряется в градусах в секунду. Поэтому v=180 означает, что колесо будет делать полный оборот (360 градусов) за 2 секунды.

Обратим внимание, что раньше вращение мы задавали двумя параметрами: изменением угла '''da''' за время '''t'''. Так как сейчас время вращения колеса не фиксируется (этим занимается карета),
то указан только один параметр: угловая скорость v.

Так как колеса одинаковые, то имеет смысл создать сначала одно колесо, запрограммировать его, а затем скопировать, получив готовое второе колесо. Его надо будет только затем мышкой перетащить на нужное место.
Не забываем также переименовать машины (в нашем случае это '''koleso1''' и '''koleso2''').

Карета должна при клике запускать на вращение колеса (переводя в состояние on),
а при остановке их останавливать:

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

Проверьте что параметр v=66 в команде move состояния run кареты, угловая скорость колес v=180 в команде rot состояния on согласуются с радиусом колеса r=21. Радиус колеса равен половине ширины его картинки (свойство "размер"). Если Ваше колесо имеет другой размер, пересчитайте поступательную скорость по приведенной выше формуле.

== Как открыть замок ключом ==

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

=== Постановка задачи ===

Рассмотрим простой пример подобного взаимодействия объектов.
Создайте новый экран и сцену на нём, так как предыдущий экран должен быть уже
забит различными насекомыми.
Перетащите на сцену из редактора ресурсов очередного жука, саквояж и ключ.
Лучше их перетаскивать именно в таком порядке.
Если порядок получился другой, мышкой в дереве проекта упорядочите
эти объекты, так чтобы последовательность рисования была: жук, затем саквояж, затем ключ.
Расположите эти объекты примерно в центре сцены и сделайте их машинами состояний.
Поменяйте их имена на '''ladybug''' (божья коровка), '''bag''' (саквояж) и '''key''' (ключ).

[[файл:lesson_5_key1.png|300px]]

Наша задача состоит в организации взаимодействия ключа, саквояжа и жука при котором,
работают такие правила:
* если схватить ключ мышкой, он будет таскаться по сцене в определенных границах;
* если отпустить ключ над саквояжем, саквояж должен "растаять", уменьшив свою прозрачность, а ключ уменьшиться в размерах, сжавшись в точку;
* одновременно с этим, из-под саквояжа начинает вверх бежать жук;
* когда жук заканчивает движение, саквояж появляется на своем месте, ключ также появляется на исходном месте, увеличившись из точки до начального размера, а жук исчезает, спрятавшись под саквояж.

=== Ключ ===

Запрограммируем сначала машину для ключа:

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

Три состояния соответствуют трём режимам функционирования ключа:
* '''drag''' - в этом, стартовом состоянии мы таскаем ключ по экрану
* '''open''' - открываем саквояж и уменьшаемся до 0
* '''back''' - восстанавливаем размер и возвращаемся в исходное положение на экране

Второе состояние состояние '''open''' не должно вызвать особых затруднений.
В команде '''set''' меняется состояние объекта '''bag''' (саквояж) на open.
В этот момент саквояж должен изобразить своё открытие.
В команде процессов '''scale''' происходит за время t=500 миллисекунд уменьшение масштаба рисования
ключа (его размера) до ''целевых значений'' tx, ty которые выбраны близкими к нулю.
После этого ключ переходит в третье состояние back.

В состоянии back он снова меняет свой масштаб, но уже к исходному значению 1
по ширине и высоте.
Кроме этого появилась новая команда '''init'''. Это команда инициализации
или переустановки свойств данной машины. В нашем случае, мы меняем её координаты
на значения x=0 и y=250 пикселей. Как и команда '''set''', команда '''init''' выполняется сразу при входе в состояние, поэтому ключ начнет увеличиваться уже с исходной позиции.
Желательно, на сцене ему сразу задать в свойствах положение x=0, y=250,
чтобы туда в дальнейшем он и возвращался.

Разберемся теперь с системой координат на сцене.

=== Координаты на сцене ===

Если сцена создавалась по умолчанию, то она имеет ширину 960 пикселей,
а высоту - 640. Начало отсчёта координат на сцене расположено в её центре.
Ось x, по которой откладывается горизонтальная координата объекта направлена вправо,
а ось Y для вертикальной координаты - вниз:

[[файл:lesson_5_key2.png|600px]]

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

Заметим, что координата объекта определяется его точкой пивота.
Для трех объектов, находящихся сейчас на сцене точка пивота должна
совпадать с центрами картинок.

Таким образом, когда мы задали в команде init положение для ключа x=0, y=250,
мы поместили его по середине, в нижней части сцены.

=== Драг энд дроп ===

[[файл:lesson_5_key3_drag.png|right]]
Осталось разобраться с ещё двумя новыми командами,
которые появились в состоянии drag.
Первая команда '''drag''' (таскать) означает, что данную машину в этом состоянии
разрешено мышкой таскать по экрану.
При этом могут быть заданы координаты области за которую объект вытащить нельзя.
Эта область определяется двумя точками - верхним левым углом с координатами (x1,y1)
и правым нижним углом с координатами (x2,y2).

В нашем случае эти точки почти совпадают с углами сцены.
На самом деле область разрешенного таскания чуть меньше размера сцены.
Сделано это для того, чтобы ключ нельзя было даже краешком вытащить за сцену.
Правый нижний угол сцены имеет координаты (x2, y2)=(480, 320)=(960/2, 640/2).
Ширина ключа 128 пикселей (см. свойство размер).
Поэтому, чтобы правая сторона ключа не выехала за сцену, для координаты y1
мы берем значение 416 = 480-128/2 (сужаем границу таскания на половину ширины ключа). Аналогично считаются остальные координаты области разрешенного таскания.

Наконец, команда '''drop''' (бросить), регулирует, что должно произойти при бросании ключа
(отпускания мышки) если оно произошло на объекте '''obj'''.
В данном случае происходит переход в новое состояние (поле '''go''').

=== Саквояж и жук ===

Создадим теперь машину для саквояжа.
Она будет иметь два состояния open и close:

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

В состоянии close в команде '''init''' саквояж переустанавливает свою прозрачность в единичное значение (непрозрачен) al=1.00. Это необходимо, что бы появиться на экране после исчезновения.
Сам процесс исчезновения задается командой процесса '''alpha''' в состоянии open.
Эта команда меняет текущую прозрачность объекта до целевого значения ta=0 (полностью прозрачен) за время t=500 миллисекунд (пол секунды).
Кроме этого в этом состоянии меняется состояние жука (команда '''set'''), который должен из под саквояжа начать бежать.

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

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

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

== Что дальше? ==

Мы разобрали много команд и их параметров.
Однако это далеко не все возможности машин состояний.
Стоит прочитать документ [[Machine]] в котором описан весь язык машин.
Чем больше Вы создадите машин с различным поведением, тем увереннее будете с ними работать.

В заключение приведем несколько общих советов:
* Проектируйте сначала логику поведения машин на бумаге.
* Давайте осмысленные названия для машин и их состояний.
* Обязательно документируйте машины, описывая их поведение на естественном языке.
* Копируйте однотипные машины для сокращения времени по их программированию.
* При сложном взаимодействии нескольких машин, вводите управляющую машину (возможно невидимую), в которой концентрируйте основную логику поведения.
* Не увлекайтесь длинными состояниями с множеством команд процессов. Иногда поведение становится понятнее, если состояние разбить на несколько последовательных состояний.
* Смело спрашивайте совета у более опытных дизайнеров. Они в своё время поступали именно так.

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

* создайте движение Земли по окружности, а Луны также по окружности, но вокруг Земли;
* сделайте движение кареты бесконечным так, что после того как она уезжает за правый край экрана, она появлялась из-за левого края;
* заставьте жука начинать бежать, только когда саквояж полностью уменьшиться (set на выходе из состояния).
* организуйте так, чтобы при перетаскивании ключа в область саквояжа, жук развернулся на 180 градусов и двигался вниз, обратно под саквояж.

----
{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}

Экспорт, импорт и релиз проекта

2013-03-05T10:49:26Z

Imarunenko: /* Лейауты */

{| width="100%"
| width="40%"|[[Работа с эффектами|Урок 9]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Создание простой адвентюры|Урок 11]]
|}
----
{{TOC right}}
----
'''Цель:'''
создать исполняемый файл для запуска проекта на для поддержки всех устройств Apple.

'''Задачи:'''
* проверить параметры созданного проекта;
* Настроить viever.xml;
* подготовить проект для финального релиза;
* определить параметры экспорта проекта;
* подготовить проект для создания исполняемого файла;
* запустить проект на устройстве.

== Лейауты ==

Напомним ([[Введение в AppSalute Сreator|урок 1]]), что лейаут (layout) -
это экран конкретного устройства (телефон, планшетник, десктоп),
имеющего определенное разрешение в пикселях:

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

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

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

=== Один Layout на разных экранах ===
[[Файл:L01.png|400px|right]]

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

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

===Параметры===

*sx - ручное масштабирование по х
*sy - ручное масштабирование по y
*x - сдвиг изображения по x
*y - сдвиг изображения по y
*autoPosX - автоматическое позиционирование по х
*autoPosY - автоматическое позиционирование по y
*autoScX - автоматическое масштабирование по x
*autoScY - автоматическое масштабирование по y

===Расшифровка viever.xml===

<dev /> - устройство(разрешение экрана полученое из системы) на котором будут применяться параметры

w, h - ширина и высота разрешения экрана устройства для которого будут применены параметры

далее идут параметры масштабирования, сдвига и позиционирования экрана

nm - название лейаута, отображается на экрана в отладочном режиме на экране настроек

===Применение===
Пусть экран размера 960х640 и необходимо его настроить следующим образом:
для ipad-ов предусмотрены сверху и снизу поля, которые "отрежутся", для iphone5 предусмотрена справа и слева графика. Следовательно для ipad надо растянуть изображение по ширине, для iphone 5 по высоте, для iphone 4 - без разницы - родное разрешение.

Для этого необходимо составить настройки для всех разрешений экранов.

'''iPad'''

# укажем разрешение экрана w="1024" h="768" для ipad 1, 2, mini и w="2048" h="1536" для ipad 3
# автоматически потянем по ширине autoScX="1" - изображение пропорционально отмасштабируется таким образом, чтобы ширина экрана соответствовала ширине экрана устройства.
# автоматически отпозиционируем по y - т.к. по ширине тянем autoPosY="1"
# можно указать что по y пропорционально не надо тянуть autoScY="0", хотя это не обязательно
# укажем название nm="ipad 1 2" и nm="ipad 3" - удобно для проверки

<dev w="1024" h="768" autoPosY="1" autoScX="1" autoScY="0" nm="ipad 1 2" />

<dev w="2048" h="1536" autoPosY="1" autoScX="1" autoScY="0" nm="ipad 3" />

'''iPhone 4/4s'''

# укажем разрешение экрана w="960" h="640"
# автоматически потянем по ширине autoScX="1" - изображение пропорционально отмасштабируется таким образом, чтобы ширина экрана соответствовала ширине экрана устройства. Хотя можно тянуть и по y.
# автоматически отпозиционируем по y - т.к. по ширине тянем autoPosY="1"
# можно указать что по y пропорционально не надо тянуть autoScY="0", хотя это не обязательно
# укажем название nm="iphone 4"

<dev w="960" h="640" autoPosY="1" autoScX="1" autoScY="0" nm="iphone 4" />

'''iPhone 5'''

# укажем разрешение экрана w="1136" h="640"
# автоматически потянем по ширине autoScY="1" - изображение пропорционально отмасштабируется таким образом, чтобы высота экрана соответствовала высоте экрана устройства.
# автоматически отпозиционируем по x - т.к. по ширине тянем autoPosX="1"
# можно указать что по x пропорционально не надо тянуть autoScX="0", хотя это не обязательно
# укажем название nm="iphone 5"

<dev w="960" h="1136" autoPosX="1" autoScY="1" autoScX="0" nm="iphone 5" />

В итоге получим такую конфигурацию файла:

<pre>
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<viewer>
<banners platform_id="2" instal_dir="assets/games/iphone/"/>
<globaltop />
<flurry game_id=""/>
<dev w="1024" h="768" autoPosY="1" autoScX="1" autoScY="0" nm="ipad 1 2" />
<dev w="2048" h="1536" autoPosY="1" autoScX="1" autoScY="0" nm="ipad 3" />
<dev w="960" h="640" autoPosY="1" autoScX="1" autoScY="0" nm="iphone 4" />
<dev w="960" h="1136" autoPosX="1" autoScY="1" autoScX="0" nm="iphone 5" />
<default prj="project.seproj" cut="0" video_memory="64715200" color_aabbggrr="ff000000" scr="0" lay="0"/>
</viewer>
</pre>

Если надо отключить полосу загрузки, которая показывается при переходе между экранами делается это добавлением параметра progressbar="0".

<default prj="project.seproj" cut="0" video_memory="64715200" color_aabbggrr="ff000000" scr="0" lay="0" ''progressbar="0"'' />

===Правила применения===

# следует избегать одновременного масштабирования по x и по y
# если масштабируется изображение по x, то позиционирование должно быть по y
# использовать или ручной сдвиг, или позиционирование. Лучше позиционирование.

[[Файл:Plat.png|right]]

== Подготовка проекта ==
Мы подошли к самому интересному :-), - это запуск проекта на мобильном устройстве и не только.

При экспорте проекта осуществляется поддержка основных платформ:

*iPhone
*Android
*Windows
*MacOS (Для сборки пакета необходима инсталляция на OS Mac)
*Play Book (Blackberry)
*Flash [[Файл:FlashPlayer.png|30px]]

=== Создание нового проекта ===

Перед экспортом проекта необходимо проверить настройки проекта.
*Конфигурацию в файле app.icf
*Настройки шрифтов
*Наличие иконок

Общая структура файла конфигурации приложения [[App.icf|app.icf описана здесь]]

Основные параметры которые необходимо проверить
*'''MemSize'''=32000000 - значение памяти которое выделяем для приложения
*[Fonts]

font_1="1_arial_16" - шрифт и его номер который используется в проекте

=== Экспорт ===
[[Файл:Exp11.png|right]]
Процедура экспорта с точки зрения пользователя одна из самых простых и требует минимальных настроек, однако скрытые операции достаточно сложны и ресурсоемки. Экспорт проекта необходимо проводить каждый раз перед созданием исполняемых файлов.

Основные этапы
*Выполняется сжатие графики при необходимости
*Очистка базы ресурсов от неиспользуемой графики
*Запаковка графики в текстуры и контейнер

Итак, перед экспортом проекта необходимо сохранить все изменения сделанные в проекте ранее.

Настройки экспорта состоят из:

[[Файл:Exp12.png|right]]

'''Параметров сжатия графики''' - Можно указывать значение от 1 до 0 для осей '''x'''(width) '''y'''(height). Указанный параметр '''x'''= 0,75 будет соответствовать 75% по ширине от исходного размера лейаута. Сжатие также возможно и непропорциональное т е с указанием разных значений по осям (не рекомендуется использовать).
Пример использования: вы создали проект для iPad retina с размерами лейаута (2024x1536), теперь вы хотите сформировать исполняемый файл для Android планшета с разрешением экрана 1024х768. Для этого необходимо указать в параметрах '''x''' и '''y''' значение равное 0,5 (50%). В результате экспорта получим графику с разрешением 1024х768 и все параметры проекта будут пересчитаны под данное разрешение.

'''Результат:''' значительная экономия в размерах .apk файла и огромная экономия оперативной памяти на устройстве.

'''Тип экспорта'''
*'''One project file''' - формируется один XML файл описывающий проект. Рекомендуется использовать второй тип при значительных размерах проекта.

*'''Split project on screens, load partly''' - проект будет разбит на отдельные файлы описывающие экраны, загружаться файлы будут в порядке использования (вызова) в проекте. В результате получаем увеличение начальной загрузки проекта и использование меньшего объема оперативной памяти.

'''Параметры запаковки графики'''
*'''Packege Type''' - упаковка ресурсов в фаил с типом DAT. Обеспечиваем защиту ресурсов проекта от несанкционированного доступа. Увеличиваем производительность при операциях чтения файлов ресурсов с твердотельного носителя.
*'''Texture Type''' - упаковка графических файлов в текстуры. Необходимо для уменьшения используемого объема оперативной памяти.

'''Export to folder''' - Путь для экспорта. Для создания папки с экспортом необходимо указать любой путь (папку) на диске. Будет создана папка [[Файл:Proj_folder.png]]

Структура папки:

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

'''Select platform''' - необходимо выбрать платформу для которой будем собирать проект.

'''Примечание:''' ''Для сборки под различный платформы необходимо установить Marmalade SDK'' [[Установка и настройка|см. инструкцию]]
при этом не нужно указывать путь для экспорта (оставить поле пустым). В результате запустится скрипт сборки исполняемого пакета,
это будет видно по черным экранам с ходом выполнения процесса сборки.

'''Итак:''' Сохраняем открытый проект с выполненными уроками <tt>Project</tt> → <tt>Export</tt> настраиваем параметры как показано на картинке

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

Нажимаем кнопку <tt>Ok</tt> и ждем несколько минут.
Процесс экспорта будет отображаться в окне

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

В результате экспорта у вас должно открыться приложение iTunes с добавленным проектом Absolutist с иконкой [[Файл:114.png|50px]]

'''Поздравляю Вы это сделали!!'''

Если вы не получили ожидаемого результата необходимо проверить следующее:
# Для сборки пакетов под iPhone платформу вы должны иметь сертификат разработчика
# Проверить ход выполнения настройки по [[Установка и настройка|см. инструкцию]]
# Проверить и\или установить iTunes

Если вы обладатель мобильного устройства на системе Android необходимо указать ''Android'' в разделе '''Select platform''' и вы получите фаил absolutist.apk

'''Поздравляю Вы это сделали!!'''

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

* Настройте параметры viever.xml для корректной работы на вашем мобильном устройстве (если конечно оно у вас есть)
* Настройте параметры viever.xml для системы Windows под рабочий монитор
* Определите какое разрешение для ваших игр наиболее подходящее
* Создайте проект для вашего мобильного устройства

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

Создание игры «Hidden Object Game»

2013-03-05T10:42:49Z

Imarunenko: /* Детальная настройка объектов */

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 5]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 7]]
|}
----
{{TOC right}}

'''Цель:''' Изучить настройки объектов HiddenObjectList, HiddenObject и Table для типа механики Hidden Object Game на базе создания уровня из игры Travel.

'''Задача:''' Создать уровень игры содержащей 10 поисковых объектов расположенных на одном бэкграунде (фоне). При инициализации сцены обеспечить размещение 5 объектов для поиска.

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

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

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

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

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

4. В экране Lesson_07 создать новую сцену* 07 с разрешением 960*640, в которую (через ResourcesEditor) добавить графические ресурсы из папки Sources\Lesson_07 (см. подготовка к работе [[Создание проекта]])

* Для корректной работы на мобильном устройстве необходимо настроить параметр.

* Графические объекты должны разместиться точно на местах предназначенных для их «Прятанья».

5. Создать папку Lesson_07 в базе текстовых описаний с помощью TextEditor.

6. Добавить в папку Lesson_07 10 текстовые записи, соответствующие именам поисковых объектов.

7. Присвоить каждой текстовой записи значение Word, Sentence-En, добавить графическое отображение поискового объекта с типом icon1.

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

== Общая настройка объектов ==

1. Для всех поисковых графических объектов изменить тип с image на HiddenObject.

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

2. Создать специальные объекты Table и HiddenList. Для этого необходимо перенести графическое изображение table с последующим изменением типа с image на Table. Название объекта изменить на HOT**

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

3. Для объекта HiddenList перенести любое графическое изображение с последующим изменением типа с image на HiddenList и удалением графического ресурса из поля настроек (res)*. Название объекта изменить на HOL**

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

*Для данного типа объекта не требуется графический ресурс.

**Имена для специальных объектов могут использоваться любые.

[[Файл:07 10.png]]

== Детальная настройка объектов ==

1. Описание HiddenObject.

''HiddenObject'' поисковый объект, взаимодействующий со списком HiddenList. Каждому поисковому объекту необходимо указать графический ресурс (картинку), идентификатор объекта HiddenList и идентификатор текстового ресурса (строки описания) в HiddenList.

Необходимо выбрать используемый объект с именем HOL (тип HiddenObjectList) в поле list.

[[Файл:07 7.png]]

''текстID'' – выводимый в списке текст - идентификатор из редактора строк (txtid);

''текст'' – обычный текст (аналогично txtID, для быстрых экспериментов) (txtid);

''list'' – необходимо выбрать объект с типом HiddenList для обеспечения связи объектов;

''flyer'' – объект типа flyer, который нуждо запустить на работу при клике на поисковй объект (огонечки). Эти флаеры запускаются при удачном клике (объект нашли). Неудачный клик обрабатывает HiddenList. Если не задан, используется fly_ok объекта HiddenList.(objid);

''actor'' – объект, который должен отобразить анимацию спрятанного объекта после удачного клика на него (обычно это машина состояния); если его нет выполняется предопределенное поведение;

''тип'' – используется для логического разделения объектов при обработке HiddenList.

2. Описание HiddenObjectList.

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

HiddenList определяет основные параметры для настройки HiddenObject (скорость полета и т.п.). В дальнейшем, при необходимости, эти же параметры можно добавить в HiddenObject, чтобы для данного объекта они "перебивали" общие значения для всех.

[[Файл:07 8.png]]

3. Описание Table

[[Файл:07 9.png]]

4. Подготовка спрятанных объектов:

''num'' – максимальное количество объектов, участвующие в поиске. (int)

''hide'' – если 1, то делать невидимыми объекты, не участвующие в поиске. (int)

5. Визуальные параметры списка:

''table'' – идентификатор объекта Table. (objid)

''txtKn'' – тип отображения (0-слово,1-ассоциация, 2-иконка, 3-иконка). (int)

''cross'' – зачеркивать найденный элемент списка. Eсли 0 (по умолчанию), то найденный элемент исчезает, иначе "зачеркивается".(int).

Зачеркивание может быть нескольких видов: перечеркнутый текст, иконка другого вида (alpha, цвет, картинка) TODO.

6. Параметры, общие для всех спрятанных объектов:

''die'' – тип исчезания при удачном клике на объект (если нет актера) (int):

0: просто исчезает;

1: летит к пункту с описанием в списке HiddenList;

2: улетает в случайном направлении;

3: улетает к заданным координатам (fx, fy).

vm - скорость движения при полете к списку предметов после клика в px/sec (float)

vr - скорость вращения при полете к списку предметов после клик в град/sec (float)

fw - финальная ширина к которой надо уменьшится при подлете к финальной точке (int)

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

fx - финальная координата x, к которой объект должен перелететь, при удачном клике (см. тип исчезания). (int)

fy - финальная координата x, к которой объект должен перелететь, при удачном клике (см. тип исчезания). (int)

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

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

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

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

4. Вставить скопированые объекты в новую сцену 07.1.

[[Файл:07 11.png]]

5. В новой сцене:

a) добавить еще 3 графических ресурса и перевести в тип HiddenObject;

b) разместить на местах предназначенных для их «Прятанья»;

c) добавить текстовое описание в TextEditor;

e) установить время игры 20 секунд, паузу 2 секунды с переходом на экран Lesson_07.1.

----
{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 5]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 7]]
|}

Checkbox как машина состояний

2013-03-05T09:58:03Z

Imarunenko: /* Создание чекбокса */

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

'''Цель:''' изучить понятие машины состояний на примере объекта Checkbox

'''Задачи:'''
* Cоздать новый экран и сцену для этого урока.
* При помощи объекта Checkbox заставит слонёнка поворачивать голову.
* Воспроизвести этого же слонёнка при помощи машины состояний.
* Добавить разнообразия в поведении слонёнка.
* Создать эмоциональную рожицу.

== Checkbox ==

=== Подготовка ===

Начнём урок, как обычно, с открытия проекта lessons. В нём добавим новый экран lesson_3
со сценой stg_main, так как это было описано в предыдущем [[Создание экранов, сцен. Работа с кнопками|уроке]]. Поместим из редактора ресурсов на сцену любой фон из папки этого или предыдущего урока. Для примера далее используется "лунный пейзаж" (картинка '''bg''').

[[файл:lesson_3_chk1.png|right]]
Поверх фона перетащите из редактора ресурсов тело слонёнка (ресурс '''body''')
и затем его голову '''head_1'''. Расположите их так, чтобы получился примерно целый слонёнок.
Переименуйте эти 2 объекта в '''elephant_body''' и '''elephant_head_chk'''
(помним о необходимости осмысленности в именах объектов?). Чтобы голова и тело стали "целым" существом, стоит в дереве проекта (Layout) перетащить голову на тело, сделав её подобъектом.
Теперь, если на сцене начать таскать тело слоненка, то голова будет послушно следовать за ним.
Хотя, если схватить за голову, то её легко можно оторвать. Так, что будьте со слоненком поласковее.

=== Создание чекбокса ===

[[файл:lesson_3_chk.png|right]]
Зайдем в свойство головы '''elephant_head_chk''' и изменим её тип на '''checkbox'''.
Раскроем треугольнички возле свойств "'''не отмечена (внешний вид)'''" и "'''отмечена (внешний вид)'''". Поля '''не отмечена (внешний вид)''' и '''отмечена (внешний вид)''' содержат по три ресурса (<tt>up, down и over</tt>).

'''Не отмечена (внешний вид):'''
<tt>up</tt> - так выглядит чекбокс, пока мы на него не нажали;
<tt>down</tt> - так выглядит чекбокс, если мы на него нажмём, но не откликнем в не нажатом состоянии;
<tt>over</tt> – так выглядит чекбокс, если мы на него наведём мышкой, в не нажатом состоянии.

'''Отмечена (внешний вид):'''
<tt>up</tt> - так выглядит чекбокс, когда мы на него нажали;
<tt>down</tt> - так выглядит чекбокс, если мы на него нажмём, но не откликнем в нажатом состоянии;
<tt>over</tt> – так выглядит чекбокс, если мы на него наведём мышкой, в нажатом состоянии.
Разместим поверх окна редактор ресурсов и перетащим в поле '''up''' первой группы (не отмечена) картинку '''head_1''', а в такое же поле второй группы (отмечена) картинку '''head_2'''.
Делается это также, как и формирование внешнего вида кнопки из предыдущего [[Создание экранов, сцен. Работа с кнопками|урока]].

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

Теперь наша задача состоит в воспроизведении поведения чекбокса при помощи объекта
другого типа - '''[[Machine|машины состояний]]'''. Мы не только повторим вращающего головой слоненка,
но и придадим его поведению новые функции.

== Машины состояний ==

=== Немного теории ===

''Машина состояний (state machine)'' является универсальным инструментом для программирования в редакторе сцен сложного поведения объектов. Логика поведения машины состояний разбивается на отдельные узлы (состояния). Объект всегда находится строго в одном состоянии. Переход из одного состояния в другое происходит либо в результате внешнего воздействия на объект, либо в результате окончания некоторых процессов протекающих внутри объекта.

Любая машина состояний может быть изображена в виде графа с кружочками и стрелками. Настоятельно рекомендуется рисовать такие графы в процессе проектирования машины, а лишь затем переходить к их описанию в окне редактора состояний. У машины всегда активно строго одно состояние (ниже это изображено на левом рисунке темным кружком):
<center>
[[Файл:def_states.png]]
</center>
Машина состояний не обладает памятью. Это означает, что для анализа того, что произойдет в данном состоянии, неважно как мы в него попали, и какова была предыстория переходов. Важно, только, что мы находимся в этом состоянии. Такое отсутствие памяти упрощает анализ логики машины, так как каждый раз мы концентрируемся на одном конкретном состоянии, а всю логику работы разбиваем на отдельные кирпичики-состояния.

Выше на правом рисунке изображено некоторое состояние. При входе в него, происходит инициализация состояния. Если на объект оказываются внешние воздействия, то он может покинуть состояние. Наконец, внутри состояния могут работать различные процессы.

=== Проектирование машины ===

Перейдем теперь от нудной теории к веселой практике. Посмотрим внимательно на поведение головы слоненка, которая является чекбоксом. На самом деле это типичная машина состояний с двумя состояниями. Назовём их '''left''' и '''right''' по направлению ориентации головы слонёнка. Сначала слоненок находится в состоянии left (смотрит влево). Когда мы кликаем в голову, машина переходит в новое состояние right (голова поворачивается вправо). Это поведение жестко запрограммированно внутри объекта checkbox. Попробуем добиться того же эффекта, используя универсальный игровой объект "машина состояний".

Прежде всего не поленимся нарисовать весёлый граф состояний и переходов между ними:

[[файл:lesson_3_states.png|center|300px]]

Теперь, когда на бумаге всё стало ясно :), необходимо эту машину создать в редакторе.

=== Создание машины ===

Чтобы не тратить время на редактор ресурсов, скопируем уже существующего слонёнка.
Для этого станем в дереве проекта на его тело (elephant_body) и правой кнопкой мыши вызовем меню.
В нём выбираем пункт Copy. Затем повторяем операцию, но выбираем уже пункт вставить ("''Paste after curent object''"). В дереве проекта появятся два слоненка. Причем оба будут иерархичной веткой,
состоящей из "тела" (elephant_body) и подобъекта "голова" (elephant_head).
А вот на сцене редактора видимых изменений не произойдет.
Мы помним, что при копировании объектов копируются также все их свойства.
Поэтому на сцене, на самом деле, два слоненка, но они имеют одинаковые координаты.
Поэтому хватаемся за тело и тащим его правее на свободное место:

[[файл:lesson_3_2elephants.png|600px]]

Левого слона оставим чекбоксом, а голову правого превратим в машину состояний.
Для этого кликаем в голову и меняем её тип с checkbox на '''machine''' (поле '''тип''' в панели Properties). Поменяем также имя головы, укоротив его до "'''elephant_head'''".

Можно попробовать посмотреть, что у нас получилось. Сохраняем проект и запускаем вьювер.
Упс... Голова исчезла, а вверху экрана появилось малопонятное ругательство,
из которого можно заключить, что у объекта elephant_head состояний то и нет.

Таким образом, не достаточно создать машину, её еще необходимо научить ездить.
Поэтому закрываем окно вьювера и начинаем заниматься программированием.

=== Программирование состояний ===

Сделаем активной голову правого слонёнка, которая стала машиной состояний.
В панели её свойств кликаем на поле '''states''', а затем на появившиеся в нём три точки (помним [[Введение в AppSalute Сreator|первый урок]]?). В результате этих действий, выскочит окошко в котором мы будем создавать состояния
и их программировать. Два раза нажмём кнопку '''Добавить состояние''' в левом нижнем углу окна:

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

В результате появилось две области, каждая из которых будущее состояние головы.
Зададим имена состояний, введя названия left и right в полях '''имя''' каждой области.
Затем станем мышкой на поле '''имя''' левого состояния и нажмём правую кнопку мышки.
Появится большое меню, в котором кликнем на первый пункт "''draw - внешний вид''":

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

В левом состояни под его именем добавится команда '''draw'''.
Эта команда управляет способом отрисовки машины в данном состоянии.
Нам потребуется ещё одна команда '''click''', которую добавим аналогичным
образом (правая кнопка мыши на команде draw).

В команды необходимо добавить параметры, определяющие их свойства.
Для этого кликнем справа от draw и затем ещё раз на появившиеся три точки.
В выскочившем диалоговом окне поставим галочку возле пункта "''графический ресурс''"
и нажмем кнопку Ok:

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

Аналогично кликаем на команду '''click''' и добавляем ей параметр "''go - новое состояние''".
Те же действие проделываем с правым состоянием. В результате должно получиться:

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

Осталось заполнить поля команд. В поле go команды click левого состояния пишем '''right''',
а в тоже поле правого состояния пишем '''left'''. Это означает, что при клике машина должна перейти в то состояние, которое указано в поле go. Имена состояний вводятся с клавиатуры руками,
поэтому необходимо следить за правильностью их написания.

Теперь откроем окно редактора ресурсов. Сделав активным значение поля '''res''' команды draw левого состояния, перетащим в него из ресурсов картинку '''head_1'''. В аналогичное поле правого состояния перетащим картинку '''head_2'''. Делается это точно так, как мы задавали поля внешнего вида кнопки или чекбокса в панели Properties. Финальный результат наших действий
приводит к следующей машине (мы не будем больше приводить всё окно редактирования состояний):

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

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

=== Ускорение работы и отладка ===

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

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

Если машина создается из картинки, изменением типа, то не стоит глазами искать слово '''machine''' в списке типов. Необходимо на клавиатуре нажать клавишу '''M''' и затем '''Enter'''.
Вообще, активнее пользуйтесь горячими клавишами. Например, если в дереве проекта (Layout)
активна машина, то нажатие '''Ctrl+M''' приведет к открытию окна редактирования состояний.

При запуске проекта во вьювере можно следить за отладочной информацией о состояниях объектов.
Это помогает понять почему что-то работает не так как надо.
Запустим вьювер и нажмём кнопку "'''F1'''". Появится небольшое меню с командами, которое гасится повторным нажатием F1. Кнопка "'''S'''" (на клавиатуре) выводит список всех активных объектов на сцене. Если текст информации совпадает с текстом фона, то эта информация будет плохо видна. В этом случае необходимо несколько раз нажать клавишу "'''C'''", меняя по кругу цвет текста.

Первые две колонки отладочной информации, это имя сцены и объекта. В колонке state видно текущее состояние. Понажимайте на голову слоненка, наблюдая как его состояние меняется с left на right и наоборот.

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

=== Немного нарвоучений ===

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

При работе над проектами, некоторые машины иногда повторяются. Их конечно можно копировать, подправляя соответствующие поля команд. Однако, на определенном этапе, возможно, стоит начать дергать руководство и С++ программистов, чтобы они оформили эту "типовую" машину в виде отдельного игрового объекта. Как это, например, сделано с чекбоксом или кнопкой.

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

Стоит также помнить, что работа над проектом это коллективный процесс.
Спустя некоторое время Вашу работу может подправлять другой человек.
Да и Вы к этому моменту станете другим человеком и все забудете.
Поэтому относитесь максимально ответственно к процессу документирования.
Это означает выбор осмысленных имен объектов и заполнение поля "'''описание'''",
находящееся у большинства сложных объектов в Properties.
Для машин это поле находится в окне редактирования состояний, сразу под состояниями.
Например, в нашем случае текст документации может выглядеть примерно так: "''При клике на голову она поворачивается влево или в право''".
<blockquote>
'''Правильно работающий незадокументированный проект - это плохой проект.'''
</blockquote>

== Усложняем машину ==

=== Непослушный слоненок ===

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

Для реализации этого поведения добавим в состояние '''right''' команду '''wait''' c параметром '''t''', равным 1000 миллисекундам (что равно одной секунде) и параметром '''go'''=left
В результате должна получиться такая машина:

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

До сих пор, переход из одного состояния в другое происходил в результате клика на машину.
Это было внешнее воздействие.
Однако, переход между состояниями может происходить в результате некоторых процессов внутри состояния.
В нашем случае, при заходе в правое состояние начинает работать команда '''wait'''. Она
ждет в течении времени, определяемом полем '''t'''. Затем, если задано поле '''go''', машина сама инициирует переход в соответствующее состояние.

Сохраните и запустите во вьювере этот проект. Кликая на головы обоих слонят,
сравните их поведение.

=== Сумашедший слоненок ===

В заключение, поиздеваемся немного над слоненком, сделав его голове
такую машину состояний:

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

В результате слонёнок начнет нерегулярно крутит головой то влево, то вправо.
В каждом состоянии он будет находиться случайное время от 1-й до 3-х секунд.
Это определяется параметрами '''t''' и '''dt''', которые задают
интервал времени от t-dt до t+dt.

Заметим, что, не смотря на самовольное вращение головой,
слоненок по-прежнему реагирует на клики мышки.

== Машина эмоций ==

Выше мы рассмотрели несколько машин состояний, не сильно отличающихся
от бездушного чекбокса.
Приведем теперь пример машины, которую и машиной неловко назвать.
Это существо, обладающее целым спектром эмоций и реакций на внешнее воздействие:

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

Разберемся, что нарисовано на картинке. Каждая рожица - это отдельное состояние,
отражающее настроение нашего существа. Стрелки - переходы между состояниями
по командам '''click''' и '''wait'''.

Начинает работать существо из состояния [[файл:s1.png|24px]].
Как и любые существа, Оно любит внимание.
Поэтому, при клике переходит в более жизнерадостное состояние [[файл:s2.png|24px]].
Если больше на него не кликать, Оно опять вернется в начальное состояние,
а спустя еще какое то время начнет плакать [[файл:s5.png|24px]], из-за полного отсутствия
внимания. Впрочем, небольшой клик - и Оно снова довольно жизнью.

Обратим внимание на последовательность состояний [[файл:s3.png|24px]], переходящих в
недовольную гримасу [[файл:s4.png|24px]]. Излишнее внимание также вредно, как
и его отсутствие.

В качестве упражнения, попробуйте создать такую машину состояний,
самостоятельно найдя в интернете или нарисовав соответствующие картинки.
Вы можете также вытащить картинки рожиц из этого урока, кликнув на них для увеличения, а затем нажав правую кнопку мышки, сохранить их на диске.
Как загрузить картинки в редактор ресурсов было описано в конце предыдущего [[Введение в AppSalute Сreator|урока]].
Естественно, Вы можете изменить эмоциональное поведение, сделав его более реалистичным :).

В заключение, несколько общих замечаний:
* Если машина имеет более двух состояний, её необходимо сначала проектировать на бумаге. Именно на диаграмме состояний отчетливо проявляется логика поведения машины.
* Обычно не должно быть тупиковых состояний, из которых ни куда попасть нельзя. В эмоциональной машине с рожицами таких состояний нет.
* Всегда необходимо выделять начальное состояние в котором машина начинает своё существование.
* Памятью машины состояний не обладают, однако имитация памяти может быть реализована при помощи цепочки состояний, как было сделано выше с состояниями счастливой рожицы.

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

* Уменьшите в 2 раза размер слонят (параметр scale в модификаторах свойств). Для этого достаточно поменять масштаб у тела, т.е. его scale распространится и на подобъект.
* Копированием создайте третьего слонёнка.
* Запрограммируйте его голову как машину, состоящую из 3-х состояний. В качестве картинки третьего состояния возьмите солнышко из первого урока. Пусть состояния при клике прокручиваются по кругу (left, right, sun,left,...)
* Добавьте четвертого слонёнка с тремя состояниями и сделайте с ним что хотите.
* Создайте эмоциональную рожицу
* Посмотрите снова на описание машин состояний из первого урока. Стало ли понятнее их поведение?

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

Checkbox как машина состояний

2013-03-05T09:57:32Z

Imarunenko: /* Создание чекбокса */

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

'''Цель:''' изучить понятие машины состояний на примере объекта Checkbox

'''Задачи:'''
* Cоздать новый экран и сцену для этого урока.
* При помощи объекта Checkbox заставит слонёнка поворачивать голову.
* Воспроизвести этого же слонёнка при помощи машины состояний.
* Добавить разнообразия в поведении слонёнка.
* Создать эмоциональную рожицу.

== Checkbox ==

=== Подготовка ===

Начнём урок, как обычно, с открытия проекта lessons. В нём добавим новый экран lesson_3
со сценой stg_main, так как это было описано в предыдущем [[Создание экранов, сцен. Работа с кнопками|уроке]]. Поместим из редактора ресурсов на сцену любой фон из папки этого или предыдущего урока. Для примера далее используется "лунный пейзаж" (картинка '''bg''').

[[файл:lesson_3_chk1.png|right]]
Поверх фона перетащите из редактора ресурсов тело слонёнка (ресурс '''body''')
и затем его голову '''head_1'''. Расположите их так, чтобы получился примерно целый слонёнок.
Переименуйте эти 2 объекта в '''elephant_body''' и '''elephant_head_chk'''
(помним о необходимости осмысленности в именах объектов?). Чтобы голова и тело стали "целым" существом, стоит в дереве проекта (Layout) перетащить голову на тело, сделав её подобъектом.
Теперь, если на сцене начать таскать тело слоненка, то голова будет послушно следовать за ним.
Хотя, если схватить за голову, то её легко можно оторвать. Так, что будьте со слоненком поласковее.

=== Создание чекбокса ===

[[файл:lesson_3_chk.png|right]]
Зайдем в свойство головы '''elephant_head_chk''' и изменим её тип на '''checkbox'''.
Раскроем треугольнички возле свойств "'''не отмечена (внешний вид)'''" и "'''отмечена (внешний вид)'''". Поля '''не отмечена (внешний вид)''' и '''отмечена (внешний вид)''' содержат по три ресурса (<tt>up, down и over</tt>).

'''Не отмечена (внешний вид):'''
<tt>up</tt> - так выглядит чекбокс, пока мы на него не нажали,
<tt>down</tt> - так выглядит чекбокс, если мы на него нажмём, но не откликнем в не нажатом состоянии,
<tt>over</tt> – так выглядит чекбокс, если мы на него наведём мышкой, в не нажатом состоянии.

'''Отмечена (внешний вид):'''
<tt>up</tt> - так выглядит чекбокс, когда мы на него нажали,
<tt>down</tt> - так выглядит чекбокс, если мы на него нажмём, но не откликнем в нажатом состоянии,
<tt>over</tt> – так выглядит чекбокс, если мы на него наведём мышкой, в нажатом состоянии.
Разместим поверх окна редактор ресурсов и перетащим в поле '''up''' первой группы (не отмечена) картинку '''head_1''', а в такое же поле второй группы (отмечена) картинку '''head_2'''.
Делается это также, как и формирование внешнего вида кнопки из предыдущего [[Создание экранов, сцен. Работа с кнопками|урока]].

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

Теперь наша задача состоит в воспроизведении поведения чекбокса при помощи объекта
другого типа - '''[[Machine|машины состояний]]'''. Мы не только повторим вращающего головой слоненка,
но и придадим его поведению новые функции.

== Машины состояний ==

=== Немного теории ===

''Машина состояний (state machine)'' является универсальным инструментом для программирования в редакторе сцен сложного поведения объектов. Логика поведения машины состояний разбивается на отдельные узлы (состояния). Объект всегда находится строго в одном состоянии. Переход из одного состояния в другое происходит либо в результате внешнего воздействия на объект, либо в результате окончания некоторых процессов протекающих внутри объекта.

Любая машина состояний может быть изображена в виде графа с кружочками и стрелками. Настоятельно рекомендуется рисовать такие графы в процессе проектирования машины, а лишь затем переходить к их описанию в окне редактора состояний. У машины всегда активно строго одно состояние (ниже это изображено на левом рисунке темным кружком):
<center>
[[Файл:def_states.png]]
</center>
Машина состояний не обладает памятью. Это означает, что для анализа того, что произойдет в данном состоянии, неважно как мы в него попали, и какова была предыстория переходов. Важно, только, что мы находимся в этом состоянии. Такое отсутствие памяти упрощает анализ логики машины, так как каждый раз мы концентрируемся на одном конкретном состоянии, а всю логику работы разбиваем на отдельные кирпичики-состояния.

Выше на правом рисунке изображено некоторое состояние. При входе в него, происходит инициализация состояния. Если на объект оказываются внешние воздействия, то он может покинуть состояние. Наконец, внутри состояния могут работать различные процессы.

=== Проектирование машины ===

Перейдем теперь от нудной теории к веселой практике. Посмотрим внимательно на поведение головы слоненка, которая является чекбоксом. На самом деле это типичная машина состояний с двумя состояниями. Назовём их '''left''' и '''right''' по направлению ориентации головы слонёнка. Сначала слоненок находится в состоянии left (смотрит влево). Когда мы кликаем в голову, машина переходит в новое состояние right (голова поворачивается вправо). Это поведение жестко запрограммированно внутри объекта checkbox. Попробуем добиться того же эффекта, используя универсальный игровой объект "машина состояний".

Прежде всего не поленимся нарисовать весёлый граф состояний и переходов между ними:

[[файл:lesson_3_states.png|center|300px]]

Теперь, когда на бумаге всё стало ясно :), необходимо эту машину создать в редакторе.

=== Создание машины ===

Чтобы не тратить время на редактор ресурсов, скопируем уже существующего слонёнка.
Для этого станем в дереве проекта на его тело (elephant_body) и правой кнопкой мыши вызовем меню.
В нём выбираем пункт Copy. Затем повторяем операцию, но выбираем уже пункт вставить ("''Paste after curent object''"). В дереве проекта появятся два слоненка. Причем оба будут иерархичной веткой,
состоящей из "тела" (elephant_body) и подобъекта "голова" (elephant_head).
А вот на сцене редактора видимых изменений не произойдет.
Мы помним, что при копировании объектов копируются также все их свойства.
Поэтому на сцене, на самом деле, два слоненка, но они имеют одинаковые координаты.
Поэтому хватаемся за тело и тащим его правее на свободное место:

[[файл:lesson_3_2elephants.png|600px]]

Левого слона оставим чекбоксом, а голову правого превратим в машину состояний.
Для этого кликаем в голову и меняем её тип с checkbox на '''machine''' (поле '''тип''' в панели Properties). Поменяем также имя головы, укоротив его до "'''elephant_head'''".

Можно попробовать посмотреть, что у нас получилось. Сохраняем проект и запускаем вьювер.
Упс... Голова исчезла, а вверху экрана появилось малопонятное ругательство,
из которого можно заключить, что у объекта elephant_head состояний то и нет.

Таким образом, не достаточно создать машину, её еще необходимо научить ездить.
Поэтому закрываем окно вьювера и начинаем заниматься программированием.

=== Программирование состояний ===

Сделаем активной голову правого слонёнка, которая стала машиной состояний.
В панели её свойств кликаем на поле '''states''', а затем на появившиеся в нём три точки (помним [[Введение в AppSalute Сreator|первый урок]]?). В результате этих действий, выскочит окошко в котором мы будем создавать состояния
и их программировать. Два раза нажмём кнопку '''Добавить состояние''' в левом нижнем углу окна:

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

В результате появилось две области, каждая из которых будущее состояние головы.
Зададим имена состояний, введя названия left и right в полях '''имя''' каждой области.
Затем станем мышкой на поле '''имя''' левого состояния и нажмём правую кнопку мышки.
Появится большое меню, в котором кликнем на первый пункт "''draw - внешний вид''":

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

В левом состояни под его именем добавится команда '''draw'''.
Эта команда управляет способом отрисовки машины в данном состоянии.
Нам потребуется ещё одна команда '''click''', которую добавим аналогичным
образом (правая кнопка мыши на команде draw).

В команды необходимо добавить параметры, определяющие их свойства.
Для этого кликнем справа от draw и затем ещё раз на появившиеся три точки.
В выскочившем диалоговом окне поставим галочку возле пункта "''графический ресурс''"
и нажмем кнопку Ok:

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

Аналогично кликаем на команду '''click''' и добавляем ей параметр "''go - новое состояние''".
Те же действие проделываем с правым состоянием. В результате должно получиться:

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

Осталось заполнить поля команд. В поле go команды click левого состояния пишем '''right''',
а в тоже поле правого состояния пишем '''left'''. Это означает, что при клике машина должна перейти в то состояние, которое указано в поле go. Имена состояний вводятся с клавиатуры руками,
поэтому необходимо следить за правильностью их написания.

Теперь откроем окно редактора ресурсов. Сделав активным значение поля '''res''' команды draw левого состояния, перетащим в него из ресурсов картинку '''head_1'''. В аналогичное поле правого состояния перетащим картинку '''head_2'''. Делается это точно так, как мы задавали поля внешнего вида кнопки или чекбокса в панели Properties. Финальный результат наших действий
приводит к следующей машине (мы не будем больше приводить всё окно редактирования состояний):

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

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

=== Ускорение работы и отладка ===

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

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

Если машина создается из картинки, изменением типа, то не стоит глазами искать слово '''machine''' в списке типов. Необходимо на клавиатуре нажать клавишу '''M''' и затем '''Enter'''.
Вообще, активнее пользуйтесь горячими клавишами. Например, если в дереве проекта (Layout)
активна машина, то нажатие '''Ctrl+M''' приведет к открытию окна редактирования состояний.

При запуске проекта во вьювере можно следить за отладочной информацией о состояниях объектов.
Это помогает понять почему что-то работает не так как надо.
Запустим вьювер и нажмём кнопку "'''F1'''". Появится небольшое меню с командами, которое гасится повторным нажатием F1. Кнопка "'''S'''" (на клавиатуре) выводит список всех активных объектов на сцене. Если текст информации совпадает с текстом фона, то эта информация будет плохо видна. В этом случае необходимо несколько раз нажать клавишу "'''C'''", меняя по кругу цвет текста.

Первые две колонки отладочной информации, это имя сцены и объекта. В колонке state видно текущее состояние. Понажимайте на голову слоненка, наблюдая как его состояние меняется с left на right и наоборот.

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

=== Немного нарвоучений ===

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

При работе над проектами, некоторые машины иногда повторяются. Их конечно можно копировать, подправляя соответствующие поля команд. Однако, на определенном этапе, возможно, стоит начать дергать руководство и С++ программистов, чтобы они оформили эту "типовую" машину в виде отдельного игрового объекта. Как это, например, сделано с чекбоксом или кнопкой.

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

Стоит также помнить, что работа над проектом это коллективный процесс.
Спустя некоторое время Вашу работу может подправлять другой человек.
Да и Вы к этому моменту станете другим человеком и все забудете.
Поэтому относитесь максимально ответственно к процессу документирования.
Это означает выбор осмысленных имен объектов и заполнение поля "'''описание'''",
находящееся у большинства сложных объектов в Properties.
Для машин это поле находится в окне редактирования состояний, сразу под состояниями.
Например, в нашем случае текст документации может выглядеть примерно так: "''При клике на голову она поворачивается влево или в право''".
<blockquote>
'''Правильно работающий незадокументированный проект - это плохой проект.'''
</blockquote>

== Усложняем машину ==

=== Непослушный слоненок ===

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

Для реализации этого поведения добавим в состояние '''right''' команду '''wait''' c параметром '''t''', равным 1000 миллисекундам (что равно одной секунде) и параметром '''go'''=left
В результате должна получиться такая машина:

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

До сих пор, переход из одного состояния в другое происходил в результате клика на машину.
Это было внешнее воздействие.
Однако, переход между состояниями может происходить в результате некоторых процессов внутри состояния.
В нашем случае, при заходе в правое состояние начинает работать команда '''wait'''. Она
ждет в течении времени, определяемом полем '''t'''. Затем, если задано поле '''go''', машина сама инициирует переход в соответствующее состояние.

Сохраните и запустите во вьювере этот проект. Кликая на головы обоих слонят,
сравните их поведение.

=== Сумашедший слоненок ===

В заключение, поиздеваемся немного над слоненком, сделав его голове
такую машину состояний:

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

В результате слонёнок начнет нерегулярно крутит головой то влево, то вправо.
В каждом состоянии он будет находиться случайное время от 1-й до 3-х секунд.
Это определяется параметрами '''t''' и '''dt''', которые задают
интервал времени от t-dt до t+dt.

Заметим, что, не смотря на самовольное вращение головой,
слоненок по-прежнему реагирует на клики мышки.

== Машина эмоций ==

Выше мы рассмотрели несколько машин состояний, не сильно отличающихся
от бездушного чекбокса.
Приведем теперь пример машины, которую и машиной неловко назвать.
Это существо, обладающее целым спектром эмоций и реакций на внешнее воздействие:

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

Разберемся, что нарисовано на картинке. Каждая рожица - это отдельное состояние,
отражающее настроение нашего существа. Стрелки - переходы между состояниями
по командам '''click''' и '''wait'''.

Начинает работать существо из состояния [[файл:s1.png|24px]].
Как и любые существа, Оно любит внимание.
Поэтому, при клике переходит в более жизнерадостное состояние [[файл:s2.png|24px]].
Если больше на него не кликать, Оно опять вернется в начальное состояние,
а спустя еще какое то время начнет плакать [[файл:s5.png|24px]], из-за полного отсутствия
внимания. Впрочем, небольшой клик - и Оно снова довольно жизнью.

Обратим внимание на последовательность состояний [[файл:s3.png|24px]], переходящих в
недовольную гримасу [[файл:s4.png|24px]]. Излишнее внимание также вредно, как
и его отсутствие.

В качестве упражнения, попробуйте создать такую машину состояний,
самостоятельно найдя в интернете или нарисовав соответствующие картинки.
Вы можете также вытащить картинки рожиц из этого урока, кликнув на них для увеличения, а затем нажав правую кнопку мышки, сохранить их на диске.
Как загрузить картинки в редактор ресурсов было описано в конце предыдущего [[Введение в AppSalute Сreator|урока]].
Естественно, Вы можете изменить эмоциональное поведение, сделав его более реалистичным :).

В заключение, несколько общих замечаний:
* Если машина имеет более двух состояний, её необходимо сначала проектировать на бумаге. Именно на диаграмме состояний отчетливо проявляется логика поведения машины.
* Обычно не должно быть тупиковых состояний, из которых ни куда попасть нельзя. В эмоциональной машине с рожицами таких состояний нет.
* Всегда необходимо выделять начальное состояние в котором машина начинает своё существование.
* Памятью машины состояний не обладают, однако имитация памяти может быть реализована при помощи цепочки состояний, как было сделано выше с состояниями счастливой рожицы.

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

* Уменьшите в 2 раза размер слонят (параметр scale в модификаторах свойств). Для этого достаточно поменять масштаб у тела, т.е. его scale распространится и на подобъект.
* Копированием создайте третьего слонёнка.
* Запрограммируйте его голову как машину, состоящую из 3-х состояний. В качестве картинки третьего состояния возьмите солнышко из первого урока. Пусть состояния при клике прокручиваются по кругу (left, right, sun,left,...)
* Добавьте четвертого слонёнка с тремя состояниями и сделайте с ним что хотите.
* Создайте эмоциональную рожицу
* Посмотрите снова на описание машин состояний из первого урока. Стало ли понятнее их поведение?

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

Checkbox как машина состояний

2013-03-05T09:56:28Z

Imarunenko: /* Создание чекбокса */

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

'''Цель:''' изучить понятие машины состояний на примере объекта Checkbox

'''Задачи:'''
* Cоздать новый экран и сцену для этого урока.
* При помощи объекта Checkbox заставит слонёнка поворачивать голову.
* Воспроизвести этого же слонёнка при помощи машины состояний.
* Добавить разнообразия в поведении слонёнка.
* Создать эмоциональную рожицу.

== Checkbox ==

=== Подготовка ===

Начнём урок, как обычно, с открытия проекта lessons. В нём добавим новый экран lesson_3
со сценой stg_main, так как это было описано в предыдущем [[Создание экранов, сцен. Работа с кнопками|уроке]]. Поместим из редактора ресурсов на сцену любой фон из папки этого или предыдущего урока. Для примера далее используется "лунный пейзаж" (картинка '''bg''').

[[файл:lesson_3_chk1.png|right]]
Поверх фона перетащите из редактора ресурсов тело слонёнка (ресурс '''body''')
и затем его голову '''head_1'''. Расположите их так, чтобы получился примерно целый слонёнок.
Переименуйте эти 2 объекта в '''elephant_body''' и '''elephant_head_chk'''
(помним о необходимости осмысленности в именах объектов?). Чтобы голова и тело стали "целым" существом, стоит в дереве проекта (Layout) перетащить голову на тело, сделав её подобъектом.
Теперь, если на сцене начать таскать тело слоненка, то голова будет послушно следовать за ним.
Хотя, если схватить за голову, то её легко можно оторвать. Так, что будьте со слоненком поласковее.

=== Создание чекбокса ===

[[файл:lesson_3_chk.png|right]]
Зайдем в свойство головы '''elephant_head_chk''' и изменим её тип на '''checkbox'''.
Раскроем треугольнички возле свойств "'''не отмечена (внешний вид)'''" и "'''отмечена (внешний вид)'''". Поля '''не отмечена (внешний вид)''' и '''отмечена (внешний вид)''' содержат по три ресурса (<tt>up, down и over</tt>).

'''Не отмечена (внешний вид):'''
<tt>up</tt> - так выглядит чекбокс, пока мы на него не нажали.
<tt>down</tt> - так выглядит чекбокс, если мы на него нажмём, но не откликнем в не нажатом состоянии.
<tt>over</tt> – так выглядит чекбокс, если мы на него наведём мышкой, в не нажатом состоянии.

'''Отмечена (внешний вид):'''
<tt>up</tt> - так выглядит чекбокс, когда мы на него нажали.
<tt>down</tt> - так выглядит чекбокс, если мы на него нажмём, но не откликнем в нажатом состоянии.
<tt>over</tt> – так выглядит чекбокс, если мы на него наведём мышкой, в нажатом состоянии.
Разместим поверх окна редактор ресурсов и перетащим в поле '''up''' первой группы (не отмечена) картинку '''head_1''', а в такое же поле второй группы (отмечена) картинку '''head_2'''.
Делается это также, как и формирование внешнего вида кнопки из предыдущего [[Создание экранов, сцен. Работа с кнопками|урока]].

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

Теперь наша задача состоит в воспроизведении поведения чекбокса при помощи объекта
другого типа - '''[[Machine|машины состояний]]'''. Мы не только повторим вращающего головой слоненка,
но и придадим его поведению новые функции.

== Машины состояний ==

=== Немного теории ===

''Машина состояний (state machine)'' является универсальным инструментом для программирования в редакторе сцен сложного поведения объектов. Логика поведения машины состояний разбивается на отдельные узлы (состояния). Объект всегда находится строго в одном состоянии. Переход из одного состояния в другое происходит либо в результате внешнего воздействия на объект, либо в результате окончания некоторых процессов протекающих внутри объекта.

Любая машина состояний может быть изображена в виде графа с кружочками и стрелками. Настоятельно рекомендуется рисовать такие графы в процессе проектирования машины, а лишь затем переходить к их описанию в окне редактора состояний. У машины всегда активно строго одно состояние (ниже это изображено на левом рисунке темным кружком):
<center>
[[Файл:def_states.png]]
</center>
Машина состояний не обладает памятью. Это означает, что для анализа того, что произойдет в данном состоянии, неважно как мы в него попали, и какова была предыстория переходов. Важно, только, что мы находимся в этом состоянии. Такое отсутствие памяти упрощает анализ логики машины, так как каждый раз мы концентрируемся на одном конкретном состоянии, а всю логику работы разбиваем на отдельные кирпичики-состояния.

Выше на правом рисунке изображено некоторое состояние. При входе в него, происходит инициализация состояния. Если на объект оказываются внешние воздействия, то он может покинуть состояние. Наконец, внутри состояния могут работать различные процессы.

=== Проектирование машины ===

Перейдем теперь от нудной теории к веселой практике. Посмотрим внимательно на поведение головы слоненка, которая является чекбоксом. На самом деле это типичная машина состояний с двумя состояниями. Назовём их '''left''' и '''right''' по направлению ориентации головы слонёнка. Сначала слоненок находится в состоянии left (смотрит влево). Когда мы кликаем в голову, машина переходит в новое состояние right (голова поворачивается вправо). Это поведение жестко запрограммированно внутри объекта checkbox. Попробуем добиться того же эффекта, используя универсальный игровой объект "машина состояний".

Прежде всего не поленимся нарисовать весёлый граф состояний и переходов между ними:

[[файл:lesson_3_states.png|center|300px]]

Теперь, когда на бумаге всё стало ясно :), необходимо эту машину создать в редакторе.

=== Создание машины ===

Чтобы не тратить время на редактор ресурсов, скопируем уже существующего слонёнка.
Для этого станем в дереве проекта на его тело (elephant_body) и правой кнопкой мыши вызовем меню.
В нём выбираем пункт Copy. Затем повторяем операцию, но выбираем уже пункт вставить ("''Paste after curent object''"). В дереве проекта появятся два слоненка. Причем оба будут иерархичной веткой,
состоящей из "тела" (elephant_body) и подобъекта "голова" (elephant_head).
А вот на сцене редактора видимых изменений не произойдет.
Мы помним, что при копировании объектов копируются также все их свойства.
Поэтому на сцене, на самом деле, два слоненка, но они имеют одинаковые координаты.
Поэтому хватаемся за тело и тащим его правее на свободное место:

[[файл:lesson_3_2elephants.png|600px]]

Левого слона оставим чекбоксом, а голову правого превратим в машину состояний.
Для этого кликаем в голову и меняем её тип с checkbox на '''machine''' (поле '''тип''' в панели Properties). Поменяем также имя головы, укоротив его до "'''elephant_head'''".

Можно попробовать посмотреть, что у нас получилось. Сохраняем проект и запускаем вьювер.
Упс... Голова исчезла, а вверху экрана появилось малопонятное ругательство,
из которого можно заключить, что у объекта elephant_head состояний то и нет.

Таким образом, не достаточно создать машину, её еще необходимо научить ездить.
Поэтому закрываем окно вьювера и начинаем заниматься программированием.

=== Программирование состояний ===

Сделаем активной голову правого слонёнка, которая стала машиной состояний.
В панели её свойств кликаем на поле '''states''', а затем на появившиеся в нём три точки (помним [[Введение в AppSalute Сreator|первый урок]]?). В результате этих действий, выскочит окошко в котором мы будем создавать состояния
и их программировать. Два раза нажмём кнопку '''Добавить состояние''' в левом нижнем углу окна:

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

В результате появилось две области, каждая из которых будущее состояние головы.
Зададим имена состояний, введя названия left и right в полях '''имя''' каждой области.
Затем станем мышкой на поле '''имя''' левого состояния и нажмём правую кнопку мышки.
Появится большое меню, в котором кликнем на первый пункт "''draw - внешний вид''":

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

В левом состояни под его именем добавится команда '''draw'''.
Эта команда управляет способом отрисовки машины в данном состоянии.
Нам потребуется ещё одна команда '''click''', которую добавим аналогичным
образом (правая кнопка мыши на команде draw).

В команды необходимо добавить параметры, определяющие их свойства.
Для этого кликнем справа от draw и затем ещё раз на появившиеся три точки.
В выскочившем диалоговом окне поставим галочку возле пункта "''графический ресурс''"
и нажмем кнопку Ok:

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

Аналогично кликаем на команду '''click''' и добавляем ей параметр "''go - новое состояние''".
Те же действие проделываем с правым состоянием. В результате должно получиться:

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

Осталось заполнить поля команд. В поле go команды click левого состояния пишем '''right''',
а в тоже поле правого состояния пишем '''left'''. Это означает, что при клике машина должна перейти в то состояние, которое указано в поле go. Имена состояний вводятся с клавиатуры руками,
поэтому необходимо следить за правильностью их написания.

Теперь откроем окно редактора ресурсов. Сделав активным значение поля '''res''' команды draw левого состояния, перетащим в него из ресурсов картинку '''head_1'''. В аналогичное поле правого состояния перетащим картинку '''head_2'''. Делается это точно так, как мы задавали поля внешнего вида кнопки или чекбокса в панели Properties. Финальный результат наших действий
приводит к следующей машине (мы не будем больше приводить всё окно редактирования состояний):

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

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

=== Ускорение работы и отладка ===

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

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

Если машина создается из картинки, изменением типа, то не стоит глазами искать слово '''machine''' в списке типов. Необходимо на клавиатуре нажать клавишу '''M''' и затем '''Enter'''.
Вообще, активнее пользуйтесь горячими клавишами. Например, если в дереве проекта (Layout)
активна машина, то нажатие '''Ctrl+M''' приведет к открытию окна редактирования состояний.

При запуске проекта во вьювере можно следить за отладочной информацией о состояниях объектов.
Это помогает понять почему что-то работает не так как надо.
Запустим вьювер и нажмём кнопку "'''F1'''". Появится небольшое меню с командами, которое гасится повторным нажатием F1. Кнопка "'''S'''" (на клавиатуре) выводит список всех активных объектов на сцене. Если текст информации совпадает с текстом фона, то эта информация будет плохо видна. В этом случае необходимо несколько раз нажать клавишу "'''C'''", меняя по кругу цвет текста.

Первые две колонки отладочной информации, это имя сцены и объекта. В колонке state видно текущее состояние. Понажимайте на голову слоненка, наблюдая как его состояние меняется с left на right и наоборот.

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

=== Немного нарвоучений ===

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

При работе над проектами, некоторые машины иногда повторяются. Их конечно можно копировать, подправляя соответствующие поля команд. Однако, на определенном этапе, возможно, стоит начать дергать руководство и С++ программистов, чтобы они оформили эту "типовую" машину в виде отдельного игрового объекта. Как это, например, сделано с чекбоксом или кнопкой.

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

Стоит также помнить, что работа над проектом это коллективный процесс.
Спустя некоторое время Вашу работу может подправлять другой человек.
Да и Вы к этому моменту станете другим человеком и все забудете.
Поэтому относитесь максимально ответственно к процессу документирования.
Это означает выбор осмысленных имен объектов и заполнение поля "'''описание'''",
находящееся у большинства сложных объектов в Properties.
Для машин это поле находится в окне редактирования состояний, сразу под состояниями.
Например, в нашем случае текст документации может выглядеть примерно так: "''При клике на голову она поворачивается влево или в право''".
<blockquote>
'''Правильно работающий незадокументированный проект - это плохой проект.'''
</blockquote>

== Усложняем машину ==

=== Непослушный слоненок ===

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

Для реализации этого поведения добавим в состояние '''right''' команду '''wait''' c параметром '''t''', равным 1000 миллисекундам (что равно одной секунде) и параметром '''go'''=left
В результате должна получиться такая машина:

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

До сих пор, переход из одного состояния в другое происходил в результате клика на машину.
Это было внешнее воздействие.
Однако, переход между состояниями может происходить в результате некоторых процессов внутри состояния.
В нашем случае, при заходе в правое состояние начинает работать команда '''wait'''. Она
ждет в течении времени, определяемом полем '''t'''. Затем, если задано поле '''go''', машина сама инициирует переход в соответствующее состояние.

Сохраните и запустите во вьювере этот проект. Кликая на головы обоих слонят,
сравните их поведение.

=== Сумашедший слоненок ===

В заключение, поиздеваемся немного над слоненком, сделав его голове
такую машину состояний:

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

В результате слонёнок начнет нерегулярно крутит головой то влево, то вправо.
В каждом состоянии он будет находиться случайное время от 1-й до 3-х секунд.
Это определяется параметрами '''t''' и '''dt''', которые задают
интервал времени от t-dt до t+dt.

Заметим, что, не смотря на самовольное вращение головой,
слоненок по-прежнему реагирует на клики мышки.

== Машина эмоций ==

Выше мы рассмотрели несколько машин состояний, не сильно отличающихся
от бездушного чекбокса.
Приведем теперь пример машины, которую и машиной неловко назвать.
Это существо, обладающее целым спектром эмоций и реакций на внешнее воздействие:

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

Разберемся, что нарисовано на картинке. Каждая рожица - это отдельное состояние,
отражающее настроение нашего существа. Стрелки - переходы между состояниями
по командам '''click''' и '''wait'''.

Начинает работать существо из состояния [[файл:s1.png|24px]].
Как и любые существа, Оно любит внимание.
Поэтому, при клике переходит в более жизнерадостное состояние [[файл:s2.png|24px]].
Если больше на него не кликать, Оно опять вернется в начальное состояние,
а спустя еще какое то время начнет плакать [[файл:s5.png|24px]], из-за полного отсутствия
внимания. Впрочем, небольшой клик - и Оно снова довольно жизнью.

Обратим внимание на последовательность состояний [[файл:s3.png|24px]], переходящих в
недовольную гримасу [[файл:s4.png|24px]]. Излишнее внимание также вредно, как
и его отсутствие.

В качестве упражнения, попробуйте создать такую машину состояний,
самостоятельно найдя в интернете или нарисовав соответствующие картинки.
Вы можете также вытащить картинки рожиц из этого урока, кликнув на них для увеличения, а затем нажав правую кнопку мышки, сохранить их на диске.
Как загрузить картинки в редактор ресурсов было описано в конце предыдущего [[Введение в AppSalute Сreator|урока]].
Естественно, Вы можете изменить эмоциональное поведение, сделав его более реалистичным :).

В заключение, несколько общих замечаний:
* Если машина имеет более двух состояний, её необходимо сначала проектировать на бумаге. Именно на диаграмме состояний отчетливо проявляется логика поведения машины.
* Обычно не должно быть тупиковых состояний, из которых ни куда попасть нельзя. В эмоциональной машине с рожицами таких состояний нет.
* Всегда необходимо выделять начальное состояние в котором машина начинает своё существование.
* Памятью машины состояний не обладают, однако имитация памяти может быть реализована при помощи цепочки состояний, как было сделано выше с состояниями счастливой рожицы.

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

* Уменьшите в 2 раза размер слонят (параметр scale в модификаторах свойств). Для этого достаточно поменять масштаб у тела, т.е. его scale распространится и на подобъект.
* Копированием создайте третьего слонёнка.
* Запрограммируйте его голову как машину, состоящую из 3-х состояний. В качестве картинки третьего состояния возьмите солнышко из первого урока. Пусть состояния при клике прокручиваются по кругу (left, right, sun,left,...)
* Добавьте четвертого слонёнка с тремя состояниями и сделайте с ним что хотите.
* Создайте эмоциональную рожицу
* Посмотрите снова на описание машин состояний из первого урока. Стало ли понятнее их поведение?

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

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

2013-03-05T09:49:16Z

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

{| 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]] '''Scene Editor''' - редактор игровых сцен (экранов), в котором происходит настройка свойств объектов и игровой логики. Это основной инструмент при разработке игры.
* [[Файл:Ico_base.png|40px]] '''Resources Editor''' - хранилище медиа-ресурсов (картинки, звуки, видео, анимация), использующихся в игре. Эти ресурсы при помощи мышки перетаскиваются на сцену в Scene Editor.
* [[Файл:Ico_text.png|40px]] '''Text Editor''' - хранилище всех текстовых ресурсов (надписей) на различных языках. Аналогично графике и звукам при помощи мышки они перетаскиваются в соответствующие свойства объектов, находящихся в Scene Editor.
* '''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]].

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

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

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

[[Файл:001.JPG]]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

*[[Файл:00 6.png]] — создать новый проект;
*[[Файл:00 7.png]] — загрузить уже созданный проект;
*[[Файл:00 8.png]] — сохранить изменения в проекте;
*[[Файл:00 9.png]] — запустить Viewer;
*[[Файл:00 10.png]] — перемещение сцен мышью;
*[[Файл:009.JPG]] — нормальный вид;
*[[Файл:010.JPG]] - общие свойства объекта;
*[[Файл:011.JPG]] - вызов текстового редактора;
*[[Файл:012.JPG]] — вызов редактора ресурсов;
*[[Файл:013.JPG]] — анализ проекта;
*[[Файл:014.JPG]] — поиск объекта по имени или id.

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

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

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

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

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

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

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

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

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

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

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

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

[[Файл:intro_se_re.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.
В результате должно получиться что-то типа:

[[Файл:intro_se_midif.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 объект, но ниже по дереву и, следовательно, рисуемый позже):

[[файл:intro_ghost.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''', а затем на появившиеся три точки в этом поле. Выскочит следующее окошко:

[[файл:intro_move1.png]] [[файл:intro_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]]
|}

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

2013-03-05T09:47:17Z

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

{| 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]] '''Scene Editor''' - редактор игровых сцен (экранов), в котором происходит настройка свойств объектов и игровой логики. Это основной инструмент при разработке игры.
* [[Файл:Ico_base.png|40px]] '''Resources Editor''' - хранилище медиа-ресурсов (картинки, звуки, видео, анимация), использующихся в игре. Эти ресурсы при помощи мышки перетаскиваются на сцену в Scene Editor.
* [[Файл:Ico_text.png|40px]] '''Text Editor''' - хранилище всех текстовых ресурсов (надписей) на различных языках. Аналогично графике и звукам при помощи мышки они перетаскиваются в соответствующие свойства объектов, находящихся в Scene Editor.
* '''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]].

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

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

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

[[Файл:001.JPG]]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

*[[Файл:00 6.png]] — создать новый проект;
*[[Файл:00 7.png]] — загрузить уже созданный проект;
*[[Файл:00 8.png]] — сохранить изменения в проекте;
*[[Файл:00 9.png]] — запустить Viewer;
*[[Файл:00 10.png]] — перемещение сцен мышью;
*[[Файл:009.JPG]] — нормальный вид;
*[[Файл:010.JPG]] - общие свойства объекта;
*[[Файл:011.JPG]] - вызов текстового редактора;
*[[Файл:012.JPG]] — вызов редактора ресурсов;
*[[Файл:013.JPG]] — анализ проекта;
*[[Файл:014.JPG]] — поиск объекта по имени или id.

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

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

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

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

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

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

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

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

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

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

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

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

[[Файл:intro_se_re.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.
В результате должно получиться что-то типа:

[[Файл:intro_se_midif.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 объект, но ниже по дереву и, следовательно, рисуемый позже):

[[файл:intro_ghost.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''', а затем на появившиеся три точки в этом поле. Выскочит следующее окошко:

[[файл:intro_move1.png]] [[файл:intro_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]]
|}

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

2013-03-05T09:45:50Z

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

{| 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]] '''Scene Editor''' - редактор игровых сцен (экранов), в котором происходит настройка свойств объектов и игровой логики. Это основной инструмент при разработке игры.
* [[Файл:Ico_base.png|40px]] '''Resources Editor''' - хранилище медиа-ресурсов (картинки, звуки, видео, анимация), использующихся в игре. Эти ресурсы при помощи мышки перетаскиваются на сцену в Scene Editor.
* [[Файл:Ico_text.png|40px]] '''Text Editor''' - хранилище всех текстовых ресурсов (надписей) на различных языках. Аналогично графике и звукам при помощи мышки они перетаскиваются в соответствующие свойства объектов, находящихся в Scene Editor.
* '''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]].

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

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

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

[[Файл:001.JPG]]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

*[[Файл:00 6.png]] — создать новый проект;
*[[Файл:00 7.png]] — загрузить уже созданный проект;
*[[Файл:00 8.png]] — сохранить изменения в проекте;
*[[Файл:00 9.png]] — запустить Viewer;
*[[Файл:00 10.png]] — перемещение сцен мышью;
*[[Файл:009.JPG]] — нормальный вид;
*[[Файл:010.JPG]] - общие свойства объекта;
*[[Файл:011.JPG]] - вызов текстового редактора;
*[[Файл:012.JPG]] — вызов редактора ресурсов;
*[[Файл:013.JPG]] — анализ проекта;
*[[Файл:014.JPG]] — поиск объекта по имени или id.

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

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

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

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

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

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

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

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

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

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

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

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

[[Файл:intro_se_re.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.
В результате должно получиться что-то типа:

[[Файл:intro_se_midif.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 объект, но ниже по дереву и, следовательно, рисуемый позже):

[[файл:intro_ghost.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''', а затем на появившиеся три точки в этом поле. Выскочит следующее окошко:

[[файл:intro_move1.png]] [[файл:intro_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]]
|}