Создание экранов, сцен. Работа с кнопками — различия между версиями

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Создание кнопок)
(не показаны 44 промежуточные версии 7 участников)
Строка 2: Строка 2:
 
  | width="40%"|[[Введение в AppSalute Сreator|Урок 1]] <<  
 
  | width="40%"|[[Введение в AppSalute Сreator|Урок 1]] <<  
 
  ! width="20%"|[[Learning|Оглавление]]  
 
  ! width="20%"|[[Learning|Оглавление]]  
  | width="40%" align="right"| >> [[Принцип работы объекта типа Checkbox|Урок 3]]
+
  | width="40%" align="right"| >> [[Checkbox как машина состояний|Урок 3]]
 
|}
 
|}
 
----
 
----
 
+
{{TOC right}}
 +
----
 
'''Цель:'''  
 
'''Цель:'''  
научиться создавать экраны, сцены и кнопки.
+
научиться создавать экраны, сцены, кнопки и текст.
  
 
'''Задачи:'''  
 
'''Задачи:'''  
* Создать три экрана с одной сценой на каждом из них
+
* Создать три экрана с одной сценой на каждом из них.
* На экраны поместить кнопки, перехода между экранами
+
* На экраны поместить кнопки, перехода между экранами.
 +
* Создать надпись на экране.
 +
* Изучить условные переходы по экранам.
 +
* Добавить свою картинку в редактор ресурсов и на сцену.
  
  
 
== Создание экранов и сцен ==
 
== Создание экранов и сцен ==
  
Запускаем SceneEditor и загружаем проект lessons (см. предыдущий [[Введение в AppSalute Сreator|урок]]). Кликаем на первый экран проекта (lesson_1) в панели Layout мышью и нажимаем её правую кнопку. В выпадающем меню выбираем "''Создать экран после текущего элемента''":
+
Запускаем SceneEditor и загружаем проект lessons (см. предыдущий [[Введение в AppSalute Сreator|урок]]). Кликаем на первый экран проекта (lesson_1) в панели Layout мышью и нажимаем её правую кнопку. В выпадающем меню выбираем "''Создать экран после текущего элемента''" ''"Create a screen after the current item"'' :
  
 
[[Файл:lesson2_screen.png]]
 
[[Файл:lesson2_screen.png]]
Строка 29: Строка 33:
  
 
[[Файл:lesson2_layout2.png|right]]
 
[[Файл:lesson2_layout2.png|right]]
Создание сцены происходит аналогично созданию экрана. Кликнем мышкой на экран '''lesson_2_Main''' и нажмем её правую кнопку. В выпавшем меню выбираем "''Создать сцену в текущем элементе''" и в появившемся окошке вводим имя stg_main, соглашаясь с размерами сцены (в пикселях), предложенных по умолчанию.  Повторям эту операцию, нажимая последовательно на экраны '''lesson_2_Sky''' и '''lesson_2_Moon'''. В результате получится панель проекта, приведенная на картинке справа.
+
Создание сцены происходит аналогично созданию экрана. Кликнем мышкой на экран '''lesson_2_Main''' и нажмем её правую кнопку. В выпавшем меню выбираем "''Создать сцену в текущем элементе''" ''("Create a scene in the current item")'' и в появившемся окошке вводим имя stg_main, соглашаясь с размерами сцены (в пикселях), предложенными по умолчанию.  Повторям эту операцию, нажимая последовательно на экраны '''lesson_2_Sky''' и '''lesson_2_Moon'''. В результате получится панель проекта, приведенная на картинке справа.
  
 
Таким образом, проект этого урока будет состоять из трех экранов Main, Sky и Moon. Заметим, что над ними остался экран первого урока. Он нам не будет мешать. Постепенно в этом проекте добавятся экраны других уроков. Напомним, что при запуске вьювера мы указываем какой экран начать проигрывать. Если с этого экрана переходов на другие экраны нет, то вьювер не относящиеся к делу экраны не заметит.
 
