Текстурирование физических объектов в Box2D Flash

В этой статье научимся текстурировать наши физические объекты Box2d. Для этого надо взять графику и позиционировать её по физическому объекту. Рассмотрим этот процесс подробнее.

Что будем делать

Мы будем использовать графику по принципу, описанному в статье «Рисуем в IDE, а кодим в FD», сразу могу сказать, что я во всех своих flash-играх применяю этот подход.

А так же я подключу свои наработки с box2d, которые сформировал и использовал во время написания игры Little Ninja. Это класс-синглтон в котором сконцентрирована вся основная работа с боксом, а ещё пара классов-утилит.

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

Разберёмся как легко и понятно организовать перекрывающие друг друга слои отображения (небо, объекты, декорации, GUI).

С помощью GUI реализуем функционал демки (создание удаление объектов и т.п.). Сделаем механизм обработки событий игрового интерфейса.

Таким образом я хочу предоставить читателю не простейшую, наскоряк написанную, демку с кодом в одном файле, а более полезный для изучения и дальнейшего использования код.

В результате наша демка будет выглядеть так:

Можно нажать правую кнопку и в меню выбрать «Show profiler», чтобы посмотреть отображение FPS.

Можно таскать объекты мышкой.

Графика

Для максимальной наглядности я записал видео процесса подготовки графики, единственное что у меня было изначально — это нарисованные объекты.

А чтобы у вас совсем не оставалось вопросов, далее опишу процесс происходящий на видео. 😉

Сначала создаём проект, чтобы определить местонахождение файлов. Можно сразу настроить его основные параметры (разрешение 550х400, FPS = 45, версию плеера).

Теперь сделаем графику для нашего проекта. В Flash IDE создаём новый as3-проект, выставляем нужное разрешение (как в проекте = 550×400), фпс как и в проекте = 45.

Нарисуем наши графические элементы (я их взял уже готовые из своей игры). У меня это будут: голубое небо для фона, дерево, деревянное колесо, круглый камень, деревянная балка. А так же графика для земли: элемент травы и толщ земли.

Для игровых объектов можно сразу прописать классы для дальнейшего использования в коде: Wood_mc, Stone_mc, Wheel_mc.

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

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

В общем я слепил поверхность земли, а снизу всё замостил графикой толщи земли. Творчеством я занимался прям на сцене, а потом всё это сконвертировал в мувиклип (F8), которому указал класс FrontDecor_mc. Далее я размещаю этот клип на сцене в координатах (0;0), захожу в него и позиционирую графику как надо, относительно сцены.

Дело в том, что вся декор-графика и GUI будут загружаться в игру и размещаться в координаты (0;0), поэтому мы в клипах декораций сразу позиционируем графику так, чтобы она смотрелась как надо.

По аналогии сделаем элемент бэк-декора, у меня это одинокое дерево. Этот элемент будет находиться между небом и объектами. После составления сцены бэк-декора так же помещаем её в клип и прописываем ему класс BackDecor_mc.

Теперь сделаем самый дальний слой — небо. Т.к. оно будет статично, то его достаточно сделать в размер экрана игры, у меня он получился чуток побольше. Клипу неба даём имя класс Sky_mc.

Далее настраиваем паблишинг, чтобы создавался файл .swc. Паблишим нашу библиотеку и подключаем в проекте.

Затем я вспомнил, что надо ещё и GUI сделать. Делаем квадратик, который будет у нас кнопкой, конвертируем его в символ Button, копируем сколько надо кнопок, размещаем их как надо на сцене, помещаем поверх статичный текст кнопок и всё это конвертируем в клип и даём ему имя класса GUI_mc. Даём навание символам кнопок, например btnAdd, btnClear и т.п. Он тоже будет у нас загружаться и размещаться в координатах (0;0), поэтому элементы в нём позиционируются аналогично декору. После съёмки видео я решил добавил ещё одну кнопку Debug, по нажатию которой будет отображаться дебаг-отрисовка физики.

Вот и всё, графика готова! Можно приступать к коду :]

Код

Давайте посмотрим на листинги всех классов, которые используются в коде.

Основной класс Main, файл Main.as

В главном классе мы создаём все слои для графики, сразу создаём статичный декор, создаём GUI, настраиваем физический мир, сразу создаём статические физические тела — землю. Организуем обработку GUI (нажатие кнопок), обработку объектов в цикле.

Все физические объекты имеют общего родителя, взглянем на него.

Базовый класс физического объекта, файл PhysObject.as

Класс содержит несколько удобных функций для работы с физическим объектом box2d. А так же основная функция для отображения тут — это функция позиционирования визуализации по координатам и углу физического объекта, функция updateVisByPhys().

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

Деревянная балка, файл WoodBalk.as
Деревянное колесо, файл Wheel.as
Камень, файл Stone.as

Теперь рассмотрим класс, который содержит все основные методы работы с самим миром box2d. Это класс-синглтон с однозначным созданием (его нельзя создать извне), т.е. к нему нельзя обратиться из вне кроме как через функцию getInstance(). Благодаря этому его можно использовать в любом уголке программы)

Его можно брать и использовать, а если вы придумаете какой-то новый функционал «под себя», то его можно просто добавить в этот класс. Я его так и наращивал)

Менеджер физического мира Box2D, файл WorldMng.as

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

Утилиты для работы с боксом, файл Box2DUtils.as

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

Утилиты для работы с физическими объектами и с физикой, файл PhysUtils.as

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

Свои утилитарные функции для работы с математикой, файл MyMath.as

По коду вроде всё, вы сами сможете всё пощупать и по разбираться, скачав исходники.

Плюсы

А тут рассмотрим плюсы и удобности текущего проекта в перспективе.

Понятие слоёв отображения. Можно с лёгкость добавить любой дополнительный слой отображения, например: для дальних задних декораций, фона с эффектом параллакса и т.п.

Менеджер физического мира. Включает в себя всю основную работу с физическим миром. Легко переносимый — можно просто скопировать файл и использовать в другом проекте. Легко расширяемый — вы можете из проекта в проект дописывать в него необходимые функции — улучшать класс.

Базовый класс физических объектов у которых может быть текстура.

Минусы

Рассмотрим минусы и возможные проблемы нашего проекта.

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

Используется векторная графика. Это сильно нагружает процессор и мы не сможем спокойно использовать более 30 объектов, потому что игра начнёт тормозить. А ещё и весь декор векторный. Порог понижения FPS зависит от мощности процессора, поэтому на простеньких ноутбуках игра может начать тормозить уже на 15 объектах. Решение: применять программную растеризацию к игровым объектам и фонам декораций.

Это решения я тоже обязательно рассмотрю в дальнейших статьях.

Заключение

Надеюсь материал будет полезным)

Пишите отзывы в комментариях!

Скачать исходники