Взаимодействие машин: «Лампочка» и «Светофор» — различия между версиями

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Лампочка и выключатель)
(Активная лампочка)
Строка 78: Строка 78:
  
 
=== Активная лампочка ===
 
=== Активная лампочка ===
 +
 +
Давайте усложним поведение лампочки.
 +
Пусть она, независимо от переключателя может включаться,
 +
если на неё кликнули в состоянии '''dark'''.
 +
Перейдя в горящее состояние '''light''' она горит 2 секунды,
 +
а затем сама выключается, возвращаясь в '''dark'''.
 +
 +
[[файл:lesson_4_states2.png]]
 +
 +
 +
=== Начальное состояние ===
  
 
== Старое ==
 
== Старое ==

Версия 15:13, 11 января 2013

Урок 3 << Оглавление >> Урок 5

Steps: Убрать детали создания состояний и команд, сосредоточившись на логике состояний.

Цель: изучить взаимодействие машин состояний.

Задачи:

  • создать экран тумблером, включающим лампочку
  • создать уличный светофор
  • включать и выключать светофор при помощи кнопки.


Лампочка и выключатель

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

Создайте в учебном проекте новый экран lesson_4 и сцену stg_mian. Перетащите на сцену из редактора ресурсов выключатель и лампочку:

Lesson4 switch lamp.png


Поменяйте обоим объектам тип, сделав их машинами состояний. Переименуйте (поле свойств "имя") выключатель в switch, а лампочку в lamp.

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

Lesson 4 state1.png


Верхние красные кружочки относятся к выключателю. Он может находиться в двух состояниях on и off. Лампочка (синие кружочки), также имеет два состояния, которые мы назовем dark и light.

Так как это было описано в предыдущем уроке, создайте эти состояния в машинах. Добавьте в каждое команду draw с параметром res, в который перетащите картинки из редактора ресурсов. Затем в выключатель добавьте команду click с параметром go. Сделайте из него чекбокс:

Lesson 4 switch state1 new.png

В лампочке пока у нас только по команде рисования draw:

Lesson 4 lamp state1.png

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

Подключаем провода

Теперь самое время подключить к лампочке и выключателю провода. Этими проводами будет служить команда set. Вспомним теорию. При входе в состояние происходит выполнение инициализационных команд, которые сразу выполняются как только машина поменяла своё состояние. К таким командам и относится команда set. С её помощью происходит изменение состояний других машин. Добавим в каждое из состояний переключателя по команде set с параметрами obj и st. Для параметра obj из выпадалки выберем объект lamp. В параметре st зададим руками требуемые состояния лампочки. В результате должно получиться:

Lesson 4 switch state2.png


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

Активная лампочка

Давайте усложним поведение лампочки. Пусть она, независимо от переключателя может включаться, если на неё кликнули в состоянии dark. Перейдя в горящее состояние light она горит 2 секунды, а затем сама выключается, возвращаясь в dark.

Lesson 4 states2.png


Начальное состояние

Старое

4. Кликнув правой кнопкой мыши по экрану, создать сцену 04, в которую (через ResourcesEditor) добавить графические ресурсы из папки Sources\Lesson_04 (см. подготовка к работе «Создание проекта»).

04 2.png 04 3.png

§2. Создание машин состояний

1. Графические ресурсы перевести в машины. Для этого нужно, прокликивая по всем объектам, в свойстве элемента изменить тип изображения на тип maсhine.

04 4.png 04 5.png


Ниже описаны логика и состояния всех машин, используемые в SceneEditor для выполнения урока 4.

04 6.png

2. В машине lamp_off прописать два состояния light и dark, которые будут соответствовать состояниям горящей и погасшей лампочки. Для этого левой кнопкой мыши кликнуть по машине lamp_off и в свойствах элемента войти в состояния states.

04 7.png 04 8.png

3. Изначально лампочка задается горящей, но через 2000 мсек. гаснет. Прописать это состояние так: в списке состояний добавить состояние и присвоить имя dark.

4. Левой кнопкой мыши кликнуть по имени и выбрать из появившегося списка команду draw (внешний вид).

