Серия «Игрушечный программист - мой опыт Construct 3»

0

6. Переменные - Порядок в проекте Construct 3 - собственный взгляд

Добрый день!

Меня зовут Руслан.
С 2016 года делаю игры в редакторе Construct 3.

Часть 6. Переменные.

1) Переменные всегда называю латинскими буквами с редкими вкраплениями цифр. Это даёт уверенность, что игра правильно всё поймёт и не создаст проблем из-за кириллицы в именах или я не перепутаю латиницу с кириллицей.

2) К переменным применяю «верблюжий» принцип camalCase: начинаются они со строчной буквы, а каждое следующее слово в ней - с прописной:

6. Переменные - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Construct 3, Переменные, Порядок

Верблюжий принцип.

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

6. Переменные - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Construct 3, Переменные, Порядок

Комментарии к переменным.

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

4) Никогда не создаю булевых переменных (boolean - триггеров true-false). Не нравятся они мне :)

А если быть точнее, их сложно преобразовать во что-то другое. К примеру, вчера мне казалось, что переменная mode будет переключать только 2 режима. А сегодня выяснилось, что их будет 3.

Чтобы не скакать потом по всему коду заменяя булеву переменную, я заранее делаю её строковой (string) и задаю ей одно из двух значений: on или off,

Почему не true и false? Так короче, легче менять одно на другое (on на off и обратно) и понятнее по смыслу (включено-выключено).

6. Переменные - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Construct 3, Переменные, Порядок

Строковые переменные вместо булевых.

5) Константы почему-то не использую. Пытался, но потом всё равно про них забываю. Поэтому пользуюсь только обычными переменными.

6) Большая часть переменных, как и большая часть событий у меня оказывается в листе common.

7) Список переменных в листе сортирую по алфавиту (латинскому), чтобы быстрее находить нужные.

6. Переменные - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Construct 3, Переменные, Порядок

Сортировка переменных по алфавиту.

Как обычно, Телеграм:
https://t.me/toyprogrammer

Показать полностью 2
2

5. Экраны и листы событий - Порядок в проекте Construct 3 - собственный взгляд

Добрый день!

Меня зовут Руслан.
С 2016 года делаю игры в редакторе Construct 3.

В этой заметке вкратце покажу как управляю экранами и листами событий в Construct 3.

1) Экраны (они же макеты) всегда называю с заглавной буквы.

5. Экраны и листы событий  - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Проект, Браузерные игры, Construct 3, Вкладки, Макет, Название

Названия экранов.

2) Листы событий - всегда с маленькой.

5. Экраны и листы событий  - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Проект, Браузерные игры, Construct 3, Вкладки, Макет, Название

Листы событий.

3) Если лист событий относится к определённому экрану - у них одинаковое имя (разница только в регистре первой буквы).

Это позволяет сразу понять, что это за вкладка - экран или лист событий. И не съедается лишнее место в пространстве вкладки.

5. Экраны и листы событий  - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Проект, Браузерные игры, Construct 3, Вкладки, Макет, Название

Вкладки с экранами и листами событий.

4) В отдельные листы событий выношу:

  • массивы (array),

  • обработку кнопок (menu),

  • обработку непрерывными действиями: бег персонажа, всякие ползунки, прокрутки и т.п. вещи (control),

  • тестовые кнопки и события (test),

  • столкновения (collisions),

  • обработку функций Вконтакте, Яндекса, Google (vk, yandex, google, gamePush),

  • мультиплеерные функции (photon),

  • прочие обособленные наборы событий,

  • общее для всех - выношу в лист common. Обычно он получается самый объёмный.

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

5. Экраны и листы событий  - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Проект, Браузерные игры, Construct 3, Вкладки, Макет, Название

Вложенные листы событий.


Как обычно, Телеграм:
https://t.me/toyprogrammer

Показать полностью 3
2

3. Управление текущими задачами - Порядок в проекте Construct 3 - собственный взгляд

1) У меня часто бывает, что делаешь какую-то фичу в игре и тут в голову приходит, что хорошо бы сделать ещё вот это и вот это.

И начинаешь метаться, чтобы ничего не забыть.

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

Что-то типа такого, но в электронном виде.

