Работа с эффектами — различия между версиями

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Эффекты с Альфа каналом)
(Использование Видео)
 
(не показано 13 промежуточных версий 8 участников)
Строка 2: Строка 2:
 
  | width="40%"|[[Настройка миниигр|Урок 8]] <<  
 
  | width="40%"|[[Настройка миниигр|Урок 8]] <<  
 
  ! width="20%"|[[Learning|Оглавление]]  
 
  ! width="20%"|[[Learning|Оглавление]]  
  | width="40%" align="right"| >> [[Работа с различными лейаутами|Урок 10]]
+
  | width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
 
|}
 
|}
 
----
 
----
 +
{{TOC right}}
  
 
'''Цель:''' изучить возможности редактора на примере применения различных эффектов.
 
'''Цель:''' изучить возможности редактора на примере применения различных эффектов.
Строка 11: Строка 12:
 
* Создать экран, на котором можно освоить работу с патиклами (объект flyer) и масками ;
 
* Создать экран, на котором можно освоить работу с патиклами (объект flyer) и масками ;
 
* Создать экран и настроить просмотр Видео
 
* Создать экран и настроить просмотр Видео
* Настроить появление сцены с проявлением по альфе, переходи на следующий экран с проявлением по альфе
+
* Настроить появление сцены с проявлением по альфе, переходить на следующий экран с проявлением по альфе
 +
* Настроить фоновую музыку.
  
 
== Партиклы (Particles) ==
 
== Партиклы (Particles) ==
Строка 19: Строка 21:
 
1. Запустить SceneEditor.
 
1. Запустить SceneEditor.
  
2. В меню Проект → Загрузить → Learning.seproj.  
+
2. В меню Проект → Загрузить → lessons.seproj.  
  
 
3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.3, создать экран Lesson_09.
 
3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.3, создать экран Lesson_09.
  
4. В экране Lesson_09 создать новую сцены 09 , в которую (через Resources Editor) добавить графические ресурсы из папки Sources\Lesson_09 (см. подготовка к работе «Создание проекта»).
+
4. В экране Lesson_09 создать новую сцену 09, в которую (через Resources Editor) добавить графические ресурсы из папки Sources\Lesson_09 (см. подготовка к работе «Создание проекта»).
  
 
[[Файл:Lesson9_1.jpg|350px]]
 
[[Файл:Lesson9_1.jpg|350px]]
Строка 61: Строка 63:
 
Подробно о свойствах флаера можно почитать [[Flyer|тут]]. Для того чтобы из него получился снег запишите следующие свойства.
 
Подробно о свойствах флаера можно почитать [[Flyer|тут]]. Для того чтобы из него получился снег запишите следующие свойства.
  
[[Файл:Lesson9_7.jpg]]
+
[[Файл:snow_fl.png]]
  
 
7. Сохраните проект и проверьте его выполнение в программе viewer. При клике на слоненка начинает идти снег, а при повторном клике снег исчезает.
 
7. Сохраните проект и проверьте его выполнение в программе viewer. При клике на слоненка начинает идти снег, а при повторном клике снег исчезает.
Строка 83: Строка 85:
 
13. Флаеру star пропишите следующие свойства.
 
13. Флаеру star пропишите следующие свойства.
  
[[Файл:Lesson9_11.jpg]]
+
[[Файл:star_fl.png]]
  
 
14. Сохраните проект и проверьте его выполнение в программе viewer. При клике на звезду флаер будет вести себя как взрыв сверхновой (или салют).
 
14. Сохраните проект и проверьте его выполнение в программе viewer. При клике на звезду флаер будет вести себя как взрыв сверхновой (или салют).
Строка 101: Строка 103:
 
a) снег шел при клике на любую область экрана;
 
a) снег шел при клике на любую область экрана;
 
b) изменить параметры флаера snow таким образом, чтобы он выглядел как дождь;
 
b) изменить параметры флаера snow таким образом, чтобы он выглядел как дождь;
с) поиграйтесь с параметрами флаера, чтобы прочувствовать зависимость поведения флаера от его параметров.
+
с) поиграйтесь с параметрами флаера, чтобы прочувствовать зависимость поведения флаера от его параметров;
 
 
  
 
== Использование Видео ==
 
== Использование Видео ==
Строка 114: Строка 115:
 
3. Загрузите на сцену ресурсы к этому уроку из редактора ресурсов (bg, play).
 
3. Загрузите на сцену ресурсы к этому уроку из редактора ресурсов (bg, play).
  
 +
'''Создание экрана и сцены в игровом проекте'''
  
