Настройка миниигр — различия между версиями

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Настройка объектов)
(Настройка объектов, создание машин состояний)
 
(не показано 14 промежуточных версий 6 участников)
Строка 17: Строка 17:
 
=== Создание экрана и сцены в игровом проекте ===
 
=== Создание экрана и сцены в игровом проекте ===
  
1. Запустить SceneEditor.
+
Запускаем SceneEditor. Открываем наш учебный проект lessons.seproj.
  
2. В меню Проект → Загрузить → Learning.seproj.  
+
Создаём экран lesson_8, а в нём сцены 08 и Buttons (стараемся делать это по памяти или подсматриваем в прошлых уроках), куда добавляем необходимые графические ресурсы из папки этого урока в Resources Editor: в экран 08 отправляем картинку level_01 (наш будущий пазл), а в Buttons (думаю, уже догадались) - будущие кнопки - hint_normal и ico_r_normal2.  
  
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 (см. подготовка к работе «Создание проекта»).
+
[[Файл:801.png]]
 
 
[[Файл:08 2.png]]  [[Файл:08 3.png]]
 
  
 
=== Настройка объектов, создание машин состояний ===
 
=== Настройка объектов, создание машин состояний ===
 
 
1. В сцене 08 изменить название графического ресурса hint_normal на applause и в общих настройках элемента удалить саму графику через модификаторы → res.
+
Меняем тип картинки '''level_01''' с '''image''' на [[Puzzle|puzzle]] (в папке Game mechanic) и устанавливаем следующие настройки:
  
[[Файл:08 4.png]]
+
[[Файл:802.png]]
  
2. Графическое изображение level_01 перевести в тип [[Puzzle|puzzle]] и установить такие настройки:
+
В сцене '''08''' создаём ещё один объект. Даём ему имя '''applause''', тип '''machine''' (прописываем 3 состояния '''init''', '''on''' и '''off''').
  
[[Файл:08 5.png]]
+
В состоянии '''on''' добавляем команду '''play''' (проиграть звук) и в списке выбираем '''snd''' (короткий звук), который подгружаем с помощью базы ресурсов (если подходящего звукового файла в уроке не обнаружилось, его необходимо добавить самостоятельно; при добавлении звука в базу ресурсов, ее нужно сохранить и переоткрыть).Также добавляем команду '''wait'''
  
3. Объект applause перевести в тип машина и прописать ему состояния on и off.
+
Возвращаемся к общим настройкам.
  
4. В состоянии on добавить команду play (проиграть звук) и в списке команды выбрать snd (короткий звук), подгружаемый с помощью ResourcesEditor из папки ресурсов Level_08;
+
[[Файл:applause (2).png]]
  
[[Файл:08 6.png]]
+
Переходим к сцене '''Buttons''' и меняем тип обоих графических файлов на '''button'''. Общий вид лейаута на этом этапе получится примерно следующий:
  
5. Создать новое состояние с именем off. В общих настройка свойства элемента изначально установить состояние off.
+
[[Файл:804.png]] 
  
[[Файл:08 7.png]]  [[Файл:08 8.png]]
+
В настройках кнопок перетянем из базы ресурсов картинки с внешним видом нажатых и отжатых кнопок.
  
6. Далее перейти к сцене Buttons, перевести графические объекты hint_normal, ico_R_normal2 в тип button, в свойстве элемента установить такие настройки:
+
[[Файл:805.png]]
  
[[Файл:08 9.png]]  [[Файл:08 10.png]]
+
Кнопка '''ico_R_normal2''' (переиграть) — кнопка, запускающая игру Puzzle сначала.  
  
''Кнопка R (переиграть)'' — кнопка, запускающая игру Puzzle сначала. В общих настройках свойства элемента устанавливаем, в какое начало должна возвращать кнопка (в нашем случае перейти на экран Lesson_08).Для данной игры, мы сделали переход на экран <tt>Lesson_08</tt>, который запускает игру сначала. Но в дальнейшем, чтобы не переводить все объекты в начальное состояние  правильнее будет, в графе '''«изменить состояние»''' выбрать объект <tt>Level_01</tt> и указать ему состояние <tt>mix</tt>, которое означает, что игра возвращается в состояние перемешивания картинок, а не запускает всю игру заново.
+
Нам необходимо, чтобы кнопка '''ico_R_normal2''' перемешивала части нашего пазла. Для этого в настройках кликаем правой кнопкой мыши и выбираем '''клик:изменить состояние объекта'''. В появившейся в настройках вкладке выбираем в качестве объекта наш пазл ('''level_01''') и состояние '''mix''', которое перемешает части исходной картинки.
 +
 
 +