3. Управление текущими задачами  - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Проект, Браузерные игры, Kanban, Разработка, Construct 3, Доска, Карточки, Порядок, Длиннопост

Канбан-доска из Википедии.

2) Как это работает?

- Появилась новая задача — быстро записал её в карточку, положил в колонку «Сделать» и забыл до поры до времени.

- Закончил текущую задачу — кинул карточку с ней в «Готово». Глянул, в список задач и взял следующую и перетащил в колонку «В работе».

- Решил поменять порядок задач и какие-то из них вообще выкинуть из плана? Нет проблем! Просто перетащил нужные карточки в другие колонки.

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

3) Текущие задачи по личным проектам веду в kaiten.ru (раньше вёл в notion.so, но он закрылся для нашего региона). В Кайтене можно сделать удобную доску и оперативно перетаскивать выполненные задания между колонками.

Он даёт много бесплатных возможностей и не прогибается под санкциями :)

3. Управление текущими задачами  - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Проект, Браузерные игры, Kanban, Разработка, Construct 3, Доска, Карточки, Порядок, Длиннопост

Кайтен.

4) Для рабочих проектов в компании мы используем сервис yougile.com.

3. Управление текущими задачами  - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Проект, Браузерные игры, Kanban, Разработка, Construct 3, Доска, Карточки, Порядок, Длиннопост

Юджайл.

Это ещё более удобная доска с карточками.

Дома её не использую, чтобы случайно не смешать проекты.

3) Колонок в электронных досках можно сделать сколько угодно.

Например, у нас на текущей рабочей доске есть колонки:

- Легенда: описания проектов с их цветовой «дифференциацией штанов» и ссылками на всё по проектам.

- Бэклог: сделаем когда будет время или никогда.

- Депрессия: начали делать, но возникли траблы. Возможно мы их когда-нибудь доделаем. Или нет.

- Спринт: хорошо бы сделать за неделю.

- Правки: это нужно исправить в первую очередь.

- В работе: то, что мы делаем сейчас.

- Тестирование: вроде готово, но нужно проверить.

- Готово: протестировали, залили и забыли как страшный сон.

- Галя, у нас отмена: сначала хотели сделать, потом прикинули и решили: «данунафиг».

Вот такая удобная штука. Очень, рекомендую этот способ ведения проектов.


Как обычно, Телеграм:
https://t.me/toyprogrammer


P.S. Всех с Днём Победы!

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

Показать полностью 2
4

2. Хранение материалов - Порядок в проекте Construct 3 - собственный взгляд

Добрый день!

Меня зовут Руслан.
С 2016 года делаю игры в редакторе Construct 3.

В этой серии заметок делюсь своими наработками по ведению проектов в Construct 3.

Часть 2. Хранение материалов


1) Сортирую все материалы, используемые в игре по соответствующим папкам.

Картинки - к картинкам, звуки - к звукам и т. д.

Свежайшая версия проекта в формате c3p у меня лежит в корне папки с игрой. Сохраняю в неё проект после каждого значимого изменения.

2. Хранение материалов - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Игры, Construct 3, Хранение данных, Порядок, Файлы и папки, Резервное копирование, Длиннопост

Структура папок с материалами.

2) В папке Документы лежат исходники, присланные заказчиком а также ключи для создания APK и прочие документальные вещи.

Их сортирую по дате получения.

2. Хранение материалов - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Игры, Construct 3, Хранение данных, Порядок, Файлы и папки, Резервное копирование, Длиннопост

Папка Документы

3) Картинки сортирую по назначению.

2. Хранение материалов - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Игры, Construct 3, Хранение данных, Порядок, Файлы и папки, Резервное копирование, Длиннопост

Папка картинки

4) Файл Всё вместе.svg в Картинках - исходник, в котором рисую векторные интерфейсные элементы для игры.

2. Хранение материалов - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Игры, Construct 3, Хранение данных, Порядок, Файлы и папки, Резервное копирование, Длиннопост

Типичное содержимое файла Всё вместе.svg.

5) В папке ! Интерфейс храню всякие кнопки-иконки и прочие маски.

2. Хранение материалов - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Игры, Construct 3, Хранение данных, Порядок, Файлы и папки, Резервное копирование, Длиннопост

Папка Интерфейс.

6) Звуки и музыку обычно не сортирую - их редко бывает больше пары десятков файлов.

