Если вам поможет это материал в обучении, буду искренне благодарен вам за то, что вы не поленитесь порекомендовать его для начинающих!
Предисловие
В жизни каждого игрового разработчика на Defold наступает момент, когда ему необходимо заглянуть в рендер скрипт.
В этом уроке мы попробуем проникнуть в таинство рендер скрипта Defold.
Этот и последующие уроки будут являться базовыми “кирпичиками” на пути к общему понимаю концепции Render и рендер скрипта в Defold.
Сразу предупреждаю, я новичок и учусь вместе с вами, поэтому я не претендую на экспертность и не обладаю глубокими знаниями в области компьютерной графики. Если вы укажете мне на ошибку, я буду вам признателен в этом. Я приветствую обратную связь.
На данный момент я вынужден опустить теоретическую часть и сделать упор на получении практического опыта в Defold при работе с рендер скриптом. За это меня извините.
В этом уроке мы просто изменим цвет фона отрисовки игры.
Начинаем…
Откроем пустой проект.
Скопируем файлы, необходимые при работе с рендером в Defold из встроенной папки builtins/render в любую другую за пределы builtins:
Я скопирую эти файлы в созданный мной каталог(папку) my_render:
Можете переименовать файлы, можете их оставить с таким же названием.
Перейдём в default.render и изменим на скопированный ранее рендер скрипт:
Изменим в game.project наш рендер:
Теперь перейдём в наш default.render_script:
Выделяем весь код с помощью сочетаний клавиш ctrl + A и удаляем всё выделенное:
Ничего не должно остаться.
Вставляем такой код:
function init(self)
end
function update(self)
end
Создадим в функции init(self) свойство скрипта clear_color:
self.clear_color = vmath.vector4(0.0, 1, 1, 0)
Что мы сделали?
Мы присвоили переменной self.clear_color значение красного цвета.
Цвет в игровом движке, в Defold, задаётся с помощью комбинации, состоящих из четырёх значений, которые являются компонентами vector4() (вектор с 4 компонентами). Подробнее о векторах: (Математика в 3D играх. Векторы)
Эти четыре значения соответствуют цветовой модели RGBA, которая используется в компьютерной графике.
R — Red (красный),
B — Blue (голубой),
G — Green (зелёный),
A — Alpha (прозрачность).
Как это на практике?
Давайте перейдём в game.project и изменим стартовое значение фона отрисовки рендера для компонента Red:
Сохраните настройки проекта с помощью сочетания клавиш (ctrl + S) и запустите проект (crtl + B):
Проделайте подобные манипуляции с численными значениями каждого компонента.
Например, получите цвет фона:
- Голубой
- Зелёный
- Жёлтый
- Бирюзовый
- Серый
- Белый
Не пренебрегайте этим заданием, вы должны усвоить то, что цвет и оттенки цвета в компьютерной графике — это смесь компонентов.
В компьютерной графике принято “втискивать” значения для цвета в диапазон от 0 до 1 (любой компонент имеет минимальное значение от 0 до 1). Это действительно удобно. Мы можем использовать десятичные числа для того, чтобы задать любой цвет.
Поэтому, оранжевый оттенок вы можете получить с помощью таких значений:
Давайте получим белый цвет:
Представьте, что это наш белый холст для рисования.
И как художник, мы должны сделать свои первые мазки по этому холсту.
Давайте попробуем перекрасить этот цвет в любой другой цвет. Я выберу оранжевый.
Давай вернёмся к нашему рендер скрипту:
К нашему коду:
function init(self)
self.clear_color = vmath.vector4(0.5, 0, 0.5, 0)
render.clear({[render.BUFFER_COLOR_BIT] = self.clear_color})
end
function update(self)
end
Сохраним проект и запустим.
Мы видим, что цвет не изменился.
Почему?
Потому что Рендер, иногда его называют Real-time rendering — это постоянный процесс (в реальном времени) отрисовки компьютерной графики на экране наших устройств.
И наша игра как мультикадровая анимация обновляется и отображается на дисплее.
Поэтому нам нужно рисовать каждый кадр картинку.
Переместим эту строчку в функцию update():
render.clear({[render.BUFFER_COLOR_BIT] = self.clear_color})
Полный код:
function init(self)
self.clear_color = vmath.vector4(1, 0.5, 0, 0)
end
function update(self)
render.clear({[render.BUFFER_COLOR_BIT] = self.clear_color})
end
Вывод на экран:
Вот она, магия.
render.clear() в Defold очищает буфер кадра (экран) перед отрисовкой новой сцены, заполняя его указанным цветом (по умолчанию чёрным или цветом фона), что необходимо для удаления предыдущего кадра и предотвращения “следов” от спрайтов и эффектов, готовя чистый холст для новой отрисовки.
render.BUFFER_COLOR_BIT — это константа в модуле render Defold, которая представляет собой бит-флаг (метку) для буфера цвета (color buffer). Она используется, чтобы указать, какой буфер нужно очистить или задействовать в функциях рендеринга.
Простыми словами:
- Буфер цвета — это “холст” в памяти, где хранятся цвета всех пикселей на экране (RGB или RGBA).
- Эта константа помогает сказать движку: “Работай именно с цветами экрана” (а не с глубиной или маской).
В вышеприведённом примере выше мы присвоили значение переменной self.clear_color. А render.clear() каждый кадр заполняет буфер этим значением.
Буфер — это низкоуровневая штука в GPU-памяти (framebuffer), и clear его перезаписывает заново, в последующий уроках мы обязательно затронем эту тему…
Задания на дом:
Почитать об self.clear_color:
Найти и посмотреть видео на похожую тему: “Как устроены дисплеи компьютеров/смартфонов/телевизоров”.
Например:
