Здравствуйте.

Сегодня мы заканчиваем создание простой видеоигры на основе настольной игры Memory.

ЧАСТЬ 5. ЭКРАН ИГРЫ

СОЗДАНИЕ ВЫДЕЛЯЕМЫХ ЭЛЕМЕНТОВ

1. Обновляем управление временем жизни экрана Game в классе Screens

Введём сообщающие переменные gameConfiguration и gameDeconfiguration. Они позволят нам оставить в enterGame() и leaveGame() лишь необходимый минимум. Остальную настройку будут производить подписчики gameConfiguration и gameDeconfiguration.

2. Убираем выход из экрана по нажатию кнопки мыши

Теперь мы будем использовать нажатие кнопки мыши для выделения элемента.

3. Обновляем сцену

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

4. Создаём структуру Item (Элемент)

Создаём структуру Item для внутреннего представления элемента игрового поля. Каждый элемент содержит:

* позицию (ряд, столбец)

* идентификатор

Элементы считаются равными, если их идентификаторы совпадают.

5. Создаём и отображаем элементы

Вводим setupItems() для:

* создания внутренних представлений элементов поля

* создания их визуальных представлений

* установки маски узла для последующего выделения

Также мы вводим itemPosition() для преобразования внутренней позиции элемента (ряд, столбец) в визуальную (x, y, z).

6. Реализуем выделение элементов

Последний шаг заключается в том, чтобы сделать элементы выделяемыми:

* класс Screens

** создаём setupGameConfiguration() для настройки позиции курсора мыши и камеры зрителя экрана игры (Game) с использованием gameConfiguration и gameDeconfiguration

* экран Game

** создаём setupSelection() для подписки на щелчок мыши и выбора узла сцены, находящегося под курсором мыши

** создаём tearSelectionDown() для удаления подписки на щелчок мыши в тех случаях, когда мы не хотим это разрешать

** создаём selectNode() для изменения массива selectedNodes и сообщении о его изменении с помощью selectedNodesReport

** создаём selectAllNodes() и deselectAllNodes() для упрощения выбора всех элементов поля либо снятия оного

** создаём setupSelectionColor() для выставления материала белого цвета у выбранных элементов

7. Промежуточный результат

Изменённые файлы:

* Screens.h

* Game.h

* Item.h

Их содержимое: https://bitbucket.org/ogstudio-games/memory-colors-guide/src...

Веб-версия текущего результата: https://ogstudio.github.io/game-memory-colors/tutorial-5.1/m...

РИСУНКИ ЭЛЕМЕНТОВ И КЭШИРОВАНИЕ МАТЕРИАЛОВ

1. Добавляем шейдеры с рисунками

Наличие двух сфер одного цвета означает, что они совпадают. Для отображения 16 элементов нам нужно 8 пар этих элементов.

Добавим шейдеры со следующими рисунками:

* вертикальные линии

* горизонтальные линии

* наклонные линии (вертикальные линии при 45 градусах)

* шахматная доска

* повёрнутая шахматная доска (45 градусов)

* круги

Это даёт нам 6 различных рисунков. Ещё два "рисунка" будут полностью белыми и чёрными.

Итог:

2. Создаём класс Patterns (шаблоны, рисунки)

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

3. Разукрашиваем выбранные элементы рисунками

Заменяем setupSelectionColor() методом setupSelectionPattern(), который должен:

* создать экземпляр класса Patterns

* присвоить каждой сфере свой материал из Patterns

4. Анимация появления элементов

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

Создаём метод setupAnimationEntrance(), который:

* помещает все сферы в одну позицию

* помещает всю сцену за зрителем, что делает её невидимой для пользователя

* выбирает все сферы, что приводит к отображению всех рисунков

* анимирует движение сфер так, чтобы они оказались в области видимости зрителя

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

* анимирует движение сфер так, чтобы поместить каждую в свою позицию

5. Промежуточный результат

Изменённые файлы:

* Game.h

* Patterns.h