2. Хранение материалов - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Игры, Construct 3, Хранение данных, Порядок, Файлы и папки, Резервное копирование, Длиннопост

Папка Звуки.

7) В папку Резервные копии по окончании рабочего дня копирую исходник игры (файл c3p), и файл Всё вместе.svg доработанные за день.

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

Сортировка в этой папке - по датам.

2. Хранение материалов - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Игры, Construct 3, Хранение данных, Порядок, Файлы и папки, Резервное копирование, Длиннопост

Папка Резервные копии.

8) В папку Тестовые версии скидываю то, что хочу закинуть на сайт. Также сортирую по датам.

2. Хранение материалов - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Проект, Игры, Construct 3, Хранение данных, Порядок, Файлы и папки, Резервное копирование, Длиннопост

Папка Тестовые версии.

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

В следующей части кратенько опишу свой способ сохранения идей для будущих и текущих игр.

Как обычно, Телеграм:
https://t.me/toyprogrammer

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

Показать полностью 7
3

1. Создание проекта - Порядок в проекте Construct 3 - собственный взгляд

Добрый день!

Меня зовут Руслан.
С 2016 года делаю игры в редакторе Construct 3.

В этой серии заметок поделюсь своими наработками по ведению проектов в Construct 3.

Некоторые из них наверняка будут спорными для новичков, а некоторые - для настоящих программеров (себя к таким не отношу).

Но на данный момент использую именно такой формат упорядочивания.

Впрочем - он тоже периодически меняется, когда встречаю какую-то интересную фишку в чужих проектах.

Пишите в комментариях кому есть что добавить.

Итак, создание проекта:

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

Потом постепенно копирую в него отработанные приёмы из предыдущих проектов, но по возможности проверяю, не изменились ли используемые функции?

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

К примеру, поведение Pin, скопированное из старого проекта имеет несколько иные настройки, чем у созданного заново.

А вместо старого отдельного поведения Rex_MoveTo появился стандартное поведение MoveTo.

2) Обязательно заполняю описание проекта (в настройках редактора можно задать некоторые из них по умолчанию).

1. Создание проекта - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Разработка, Программа, Construct 3, Проект, Версия, Порядок, Длиннопост

Параметры проекта.

3) Всегда задаю и перед каждым экспортом обновляю версию проекта.

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

А браузеры просто обожают всё кешировать и часто показывают устаревшую версию игры.

1. Создание проекта - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Разработка, Программа, Construct 3, Проект, Версия, Порядок, Длиннопост

Программно выводим версию проекта.

1. Создание проекта - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Разработка, Программа, Construct 3, Проект, Версия, Порядок, Длиннопост

Как версия выглядит в игре.

4) Всегда сразу отключаю Worker в продвинутых настройках проекта.

1. Создание проекта - Порядок в проекте Construct 3 - собственный взгляд Gamedev, Браузерные игры, Разработка, Программа, Construct 3, Проект, Версия, Порядок, Длиннопост

Worker отключен.

Эта зараза умеет запускать события "с пятого на десятое", в результате чего некоторые события выполняются до того, как выполнятся предыдущие.

Возможно я просто не понимаю его принципа, но мне без него лучше.

Также с ним не работает очень полезный плагин GamePush.

Это то, что касается создания нового проекта.

Завтра рассмотрим вариант хранения материалов игры, чтобы ничего не терялось и всё было доступно.

Как обычно, Телеграм:
https://t.me/toyprogrammer

P.S. Поиграть в игру, которая послужила источником скриншотов можно здесь:

https://dharmagames.ru/games/15/15puzzle/index.html

Показать полностью 4
2

Программная смена иконки игры на Construct 3 во вкладке браузера

Добрый день!

Меня зовут Руслан.
С 2016 года делаю игры в редакторе Construct 3.

Когда у нас в работе попадаются достаточно сложные проекты, которые потом нужно долго поддерживать, мы используем 2 отдельных папки на сервере.

1. Тестовая — в неё мы постоянно загружаем обновлённые версии проекта, чтобы посмотреть, всё ли работает как надо.

2. Боевая — в неё заливаем уже более менее-протестированные версии, которые не стыдно показать заказчику.

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