[[Файл:806.png]]
 
 
7. В объекте (кнопке) hint_normal нажать правой кнопкой и выбрать изменить состояние объекта → потом выбрать объект level_01 и вписать состояние hint, которое означает, что при нажатии кнопки, в качестве подсказки, игра покажет картинку в собранном виде.
+
Пусть кнопка '''hint_normal''' (подсказка) по клику показывает нам картинку в собранном виде. Для этого повторяем процедуру с добавлением настройки '''клик:изменить состояние объекта''', только теперь для кнопки '''hint_normal'''. Выбираем объектом наш '''level_01''' и состояние для него '''hint'''.
 +
 
 +
<pre>
 +
На заметку. Если возникает необходимость добавить 2 и более настройки при помощи правой кнопки мыши,
 +
то лучше из кнопки сделать машину состояний и все состояния создать уже там.
 +
</pre>
 +
 
 +
Любуемся результатом своих стараний, сохранив проект и запустив его с помощью Viewer`а.
 +
 
 +
=== Упражнения ===
 +
 
 +
Копируем экран '''lesson_8''' и переименовываем его в '''lesson_8_1''', а сцену '''08''' в '''08_01'''.
 +
 
 +
[[Файл:807.png]]
 +
 
 +
В новом экране вносим все изменения самостоятельно. Необходимо:
 +
 
 +
a) добавить другой аудиофайл, имеющимся в базе ресурсов;
 +
 
 +
b) в пазле изменить количество разбиваемых частей на шесть (3х2), добавить сетку, изменить перестановку ячеек на смешивание по alpha, изменить время смешивания на 500 миллисекунд;
 +
 
 +
c) при нажатии hint (подсказки) изменить время показа подсказки на 2 секунды, изменить время финального показа пазла на 3 секунды, установить время закрытия пазла 500 миллисекунд.
  
[[Файл:08 11.png]]  [[Файл:08 12.png]]
+
=== Store ===
  
''hint'' – кнопка, реализующая подсказку на экране поиска.
+
В реальной игре нам может понадобиться счётчик подсказок, который даёт возможность совершать покупки подсказок за реальные деньги. Для его реализации необходим объект '''[[Store|Store]]'''.
  
8. Вернуться на сцену 08 к объекту level_01 и в общих настройках свойства элемента изменить состояние объекта → выбрать объект applause и вписать состояние on.
+
Создадим новый экран '''lesson_8_1_1'''. Добавим в него сцены '''08_1''' и '''Button_8_1'''. В сцену '''08_1''' поместим из экрана '''lesson_8_1''' объекты '''level_01''' и '''applause''', оставим их без изменения.  
  
[[Файл:08 13.png]]
+
В сцену '''Button_8_1''' скопируем из '''lesson_08_1''' кнопки '''hint_normal''' и '''ico_R_normal2''' и создадим новый объект, поменяв ему тип на '''counter''' (счетчик) и назовём его '''hint'''. Добавим ресурс из базы ресурсов – анимацию c цифрами из прошлого урока. Счётчик '''hint''' будет считывать купленные подсказки.
  
9. Проверить выполнение задачи с помощью проигрывателя сцен Viewer.
+
[[Файл:808.png]]
  
=== Упражнения ===
+
В  '''hint_normal''' добавим подобъект, сделаем его машиной и назовем '''hint_m'''.
  
1. Щелкнув правой кнопкой мыши по экрану Lesson_08, создать новый экран Lesson_08.1
+
Щёлкнув правой кнопкой мыши на сцену  '''Button_8_1''' создадим новые сцены '''store''' и '''error''', которые, соответственно, будут предназначены для совершения покупок — начисления подсказок и окна с ошибкой при невозможности купить подсказку.
  
2. Создать новые сцены (с названием 08.1 и Buttons).
+
В сцену  store добавим две машины:  '''buy''' и '''store'''; в  error - машину  '''error'''.
  
3. Скопировать все объекты из сцены 08 (экрана Lesson_08) и Buttons (экрана Lesson_08).
+
[[Файл:809.PNG]]
  
4. Вставить скопированые объекты в новую сцену 08.1 и Buttons (экрана Lesson_08.1).
+
В машине '''store''' зададим считывания со счётчика и прозрачность экрана:
  
[[Файл:08 15.png]]
+
[[Файл:810.png]]
  
5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:
+
Машина '''error''' будет отвечать за вывод ошибки при неудачной покупке, то есть задаёт прозрачность экрана с ошибкой.
  
a) заменить звук аплодисментов другим аудиофайлом, имеющимся в базе ресурсов;
+
[[Файл:811.PNG]]
 
b) в пазле изменить количество разбиваемых частей на шесть (3х2), добавить сетку, изменить перестановку ячеек на смешивание по alpha, изменить время смешивания на 500 миллисекунд;
 
 
c) при нажатии hint (подсказки) изменить время показа подсказки на 2 секунды, изменить время финального показа пазла на 3 секунды, установить время закрытия пазла 500 миллисекунд.
 
  
6. Сделать счетчик подсказок, используя объект '''[[Store|Store]]''' создать возможность совершать покупки подсказок за реальные деньги.
+
Для машины '''buy''' зададим состояния, при которых она начисляет купленную подсказку либо вызывает окно ошибки.
  
Щелкнув правой кнопкой мыши по экрану Lesson_08.1  создадим новый экран '''lessons_8_1_1'''. Добавим в него сцены str_8_1 и Button_8_1. В сцену str_8_1 поместим объекты из экрана  Lesson_08.1: level_01, applause; оставим их без изменения. В сцену  Button_8_1 скопируем из Lesson_08.1 кнопки hint_normal и ico_R_normal2 и создадим новый объект, поменяв ему тип на '''counter''' (счетчик) и названия на '''hint'''. Добавим ресурс из базы ресурсов —  анимацию file1 (brown_big). Счетчик  hint будет считывать купленные подсказки.
+
[[Файл:812.PNG]]
  
[[Файл:Hint counter na max.png]]
+
Вернёмся к машине '''hint_m''' сцены '''Button_8_1''' и пропишем для неё состояния. Машина отвечает за начисление подсказки при удачной покупке
  
В  hint_normal добавим подобъект, сделаем его машиной и назовем '''hint_m'''.
+
[[Файл:813.PNG]]
  
Щелкнув правой кнопкой мыши на сцену  Button_8_1 создадим новые сцены store и error, которые, соответственно, будут предназначены для совершения покупок — начисления подсказок и окна с ошибкой при невозможности купить подсказку.
+
Для того, чтобы вызывать машину '''hint_m''' в нашей игре, откроем кнопку '''hint_normal''' и в добавляемом свойстве '''изменить состояние объекта''' в качестве объекта выберем машину '''hint_m''', и пропишем ей состояние '''check'''.
  
В сцену  store добавим две машины:  '''buy''' и '''store'''; в  error - машину  '''error'''.
+
'''Совершение покупки (настройка Store)'''
  
[[Файл:8 1 1 .PNG]]
+
Для того чтобы покупку можно было совершить, необходимо задать в глобальных свойствах возможность совершения покупки. Для этого на сцене в глобальном экране opt добавим новый элемент, которому изменим тип на store (в папке Options).
  
Для машины  buy зададим состояния,  при котором значении параметра hint=1, то есть  она начисляет подсказку:
+
<pre>
 +
На заметку. Store в проекте может быть только один.
 +
</pre>
  
[[Файл:Buy na max.png]]
+
[[Файл:814.PNG]]
  
Соответственно в машине  store зададим считывания со счетчика  и  прозрачность экрана:
+
Дважды клацнув на объект (так же, как на машину состояний), мы попадаем в окно настроек '''store'''.
  
[[Файл:Store.PNG]]
+
[[Файл:815.PNG]]
  
Машина error будет отвечать за вывод ошибки при неудачной покупке, то есть задает прозрачность экрана с ошибкой
+
Нажимаем на плюсик и создаём покупку. Вводим для неё id и изменяем указанные настройки, как на картинке.
  
[[Файл:Error.PNG]]
+
[[Файл:Photo12.png]]
  
Вернемся к машине hint_m сцены Button_8_1 и пропишем для нее состояния. Машина отвечает за начисление подсказки при удачной покупке
+
И тут должен возникнуть вопрос. Почему среди перечня доступных объектов нет необходимого нам '''buy'''? Прежде чем читать дальше, предлагаю попробовать найти ответ на этот вопрос самостоятельно.
  
[[Файл:Hint m.PNG|800px]]
 
  
  
'''Совершение покупки'''
+
Для удобства использования, а также во избежание различных ошибок, в объектах экрана можно обращаться только к объектам этого же экрана. Исключением будут объекты глобальных экранов (вспоминаем прошлые уроки и смотрим на наш глобальный экран '''opt''').
  
Для того что бы покупку можно было совершить необходимо задать в глобальных свойствах возможность совершения покупки. Для этого на сцене в глобальном экране opt добавим новый элемент, которому изменим тип на store. В свойствах объекта store  кликнем правой кнопкой мыши на свойстве wallet, вставляем новое свойство — '''in-app покупка'''. Добавляем поля для покупки: внутренний id, и выбираем расходуемая.
+
Поэтому, чтобы получить доступ к объекту '''buy''', мы временно делаем экран '''lesson_8_1_1''' глобальным и завершаем настройку объекта '''store'''. Позже, на этапе проверки при помощи Viewer`а можем поэкспериментировать и проверить, будет ли работать проект корректно, когда мы в настройках глобальности экрана '''lesson_8_1_1''' снова поставим '''нет'''.
  