Таким образом, проект этого урока будет состоять из трех экранов Main, Sky и Moon. Заметим, что над ними остался экран первого урока. Он нам не будет мешать. Постепенно в этом проекте добавятся экраны других уроков. Напомним, что при запуске вьювера мы указываем какой экран начать проигрывать. Если с этого экрана переходов на другие экраны нет, то вьювер не относящиеся к делу экраны не заметит.
  
 
Чтобы завершить процесс подготовки сцен, поместим на каждую из них соответствующий фон.
 
Чтобы завершить процесс подготовки сцен, поместим на каждую из них соответствующий фон.
Для этого открываем редактор ресурсов [[Файл:012.JPG]], в котором кликаем на папку lesson_2. Последние три картинки bg_1, bg_2, bg_3 по очереди  [[Введение в AppSalute Сreator|перетаскиваем]] на сцены в соответствующих экранах. Соответствие между фоном и экраном предлагается определить в качестве упражнения :).
+
Для этого открываем редактор ресурсов [[Файл:Resourse_editor.png]], в котором кликаем на папку lesson_2. Последние три картинки bg_1, bg_2, bg_3 по очереди  [[Введение в AppSalute Сreator|перетаскиваем]] на сцены в соответствующих экранах. Соответствие между фоном и экраном предлагается определить в качестве упражнения :).
  
 
== Создание кнопок ==
 
== Создание кнопок ==
  
Создадим теперь кнопку. Для этого сделаем активным сцену '''stg_main''' в экране lesson_2_Main.
+
Создадим теперь [[Button|кнопку]]. Для этого сделаем активной сцену '''stg_main''' в экране lesson_2_Main.
Затем откроем редактор ресурсов и перетащим на сцену картинку '''arrow_rt_normal''' из папки lesson2. Эта картинка появится на сцене и в дереве проекта под картинкой фона bg_3.
+
Затем откроем редактор ресурсов и перетащим на сцену картинку '''arrow_rt_norm''' из папки lesson2. Эта картинка появится на сцене и в дереве проекта под картинкой фона bg_3.
 
При помощи мышки, разместим её на сцене в правом нижнем углу фона.
 
При помощи мышки, разместим её на сцене в правом нижнем углу фона.
  
Строка 45: Строка 49:
 
с image на '''button'''. Для этого кликаем справа от поля '''тип''' и в появившейся выпадалке выбираем button. Стоит обратить внимание на разнообразие игровых объектов. Часть из них будет описана в этих уроках, описание остальных можно найти в [[Absolutist_Framework|документации]].
 
с image на '''button'''. Для этого кликаем справа от поля '''тип''' и в появившейся выпадалке выбираем button. Стоит обратить внимание на разнообразие игровых объектов. Часть из них будет описана в этих уроках, описание остальных можно найти в [[Absolutist_Framework|документации]].
  
Следуя правилам хорошего тона переименуем объект, заменим его имя arrow_rt_normal на '''next_scr''' (следующий экран). Для этого редактируем поле имя (нажав после окончания Enter).
+
Следуя правилам хорошего тона переименуем объект, заменив его имя arrow_rt_normal на '''next_scr''' (следующий экран). Для этого редактируем поле имя в панели свойств (нажав после окончания Enter) или дважды кликаем в панели проекта (Layout).  
  
 
Откроем в свойствах кнопки группу '''внешний вид'''. Первые два поля '''up''' и '''down''' соответствуют картинкам изображающим отжатую и нажатую кнопку. Поле up уже заполнено картинкой arrow_rt_normal, которую мы превращали в кнопку. Зададим картинку для кнопки в состоянии нажатия.
 
Откроем в свойствах кнопки группу '''внешний вид'''. Первые два поля '''up''' и '''down''' соответствуют картинкам изображающим отжатую и нажатую кнопку. Поле up уже заполнено картинкой arrow_rt_normal, которую мы превращали в кнопку. Зададим картинку для кнопки в состоянии нажатия.
Строка 57: Строка 61:
 
Обратим внимание, что поле редактирования должно быть активно в момент перетаскивания в него картинки. Поэтому, если редактор ресурсов еще не запущен, его необходимо сначала запустить, разместить поверх стальных окон (Always on Top), а только затем кликать в значение поля down и тащить в него картинку.
 
