Использование Paint в качестве редактора уровней
Всю сознательную программистскую деятельность я увлекался созданием игр и не любил делать редакторы и прочие утилиты. Главным моим редактором почти всегда был Paint. Но для игр, в которых уровень статичен и состоит из тайлов (Марио подобные и прочие танчики), это более-менее оправдано, т.к. одному пикселю из файла уровня, созданного в Paint, соответствует тайл в игре. А что если требуется создать игру, где нет тайлов, а игровая локация состоит из неровных скалистых пещер. Или игру, в которой много движущихся элементов (летающие платформы, лифты, циркулярные пилы, вращающиеся по окружности). 
Создавать редактор для таких целей мне по-прежнему не хотелось. О том, как я это решил с помощью Paint опишу в этой статье.
Я не буду приводить названия игр и давать ссылки на них, потому что это не демонстрация и не реклама игр, а описание метода, который в них применяется.
Неровная карта
Первая игра не блещет разнообразием геймплея: играем за некий подводный кораблик, двигающийся с помощью реактивного двигателя, и уворачиваемся от скал и прочих врагов:
Извиняюсь за качество видео, снимали на телефон 
По видео видно, что локация состоит из земли (которой касаться нельзя), бекграунда, воды, крутящихся ежиков (враги) и эмиттеров, выпускающих эти ежики. Да, еще там есть рыбки и водоросли, но они генерируются случайным образом и не имеют отношения к файлу уровня.
Уровень из видео показан слева (увеличено в 4 раза):
В левом верхнем углу можно заметить зеленый пиксель, так отмечается стартовая позиция, следует запомнить это место, т.к. все последующие иллюстрации будут демонстрировать именно его.
- Слой объектов, с которыми игрок взаимодействует: земля, эмиттеры и ежики, а также стартовая позиция и выход. Ориентация эмиттеров (могут стрелять в одном из четырех направлений) не задается, она вычисляется при загрузке, исходя из соседних «земельных» пикселей
- Слой воды (это аркада, поэтому закон сообщающихся сосудов здесь не действует)
- Слой с бекграундом
Если это сейчас просто так взять и отрендерить (потайлово), то локация будет состоять из гигантских квадратов. Да и количество таких тайлов достаточно велико (61х69 для этой карты). Поэтому был применён другой способ рендеринга (нетайловый), при котором можно отобразить карту за один вызов (на самом деле за три: отдельно воду, бекграунд и финальная склейка). Это благодаря тому, что весь уровень помещается в одну единственную текстуру, назовём её tex_level. И натягивается она на полноэкранный квад (полигон, размером с экран). Перед этим выставляются текстурные координаты в зависимости от виртуальной камеры, которая привязана к персонажу. 
Слева – примерно так выглядит текстура tex_level и охват виртуальной камеры. Справа – назначенные текстурные координаты для полноэкранного квада, т. о. на экран попадает кусочек текстуры tex_level.
Вначале текстуру tex_level надо подготовить. Для этого заведём массив под пиксели этой текстуры:
где w – ширина файла с уровнем, h – высота, деленная на 3 (т.к. три слоя).
Теперь в цикле считываем каждый пиксель исходной карты из каждого слоя и в зависимости от цвета (он же и тип тайла) заполняем соответствующие цветовые каналы в пикселе pix, а именно:
Техническая особенность: на самом деле w и h равны ближайшей в сторону увеличения степени двойки для ширины и высоты карты, недостающие пиксели замащиваются красным цветом (земля), а этот цикл можно считать псевдокодом.
Видно, что один и тот же пиксель в массиве может содержать землю, воду и бекграунд. На основе массива pix создается текстура tex_level, сам массив pix нам ещё пригодится. 
Слева готовая текстура tex_level, а справа она же, но в игре. Камера в стартовой позиции.
Чтобы было удобнее продвигаться дальше, будем выводить только R канал из tex_level, т.е. только землю.
Для начала нужно избавиться от этих гигантских квадратов. Для этого массив pix перед тем, как его передать в текстуру tex_level следует размыть по Гауссу (радиус размытия подбирался опытным путем). Теперь всё та же локация выглядит уже куда лучше: 
Слева земля до размытия, справа после.
Техническая деталь: перед размытием надо растянуть в 2 раза массив pix так, чтобы исходный пиксель занимал бы уже 2х2 пикселя в растянутом массиве.
Но граница земли здесь очень размыта. Для понимания процесса превращения размытой границы в четкую (назовём этот процесс фильтр четкой границы) рассмотрим одномерный случай, т.к. он аналогичный. Тогда размытая граница земли будет выглядеть примерно так:
Вычтем из этого графика 0.5, домножим на какое-нибудь большое число (в данном проекте это 50) и обрежем (операция clamp) по границе [0; 1], т.е. всё, что меньше 0 превращается в 0, а всё, что больше 1 превращается в 1: 
В итоге белый цвет не мгновенно переходит в черный (это важно).
Теперь проделаем все эти операции с нашей текстурой tex_level. Пусть в level_color хранится выборка из этой текстуры, тогда фильтр выглядит так: clamp((level_color.r – 0.5) * 50.0, 0.0, 1.0)
В левой части tex_level + noise, в правой части фильтр четкой границы.
Техническая деталь: диапазон значений в текстуре noise от 0 до 1, поэтому к выборке из tex_level следует прибавлять (noise — 0.5) * k, где k – коэффициент возмущения границы (в проекте он равен 0.3).
Теперь осталось просто наложить текстуры. Текстура земли уже есть (это просто обычная текстура), а вот воды еще нет, нужно её сперва подготовить.
Алгоритм абсолютно такой же, как и с землей, только вместо выборки из R канала следует делать выборку из B канала, т.к. именно там и содержится вода. Еще одно отличие – это вместо обычного шума применяется анимированный шум (плавно меняющийся во времени) для создания волн на границе воды и воздуха. Создание анимированного шума выходит за рамки данной статьи. В этом этапе применяем текстуру неба, а роль воды выполняет синий цвет (подбирался опытным путем). Все шаги этапа получения слоя с водой проиллюстрированы ниже:
Слева направо: размытая граница воды, анимированный шум плюс фильтр, интерполяция из синего цвета в текстуру неба.
Следующий этап – это рендеринг бекгруанда. На этот раз выборку из tex_level производим из G канала. В этом этапе ничего принципиально нового нет: получаем маску бекграунда и интерполируем текстуру камней (это в данном случае) и текстуру воды из предыдущего этапа. Конечно, есть свои тонкости: на подводную часть бекграунда накладываются дополнительные фильтры, то же самое и для самой воды для придания эффекта толщи воды, но это выходит за рамки статьи. В этом же этапе рендерятся декоративные элементы: рыбки и водоросли. Окончательно слой с бекграундом выглядит так:
Технические подробности: для придания эффекта «шевелящихся водорослей» из-за подводных течений использовалось смещение x-компоненты текстурных координат при рендеринге спрайта с водорослями. Величина этого смещения считывалась всё из той же текстуры с анимированным шумом.
И последний этап – склейка. Получив в начале статьи маску земли, применяем её для интерполяции текстуры земли и слоя с бекграундом. Финальный результат выглядит так:
Развитие идеи. Что если требуется накладывать несколько текстур на землю, тогда просто добавляем ещё один слой, в котором пиксели земли раскрашиваем в 4 разных цвета (можно меньше, но не больше). Из этого слоя создается отдельная текстура-маска (4 цвета в слое – 4 цветовых канала в маске), но тогда придется делать дополнительные пять текстурных выборок вместо одной (одна из маски и 4 из соответствующих текстур земли).
Определение коллизий
Это отличается от картинки с размытой границей, потому что там применялась билинейная фильтрация, а тут лишь сырые значения массива после размытия.
Значения из этого массива напоминают карту высот, можно подобрать такое значение высоты, которое примерно совпадает с визуальной границей земли (подбираем опытным путем). Для более точного определения высоты необходимо использовать билинейную интерполяцию. А если вычислить три высоты в окрестностях некой точки, то можно довольно точно определить градиент в этой точке, а он совпадает с нормалью к визуальной поверхности земли. Нормаль в этой игре использовалась лишь в одном месте – для огибания реактивной струёй поверхности земли:
Динамичная карта
Итак, первая проблема, поставленная в начале статьи, решена: никаких тайлов не видно, одни неровные скалистые пейзажи. А как быть с движущимися элементами? Это покажет вторая игра – аналог super meat boy:
Здесь много подвижных элементов: циркулярные пилы, двигающиеся по прямой или вращающиеся вокруг центра, перемещающаяся платформа с шипом и пилой, двери, рассыпающиеся тайлы. А пилы ещё имеют разный размер.
Процесс рендеринга полностью аналогичен первой игре, поэтому ограничимся рассмотрением формата карты. Карта из видео выглядит так (увеличено в 5 раз): 
Данная карта состоит из шести (!) слоёв (всего в игре есть пять разных типов слоёв, все они здесь представлены). В отличие от предыдущей игры количество слоёв здесь может быть любым. В левом верхнем углу есть набор пикселей (их ровно столько, сколько и слоёв). Они-то как раз и задают тип слоя (это позволяет не заботиться о порядке и количестве слоёв). Первые два слоя очевидны: слой объектов – взаимодействующие элементы с игроком (земля, шипы, пилы, старт, выход, рассыпающиеся тайлы) и слой бекграунда. Четвёртый слой тоже, как и первый, является слоем объектов (4-й пиксель в левом верхнем углу тоже черный). Пришлось вынести некоторые объекты в этот слой, потому что они пересекались с другими объектами (теоретически одинаковых слоёв может быть сколько угодно).
Техническая особенность: в текстуру tex_level помещается только замля и бекграунд (воды в этой игре нет), а все остальные объекты считываются из файла уровня в массив.
- Перемещающаяся группа. Все тайлы этой группы синхронно перемещаются (зеленый цвет). Группа содержит один главный тайл (сине-зеленый цвет), для которого в другом слое назначается траектория и скорость. В этой карте одна большая группа, в которую входит земля (становится что-то вроде тележки) с шипом и пилой. И четыре одинарных – только одна пила перемещается в каждой из них.
- Вращающаяся группа (серый цвет)
В пятом слое указываются размеры пил в градациях красного. Если для пилы отсутствует красный пиксель из этого слоя, то размер её берется по умолчанию. А в шестом слое находятся траектории и скорости для перемещающихся групп в градациях серого, ну и скорости и направления для вращающихся пил. В некоторых слоях есть посторонние цвета, которые в данном слое не участвуют, при загрузке карты они просто игнорируются (например, почти во всех слоях есть черные пиксели земли, они были нужны лишь при составлении карты, для навигации относительно них).
Развитие идеи. Теоретически с помощью Paint можно создать карту для 3D-шутера, файл карты будет состоять из матрицы слоёв. Строка этой матрицы соответствует высоте слоя в игре, а в столбцах содержатся слои одного типа. Например, в 1-м столбце будет геометрия карты (один слой – это срез карты на данной высоте), во 2-м столбце можно назначать текстуры с помощью ключевых цветов пеинта, в 3-м расставлять объекты и т.д.
«Блокнот», Paint, Excel — на чём можно создавать игры?
Недавно мы писали, что некий программист умудрился создать настоящую игру в… «Блокноте». Да, том самом, куда вы записываете свои мысли, если не включается Word и нет интернета. Мы решили вспомнить, в каких неожиданных сервисах ещё можно создавать игры, — как насчёт стратегии в Excel?
Текстовая RPG в «Блокноте»
Однако начнём с виновника торжества. Сложно сказать, почему парень решил сделать игру именно в текстовом редакторе — видимо, сторонник аскетизма. Впрочем, узкие рамки не стали помехой для творчества.
RPG называется And yet it hurt. Здесь классические для жанра расклады: выбор в сложных ситуациях, снаряжение в инвентаре и даже враги. Некоторые сражения запускаются с таймером — то есть думать некогда. Такое вот неожиданное развлечение для пресытившихся геймеров.
«Цивилизация» в Excel
Как ни странно, Excel — это не только помощник №1 всех бухгалтеров мира, но и… отличный инструмент для разработки игр. В табличный сервис уже «загоняли» простенькие игры вроде «Змейки» и «Морского боя», но были и более громкие случаи.
Например, один парень сделал на Excel первую «Цивилизацию». Конечно, он значительно упростил правила, однако оставил характерные черты вроде сражений и дипломатии. На месте даже знаменитый «туман войны». А другой энтузиаст уж который год пилит на «табличках» полноценный 3D-шутер… Кажется, Unreal Engine пора напрячься.
Хоррор в Paint
Что будет, если показать стоматологу Paint? Правильно — жуткий монохромный хоррор. Польскому дантисту Павлу Козьминскому, видимо, надоело наблюдать чёрные дыры только на работе, поэтому он решил добавить жести и в свободное время. Врач начал рисовать World of Horror — RPG, которая напоминает развёрнутую иллюстрацию к любому рассказу Лавкрафта.
Как и в любой RPG, здесь нужно принимать решения, разговаривать с персонажами и биться с демонами. В отличие от остальных фигурантов этой подборки, World of Horror можно купить в Steam — билет в чёрно-белый ад обойдётся в 360 рублей.
Бонус: игра-портфолио
Напоследок — пример, который слегка выбивается из нашей подборки. Эту игру сделали на классическом инструментарии, тут ничего необычного. Но! Штука в том, что разработчик зашил туда своё резюме.
Вы управляете небольшим джипом. Можно гонять по небольшой поляне, сбивать кегли, прыгать на трамплинах и даже уронить Эйфелеву башню (автор из Франции). Но главное — повсюду раскиданы отчёты и фотографии о предыдущих проектах создателя игры. Надеемся парень нашёл новую работу — если, конечно, кадровикам хватило терпения елозить машинкой по игровому полю.
Как видите, чтобы делать игры, не обязательно лицензировать дорогие движки — было бы желание. А если оно есть, хватит даже «Экселя» с «Блокнотом».
zuzazazyzeyjaz
Добавить функцию доната и в релиз )
Wylsa izmenilsa
вместо_пороха_крахмал,
И баги, чтобы мармоку было что обозревать
Shatar1985
Wylsa izmenilsa,
Я хотел бы поиграть в симулятор комментатора на 4пда
Shatar1985,
А я уже.
Wylsa izmenilsa
Shatar1985,
Это уже к хабру обращаться надо
в тетрадке по математике — морской бой, танчики, крестики-нолики… … … и ещё куча вариантов
самый крутой эмулятор
неФРАС,
При определенных умениях это ещё и три дэ редактор неплохой.
Lolitta_239
Wylsa izmenilsa,
У меня одного на хабре гигтаймс не работает
Говорит что идут тех работы
Unicorling
Shatar1985,
Самый сложный уровень будет называться — вежливое поведение
Modera Tor
Shatar1985,
Roper на превью ))
Wylsa izmenilsa,
Я думал токо, я один только смотрю его)
Wylsa izmenilsa
King’s_Man,
Мы снгшники, с нами марин
На превьюхе босс с уровня-корабля Battletoads&DoubleDragons 🙂
Intelligence
Crozium,
Босс Roper) и сетка с надписью Fight)
Modera Tor
Intelligence,
Ребёнок рисовал, поэтому надпись Fignt))
vitalik_next
Crozium,
С Пикабу рисунок, недавно видел
а разве вышеперечисленное лицензировать не надо?
yariko ookami
Лучше на Си-шарпе делать, больше возможностей.
nosuchuser
Помнится, на адинэсе кто-то игру сделал, типа сапёра, кажется.
Это все не про Россию. У нас не те условия в стране, чтобы было свободное время, а самое главное — свободная голова, чтобы вдумчиво чем-то заниматься
tartarelin
bratken,
Тонкий троллинг или тяжёлая клиника?
bratken, откуда ты этот бред взял ? в зависимости от способностей и чтобы не сильно рано, лет 5-6 в школе времени на освоение базового программирования(типы, переменные, условные операторы, ветвления, циклы, арифметические и логические операторы, управление памятью, базовые алгоритмы с структуры данных), на самом деле за это время можно элементарно изучить еще объектно-ориентированное программирование, асинхронное и многопоточность. Освоить хотя бы на среднем уровне английский, планиметрию и геометрию. А потом еще 5 лет в универе повторить это все, прокачать английский, аналитическую геометрию и линейную алгебру. И почти все из вышеперечисленного можно освоить в контексте какого-нить бесплатного движка, типа Unity, параллельно прокачав понимание устройства и возможностей эдитора, работу с анимациями, звуком, графическими и 3д пакетами на базовом уровне. И как итог, уже после всего обучения должно остаться минимум несколько приличных учебных проектов для портфолио на junior позицию разработчика. И для всего этого вам нужно желание, свободное время, коего у школьников и студентов навалом, и интернет. Чего из вышеперечисленного в России нет ?
p.s. в мое время интернет был настолько медленный, что приходилось ждать по 30 минут, чтобы скачать пару мегабайт по диал-ап. Ни о каких ютубах, обучающих видео, курсах, языковых и программирования, даже речи не шло. А были только книги по C, C++ и win api. Что, мягко говоря, «слегка» сложнее в освоении, чем теперешние технологии. А лицензия unreal engine, который сейчас бесплатный, стоила больше 1 миллиона $. И тем не менее я как-то освоил все требуемое, чтобы работать в индустрии и очень прилично зарабатывать.
bratken,
Согласен с вами. Пока молодой в свободное время надо проводить время активно с друзьями, гулять на свидание с девушками, путешествовать. А на пенсии в свободное время проводить с внуками и за интересной книгой.
pavlekanez
Программирование на Scratch (Скретч): как создать свою игру
Скретч – это популярный визуальный язык программирования, специально разработанный для детей и подростков. Если вашему ребенку нравятся компьютерные игры, то попробуйте вместе с ним создать онлайн-игры на Scratch.
Простой дружественный интерфейс Скретч позволяет создавать собственные игры на основе визуальных блоков. Посмотрев наши видео уроки Scratch, вы заметите, что создание игры напоминает сборку конструктора LEGO – достаточно скомпоновать нужные блоки, добавить несколько картинок и можно играть в собственную мини-игру с друзьями.
Начать программировать на Scratch можно уже с 8 лет, через несколько занятий дети самостоятельно смогут создать игры по мотивам любимых игр или фильмов, например «Warcraft», «Minecraft», «Among Us» и «Звездных войн».
Программирование для детей на Скретч: какие игры мы научим делать
Охота за привидениями.
Суть игры – заработать очки на стрельбе по призракам. Наша задача в видео уроке по Скретчу на русском – создать красивый фон и написать небольшой скрипт.
Гонки на двоих.
Здесь мы сделаем трассу для соревнований между двумя гонщиками, а кто из них окажется первым – решит удача.
Звездные войны.
Star Wars давно захватили сердца юных поклонников. В нашей игре мы научим космолет атаковать врага. За каждого сбитого противника начисляются очки, за неудачу – отнимаются жизни игрока.
Головоломка Minecraft.
Мы воспроизведем небольшое подобие этой вселенной и пройдем небольшой квест на сообразительность и смекалку.
Among Us (Часть 1).
Воссоздание этой игры надолго увлечет ребенка и поможет освоить новые навыки в рамках курса программирования для детей. В этой части будет сделана карта, написан скрипт для героя и назначен один квест.
Among Us (Часть 2).
Продолжение видео урока служит для усовершенствования карты, создания звуковых эффектов и добавления задач персонажу, что расширит общий функционал и сделает приложение интереснее.
В этом уроке мы создадим классическую игру, где нужно прибежать как можно больше расстояние и не столкнуться с призраком. При столкновении отнимается жизнь, но всегда есть возможность начать забег заново и побить свой рекорд.
Скретч видео уроки по созданию трехмерных объектов требуют внимания и усидчивости. Здесь нужно добавлять много переменных и учитывать разные условия.
Рандомная мультиплеерная игра.
Урок научит создавать скрипты для работы с игровым персонажем и его правильного отображения в разных окнах и браузерах.
Игра Brawl Stars (Бравл Старс).
Ровно 45 минут вам понадобится, чтобы воссоздать сюжет и персонажей знаменитой игры и опробовать свое приложение в действии.
Создаем игровое меню на Скретч.
Как и во многих мини-играх обычный запуск на платформе Scratch производится путем клика на зеленый флажок старта. Однако при желании можно создать развернутое лобби геймера для выбора персонажа и его характеристик.
Компилируем игру в Скретч за 15 минут.
Короткие Scratch видео уроки на русском из этого курса позволят создать небольшую бродилку, где главным героем будет кот. В его задачу входит перемещение между объектами, преодоление препятствий, бег, прыжки и многое другое.
С чего начать обучение для быстрого результата
В качестве первого опыта наша команда рекомендует сделать игру Flappy Bird.
С ней знаком практически каждый ребенок и выполнена она по мотивам Angry Birds. На уроках вы сможете построить модель самой птички, препятствия для неё, написать скрипты траекторий полета, оформить фоны и озвучку.
Обучение детей программированию – основная задача наших преподавателей. Все технические моменты работы отражены в видео, плейлисты постоянно пополняются. Подписывайтесь на наш Youtube-канал.
Материал подготовлен школой программирования для детей «Пиксель».
Приходите к нам на курсы программирования Scratch и мы научим создавать собственные игры и приложения с нуля.
Как создать 3D-рисунок в Microsoft Paint 3D
Программа Microsoft Paint 3D предлагает бесплатный и простой в использовании инструмент для создания трехмерных рисунков и рисунков. Используйте жесткие и мягкие инструменты каракули, чтобы точно настроить ваши фотографии.
Paint 3D работает для Windows 10. Он был представлен в Обновлении создателей Windows 10 и устанавливается по умолчанию для этой и более новых версий.
Установите свой холст
Установите холст, на котором вы будете рисовать. Выберите Canvas в верхней части программы, чтобы начать.
Активируйте прозрачный холст, чтобы фон сливался с цветами вокруг него с помощью параметра « Прозрачный холст» . Этот переключатель не является обязательным, но он позволяет избежать конечного продукта с белым фоном.
Изменение размера холста Paint 3D. По умолчанию холст измеряется в процентах и устанавливается на 100% на 100% . Измените эти значения на те, которые вам нравятся, или выберите Процент, чтобы изменить значения на Пиксели, как показано выше.
Небольшой значок замка под значениями может переключать параметр, который блокирует соотношение сторон. Когда заблокировано, эти два значения всегда будут одинаковыми.
Используйте 3D Doodle Tool
Инструменты 3D-каракули расположены в меню « 3D-фигуры», доступ к которому можно получить из верхней части программы Paint 3D.
Два из инструментов 3D-Doodle включают в себя острый и мягкий инструмент. Каракули с острыми краями добавляют глубину плоскому объекту, что означает, что вы можете использовать его, чтобы буквально «вытянуть» 3D-пространство из 2D-пространства. Каракули с мягким краем создает 3D-объекты, надувая 2D-объекты, что может быть полезно для рисования таких объектов, как облака.
Третий инструмент, 3D Tube , был представлен в Paint 3D в следующем обновлении функции.
Как использовать Sharp Edge 3D Doodle в Paint 3D
Выберите острый край 3D каракули инструмент. Выберите цвет для 3D-объекта.
Начните с простого круга. Когда вы рисуете, ваша начальная точка подсвечивается маленьким синим кружком. Нажмите и перетащите для руки или нажмите один раз, а затем перейдите в другое место и нажмите еще раз, чтобы сделать прямую линию. Объедините обе техники в одну, пока вы рисуете модель. Независимо от того, как вы это делаете, всегда заканчивайте то, с чего начали — у синего круга — чтобы завершить рисунок.
Когда объект закончен, он останется только немного трехмерным, пока вы не начнете использовать инструменты, которые автоматически появляются вокруг объекта при нажатии на него. Каждый инструмент перемещает объект по-своему. Один будет толкать его вперед и назад на фоне холста. Другие будут вращать или вращать модель в любом нужном вам направлении. Восемь маленьких коробок, окружающих объект, тоже полезны. Удерживайте и перетащите один из них, чтобы увидеть, как он влияет на модель. Четыре угла изменяют размер объекта, увеличивая или уменьшая его в зависимости от того, вставляете ли вы коробку внутрь или наружу. Верхний и нижний квадраты влияют на размер в этом направлении, позволяя вам сгладить объект. Левый и правый квадраты могут сделать маленький объект намного длиннее или короче, что полезно при создании настоящих 3D-эффектов. Если вы нажмете и перетащите на сам объект, не используя эти кнопки,Вы можете перемещать его по холсту обычным 2D способом.
Трехмерный рисунок с острыми краями отлично подходит для объектов, которые необходимо расширить, но не настолько идеален для округлых эффектов. Вот когда в игру вступает инструмент с мягким краем.