[[Файл:Store2.PNG]]
+
<pre>
 +
На заметку. Когда мы обращаемся к объекту, то в layout.xml
 +
прописывается ссылка на этот объект в виде его id.
 +
Когда убираем глобальность экрана и делаем его снова обычным,
 +
выбранный объект мы в редакторе больше не видим,
 +
но его id в лэйауте всё равно остаётся.
 +
</pre>
  
  
Строка 133: Строка 156:
 
''id покупки'' – внутренний id покупки.
 
''id покупки'' – внутренний id покупки.
  
''Расходуемая'' – 1 – покупка расходуемая, 0 – покупка раз и навсегда, если параметр не указан, по-умолчанию покупка – одноразовая.
+
''расходуемая'' – 1 – покупка расходуемая, 0 – покупка раз и навсегда; если параметр не указан, по-умолчанию покупка – одноразовая.
  
 
''объект (restore)'' – объект - Слушатель восстановления покупки. Этому объекту будет сообщено об успехе восстановления этой покупки покупки.
 
''объект (restore)'' – объект - Слушатель восстановления покупки. Этому объекту будет сообщено об успехе восстановления этой покупки покупки.
 
состояние (restore) – это состояние будет установлено объекту при успешном восстановлении этой покупки.
 
состояние (restore) – это состояние будет установлено объекту при успешном восстановлении этой покупки.
  