Обратим внимание, что поле редактирования должно быть активно в момент перетаскивания в него картинки. Поэтому, если редактор ресурсов еще не запущен, его необходимо сначала запустить, разместить поверх стальных окон (Always on Top), а только затем кликать в значение поля down и тащить в него картинку.
  
Чтобы кнопка выполнила полезную функцию, отредактируем у неё ещё одно поле '''перейти на'''.
+
<blockquote>
 +
[[файл:wrong.png|right|32px]]
 +
'''Внимание!''' Имена картинок графических ресурсов в полях свойств объектов не являются простыми текстовыми надписями. С ними связывается конкретный файл из редактора ресурсов. Поэтому пытаться редактировать их руками не стоит. Эти поля нужно заполнять при помощи мышки, так как это описано выше.
 +
</blockquote>
 +
 
 +
 
 +
Чтобы кнопка выполнила полезную функцию, отредактируем у неё ещё одно поле "'''перейти на'''".
 
При клике справа от него выпадет список из доступных в проекте экранов. Выберем экран lesson_2_Sky.
 
При клике справа от него выпадет список из доступных в проекте экранов. Выберем экран lesson_2_Sky.
  
 
Теперь можно протестировать, что у нас получилось.
 
Теперь можно протестировать, что у нас получилось.
 
Проверяем, что в дереве проекта активным является экран lesson_2_Main.
 
Проверяем, что в дереве проекта активным является экран lesson_2_Main.
Сохраняем изменения в проекте [[Файл:00 8.png]]. И запускаем вьювер [[Файл:00 9.png]].
+
Сохраняем изменения в проекте [[Файл:00 8.png]] и запускаем вьювер [[Файл:00 9.png]].
 
Нажимая на кнопку, убеждаемся, что происходит заданный переход из одного экрана на другой.
 
Нажимая на кнопку, убеждаемся, что происходит заданный переход из одного экрана на другой.
 
Обращаем внимание, также на изменение вида кнопки в момент клика на неё мышки.
 
Обращаем внимание, также на изменение вида кнопки в момент клика на неё мышки.
  
Как видно из списка свойств, кроме картинок up и down у кнопки есть еще поля для картинок over и disable. Первое соответствует  внешнему виду в момент когда мышь находится над кнопкой (но не нажата). Если игра пректируется для мобильных устройств (телефоны, планшетники), то обычно это поле не используется. Внешний вид disable (недоступна) соответствует виду кнопки, когда в неё нельзя кликать.
+
Как видно из списка свойств, кроме картинок up и down у кнопки есть еще поля для картинок '''over''' и '''disable'''. Первое соответствует  внешнему виду в момент когда мышь находится над кнопкой (но не нажата). Если игра пректируется для мобильных устройств (телефоны, планшетники), то обычно это поле не используется. Внешний вид disable (недоступна) соответствует виду кнопки, когда в неё нельзя кликать.
 +
 
 +
== Навигация по экранам ==
 +
 
 +
Повторим проделанные выше действия с двумя оставшимися экранами (lesson_2_Sky, lesson_2_Moon) этого урока. Поместим на lesson_2_Sky кнопку, по памяти, не подглядывая в предыдущие инструкции. Пусть при клике на неё происходит переход на экран lesson_2_Moon.
 +
 
 +
Третью кнопку на экране lesson_2_Moon мы создадим новым методом.
 +
Для этого наступим в дереве на уже существующую кнопку и нажмем правую кнопку мыши.
 +
В выпавшем меню выберем пункт "'''Copy'''". Можно также не пользуясь меню, при активном объекте на клавиатуре нажать клавиши '''Control''' и не отпуская её '''C'''.
 +
 
 +
[[Файл:lesson_2_copy.png]]
 +
 
 +
 
 +
Теперь кликнем на stg_main экрана lesson_2_Moon и нажав правую кнопку мыши выберем пункт меню "''Paste into current object''". Кнопка появится на экране и в дереве проекта.
 +
 
 +
При копировании объекты сохраняют свои свойства.
 +