Favicon – это маленькие иконки сайта, которые выводятся во вкладке браузера и в некоторых других местах типа Избранного в браузере.

Программная смена иконки игры на Construct 3 во вкладке браузера Gamedev, Браузерные игры, Нейронные сети, Игры, Тестирование, Construct 3, Вкладки, Браузер, Скрипт, Иконки, Длиннопост

Иконка сайта или игры.

Поначалу я ответил, что это будет слишком морочно — при каждой заливке боевой версии менять вручную все иконки в проекте (те, которые в разделе Icons & screenshots).

Программная смена иконки игры на Construct 3 во вкладке браузера Gamedev, Браузерные игры, Нейронные сети, Игры, Тестирование, Construct 3, Вкладки, Браузер, Скрипт, Иконки, Длиннопост

Иконки в проекте.

При этом у нас в последнем проекте 6 отдельных блоков со своими иконками. В общем, «да ну нафиг».

Но вчера я вспомнил про нашего китайского друга — нейросеть DeepSeek, которая часто помогает накодить что-нибудь эдакое.

И он снова не подвёл. Подсказал, как программно менять эту иконку в проекте.

1. Сначала рисуем иконку в нужном размере

ДипСик говорит, что размеры бывают нужны разные, но вроде максимальный-оптимальный для нашей цели — 64х64 px.

Чтобы не мудрить, я просто перекрасил в другой цвет основную иконку проекта прямо в редакторе анимаций C3.

Программная смена иконки игры на Construct 3 во вкладке браузера Gamedev, Браузерные игры, Нейронные сети, Игры, Тестирование, Construct 3, Вкладки, Браузер, Скрипт, Иконки, Длиннопост

Перекрашенная иконка.

2. Сохраняем картинку в файл

Я сохранил картинку как icontest.webp

Название и расширение этой картинки может быть почти любое, на ваш вкус.

3. Закидываем картинку к другим файлам проекта

Программная смена иконки игры на Construct 3 во вкладке браузера Gamedev, Браузерные игры, Нейронные сети, Игры, Тестирование, Construct 3, Вкладки, Браузер, Скрипт, Иконки, Длиннопост

Папка с файлами проекта в Construct 3.

4. Задаём переменные для переключения иконки

У меня это строковые переменные:

Программная смена иконки игры на Construct 3 во вкладке браузера Gamedev, Браузерные игры, Нейронные сети, Игры, Тестирование, Construct 3, Вкладки, Браузер, Скрипт, Иконки, Длиннопост

Управляющие переменные.

- modeTest — хранит тип версии.

”test” – тестовая версия *,

”” - боевая версия.

* Использую именно этот вариант (”test” и пустую строку), поскольку они у нас завязаны на имена таблиц в базах данных.

Содержимое этой переменной я меняю вручную с ”test” на ””, перед компиляцией и заливкой боевой версии.

- modeTestIcon — триггер, показывающий, переключилась ли уже иконка (чтобы не переключать иконку при каждом переходе между макетами проекта).

”off” – иконка ещё не менялась,

”on” – иконка уже сменилась.

5. Добавляем событие переключения иконки

И теперь самое главное — сам скрипт переключения иконки.

Программная смена иконки игры на Construct 3 во вкладке браузера Gamedev, Браузерные игры, Нейронные сети, Игры, Тестирование, Construct 3, Вкладки, Браузер, Скрипт, Иконки, Длиннопост

Использование скрипта.

Скрипт отдельно:

var link = document.querySelector("link[rel~='icon']") || document.createElement('link');

link.rel = 'icon';

link.href = 'icontest.webp'; // путь к иконке тестовой версии игры

document.head.appendChild(link);

В этом событии мы проверяем:

- Если иконка ещё не переключалась modeTestIcon = ”off”,

- И если это тестовая версия игры modeTest = ”test”.

То задаём проекту иконку вот с таким именем icontest.webp. **

** Если у вас иконка будет под другим именем, не забудьте поменять ссылку на неё в скрипте.

И затем отмечаем в триггере modeTestIcon что иконка уже поменялась и не нужно делать этого снова.

6. Заливаем всё на сервер и тестируем.

Если всё сделано верно, то теперь мы можем быстро понять, где у нас вкладка браузера с тестовой версией, а где — с боевой.