'''Для того, чтобы объект Store работал во Вьювере, нужно подкорректировать файл app.icf'''
+
'''Для того, чтобы объект Store работал во Viewer, необходимо подкорректировать файл app.icf'''
  
 
1. Найти файл app.icf в папке с вашим проектом.
 
1. Найти файл app.icf в папке с вашим проектом.
Строка 166: Строка 189:
 
'''Оформление'''
 
'''Оформление'''
  
Теперь перейдем к оформлению. Для того что бы на экране появлялось окно с предложением о покупке подсказке необходимо его создать. В начальный момент оно должно быть невидимым и прокликиваем, это состояние задано в машине store. Создадим в ней 5 подобъектов.
+
Теперь перейдём к оформлению. Для того чтобы на экране появлялось окно с предложением о покупке подсказки, необходимо его создать. В начальный момент окно должно быть невидимым и прокликиваем, это состояние задано в машине '''store'''. Создадим в ней 5 подобъектов.
 
 
  
1.1. Первые два переименуем в '''black''' и '''rec''', изменим им тип на '''[[Rectangle|Rectangle]]'''.
 
  
Откроем объект  black, пропишем ему свойствах, оставив его пустым рамку, и цвет фона
+
Первые два переименуем в '''black''' и '''rec''', изменим им тип на '''[[Rectangle|Rectangle]]'''.
  