Поэтому в скопированной кнопке необходимо изменить поле "'''перейти на'''".
 +
Давайте зациклим навигацию, сделав переходы:
 +
Main -> Sky -> Moon -> Main -> ...
 +
 
 +
Протестируем получившийся результат (сохраняем проект и запускаем вьювер).
 +
Если при нажатии на кнопки не происходит листание трёх экранов по кругу,
 +
необходимо у каждой кнопки проверить свойство "'''перейти на'''",
 +
убедившись, что оно ведет на правильный экран.
 +
 
 +
== Работа с текстом ==
 +
 
 +
Объекты можно создавать на сцене не только при помощи таскания картинок из
 +
редактора ресурсов, а и прямо в дереве проекта.
 +
Сделаем активным экран lesson_2_Sky и кликнем в нём на последний в его ветке дерева
 +
объект (кнопка next_scr). Нажмём правую кнопку мыши и выберем пункт меню
 +
"''Создать объект после текущего элемента...''".
 +
 
 +
[[Файл:lesson_2_create.png]]
 +
 
  
== Создание кнопок ==
+
После этого в дереве появится
 +
объект с именем  '''new_object''' типа image.
 +
Впрочем непосредственно на сцене мы ничего не увидим кроме зеленой точки. Чтобы текст можно было перемещать, ему нужно задать ненулевой размер. Сделать это можно, отредактировав его свойства '''w''' (ширина) и '''h'''(высота) в разделе свойств объекта '''"размер"'''.После этого он будет отображаться как пустая зеленая рамка.
 +
Тем не, менее схватимся за неё и расположим прямоугольник примерно по середине фона.
 +
Если при попытке перетащить рамку, Вы промахнулись, то вместо неё сдвинется фон.
 +
В этом случае, поставьте его на место и постарайтесь лучше прицелиться при хватании за рамку (чтобы более точно поставить фон и не вылезал
 +
за области сцены нужно поставить положение х = 0, у = 0. Для этого выбираем соответствующий фон, переходим во вкладку
 +
"Properties" находим свойство "положение" и выставляем соответствующие координаты).
 +
 
 +
Начнем теперь менять свойства созданного объекта:
 +
* Зададим ему тип '''[[Text|text]]''' (в списке типов его возможно придется поискать в самом низу).
 +
* Поменяем имя, например, на '''txt_first'''.
 +
* В поле '''текст''' введем: "''И сказал Бог: да будет свет. И стал свет.''"
 +
 
 +
<blockquote>
 +
[[файл:Ok.png|right|32px]]
 +
'''Совет''': для ускорения поиска нужного типа в списке типов можно нажать первую букву имени типа (t). Если пометка стала на нужное место, нажмите Enter.
 +
</blockquote>
 +
 
 +
Сохраним проект и запустим вьювер. Получившийся результат выглядит не очень красиво.
 +
Текст вписался в рамку созданного объекта и оказался сильно сжатым.
 +
Чтобы придать ему более читаемый вид закроем вьювер и изменим у txt_first
 +
в панели Properties ещё несколько свойств:
 +
* размер '''w''' = 400  (это новая ширина области в которую вписывается текст);
 +
* форматирование '''отступ''' = 10 (это расстояние в пикселях между строчками).
 +
Можно поэкспериментировать с другими параметрами свойств, читая их краткое описание в хинте, появляющемся при наведении мышки на имя свойства.
 +
 
 +
<blockquote>
 +
[[файл:wrong.png|right|32px]]
 +
'''Внимание:''' Описанный выше способ задания текста нельзя применять в реальных проектах. Обычно игра является мультиязычной. Поэтому, все тексты создаются в редакторе текстовых ресурсов, где переводятся на несколько языков. Соответствующий текстовый идентификатор перетаскивается аналогично картинкам в поле текстID.
 +
</blockquote>
  
1. Графические ресурсы arrow_rt_norm и arrow_lf_norm перевести в кнопки. Для этого нужно, прокликивая по этим объектам, в свойстве элемента изменить тип изображения на тип button.  
+
Более подробное описание редактора текстовых ресурсов и работу с объектом text
 +