Программная смена иконки игры на Construct 3 во вкладке браузера Gamedev, Браузерные игры, Нейронные сети, Игры, Тестирование, Construct 3, Вкладки, Браузер, Скрипт, Иконки, Длиннопост

Разные версии игры.

На сим откланиваюсь. Скоро вернусь с очередной, скучной, но полезной фичей для Construct 3 :)

Показать полностью 6
6

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую

Добрый день!

Меня зовут Руслан.
С 2016 года делаю игры в редакторе Construct 3.

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

Примерно 1/3 каждой игры — это различные картинки. Всякие кнопочки, окошки, персонажи, фоны и т.д.

То, что попроще — часто рисую сам (простенькие кнопки и окна).

Для этого использую несколько бесплатных программ:

1. Векторный редактор Inkscape.

https://inkscape.org/

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Векторный редактор Inkscape.

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

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

2. Растровый редактор Paint.NET.

Золотая середина между простотой Paint’a и мощностью Photoshop’а.

https://www.getpaint.net/

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Растровый редактор Paint.NET

Он помогает по-простому подрезать края картинки, замазать ненужные элементы, изменить размер пиксельной картинки без размазывания и всякое подобное.

3. Скриншотер FastStone Capture

Почти идеальная программа для снятия скриншотов.

https://www.faststone.org/FSCaptureDownload.htm

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Программа для снятия скриншотов FastStone Capture

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

Маленькое окошко почти не перекрывает остальной экран.

Позволяет точно зацеплять углы кадра с помощью «лупы».

Готовый скриншот можно по-быстрому обработать в той же программе.

4. Браузер картинок FastStone Image Viewer

Тоже почти идеальная прога для просмотра и управления картинками.

https://www.faststone.org/FSIVDownload.htm

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Браузер картинок FastStone Image Viewer.

Очень гибко настраивается.

Позволяет наглядно сравнить 2 выбранных картинки на одном экране.

Ну и умеет всякое обязательное — повернуть или обрезать картинку, подкорректировать цвета и т. д.

Есть встроенное пакетное преобразование: можно в 3 клика поменять имя, формат, размер, поворот и т. д. сразу у 10000 картинок.

5. Специальная прога именно для пакетного преобразования картинок XnConvert.

https://www.xnview.com/en/xnconvert/

(ссылка доступна только по ВПН).

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Пакетный конвертер изображений XnConvert.

Дополняет предыдущую программу. В частности поддерживает конвертацию в формат webp, который сейчас повсеместно используется в Construct 3.

6. Встроенный редактор анимаций в Construct 3

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

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Встроенный редактор анимаций в Construct 3.

Если нужна готовая графика

1. Идеальный вариант, когда готовую графику даёт сам заказчик. Часто заказчики сами нанимают дизайнера или сам рисует макет игры в Figma. Оттуда удобно копировать отдельные элементы дизайна.

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Рабочая Figma одного из наших проектов.

2. Если готовых картинок нет, можно попробовать поискать подходящее на бесплатных ресурсах. В частности, пиксельные картинки иногда беру здесь:

https://opengameart.org

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Бесплатные ресурсы на opengameart.org

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

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

Генерация картинок в нейросетях

Когда ни один предыдущий вариант не подходит, приходит время подключить нейросети. Однажды мне посоветовали Recraft и с тех пор пользуюсь именно им.

https://www.recraft.ai

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Нейросеть Recraft.

К сожалению с некоторых пор он стал отчасти платным (но не сильно дорогим) и работает только через ВПН.

Но даже с базовым бесплатным тарифом можно наклепать себе до 20 картинок в сутки (на 50 кредитов).

Из плюсов данной сетки:

+ Простая регистрация.

+ Все картинки проекта на одном экране.

+ Куча готовых стилей.

+ Можно задать свой стиль, загрузив несколько своих картинок.

+ Можно превращать растр в вектор.

+ Можно буквально натягивать сов на глобусы (делать макапы на неровные поверхности).

+ Быстрое удаление фона.

+ Коррекция результата прямо в редакторе и много чего ещё.

Сейчас есть куча других нейросеток для генерации чего угодно, в том числе и графики. Но я в них не углублялся, не смогу подсказать что-то дельное. Кто знает — пишите о них в комменты.