[[Файл:Black.PNG]]
+
Откроем объект  '''black''', пропишем ему свойства, оставив пустой рамку, цвет фона – чёрный.
  
Для объекта rec зададим рамку и текстуру заливки. Для этого из базы ресурсов мышкой перетащим соответствующие элементы. Ресурсы для графики находятся в предыдущем уроке. Чтобы прямоугольник отображался правильно, задайте ему ненулевые размеры.
+
Для объекта '''rec''' зададим рамку и текстуру заливки. Для этого из базы ресурсов мышкой перетащим соответствующие элементы. Ресурсы для графики находятся в предыдущем уроке. Чтобы прямоугольник отображался правильно, задайте ему ненулевые размеры. Настройки '''rec''' (имена файлов могут отличаться):
  
[[Файл:Rec.PNG]]
+
[[Файл:817.PNG]]
  
Чтобы прямоугольник отображался правильно, задайте ему ненулевые параметры размера.
+
Третьему элементу поменяем тип на '''text''' с текстом "Купить подсказку?"
  
1.2. Третьему элементу поменяем тип на text с текстом
+
Четвёртый объект сделаем машиной и назовём её '''ok'''. Она будет в глазах пользователя совершать покупку. Для внешнего вида машины в '''res''' перетянем изображение зелёного света светофора из 4 урока. В модификаторах можно задать '''scale''' по х и по у 0.5.
 +
Опишем следующие состояния машины:
  
[[Файл:Text.PNG]]
+
[[Файл:818.PNG]]
  
 +
Все действия, связанные с совершением и провалом покупки, управляемые этой машиной, мы уже указали в '''store'''.
  
1.3. Четвертый и пятый объекты сделаем кнопками, и назовем их '''ok''' – купить подсказку, '''no''' – отказаться от покупки.  
+
Пятый объект будет кнопкой '''no'''. Она по клику изменяет состояние ('''close''') объекта ('''store'''). Для внешнего вида кнопки в '''res''' перетянем изображение красного света светофора из 4 урока. В модификаторах тоже можно задать '''scale''' по х и по у 0.5.
  
Для кнопки ok из базы ресурсов выберем внешний вид
+
Так же поступим со сценой '''error'''. В ней создадим четыре объекта: два '''rectangle''': '''rec_error''' – пустой, '''black_error''' — их можно скопировать из предыдущей сцены; кнопку '''buy''', которая будет переводить '''error''' в состояние '''i'''; текстовый объект '''text_error''' с текстом «error!». Общий вид этого задания в лейауте примерно следующий:
  
[[Файл:Ok1.PNG]]
 
  
и зададим переход на совершение или провал покупки. Для этого кликнем правой кнопкой мыши на свойстве позиционирование и добавим свойство совершить in-app покупку, заполним для нее поля как указано на картинки
+
[[Файл:819.PNG]]
  
[[Файл:Ok2.PNG]]
+
Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим Viewer. Сейчас при покупке подсказки количество покупок не имеет лимита (благодаря нашим изменениям в '''app.icf'''), поэтому вывод ошибки мы не получим.
 
 
Аналогично  поступим с кнопкой no. Добавим графический ресурс и  свойство «изменить состояние объекта», которое будет закрывать окно с предложением о покупке
 
 
 
[[Файл:No1.PNG]]        [[Файл:No2.PNG]]
 
 
 
 
 
2. Таким же само сделаем со сценой error. В ней создадим четыре объекта: два rectangle: '''rec_error''' –  пустой, '''black_error''' — оформленный  в такую же рамку; кнопку '''buy''', которая будет делать активным состояние error; текстовый объект '''text_error'''  с текстом «error!»
 
 
 
[[Файл:Buy1.PNG]]
 
 
Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим вьювер.
 
 
 