'''Настройка объектов, работа с видео'''
+
'''''Если, в базе ресурсов урока, видео отсутствует, скачайте или добавьте любое, которое вам понравится(только без произвола).'''''
  
 
1. Создайте на сцене новый объект и сделайте ему тип video. Переименуйте его в video.
 
1. Создайте на сцене новый объект и сделайте ему тип video. Переименуйте его в video.
Строка 127: Строка 129:
 
3. Объекту video выставляем следующие параметры.  
 
3. Объекту video выставляем следующие параметры.  
  
[[Файл:Lesson9_14.jpg]]
+
[[Файл:vid.png]]
  
 
Обратите внимание, что id видео перетаскивается мышкой из редактора ресурсов.
 
Обратите внимание, что id видео перетаскивается мышкой из редактора ресурсов.
Строка 133: Строка 135:
 
4. Сохраните проект и посмотрите результат в программе viewer.
 
4. Сохраните проект и посмотрите результат в программе viewer.
  
=== Упражнения ===
+
Стоит учесть, что объект Video принимает видео(извините за тавтологию) определенного формата - '''*.ogv'''
 
+
Также есть поддержка формата '''*.webm'''
В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:
 
 
 
a) после запуска видео через 10 секунд оно автоматически становилось на паузу;
 
 
 
b) чтобы видео запускалось сразу после загрузки экрана.
 
 
 
== Эффекты с Альфа каналом ==
 
 
В этом уроке рассмотрим эффект с альфаканалом на примере смены экранов.
 
 
 
1. Откройте первый экран из урока 2.
 
 
 
2. Выделите экран и посмотрите на его свойства. Вы увидите пункт '''анимация переходов'''.
 
 
 
3. Выставьте тип перехода и время растворения как показано на рисунке.
 
 
 
[[Файл:Lesson9_16.jpg‎]]
 
 
 
4. Сохраните проект и проверьте переход с этого экрана во viewer. Экран сменяется другим экраном путем плавного растворения по альфе.
 
  
=== Упражнения ===
+
Если видео без альфа-канала (прямоугольное и не содержит в себе прозрачности), то используется 1 файл, id которого нужно перетащить из базы ресурсов в поле '''id видео RGB'''.
  
В этом уроке мы поставили время растворения 2 секунды. Таким образом наша смена экранов выглядит как слайд-шоу. В большинстве случаев это большое время. Путем подбора времени растворения сделайте смену экранов наиболее привлекательной. Сделайте то же самое для двух остальных экранов.
+
Если видео с альфа-каналом, то дополнительно используется '''id видео Alpha'''.
  
 
== Звуки ==
 
== Звуки ==
Строка 188: Строка 171:
 
  | width="40%"|[[Настройка миниигр|Урок 8]] <<  
 
  | width="40%"|[[Настройка миниигр|Урок 8]] <<  
 
  ! width="20%"|[[Learning|Оглавление]]  
 
  ! width="20%"|[[Learning|Оглавление]]  
  | width="40%" align="right"| >> [[Работа с различными лейаутами|Урок 10]]
+
  | width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
 
|}
 
|}
 +
 +
[[Category:Learning]]

Текущая версия на 06:28, 6 августа 2021

Урок 8 << Оглавление >> Урок 10

Цель: изучить возможности редактора на примере применения различных эффектов.

Задачи:

  • Создать экран, на котором можно освоить работу с патиклами (объект flyer) и масками ;
  • Создать экран и настроить просмотр Видео
  • Настроить появление сцены с проявлением по альфе, переходить на следующий экран с проявлением по альфе
  • Настроить фоновую музыку.

Партиклы (Particles)

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

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

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

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

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

Lesson9 1.jpg

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

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

1. Разместим их на сцене как показано на рисунке.

Lesson9 2.jpg

2. Сделаем из головы слоненка машину состояний. Голова должна вертеться из стороны в сторону с интервалом в 1 секунду. Запишем в состояниях машины следующие параметры.

Lesson9 3.jpg

3. Посмотрите результат с помощью программы viewer. Слоненок будет мотать головой.

4. Теперь мы хотим, чтобы клик на слоненка вызывал какое-то действие, например, чтобы шел снег. Можно сделать из туловища машину состояний, но туловище маленькое, а нам нужен именно весь слоненок. Для этого нам понадобится маска. Из редактора ресурсов перетащим на сцену графический ресурс mask и переместим ее на слоненка. Маска очень маленькая, чтобы закрывать всего слоненка, поэтому воспользуемся модификаторами. Увеличим маску и сделаем ей прозрачность (alpha) 0,01.

Lesson9 4.jpg

На сцене вы можете увидеть вокруг слоненка рамку от маски. Саму маску не видно из-за прозрачности. Стоит обратить внимание на то, что прозрачность мы сделали 0,01. Если бы она была равна 0, то маска не воспринимала бы клик, а была бы полностью прозрачной.

5. Как вы уже догадались, маска у нас будет машиной состояний, включающей другой объект. Этим другим объектом будет flyer. Флаеры (патиклы) используются для создания эффектов, когда один маленький объект размножается и совершает какие-либо действия, при этом все его частички ведут себя подобно.

Перетащим из редактора ресурсов на сцену графический ресурс snow и разместим его на сцене посередине по оси x (x=0) и вверху, немного за сценой (y=-320). Сделайте объекту тип flyer.

6. Параметры флаера настроим немного позже, а сейчас вернемся к нашей маске. Сделайте маске тип machine. И введите следующие параметры.

Lesson9 5.jpg

В первом состоянии (начальном) машина передает объекту snow состояние end, а во втором - beg. У флаера есть два состояния end и beg, в которых он выключен и включен соответственно. Чтобы без нашего желания флаер не запускался, в свойствах snow в поле "состояние" запишем его начальное состояние end.

Lesson9 6.jpg

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

Snow fl.png

7. Сохраните проект и проверьте его выполнение в программе viewer. При клике на слоненка начинает идти снег, а при повторном клике снег исчезает.

8. Следующей нашей задачей будет создание разлетающегося кольца из звездочек вокруг желтой звезды на сцене, при клике на эту звезду. Представьте, что эта сцена у вас сейчас на экране мобильного телефона, а вам нужно дотронуться до звезды. Звезда очень маленькая, как следствие - по ней трудно попасть. Здесь нам на помощь опять явится маска. Снова перетащите ресурс mask на сцену из редактора ресурсов, переименуйте его в star_mask и поместите точно над звездой.

9. Растягивать маску не нужно, она таких размеров, как нам нужно. В свойствах star_mask в модификаторах задайте alpha=0,01.

10. Добавьте на сцену ресурс star из редактора ресурсов и поместите его точно на звезду.

Lesson9 8.jpg

11. Объекту star_mask нужно изменить тип на machine, а объекту star на flyer.

Lesson9 9.jpg

12. Задайте машине star_mask следующие состояния.

Lesson9 10.jpg

13. Флаеру star пропишите следующие свойства.

Star fl.png

14. Сохраните проект и проверьте его выполнение в программе viewer. При клике на звезду флаер будет вести себя как взрыв сверхновой (или салют).

Упражнения

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

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

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

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

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

a) снег шел при клике на любую область экрана; b) изменить параметры флаера snow таким образом, чтобы он выглядел как дождь; с) поиграйтесь с параметрами флаера, чтобы прочувствовать зависимость поведения флаера от его параметров;

Использование Видео

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

1. Создайте еще один экран Lesson_9.2 после экрана Lesson_9.1.

2. Добавьте сцену 09.

3. Загрузите на сцену ресурсы к этому уроку из редактора ресурсов (bg, play).

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

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

1. Создайте на сцене новый объект и сделайте ему тип video. Переименуйте его в video.

Lesson9 12.jpg

2. Из ресурса play сделайте машину состояний. Пропишите машине следующие состояния.

Lesson9 13.jpg

3. Объекту video выставляем следующие параметры.

Vid.png

Обратите внимание, что id видео перетаскивается мышкой из редактора ресурсов.

4. Сохраните проект и посмотрите результат в программе viewer.

Стоит учесть, что объект Video принимает видео(извините за тавтологию) определенного формата - *.ogv Также есть поддержка формата *.webm

Если видео без альфа-канала (прямоугольное и не содержит в себе прозрачности), то используется 1 файл, id которого нужно перетащить из базы ресурсов в поле id видео RGB.

Если видео с альфа-каналом, то дополнительно используется id видео Alpha.

Звуки

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

1. Вернитесь к экрану Lesson_09.

2. Создайте на сцене 09 новый объект и назовите его music.

Lesson9 12.jpg

3. Сделайте из объекта music машину состояний и пропишите следующие состояния.

Lesson9 15.jpg

Согласно этих состояний, сразу после запуска экрана начинает играть музыка music_gaming_04. Через 60 секунд после начала машина идет в состояние stop, где дается команда mus_stop и проигрывание музыки останавливается. Музыку можно не останавливать, тогда она будет играть по кругу.


Упражнения

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

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

b) чтобы музыка останавливалась кликом на слоненка.


Урок 8 << Оглавление >> Урок 10