04 9.png

5. Кликнуть левой кнопкой мыши по команде draw и выбрать из списка графический ресурс, в который через ResourcesEditor добавить картинку lamp_off.

04 10.png

6. Кликнуть правой кнопкой мыши по команде draw и выбрать команду click (переход при нажатии мыши).

7. Щелкнув левой кнопкой мыши по команде, выбрать из списка go – переход на новое состояние (в нашем случае, light) и if – условие перехода.

04 11.png

8. Кликая правой кнопкой мыши по команде click, создать команду if (условие).

9. Щелкнув левой кнопкой мыши по команде, выбрать из списка obj – объект и st — состояние этого объекта.

04 12.png

10. Добавить новое состояние с именем light.

11. Прописать уже известную команду draw, но с графическим ресурсом lamp_on.

12. Кликая правой кнопкой мыши по команде draw, создать команду wait (временная пауза).

13. Щелчком левой кнопки мыши по команде wait выбрать из списка t – длительность и go – переход на новое состояние (в нашем случае, dark).

04 13.png

Изначально тумблер находится во включенном состоянии on и если кликнуть на него, то он перейдет в выключенное состояние off (даже если в этот момент лампочка горела, она погаснет – за счет условия перехода if) и не даст лампочке гореть.

Аналогично создаются новые состояния (и команды в этих состояниях) для всех объектов (машин). Конечный результат см. ниже.

04 14.png

Подробнее о командах состояний:

draw — управление внешним видом машины, определение её графического ресурса (команда инициализации); Если в состоянии машины таковой команды нет, то автоматически устанавливается графический ресурс, указанный в свойствах элемента данной машины;

set – установка состояния другого объекта (команда инициализации);

click – что делать при клике на объект (команда воздействия); В нашем случае переход в другое состояние той же машины;

if – логическое условие перехода (команда перехода);

wait – длительность выполнения команды в одном состоянии и переход в другое состояние (исчисляется в миллисекундах).

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

§3. Задание к уроку

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

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

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

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

04 15.png

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

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

b) длительность горения лампочки составляла 500 миллисекунд.

Светофор

Цель: изучить настройки объектов (машин), находящихся в одной сцене, и понять их взаимосвязь.

Задача: создать сцену, где при перемещении ключа с область саквояжа, саквояж должен исчезнуть по альфе, жук начнать двигаться вверх, а сам ключ уменьшиться в размерах и также исчезнуть. Установить цикличность выполнения задания.

План выполнения:

  • Добавить графические ресурсы в сцену проекта из базы ResourcesEditor;
  • Настроить сцены в экранах проекта.

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

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

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

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

05 1.png

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

05 2.png 05 3.png

§2. Создание машин состояний

1. Графические ресурсы перевести в машины. Для этого нужно, прокликивая по всем объектам, в свойстве элемента изменить тип изображения на тип maсhine.

2. Для всех объектов (машин) в сцене прописать такие состояния:

для саквояжа

05 4.png

для жука

05 5.png

для ключа

05 6.png

Подробнее о командах состояний:

init – инициализация состояния (координаты, прозрачность и т.п.);

alpha – изменение прозрачности объекта (команда процессов). Меняется от 0 (полностью прозрачен) до 1 (непрозрачен);

move – движение объекта по сцене (команда процессов);

drag – команда, позволяющая перетаскивать объект в диапазоне x1, x2, y1, y2 (команда процессов);

drop – команда, указывающая на запуск состояния другого объекта, если отпустить объект в диапазоне x1, x2, y1, y2 (команда процессов);

scale – вращение объекта вокруг точки пивота с координатами px, py (команда процессов). Эти координаты задаются в общих свойствах элемента (объекта) или командой init в данном состоянии.

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

§3. Задание к уроку

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

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

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

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

05 7.png

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

a) изначально за время 1 секунда саквояж уменьшился от первоначальных размеров до 0, а затем увеличился до 1 (первоначальных размеров);

b) при перетаскивании ключа в область саквояжа, жук развернулся на 180 градусов и двигался вниз.


Урок 3 << Оглавление >> Урок 5