Создаём прототип базового кликера на Defold

d_bl1n · 06.Август.2025 02:48:41

Всем привет
В этом уроке мы создадим базовый прототип кликера на Defold:

clicker
Просмотреть и скачать исходный код проекта можно по этой ссылке:

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

Несмотря на это, я включил в этот урок использование Git. Будет замечательно, если вы познакомитесь с Git: Система контроля версий Git
Если вы не хотите с ним заморачиваться, можете просто пропустить действия, связанные с Git.

Инкрементальная игра — это жанр компьютерной игры, игровой процесс в которой состоит из выполнения простых действий, таких как многократное нажатие на экран. Нажимая на экран, игрок, как правило, зарабатывает валюту. В некоторых играх постоянно нажимать на экран не нужно, валюта зарабатывается автоматически, каждый N-секунд.

Создание проекта и инициализация git-репозитория

Откроем Defold и создадим пустой проект:

Как только проект откроется, перейдём в папку с нашим проектом в проводнике:

Откроем GitBash:

Инициализируем git-репозиторий:

Сделаем первый коммит, предварительно добавив файлы в индекс:

Создание игрового объекта для игрока

Создадим папку assets и подпапку png, добавив в файл изображение нашего будущего персонажа:

Создадим атлас:

Добавим наше изображение игрового персонажа в атлас:

Теперь в папке main создадим Game Object:

Назовём его player:

Перейдём в созданный игровой объект и создадим компонент спрайт:

Выбираем источник для спрайта:

Выбираем изображение для спрайта:

У меня получилось так:

Теперь создадим компонент объект столкновения. Он нам нужен будет, чтобы отслеживать столкновения с курсором(и его объектом столкновения).
Создадим его подобным образом, как ранее создавали компонент спрайт:

Настроем объект столкновения:

Выберем форму для объекта столкновения(у меня это квадрат):

Теперь за ползунки расширим размер формы столкновения:

Я её увеличил до размеров спрайта:

Перейдём в main.collection и добавим в коллекцию player.go:

Игровой объект добавился на сцену:

Изменим ему местоположение, чтобы он отображался по центру экрана:

В файле game.project у нас стоят такие настройки разрешения экрана игры:

Чтобы установить объект в центр, поделим ширину и высоту на 2.

Добавляем файлы в индекс репозитория и делаем коммит:

Я случайно сделал перенос строки и поставил одиночную кавычку на новой строке.
Шаблон для создания коммита выглядит так: commit -m 'comment to commit'

Создаём курсор

Я уже создавал ранее тему: Как создать курсор, перетаскивание объектов с помощью Defold Input от britzl
Но так как этот урок маленький, я ещё раз покажу процесс создания курсора поэтапно с помощью библиотеки Defold Input от britzl.

Перейдём на гитхаб репозитория библиотеки Defold Input:
GitHub - britzl/defold-input: Simplify input related operations such as gesture detection, input mapping and clicking/dragging game objects
На главной странице проекта копируем ссылку для установки библиотеки:

В проекте игры открываем файл game.project:

Заходим в категорию Project и ищем поле Dependencies, кликаем на плюсик:

Вместо этой ссылки вводим скопированную ранее ссылку на библиотеку:

Сохраняем проект, должно получиться так:

Теперь подгоняем изменения в нашем проекте:

Появилась папка с библиотекой:

Создаём игровой объект:

Создаём и настраиваем ему объект столкновения:

Тип ставим Kinematic(что значит, что столкновения будут подчиняться логике соответствующего ему скрипта). Объект столкновения будет принадлежать группе cursor и будет взаимодействовать с player:

Создадим форму столкновения и изменим диаметр сферы:

Теперь добавим объект компонент скрипт:

Изменим настройки скрипта(я установил галочку на получение данных с устройств ввода для этого скрипта):

Перейдём в main.collection и добавим игровой объект cursor:

Запустим проект с помощью комбинации ctrl + B или клавиши f5:
drag

Всё проверили, всё работает. Теперь отключим опцию перетаскивания:

Добавим файлы в индекс и закоммитим изменения:

Добавляем обработку кликов и подсчёт очков

Создадим player.script:

Добавляем его в player.go:

Откроем player.script и вставим такой код:

local cursor = require("in.cursor") -- подключаем модуль curso

function init(self)
	self.current_score = 0 -- отвечает за количество очков
	self.score_coefficient = 1 -- сколько дают очков за клик
end

function on_message(self, message_id, message, sender)
	if message_id == cursor.CLICKED then -- если мы кликнули на player.go
		self.current_score = self.current_score + self.score_coefficient -- увеличиваем кол-во очков
		print("Текущее счёт: " .. self.current_score) -- выводим текущее кол-во очков
	end
end

Сохраняем проект (crtl + S). Запускаем (ctrl + B) или f5.
После каждого клика будет выводиться сообщение о текущем счёте:

Добавим файлы в индекс и закоммитим изменения:

Отображение счёта через GUI

Создадим main.gui файл:

Откроем main.gui и добавим фон по умолчанию:

Добавим текстовую ноду:

Установим шрифт по умолчанию:

Установим новое текстовое значение: Score:

Установим Pivot на North West(таким образом мы выравниваем текст по верхнему левому краю):

Подвинем текстовую ноду в край экрана gui-сцены:

Для удобства изменим id текстовой ноды:

Перейдём в main.collection и создадим игровой объект gui:

Добавим компонент файл:

Выберем main.gui:

У вас должна добавиться gui-сцена:

Если вы запустите проект, то сможете увидеть gui элемент:

Теперь создадим gui-скрипт main.gui_script:

Открываем скрипт и вставляем такой код:

function init(self)
	self.score = gui.get_node("score") -- получаем id ноды "score"
end

function on_message(self, message_id, message, sender)
	if message_id == hash("change_score") then -- если придёт сообщение "change_score"
		gui.set_text(self.score, "Score: " .. message.new_score) -- установим новое значение текстовой ноде "score"
	end
end

Открываем main.gui и кликаем по Gui, привязываем скрипт main.gui_script к этому gui в поле Script:

Открываем player.script и вставляем в функцию on_message, перед оператором end, такую строку:

msg.post("/gui", "change_score", { new_score = self.current_score })

Полный код player.script:

local cursor = require("in.cursor") -- подключаем модуль curso

function init(self)
	self.current_score = 0 -- отвечает за количество очков
	self.score_coefficient = 1 -- сколько дают очков за клик
end

function on_message(self, message_id, message, sender)
	if message_id == cursor.CLICKED then -- если мы кликнули на player.go
		self.current_score = self.current_score + self.score_coefficient -- увеличиваем кол-во очков
		print("Текущее счёт: " .. self.current_score) -- выводим текущее кол-во очков
		msg.post("/gui", "change_score", { new_score = self.current_score }) -- отправляем сообщение игровому объекут gui сообщение
	end
end

Сохраняем проект и запускаем его:
clicker

Добавляем файлы в индекс и делаем коммит:

На этом моменте остановимся! Всем спасибо за внимание. Если у вас имеются какие-нибудь вопросы или нашли ошибку в этой теме, пишите