мы рассмотрим позже в соответствующем [[Редактор текстовых ресурсов|уроке]].  
 +
А пока вернемся к нашим кнопкам.
  
[[Файл:01 6.png]]  [[Файл:01 7.png]]
+
== Логика переходов ==
  
2. В сцене 01 в общих настройках свойства элемента кнопке arrow_rt_norm в параметре внешний вид (down, over) через ResourcesEditor добавляем графический ресурс arrow_rt_down.
+
Пока кнопки, осуществлявшие переходы на следующие экраны, вели себя достаточно однообразно.
 +
Придадим нашему приложению небольшую непредсказуемость.
 +
Для этого активизируем второй экран (lesson_2_Sky) и кликнем на его объект '''next_scr'''.
 +
В панели свойств этой кнопки на свойстве "'''перейти на'''" нажмём правую кнопку мыши.
 +
В появившемся меню выберем пункт "''если был экран''".
 +
В результате, ниже поля "перейти на" появится пара полей, объединенных свойством "если был экран".
 +
В первом поле группы "'''был экран'''" выберем экран lesson_2_Moon, а во втором поле "'''перейти на'''" - экран lesson_2_Main:
  
[[Файл:01 8.png]]
+
[[файл:lesson2_cond.png]]
  
3. В общих настройках свойства элемента кнопке arrow_rt_norm в параметре перейти на указываем перейти на экран Lesson_01.1.
+
Активизируем в дереве проектов первый экран этого урока (lesson_2_Main),
 +
сохраним проект и запустим вьювер. Кликая на кнопки следующего экрана,
 +
мы первый раз пролистаем их все. Повторим этот процесс ещё раз.
 +
Когда мы окажемся второй раз на экране с небом (lesson_2_Sky), кнопка следующего экрана
 +
перебросит нас не на третий экран (lesson_2_Moon), как раньше, а на первый (lesson_2_Main).
 +
После этого все время будут происходить переходы только между первым и вторым экранами.
  
[[Файл:01 9.png]]
+
Логика получившегося результата состоит в следующем.
 +
Свойство '''перейти на''', находящееся в панели Properties по умолчанию,
 +
является безусловным переходом. Если в этом поле задан конкретный экран, при клике на кнопку вьювер отправится именно туда. Однако, этот переход происходит только в тех случаях, если не заданы дополнительные условные переходы (или условие срабатывание не выполняется ни для одного из этих переходов). Иными словами, вьвер сначала попытается совершить условный переход, для которого выполнилось условие срабатывания. Если такого перехода не найдется, будет выполнен переход по умолчанию. Условные переходы мы добавляем динамически в свойства кнопки при помощи правой кнопки мыши.
 +
В нашем случае, добавленные два поля звучат так:
 +
Если уже '''был экран''' lesson_2_Moon, то надо '''перейти на''' экран lesson_2_Main.
  
4. В сцене 01.1. в общих настройках свойства элемента кнопке arrow_lf_norm в параметре внешний вид (down, over) через ResourcesEditor добавляем графический ресурс arrow_lf_down.
+
Пусть проект был запущен с первого экрана lesson_2_Main. На нём мы кликнули на кнопку и оказались на следующем экране lesson_2_Sky. Кнопка этого экрана содержит условный переход. Однако, первый раз он не срабатывает, так как на экране lesson_2_Moon мы ещё не были (и соответствующее условия срабатывания не выполнено). В результате, при клике на кнопку выполняется переход по умолчанию '''перейти на''' lesson_2_Moon. Когда пролистав по кругу все экраны, мы снова оказываемся на lesson_2_Sky, условный переход уже срабатывает (мы были на экране lesson_2_Moon). Поэтому, мы отправляемся на первый экран lesson_2_Main.
  
[[Файл:01 10.png]]
+
Как мы видим, кнопка может выполнять достаточно сложные логические функции.
 +
У неё много динамически добавляемых полей. Они позволяют менять другие объекты, совершать некоторые служебные действия и т.д.
  
5. В общих настройках свойства элемента кнопке arrow_lf_norm в параметре перейти на указываем перейти на экран Lesson_01.
+
== Добавление картинок в ресурсы ==
  
[[Файл:01 11.png]]
+
Данный проект содержит все необходимые графические ресурсы для выполнения уроков.
 +
Однако, если Вы креативный человек (а другие эти уроки не читают), Вам, рано или поздно,
 +
захочется добавить собственную картинку в игровой проект.
  
''button'' – тип объекта, который имеет стандартное кнопочное поведение, подгружающий из редактора ресурсов от одного до трех графических ресурсов (up, down, over) для изменения своего состояния.
+
Делается это очень просто. В редакторе ресурсов станьте мышкой на имя папки с текущем уроком (lesson_02)
Кнопка может быть дверью: задаётся имя экрана и способ перехода на него (модальный или полный переход);
+
и нажмите правую кнопку. В появившемся меню выберете пункт "''Add Images...''".
Кнопка может содержать вместо имени экрана web адрес http://..., тогда при клике на кнопку запускается браузер по умолчанию.
+
Затем, найдите нужную картинку у себя на диске:
  
Параметры:
+
[[файл:lesson_2_addImg.png]]
  
''up'' – графический ресурс для отображения отжатой кнопки. Перетаскивается мышкой из редактора ресурсов (поле должно находится в состоянии редактирования);
+
Она добавится в графические ресурсы и появится в списке доступных картинок
''down'' – графический ресурс для отображения нажатой кнопки. Перетаскивается мышкой из редактора ресурсов (поле должно находится в состоянии редактирования). Может отсутствовать;
+
в редакторе ресурсов. Теперь можно смело перетаскивать её на сцену.
''over'' – графический ресурс для отображения кнопки c мышкой над ней. Перетаскивается мышкой из редактора ресурсов (поле должно находится в состоянии редактирования). Может отсутствовать.
 
  
6. Проверить выполнение задачи с помощью проигрывателя сцен Viewer. Для этого в редакторе сцен нужно нажать кнопку запуска сцены.
+
Аналогично можно добавить и другие ресурсы.
 +
Например, для анимации нужно выбрать группу картинок. Анимация добавится с названием, идентичным названию папки, содержащей ресурсы.
  
 
== Упражнения ==
 
== Упражнения ==
  
1. Щелкнув правой кнопкой мыши по экрану Lesson_01.1, создать новый экран Lesson_01.2.
+
* Добавьте на все экраны кнопку в виде стрелочки влево (поместив её в левом нижнем углу). Активнее используйте копирование объектов.
 +
* Задайте соответствующие переходы между экранами (листание в обратную сторону).
 +
* Добавьте на последний экран любой на Ваш выбор текст; отформатируйте его.
 +
* Сделайте логику перехода по экранам, при которой после первого экрана мы попадаем сразу на третий, если уже был второй.
 +
* Загрузите в проект свою любимую картинку или фотографию и разместите её на любом из созданных в этом уроке экране. Если она окажется слишком большой, вспомните о модификаторах масштаба.
 +
 
 +
== Эффекты с Альфа каналом ==
 +
 +
В этом уроке рассмотрим эффект с альфаканалом на примере смены экранов.
 +
 
 +
1. Откройте первый экран из урока 2.
  
2. Создать новую сцену (с названием 01.2).
+
2. Выделите экран и посмотрите на его свойства. Вы увидите пункт '''анимация переходов'''.
  
3. Через редактор ресурсов ResourcesEditor загрузить в сцену 01.2 графический ресурс bg_3 и arrow_lf_norm.  
+
3. Выставьте тип перехода и время растворения как показано на рисунке.
  
4. В сцене 01.1 удалить кнопку arrow_lf_norm и через редактор ресурсов ResourcesEditor добавить графический ресурс arrow_rt_norm, изменить его на тип кнопка.
+
[[Файл:Lesson9_16.jpg‎]]
  
5. В сцене 01.1 внешний вид кнопки установить такой же, как у кнопки в сцене 01.
+
4. Сохраните проект и проверьте переход с этого экрана во viewer. Экран сменяется другим экраном путем плавного растворения по альфе.
  