[[Файл:Снимок1.PNG]]
 
 
 
Сейчас при покупке подсказки количество покупок не имеет лимита, по этому вывод ошибки мы не получим. Этот параметр в реальной игре будет реализован с помощью объекта store, заданием ему соответствующих свойств.
 
  
 
== Patchwork ==
 
== Patchwork ==
Строка 224: Строка 231:
  
 
4. В экране Lesson_08.2 создать новую сцену 08, в которую (через ResourcesEditor) добавить графические ресурсы (bg_game, panel_down, btb_replay_normal) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»). В редактор ресурсов добавить графику нашего будущего Patchwork: level_17, level_17_mask.
 
4. В экране Lesson_08.2 создать новую сцену 08, в которую (через ResourcesEditor) добавить графические ресурсы (bg_game, panel_down, btb_replay_normal) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»). В редактор ресурсов добавить графику нашего будущего Patchwork: level_17, level_17_mask.
 +
 +
Если в папке урока отсутствует изображение panel_down, то скачать любое изображение боковой панели самостоятельно и использовать ее в проекте.
  
 
=== Настройка объектов ===
 
=== Настройка объектов ===
Строка 238: Строка 247:
  
 
3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.
 
3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.
4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 100х100 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.
+
4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 0х0 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.
  
 
[[Файл:Lesson8_5.jpg]]
 
[[Файл:Lesson8_5.jpg]]
Строка 246: Строка 255:
 
[[Файл:Lesson8_6.jpg]]
 
[[Файл:Lesson8_6.jpg]]
  
5. Настроим наши объекты. Для кнопки btb_replay_normal в поле "перейти на" укажите текущий экран Lesson_8.2.
+
5. Настроим наши объекты. Для кнопки btb_replay_normal в поле "перейти на экран" укажите текущий экран Lesson_8.2.
  
  

Текущая версия на 14:59, 5 августа 2021

Урок 7 << Оглавление >> Урок 9

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

Задачи:

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

Puzzle

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

Запускаем SceneEditor. Открываем наш учебный проект lessons.seproj.

Создаём экран lesson_8, а в нём сцены 08 и Buttons (стараемся делать это по памяти или подсматриваем в прошлых уроках), куда добавляем необходимые графические ресурсы из папки этого урока в Resources Editor: в экран 08 отправляем картинку level_01 (наш будущий пазл), а в Buttons (думаю, уже догадались) - будущие кнопки - hint_normal и ico_r_normal2.

На экране кнопочкам подбираем симпатичное и удобное расположение.


801.png

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

Меняем тип картинки level_01 с image на puzzle (в папке Game mechanic) и устанавливаем следующие настройки:

802.png

В сцене 08 создаём ещё один объект. Даём ему имя applause, тип machine (прописываем 3 состояния init, on и off).

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

Возвращаемся к общим настройкам.

Applause (2).png

Переходим к сцене Buttons и меняем тип обоих графических файлов на button. Общий вид лейаута на этом этапе получится примерно следующий:

804.png

В настройках кнопок перетянем из базы ресурсов картинки с внешним видом нажатых и отжатых кнопок.

805.png

Кнопка ico_R_normal2 (переиграть) — кнопка, запускающая игру Puzzle сначала.

Нам необходимо, чтобы кнопка ico_R_normal2 перемешивала части нашего пазла. Для этого в настройках кликаем правой кнопкой мыши и выбираем клик:изменить состояние объекта. В появившейся в настройках вкладке выбираем в качестве объекта наш пазл (level_01) и состояние mix, которое перемешает части исходной картинки.

806.png

Пусть кнопка hint_normal (подсказка) по клику показывает нам картинку в собранном виде. Для этого повторяем процедуру с добавлением настройки клик:изменить состояние объекта, только теперь для кнопки hint_normal. Выбираем объектом наш level_01 и состояние для него hint.

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