Как-то пробовал всякие Midjourney, Шедеврумы и иже с ними, но это был давно. Думаю, сейчас они далеко ушли вперёд (наверное тоже не все).

Пока это всё, что могу сказать на тему бесплатной графики для игр.

P.S. Возможно, пока пишу эту заметку, в интернетах появилась какая-то новая достойная нейросеть :)

P.P.S. Обычно когда выходит какой-нибудь новый условный Кандинский, который «ещё лучше понимает нас» — тестирую его на такой промт: «Три советских пионера сидят на лавочке».

Раньше все нейросетки упорно рисовали старичков с Дикого запада.

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Ну, тоже по-своему пионеры.

Полгода назад уже уверенно рисовали детей в красных галстуках от строгих костюмов :)

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Ну, уже почти пионер.

И вот сегодняшняя версия от Кандинского.

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

Тоже пионеры.

Где я нахожу картинки для своих игр в Construct 3 и чем их редактирую Gamedev, Игры, Браузерные игры, Автор, Графический редактор, Inkscape, Paintnet, Пионеры, Векторная графика, Растровая графика, Construct 3, Нейросеть Kandinsky, Нейронные сети, Картинки, Генерация изображений, Длиннопост

И пионерки тоже. Но чё-то пока в основном инвалиды.

Прогресс налицо, но ещё есть над чем работать (например, над количеством ног).

Ну и наверное ещё от выбранного стиля многое зависит.

Спасибо за внимание.

Как обычно - ссылка на Телеграм:
https://t.me/toyprogrammer

Показать полностью 13
2

Платформер выходного дня в Construct 3

Добрый день!

Меня зовут Руслан.
С 2016 года делаю игры в редакторе Construct 3.

Сегодня ради интереса (и благодаря праздничному дню) запилил простенький платформер в полностью бесплатной версии Construct 3. Было интересно, много ли удастся впихнуть в бесплатные лимиты редактора.

В целом, впихнулось почти всё необходимое для мини-игры.

Поиграть уже можно здесь:

https://dharmagames.ru/games/platformer/mini-platformer/index.html

Платформер выходного дня в Construct 3 Construct 3, Игры, Браузерные игры, Платформер, Проект, Gamedev, Длиннопост

Начало уровня.

Лукаво не мудрствовал, взял за основу для идеи первый уровень из раннера, который дорабатывал несколько лет назад на заказ.

Вся работа заняла часов 5 чистого времени с перерывами на разные домашние дела. Заранее соглашусь с критикой, это не очень быстро для маленького платформера.

Основные подробности проекта:

1. Использовано 17 событий из 25. Никакого JavaScript и дополнительных плагинов, всё только "из коробки".

Платформер выходного дня в Construct 3 Construct 3, Игры, Браузерные игры, Платформер, Проект, Gamedev, Длиннопост

Фрагмент кода.

2. В игре 2 слоя - объекты и интерфейс.

3. Один вид врагов, которым нужно прыгать на голову, чтобы их победить.

4. Один босс - тот же враг, только покрупнее, покрепче и ускоряется после каждой атаки игрока.

Платформер выходного дня в Construct 3 Construct 3, Игры, Браузерные игры, Платформер, Проект, Gamedev, Длиннопост

5. Использовал русифицированную версию Construct 3, чтобы новичкам было проще разобраться.

6. Из врагов выпадают монетки, которые подсчитываются.

Платформер выходного дня в Construct 3 Construct 3, Игры, Браузерные игры, Платформер, Проект, Gamedev, Длиннопост

7. У игрока 3 жизни.

8. Графику почти всю взял готовую (только небо и землю нарисовал сам).

9. Звуки и музыку взял готовые из предыдущих своих игр.

10. Игра весит около 2 Мб, из которых 1.4 Мб - музыка Кевина МакЛауда.

11. Управление как клавиатурой, так и кнопками на экране.

12. Проект завёл в браузере Edge.

13. Исходник проекта можно скачать здесь:
https://dharmagames.ru/games/platformer/mini-platformer/mini-platformer.c3p

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

С некоторой натяжкой можно даже использовать как проект на заказ для нетребовательного заказчика. Поменял картинки - "и алга" :)

На всякий случай ссылка на телеграм: https://t.me/toyprogrammer

Показать полностью 4
Отличная работа, все прочитано!