Их содержимое: https://bitbucket.org/ogstudio-games/memory-colors-guide/src...

Веб-версия текущего результата: https://ogstudio.github.io/game-memory-colors/tutorial-5.2/m...

СРАВНЕНИЕ ЭЛЕМЕНТОВ И АНИМАЦИЯ РЕЗУЛЬТАТА СРАВНЕНИЯ

1. Сравнение элементов

Создаём setupMatch() для сравнения двух выбранных элементов. Мы хотим сравнивать элементы по идентификатору:

* если их идентификаторы равны, то элементы совпадают

* иначе элементы не совпадают

Об успешном результате сообщаем с помощью matchSuccess, об отрицательном - matchFailure.

2. Анимация успешного и отрицательного результатов сравнения

Мы хотим получить следующие анимации:

* когда элементы совпадают

** сменить фон на белый

** удалить совпадающие элементы

** вернуть фон к прежнему состоянию

* когда элементы не совпадают

** мигнуть фоном с красным цветом два раза

** скрыть рисунки выбранных элементов

Создаём следующие методы экрана игры:

* setupMatchAnimation() для создания последовательностей по отображению успешного и отрицательного результатов сравнения

* configureBG() для сброса таймера фона и установки целевого цвета фона с начальной степенью влияния этого цвета на фон

* animateBG() для сообщения текущих значений целевого цвета фона и текущей степени влияния

* setupRemoval() для сброса таймера удаления и сброса скорости движения при удалении

* animateRemoval() для перемещения элементов из поля зрения зрителя

* reportRemovedNodesCount() для сообщения количества удалённых элементов

Экран игры теперь сообщает необходимый цвет фона и количество удалённых элементов. Но этого ещё не достаточно для смены фона.

3. Обновляем класс Screens для принятия цвета фона от экрана игры

Обновляем шейдер Flaring, используемый на фоне, для принятия:

* целевого цвета

* степени его влияния

Эти два параметра (shader uniforms) позволяют менять стандартный зелёный цвет на любой целевой с использованием степени влияния. Степень влияния варьируется от 0 (никак не влияет на конечное изображение) до 1 (конечное изображение полностью состоит из целевого цвета).

Обновляем класс Screens для передачи этих параметров в шейдер Flaring.

Создаём setupGameBackground() для подписки на targetColorReport и targetColorStrengthReport экрана игры. При наличии сообщений от них класс Screens передаёт целевой цвет и степень влияния в шейдер.

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

После того, как игровое поле осталось без элементов, необходимо перейти на конечный экран (Finish).

Обновляем экран игры для отправки exitReport после того, как все элементы были удалены.

Обновляем класс Screens для смены экрана на Finish после получения сообщения от exitReport.

ИТОГ

Мы создали игру "Memory: Colors" (Память: Цвета)!

Веб-версия результата: https://ogstudio.github.io/game-memory-colors/tutorial-5.3/m...

Американский автосалон Velocity Motorcars, специализирующийся на роскошных подержанных автомобилях, выставил на продажу фургон Volkswagen, одну из вариаций знаменитого хиппибаса, который превратили в машину из фильма «Назад в Будущее». Автомобиль покрасили в цвет оригинального DeLorean DMC-12 и даже установили «потоковый накопитель».

«Фольксваген» оснастили дверьми типа «крылья чайки» и репликой блока управления машиной времени, с клавиатурой для ввода даты и тремя экранами. Задняя часть автомобиля превращена в зону отдыха: здесь находится кровать, телевизор и аудиосистема.

Сейчас Volkswagen Kombi выставлен на продажу в Нэшвилле, Теннеси. Цена автомобиля — 89 995 долларов (5,4 миллиона рублей).

Увидено здесь

синстаграмлено отсюда https://www.instagram.com/p/BUZcqGohwtD/?taken-by=l_am_puma

Пума встречает хозяина с работы 1 https://pikabu.ru/story/puma_vstrechaet_khozyaina_s_rabotyi_...