Любуемся результатом своих стараний, сохранив проект и запустив его с помощью Viewer`а.

Упражнения

Копируем экран lesson_8 и переименовываем его в lesson_8_1, а сцену 08 в 08_01.

807.png

В новом экране вносим все изменения самостоятельно. Необходимо:

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

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

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

Store

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

Создадим новый экран lesson_8_1_1. Добавим в него сцены 08_1 и Button_8_1. В сцену 08_1 поместим из экрана lesson_8_1 объекты level_01 и applause, оставим их без изменения.

В сцену Button_8_1 скопируем из lesson_08_1 кнопки hint_normal и ico_R_normal2 и создадим новый объект, поменяв ему тип на counter (счетчик) и назовём его hint. Добавим ресурс из базы ресурсов – анимацию c цифрами из прошлого урока. Счётчик hint будет считывать купленные подсказки.

808.png

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

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

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

809.PNG

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

810.png

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

811.PNG

Для машины buy зададим состояния, при которых она начисляет купленную подсказку либо вызывает окно ошибки.

812.PNG

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

813.PNG

Для того, чтобы вызывать машину hint_m в нашей игре, откроем кнопку hint_normal и в добавляемом свойстве изменить состояние объекта в качестве объекта выберем машину hint_m, и пропишем ей состояние check.

Совершение покупки (настройка Store)

Для того чтобы покупку можно было совершить, необходимо задать в глобальных свойствах возможность совершения покупки. Для этого на сцене в глобальном экране opt добавим новый элемент, которому изменим тип на store (в папке Options).

На заметку. Store в проекте может быть только один.

814.PNG

Дважды клацнув на объект (так же, как на машину состояний), мы попадаем в окно настроек store.

815.PNG

Нажимаем на плюсик и создаём покупку. Вводим для неё id и изменяем указанные настройки, как на картинке.

Photo12.png

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


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

Поэтому, чтобы получить доступ к объекту buy, мы временно делаем экран lesson_8_1_1 глобальным и завершаем настройку объекта store. Позже, на этапе проверки при помощи Viewer`а можем поэкспериментировать и проверить, будет ли работать проект корректно, когда мы в настройках глобальности экрана lesson_8_1_1 снова поставим нет.

На заметку. Когда мы обращаемся к объекту, то в layout.xml 
прописывается ссылка на этот объект в виде его id.
Когда убираем глобальность экрана и делаем его снова обычным, 
выбранный объект мы в редакторе больше не видим, 
но его id в лэйауте всё равно остаётся.


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

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

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

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

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

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

Для того, чтобы объект Store работал во Viewer, необходимо подкорректировать файл app.icf

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

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

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

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


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


Оформление

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


Первые два переименуем в black и rec, изменим им тип на Rectangle.

Откроем объект black, пропишем ему свойства, оставив пустой рамку, цвет фона – чёрный.

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

817.PNG

Третьему элементу поменяем тип на text с текстом "Купить подсказку?"

Четвёртый объект сделаем машиной и назовём её ok. Она будет в глазах пользователя совершать покупку. Для внешнего вида машины в res перетянем изображение зелёного света светофора из 4 урока. В модификаторах можно задать scale по х и по у 0.5. Опишем следующие состояния машины:

818.PNG

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

Пятый объект будет кнопкой no. Она по клику изменяет состояние (close) объекта (store). Для внешнего вида кнопки в res перетянем изображение красного света светофора из 4 урока. В модификаторах тоже можно задать scale по х и по у 0.5.

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


819.PNG

Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим Viewer. Сейчас при покупке подсказки количество покупок не имеет лимита (благодаря нашим изменениям в app.icf), поэтому вывод ошибки мы не получим.

Patchwork

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

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

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

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

Lesson8 1.jpg

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

Если в папке урока отсутствует изображение panel_down, то скачать любое изображение боковой панели самостоятельно и использовать ее в проекте.

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

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

Lesson8 2.jpg

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

Lesson8 3.jpg

Lesson8 4.jpg

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

Lesson8 5.jpg

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

Lesson8 6.jpg

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


Правка намба 1.png


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

Lesson8 table setup.png


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

Lesson8 9.jpg

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

Lesson8 10.jpg


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

Lesson8.3.Fin.png

Упражнения

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

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

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

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

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

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

b) изменить настройки кнопки рестарта таким образом, чтобы не переходить на экран Lesson_08.3, а сразу передавать пэчворку состояние mix.


Урок 7 << Оглавление >> Урок 9