6. В сцене 01.2 постарайтесь сами изменить параметры кнопки. Сделайте так, чтобы:
+
=== Упражнения ===
  
a) при нажатии на кнопку первый экран переходил на второй;
+
В этом уроке мы поставили время растворения 2 секунды. Таким образом наша смена экранов выглядит как слайд-шоу. В большинстве случаев это большое время. Путем подбора времени растворения сделайте смену экранов наиболее привлекательной. Сделайте то же самое для двух остальных экранов.
  
b) при нажатии на кнопку второй экран переходил на третий;
 
 
с) при нажатии на кнопку третий экран переходил на первый.
 
 
----
 
----
 
{| width="100%"   
 
{| width="100%"   
 
  | width="40%"|[[Введение в AppSalute Сreator|Урок 1]] <<  
 
  | width="40%"|[[Введение в AppSalute Сreator|Урок 1]] <<  
 
  ! width="20%"|[[Learning|Оглавление]]  
 
  ! width="20%"|[[Learning|Оглавление]]  
  | width="40%" align="right"| >> [[Принцип работы объекта типа Checkbox|Урок 3]]
+
  | width="40%" align="right"| >> [[Checkbox как машина состояний|Урок 3]]
 
|}
 
|}
 +
 +
[[Category:Learning]]

Версия 12:01, 23 апреля 2021

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


Цель: научиться создавать экраны, сцены, кнопки и текст.

Задачи:

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


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

Запускаем SceneEditor и загружаем проект lessons (см. предыдущий урок). Кликаем на первый экран проекта (lesson_1) в панели Layout мышью и нажимаем её правую кнопку. В выпадающем меню выбираем "Создать экран после текущего элемента" "Create a screen after the current item" :

Lesson2 screen.png

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

Lesson2 layout1.png

Повторяя эти действия, создадим еще 2 экрана с именами lesson_2_Sky и lesson_2_Moon. При этом, каждый раз правую кнопку мыши необходимо нажимать на предыдущем экране. Если же произошла ошибка, экраны всегда можно перетащить по дереву проекта или удалить, как это было описано в предыдущем уроке.

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

Lesson2 layout2.png

Создание сцены происходит аналогично созданию экрана. Кликнем мышкой на экран lesson_2_Main и нажмем её правую кнопку. В выпавшем меню выбираем "Создать сцену в текущем элементе" ("Create a scene in the current item") и в появившемся окошке вводим имя stg_main, соглашаясь с размерами сцены (в пикселях), предложенными по умолчанию. Повторям эту операцию, нажимая последовательно на экраны lesson_2_Sky и lesson_2_Moon. В результате получится панель проекта, приведенная на картинке справа.

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

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

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

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

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

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

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

Lesson 2 btn dn.png


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

Wrong.png

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


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

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

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

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

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

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

Lesson 2 copy.png


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

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

Main -> Sky -> Moon -> Main -> ...

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

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

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

Lesson 2 create.png


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

Начнем теперь менять свойства созданного объекта:

  • Зададим ему тип text (в списке типов его возможно придется поискать в самом низу).
  • Поменяем имя, например, на txt_first.
  • В поле текст введем: "И сказал Бог: да будет свет. И стал свет."
Ok.png

Совет: для ускорения поиска нужного типа в списке типов можно нажать первую букву имени типа (t). Если пометка стала на нужное место, нажмите Enter.

Сохраним проект и запустим вьювер. Получившийся результат выглядит не очень красиво. Текст вписался в рамку созданного объекта и оказался сильно сжатым. Чтобы придать ему более читаемый вид закроем вьювер и изменим у txt_first в панели Properties ещё несколько свойств:

  • размер w = 400 (это новая ширина области в которую вписывается текст);
  • форматирование отступ = 10 (это расстояние в пикселях между строчками).

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

Wrong.png

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

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

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

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

Lesson2 cond.png

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

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

Если уже был экран lesson_2_Moon, то надо перейти на экран lesson_2_Main.

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

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

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

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

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

Lesson 2 addImg.png

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

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

Упражнения

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

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

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

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

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

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

Lesson9 16.jpg

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

Упражнения

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


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