Как сделать игру в paint
Обновлено: 06.07.2024
Список платных и бесплатных программ, а также онлайн-редакторов.
YouTube-блогер Брендон Джеймс Грир в своём видео рассказал об 11 программах для рисования в технике пиксель-арта. Автор описал особенности четырёх платных программ и семи бесплатных.
Aseprite (435 рублей в Steam) предназначена исключительно для пиксель-арта. В программе есть простые и интуитивно понятные инструменты для рисования. Одна из важных особенностей Aseprite — готовые цветовые палитры, которые можно использовать в работе. Например, там есть палитры Pico-8, EDG-32, Gameboy, NES и другие.
Также в Aseprite есть функция, которая позволяет избегать создания излишних пикселей. Так можно делать более чистые и тонкие линии без дополнительного исправления. Другая полезная функция — изменение размера рисунка для публикации в интернете. В Aseprite есть удобный инструмент таймлайна, который позволяет организовать слои для удобной работы с анимацией.
Pyxel Edit (9 долларов на официальном сайте) также предназначена исключительно для работы в технике пиксель-арта. Основное отличие программы заключается в том, что вся работа в Pyxel Edit основана на тайлах. Это очень полезно при разработке игры с повторяющимися паттернами в окружении.
При создании нового документа можно настроить размер тайла или оставить стандартное значение 16х16 пикселей. Также здесь есть заранее созданные цветовые палитры и удобные инструменты для работы с цветом. Инструмент для анимации также представлен в виде тайлов, что позволяет удобно настраивать каждый отдельный кадр.
Pro Motion NG (699 рублей в Steam) обладает множеством полезных функций — анимирование, тайл-маппинг, антиалиасинг и продвинутый редактор для работы с цветом. Также программа позволяет легко интегрировать ассеты в игровые движки, например, Unity и Game Maker.
Есть бесплатная версия с ограниченным количеством функций. По словам Грира, у Pro Motion NG выше порог вхождения, чем у Aseprite или Pyxel Edit, но в ней есть множество полезных инструментов. Pro Motion NG используется в крупных студиях — Ubisoft, Halfbrick, WayForward.
Adobe Photoshop — графический редактор с очень широкими возможностями, который также хорошо подходит для работы с пиксель-артом. В программе есть все необходимые инструменты — таймлайн для покадровой анимации, простой карандаш для рисования пикселями, удобные палитры и так далее.
Также есть множество бесплатных программ для работы с пиксель-артом.
GIMP — бесплатный графический редактор, который можно назвать альтернативой Photoshop. В GIMP можно найти много тех же функций, что и в Photoshop. Интерфейс также очень похож.
Полезная особенность программы при работе с пиксель-артом — возможность настраивать размер и форму карандаша. Эта особенность позволяет рисовать, используя паттерны. Автор отметил, что один из главных недостатков программы — неудобный инструмент покадровой анимации.
Krita — графический редактор с большим количеством доступных функций. В программе есть множество кистей и текстур. Но среди них можно найти и те инструменты, которые подходят для пиксель-арта.
GraphicsGale — графический редактор, который отлично подходит для работы с анимированием спрайтов. Также в сети есть достаточно большое сообщество пользователей, поэтому вам не составит труда найти полезные туториалы.
GrafX2 — простой редактор для пиксель-арта, в котором доступно 256 цветов. В нём есть возможность работы со слоями и базовый инструмент для покадровой анимации. PikoPixel — подобный редактор, который запускается на Mac и Linux.
Также существуют онлайн-редакторы, которые можно запустить прямо в браузере.
В Piskel доступны основные инструменты, необходимые для рисования в технике пиксель-арта — есть слои, таймлайн для анимирования и другие. Этот редактор отлично подходит, если нужно быстро и без подготовки нарисовать пиксельный спрайт.
Lospec — более упрощённая версия графического редактора. Здесь есть лишь несколько базовых инструментов. Тем не менее в Lospec доступно множество цветовых палитр, которые можно использовать в своей работе. Также в нём есть библиотека туториалов.
В заключение автор выбрал тройку наиболее полезных графических редакторов для пиксель-арта.
Aseprite — лучший платный редактор:
- отлично подходит для новичков;
- есть простой инструмент для анимирования;
- это популярный редактор, поэтому есть множество туториалов;
- невысокая цена.
GraphicsGale — лучший бесплатный редактор:
- предназначен только для пиксель-арта;
- есть инструмент для анимирования;
- бесплатный.
Piskel — лучший онлайн-редактор:
- есть все необходимые инструменты для пиксель-арта;
- можно запустить прямо из браузера.
Помню первые знакомства с GIMP, тогда были похожие ощущения - жуткая программа. Потом в какой-то момент решил по фану изучить его подробнее, взял онлайн-курс и в целом мне GIMP стал нравится, особенно из-за того, что он легко доступен, взял и скачал. Просто это ещё один инструмент для работы с изображениями.
Понимаю, но для меня это ад, как и корел, адище то ещё и всё потому что привык уже работать в другом редакторе.
Но ГИМП правда я ненавижу фибрами души из-за того что нет единого окна и все инструменты как бы висят. но правда я сейчас смотрю этого нет уже, но ужас что я испытал тогда трудно побороть х)
Тебе надо писать сценарии к фильмам ужасов)
Уже есть единое окно
Ну дык, я это написал :D что этого сейчас нет, но ужас то остался
Фантомная боль? ☺️
Вот что-что, а Гимп я бы точно никому не стал советовать. Бесплатность не перекрывает его кривизны)
Топ за свои деньги.
Download the latest version of Krita for FREE on your device. Available on Windows, Linux, OSX…Gimp 2.6 — лучший редактор в жизни. Элементарная настройка кистей и градиентов. Возможность использовать любую картинку из буфера обмена в качестве паттерна или кисти без лишних движений. Полная очистка слоя по нажатию одной клавиши. Один пункт меню «Сохранить» на xcf и все остальные форматы. И куча всяких других мелочей, после освоения которых Фотошоп кажется дюже неудобным (кроме стилей слоя, лично для меня это киллер-фича).
Хмммм. а как он в плане ретуши фоток?
Понятия не имею, не ретушировал.
для пиксельарта сойдет, со слоями, кистями и заливками там работать удобней чем в крите. в aseprite делаю только анимации, для обычного рисования там все довольно топорно. ред.
Комментарий удален по просьбе пользователя
*жирные вздохи ностальгии*
Комментарий удален по просьбе пользователя
Вот это была любимая программа на zx spectrum.
Комментарий удален по просьбе пользователя
А где Pixel Studio?
Это крутая прога для Ipad, сижу в ней калякую иногда, и пенсил в ней работает хорошо
Тоже удивлен что нет её..
В комментариях уже упоминали, но я повторю на всякий: Aseprite можно собрать из исходников самому – инструкции в сети есть. Ну либо, если жалко своё время, то купить) Можно добавить эту информацию в пост. У меня получилось собрать только со второго раза, потратил некоторое количество времени, но в итоге выяснилось, что всё довольно просто.
Один из главных недостатков гимпа — неудобное всё.
Может просто непривычно все после фотошопа?
Я гимпом вынужден пользоваться уже пару лет как, так что привыкнуть время было.
Но к некоторым вещам привыкнуть нельзя.
Во-первых, нестандартные диалоги открытия/сохранения файла. Помимо того, что мышечная память каждый раз отдаётся болью во всём теле, ещё и тупо найти некоторые вещи очень сложно. Я, к примеру, буквально пару недель назад выяснил (чисто случайно), что в диалоговом окне "Открыть файл" всё-таки можно включить поле ввода адреса.
Во-вторых, невозможность настроить некоторые хоткеи. Причём я не про какую-то экзотику, а про элементарное переключение вкладок по Ctrl+Tab, которое работает вообще везде во вселенной, кроме гимпа.
В-третьих, возвращаемся к диалоговым окнам. Диалоги изменения размера картинки и холста можно подтвердить либо мышью, за которой каждый раз нужно тянуться, либо каким-то неимоверным количеством табуляций с последующим нажатием Enter. Потому что кнопка Ok не в фокусе по умолчанию, и на Enter диалог просто не реагирует.
Список на самом деле можно продолжать вечно, это я только самые задолбавшие вещи с ходу вспомнил. Есть ещё жуткий интерфейс, логотип приложения из ночных кошмаров, шрифты 8 кегля на FullHD разрешении.
Я смотрю на многообразие цветов. Я смотрю на пустой холст. Затем я пытаюсь нанести цвета как слова, из которых возникают поэмы, как ноты, из которых возникает музыка.
Материал предыдущих глав даёт вам всё необходимое для создания простого веб-приложения. Именно этим мы и займёмся.
Наше приложение будет программой для рисования в браузере, схожей с Microsoft Paint. С его помощью можно будет открывать файлы с изображениями, малевать на них мышкой и сохранять обратно. Вот, как это будет выглядеть:
Простая программа рисования
Рисовать на компьютере клёво. Не надо волноваться насчёт материалов, умения, таланта. Просто берёшь, и начинаешь калякать.
Реализация
Интерфейс программы выводит вверху большой элемент <canvas> , под которым есть несколько полей ввода. Пользователь рисует на картинке, выбирая инструмент из поля <select> , а затем нажимая на холсте мышь. Есть инструменты для рисования линий, стирания кусочков картинки, добавления текста и т.п.
Щелчок на холсте передаёт событие «mousedown» текущему инструменту, который обрабатывает его, как считает нужным. Рисование линий, например, будет слушать события «mousemove», пока кнопка мыши не будет отпущена, и нарисует линию по пути мыши текущим цветом и размером кисти.
Цвет и размер кисти выбираются в дополнительных полях ввода. Они выполняют обновление свойств контекста рисования на холсте fillStyle, strokeStyle, и lineWidth каждый раз при их изменении.
Загрузить картинку в программу можно двумя способами. Первый использует поле file, где пользователь выбирает файл со своего диска. Вторая запрашивает URL и скачивает картинку из интернета.
Картинки хранятся нестандартным способом. Ссылка save с правой стороны ведёт на текущую картинку. По ней можно проходить, делиться ей или сохранять файл через неё. Я скоро объясню, как это работает.
Строим DOM
Интерфейс программы состоит из более чем 30 элементов DOM. Нужно их как-то собрать вместе.
Очевидным форматом для сложных структур DOM является HTML. Но разделять программу на HTML и скрипт неудобно – для элементов DOM понадобится множество обработчиков событий или других необходимых вещей, которые надо будет как-то обрабатывать из скрипта. Для этого придётся делать много вызовов querySelector и им подобных, чтобы найти нужный элемент DOM для работы.
Было бы удобно определять части DOM рядом с теми частями кода JavaScript, которые ими управляют. Поэтому я решил создавать всю конструкцию DOM прямо в JavaScript. Как мы видели в главе 13, встроенный интерфейс для создания структур DOM ужасно многословен. Поскольку нам придётся создать много конструкций, нам понадобится вспомогательная функция.
Эта функция – расширенная версия функции elt из главы 13. Она создаёт элемент с заданным именем и атрибутами, и добавляет все остальные аргументы, которые получает, в качестве дочерних узлов, автоматически преобразовывая строки в текстовые узлы.
Так мы легко и просто создаём элементы, не раздувая код до размеров лицензионного соглашения.
Основание
Ядро нашей программы – функция createPaint, добавляющая интерфейс рисования к элементу DOM, который передаётся в качестве аргумента. Так как мы создаём программу последовательно, мы определяем объект controls, который будет содержать функции для инициализации разных элементов управления под картинкой.
У каждого элемента управления есть доступ к контексту рисования на холсте, а через него – к элементу <canvas> . Основное состояние программы хранится в этом холсте – он содержит текущую картинку, выбранный цвет (в свойстве fillStyle) и размер кисти (в свойстве lineWidth).
Мы обернём холст и элементы управления в элементы <div> с классами, чтобы можно было добавить им стили, например серую рамку вокруг картинки.
Выбор инструмента
Первый элемент управления, который мы добавим – элемент <select> , позволяющий выбирать инструмент рисования. Как и в случае с controls, мы будем использовать объект для сбора необходимых инструментов, чтобы не надо было описывать их работу в коде по отдельности, и чтобы можно было легко добавлять новые. Этот объект связывает названия инструментов с функцией, которая вызывается при их выборе и при клике на холсте.
В поле tool есть элементы <option> для всех определённых нами инструментов, а обработчик события «mousedown» на холсте берёт на себя обязанность вызывать функцию текущего инструмента, передавая ей объекты event и context. Также он вызывает preventDefault, чтобы зажатие и перетаскивание мыши не вызывало выделения участков страницы.
Самый простой инструмент – линия, который рисует линии за мышью. Чтобы рисовать линию, нам надо сопоставить координаты курсора мыши с координатами точек на холсте. Вскользь упомянутый в 13 главе метод getBoundingClientRect может нам в этом помочь. Он говорит, где показывается элемент, относительно левого верхнего угла экрана. Свойства события мыши clientX и clientY также содержат координаты относительно этого угла, поэтому мы можем вычесть верхний левый угол холста из них и получить позицию относительно этого угла.
Несколько инструментов рисования должны слушать событие «mousemove», пока кнопка мыши нажата. Функция trackDrag регистрирует и убирает событие для данных ситуаций.
У неё два аргумента. Один – функция, которая вызывается при каждом событии «mousemove», а другая – функция, которая вызывается при отпускании кнопки. Каждый аргумент может быть не задан.
Инструмент для рисования линий использует две вспомогательные функции для самого рисования.
Функция сначала устанавливает свойство контекста lineCap в “round”, из-за чего концы нарисованного пути становятся закруглёнными, а не квадратными, как это происходит по умолчанию. Этот трюк обеспечивает непрерывность линий, когда они нарисованы в несколько приёмов. Если рисовать линии большой ширины, вы увидите разрывы в углах линий, если будете использовать установку lineCap по умолчанию.
Затем, по каждому событию «mousemove», которое случается, пока кнопка нажата, рисуется простая линия между старой и новой позициями мыши, с использованием тех значений параметров strokeStyle и lineWidth, которые заданы в данный момент.
Аргумент onEnd просто передаётся дальше, в trackDrag. При обычном вызове третий аргумент передаваться не будет, и при использовании функции он будет содержать undefined, поэтому в конце перетаскивания ничего не произойдёт. Но он поможет нам организовать ещё один инструмент, ластик erase, используя очень небольшое дополнение к коду.
Свойство globalCompositeOperation влияет на то, как операции рисования на холсте меняют цвет пикселей. По умолчанию, значение свойства «source-over», что означает, что цвет, которым рисуют, накладывается поверх существующего. Если цвет непрозрачный, он просто заменит существующий, но если он частично прозрачный, они будут смешаны.
Инструмент “erase” устанавливает globalCompositeOperation в «destination-out», что имеет эффект ластика, и делает пиксели снова прозрачными.
Вот у нас уже есть два инструмента для рисования. Мы можем рисовать чёрные линии в один пиксель шириной (это задано значениями свойств холста strokeStyle и lineWidth по умолчанию), и стирать их. Работающий, хотя и примитивный, прототип программы.
Цвет и размер кисти
Предполагая, что пользователи захотят рисовать не только чёрным цветом и не только одним размером кисти, добавим элементы управления для этих настроек.
В главе 18 я обсуждал разные варианты полей формы. Среди них не было полей для выбора цвета. По традиции у браузеров нет встроенных полей для выбора цвета, но за последнее время в стандарт включили несколько новых типов полей форм. Один из них — <input type="color"> . Среди других — «date», «email», «url» и «number». Пока ещё их поддерживают не все. Для тега <input> тип по умолчанию – “text”, и при использовании нового тега, который ещё не поддерживается браузером, браузеры будут обрабатывать его как текстовое поле. Значит, пользователям с браузерами, которые не поддерживают инструмент для выбора цвета, необходимо будет вписывать название цвета вместо того, чтобы выбирать его через удобный элемент управления.
При смене значения поля color значения свойств контекста холста fillStyle и strokeStyle заменяются на новое значение.
Настройка размера кисти работает сходным образом.
Код создаёт варианты размеров кистей из массива, и убеждается в том, что свойство холста lineWidth обновлено при выборе кисти.
Сохранение
Такие URL полезны для разных вещей, как, например, включение небольших картинок прямо в файл стилей. Они также позволяют нам ссылаться на создаваемые файлы на стороне клиента, в браузере, не перемещая их сперва на какой-либо сервер.
У элемента холста есть удобный метод toDataURL, который возвращает URL с данными, содержащий картинку на холсте в виде графического файла. Но нам не следует обновлять ссылку для сохранения при каждом изменении картинки. В случае больших картинок перемещение данных в URL занимает много времени. Вместо этого мы подключаем обновление к ссылке, чтоб она обновляла свой атрибут href каждый раз, когда она получает фокус с клавиатуры или над ней появляется курсор мыши.
Таким образом, линк просто сидит себе тихонечко и указывает на неправильные данные, но как только пользователь приблизится к нему, он волшебным образом обновляет себя так, чтобы указывать на текущую картинку.
Если вы загрузите большую картинку, некоторые браузеры поперхнутся слишком большим URL с данными, который получится в результате. Для маленьких картинок система работает без проблем.
Но здесь мы опять сталкиваемся с деталями реализации песочницы в браузере. Когда картинка грузится с URL с другого домена, если ответ сервера не содержит заголовок, разрешающий использование ресурса с других доменов (см. главу 17), холст будет содержать информацию, которая будет видна пользователю, но не видна скрипту.
Мы могли запросить картинку с приватной информацией (график изменений банковского счёта). Если бы скрипт мог получить к ней доступ, он мог бы шпионить за пользователем.
Для предотвращения таких утечек информации, когда картинка, невидимая скрипту, будет загружена на холст, браузеры пометят его как «испорчен». Пиксельные данные, включая URL с данными, нельзя будет получить с «испорченного» холста. На него можно писать, но с него нельзя читать.
Поэтому нам нужна обработка try/catch в функции update для ссылки сохранения. Когда холст «портится», вызов toDataURL выбросит исключение, являющееся экземпляром SecurityError. В этом случае мы перенаправляем ссылку на ещё один вид URL с протоколом javascript:. Такие ссылки просто выполняют скрипт, стоящий после двоеточия, и наша ссылка покажет предупреждение, сообщающее о проблеме.
Загрузка картинок
Последние два элемента управления используются для загрузки картинок с локального диска и с URL. Нам потребуется вспомогательная функция, которая пробует загрузить картинку с URL и заменить ею содержимое холста.
Нам надо поменять размер холста, чтобы он соответствовал картинке. Почему-то при смене размера холста его контекст забывает все настройки (fillStyle и lineWidth), в связи с чем функция сохраняет их и загружает обратно после обновления размера холста.
Элемент управления для загрузки локального файла использует технику FileReader из главы 18. Кроме используемого там метода readAsText у таких объектов есть метод под названием readAsDataURL – а это то, что нам нужно. Мы загружаем файл, который пользователь выбирает, как URL с данными, и передаём его в loadImageURL для вывода на холст.
Загружать файл с URL ещё проще. Но с текстовым полем мы не знаем, закончил ли пользователь набирать в нём URL, поэтому мы не можем просто слушать события “change”. Вместо этого мы обернём поле в форму и среагируем, когда она будет отправлена – либо по нажатию Enter, либо по нажатию на кнопку load.
Теперь мы определили все элементы управления, требующиеся нашей программе, но нужно добавить ещё несколько инструментов.
Закругляемся
Очень просто можно добавить инструмент для вывода текста, который выводит запрос пользователю, куда он должен ввести текст.
Можно было бы добавить полей для размера текста и шрифта, но для простоты мы всегда используем шрифт sans-serif и размер шрифта, как у текущей кисти. Минимальный размер – 7 пикселей, потому что меньше текст будет нечитаемый.
Ещё один необходимый инструмент для каляк-маляк – “аэрозоль”. Она рисует случайные точки под кистью, пока нажата кнопка мыши, создавая более или менее густые точки в зависимости от скорости движения курсора.
Аэрозоль использует setInterval для выплёвывания цветных точек каждые 25 миллисекунд, пока нажата кнопка мыши. Функция trackDrag используется для того, чтобы currentPos указывала на текущее положение курсора, и для выключения интервала при отпускании кнопки.
Чтобы посчитать, сколько точек нужно нарисовать каждый раз по окончанию интервала, функция подсчитывает размер области текущей кисти и делит его на 30. Для поиска случайного положения под кистью используется функция randomPointInRadius.
Эта функция создаёт точки в квадрате между (-1,-1) и (1,1). Используя теорему Пифагора, она проверяет, лежит ли созданная точка внутри круга с радиусом 1. Когда такая точка находится, она возвращает её координаты, умноженные на радиус.
Цикл нужен для равномерного распределения точек. Проще было бы создавать точки в круге, взяв случайный угол и радиус и вызвав Math.sin и Math.cos для создания точки. Но тогда точки с большей вероятностью появлялись бы ближе к центру круга. Это ограничение можно обойти, но результат будет сложнее, чем предыдущий цикл.
Теперь наша программа для рисования готова. Запустите код и попробуйте.
Упражнения
В программе ещё очень много чего можно улучшить. Давайте добавим ей возможностей.
Прямоугольники
Определите инструмент Rectangle, заполняющий прямоугольник (см. метод fillRect из главы 16) текущим цветом. Прямоугольник должен появляться из той точки, где пользователь нажал кнопку мыши, и до той точки, где он отпустил кнопку. Заметьте, что последнее действие может произойти левее или выше первого.
Как только это заработает, вы заметите, что некомфортно не видеть прямоугольник, когда вы перетаскиваете мышь, чтобы указать его размер. Можете ли вы придумать способ показать прямоугольник во время перетаскивания без фактического рисования на холсте, пока кнопка мыши не будет отпущена?
Если не придумаете, вспомните о стиле position: absolute, который мы обсуждали в главе 13. который можно использовать, чтобы выводить узел поверх остального документа. Свойства pageX и pageY событий мыши можно использовать для точного расположения элемента под мышью, записывая нужные значения в стили left, top, width и height.
Пипетка
Ещё один часто встречающийся инструмент – пипетка, который позволяет щелчком мыши на картинке выбрать цвет, который находится под курсором. Сделайте такой инструмент.
Для его изготовления понадобится доступ к содержимому холста. Метод toDataURL примерно это и делал, но получить информацию о пикселе из URL с данными сложно. Вместо этого мы возьмём метод контекста getImageData, возвращающий прямоугольный кусок картинки в виде объекта со свойствами width, height и data. Свойство data содержит массив чисел от 0 до 255, используя четвёрку чисел для представления красного, зелёного, синего и альфа (непрозрачность) компонентов каждого пикселя.
Этот пример получает числа из одного пикселя холста, один раз, когда тот пуст (все пиксели – прозрачные чёрные), и один раз, когда пиксель окрашен в красный цвет.
Аргументы getImageData показывают начальные координаты прямоугольника x и y, которые нам надо получить, за которыми идут ширина и высота.
Игнорируйте прозрачность в этом упражнении, работайте только с первыми тремя компонентамидля заданного пикселя. Также не волнуйтесь по поводу обновления поля color при выборе цвета. Просто убедитесь, что fillStyle и strokeStyle контекста установлены в цвет, оказавшийся под курсором.
Помните, что эти свойства принимают любой цвет, который понимает CSS, включая запись вида rgb(R, G, B), которую вы видели в главе 15.
Заливка
Это упражнение более сложное, чем предыдущие, и оно потребует разработки нетривиального решения хитрой задачи. Убедитесь, что у вас есть свободное время и терпение перед началом работы, и не отчаивайтесь, если сразу у вас что-то не будет получаться.
Инструмент заливки окрашивает пиксель под курсором мыши и под целой группой пикселей вокруг него, имеющих тот же цвет. Для целей нашего упражнения мы будем считать, что эта группа включает все пиксели, до которых можно добраться от начального, двигаясь по одному пикселю по горизонтали и вертикали (но не по диагонали), не прикасаясь к пикселям, чей цвет отличается от исходного.
Следующая картинка демонстрирует множество пикселей, окрашиваемых, когда инструмент заливки применяется к помеченному пикселю:
Заливка не протекает через диагональные разрывы и не касается пикселей, которых нельзя достичь, даже если они того же цвета, что и исходный.
Вам вновь понадобится getImageData для выяснения цвета пикселя. Скорее всего, удобнее будет получить всю картинку за раз, а потом уже получать данные по пикселям из получившегося массива. Пиксели в массиве организованы схожим образом с решёткой из главы 7, по рядам, только каждый пиксель описывается четырьмя значениями. Первое значение для пикселя с координатами (x,y) находится на позиции (x + y × width) × 4
Включайте в рассмотрение четвёртое число (альфа), потому что нам нужно будет различать чёрные и пустые (прозрачные) пиксели.
Поиск соседних пикселей того же цвета требует пройти по поверхности пикселей вверх, вниз, влево и вправо, пока там находятся пиксели того же цвета. За первый проход всю группу пикселей найти не получится. Вместо этого нужно будет сделать что-то похожее на отслеживание в регулярных выражениях, описанное в главе 9. Когда у вас есть больше одного возможного направления, нужно сохранить все те, по которым вы прямо сейчас не идёте, и просмотреть их позже, по окончанию текущего шага.
У картинки среднего размера много пикселей. Постарайтесь свести работу программы к минимуму, или же она будет работать слишком долго. К примеру, игнорируйте пиксели, которые вы уже обрабатывали.
Рекомендую для окраски отдельных пикселей вызывать fillRect, и хранить какую-то структуру данных, где записано, какие пиксели вы уже обошли.
Уже с 5 лет дети могут учиться программировать и создавать крутые игры. Расскажем об основных программах, которые в этом помогут.
Сегодня маленькие «цифровые аборигены» рано берут в руки гаджеты и осваивают компьютерные игры. Это увлечение можно сразу развить и превратить во что-нибудь полезное: почему бы ребенку самому не начать создавать игры?
Конечно, программы для детей гораздо более упрощённые, но, главное, что дети сразу видят результат своих стараний, понимают, как строится скелет игр, учатся решать комплексные задачи и думать как программисты.
Мы рассмотрим как платформы для дошкольников (визуальные среды), так и для подростков (здесь уже понадобится текстовое программирование). Почти все программы либо имеют яркую визуализацию, либо связаны с популярными у детей игровыми площадками (Minecraft, Roblox). Игровой формат, знакомая среда вовлекают детей, мотивируют и помогают концентрировать внимание, что очень важно для обучения.
Здесь мы говорим о визуальном программировании и рассматриваем бестекстовые среды программирования: детям не нужно уметь читать, чтобы начать делать в них свои проекты.
Scratch Junior (Скретч Джуниор) — это визуальная среда, младший брат популярной среды программирования Scratch. Он предназначен для совсем маленьких детей (от 5 лет).
Изначально Scratch Jr появилось как приложение на планшет с главным персонажем котиком (работает на iPad, Android и на читалках Kindle), а затем была создана версия для ПК с героем-инопланетянином по имени Тик.
Устроена программа довольно просто: посередине игровая сцена, снизу категории блоков и область программирования. Слева можно выбрать спрайта (то есть героя или объект), для которого будет создаваться программа. Справа можно добавить нового спрайта или переключиться между сценами.
Scratch Jr — это цифровой конструктор наподобие Lego, где ребёнок должен перетаскивать блоки и соединять их вместе в нужном порядке. Процесс несложный: блоки «примагничиваются» друг к другу.
Всего есть несколько категорий: блоки движения, внешнего вида, управления и, наконец, пусковые блоки и блоки окончания. Блоки обозначены картинками, поэтому детям легко разобраться, за что они отвечают.
Библиотека спрайтов и коллекция ландшафтов довольно большие.
Добавлять свои картинки для спрайтов не получится, но в программу встроен Paint-редактор, где можно нарисовать своего персонажа или пейзаж.
Ребята не только создают простые линейные программы, но и узнают, что такое циклы и подпрограммы. Даже самый простой проект на Scratch Jr может состоять из параллельных программ: можно создать «коды» для нескольких спрайтов и запустить их одновременно. Так как сцен может быть несколько, есть возможность создать несколько уровней игры.
Эта визуальная среда, разработанная компанией Microsoft, предназначена для создания несложных 3D-игр.
Здесь можно создавать трехмерные игровые миры и менять их. Инструментов довольно много: можно изменить форму, цвет и материал рельефа, создать подводный мир или лабиринт, добавить небо, изменить освещение и силу ветра и др.
В игровой мир мы можем добавлять спрайты и программировать их движения. Из минусов — нельзя загружать собственные картинки, но есть внутриигровая библиотека спрайтов.
Для программирования нужно манипулировать графическими блоками, как и в Scratch Jr. Чтобы создать программу, необходимо нажать на правую кнопку мыши и выбрать пункт «Программа». Область программирования появится на переднем плане.
Есть две основные категории блоков для программы: «когда» и «делать». И в каждой из них множество подкатегорий, детализирующих действие. Пример создания программы для шутера: когда клавиша W нажата, персонаж стреляет на север красными пульками.
В этой программе ребята уже создают полноценные 3D-миры, добавляют в игры таймер, подсчёт очков и жизней, уровни и многое другое.
А еще они изучают циклы и условия, развивают алгоритмическое и пространственное мышление. Они уже могут придумывать свои идеи и искать пути их воплощения, анализировать задачу и структурировать её решение.
О Скретче вы наверняка уже что-то слышали. Это визуальная среда и одноимённый визуальный язык программирования, разработанные медиалабораторией Массачусетского технологического университета. Со Скретча начинают программировать не только дети, но и взрослые: он даже включён в знаменитый гарвардский курс CS50, который знакомит студентов с программированием.
В отличие от всех остальных программ, Scratch доступен онлайн и даже не требует регистрации. Аккаунт стоит завести, чтобы сохранять свои игры и публиковать их на сайте, получать лайки и комментарии от других пользователей.
Скретч — это всё та же визуальная среда, здесь тоже вместо текстового программирования нужно соединять между собой блоки. Но в Скретче уже появляются переменные, ветвления, более сложные функции и циклы и др.
Интерфейс простой: посередине экрана находится среда программирования, слева блоки, справа — сцена, на которой происходят изменения. Под сценой область, где можно выбрать, для какого спрайта создается программа, его размер и координаты (по осям Х и Y).
Категорий блоков много: движения, внешний вид, события, управление, сенсоры, операторы, переменные. Когда Скретчер (так называют опытных создателей игр в Скретч) сделает несколько игр и начнёт хорошо разбираться в программе, он сможет создать облачные переменные (чтобы играть онлайн вместе с друзьями) и свои, совершенно новые блоки.
Изучение лучше всего начать с категорий движения и внешнего вида спрайтов — так будет проще и удобнее, ведь спрайты — это основное в ваших играх на Скретч. После изучите циклы и условия, разберитесь, как сделать клонов в игре и задать переменные. После простых мини-проектов можно взяться за создание полноценного шутера, раннера или гонок.
Помимо встроенной библиотеки спрайтов и звуков, в Скретче можно добавлять свои собственные материалы. А также есть Paint-редактор, где можно нарисовать спрайта, и аудиоредактор, где пользователь записывает своё аудио.
Такое большое количество инструментов позволяет создать в Скретче практически любую игру.
Чтобы потренироваться и получше изучить возможности Скретч, дети могут воссоздать свои любимые игры. Например, сделать копию Among Us, Brawl Stars или Friday Night Funkin.
Еще интересно, что Скретч — это открытая площадка, где все могут обмениваться идеями, брать работы других пользователей и модифицировать их. Если проект «публичный», то можно воспользоваться его кодом и сделать свой ремикс.
В Скретч дети могут поближе познакомиться с логикой программирования и сразу создавать свои игры и анимацию. Работая над своими проектами, ребята развивают креативное и алгоритмическое мышление, учатся воплощать комплексные задачи. Набор инструментов достаточно широкий, чтобы воплотить практически любую задумку ребенка: нужно только проанализировать задачу и постараться найти решение.
Проектные игры в Minecraft и программирование на PythonВы наверняка знакомы с Майнкрафт или хотя бы слышали о нём. Это игра, в которой из блоков можно создать что угодно, на что хватит фантазии. А что если все эти блоки и сооружения создавать с помощью текстового кода? Это возможно, если подключить к Майнкрафту язык программирования Python.
Это хорошая возможность научить детей программировать в знакомой и любимой среде. Как это работает? Мы скачиваем игру Майнкрафт и среду для разработки Python, а также Java, интегрируем всё вместе. Включаем сервер на компьютере, пишем код и запускаем его в игре.
К Майнкрафт также можно подключить другие языки. Например, Lua, о котором будем говорить чуть ниже в разделе о Roblox. Но Python — самый лучший выбор, так как он не только простой и интуитивно понятный для детей, но в то же время это активно развивающийся и востребованный язык, который пригодится ребятам в будущем.
С помощью текстового кода дети могут создавать блоки, строить стены, дома и целые улицы, выводить координаты персонажа в чат, создавать двухмерные и трёхмерные фигуры, сферу и др.
Код на Python для создания куба из динамита
Трёхмерный куб из 125 блоков динамита
А ещё в Майнкрафт можно познакомиться с концептом искусственного интеллекта и применением случайных чисел. Например, задать настроение персонажу-боту: он будет обижаться, когда мы отдаляемся от него, и прощать нас, когда приближаемся к нему.
Код, который мы запускаем, чтобы персонаж-бот мог на нас обидеться и затем простить
В первую очередь в Майнкрафт мы изучаем программирование, но также классно внутри этой песочницы делать свои игры. Например, лабиринт, игру с препятствиями (с появлением и исчезновением блоков и другими условиями) и др.
Что программирование и создание игр в Minecraft даст детям?Создание игр в Minecraft — это, конечно, не то же, что создавать игры в программах по разработке игр. Здесь мы больше фокусируемся на программировании: осваиваем Python и учимся писать код на очень популярном языке (знание Python точно пригодится детям в будущем, какую профессию они бы не выбрали), ищем баги и исправляем их, как настоящие программисты.
Но, во-первых, Minecraft — это популярная у детей игра, а значит это хороший способ привить детям любовь к программированию и разработке игр. А во-вторых, создание игр в Майнкрафт раздвигает рамки и развивает воображение: дети понимают, что нет ничего невозможного (можно программировать в любимой игре!) и экспериментируют, создавая оригинальные, ни на что не похожие проекты.
Если в Minecraft дети больше учатся Python-программированию, то в Roblox они смогут почувствовать себя настоящими разработчиками игр. Это тоже знакомая для них среда: здесь ребята играют в популярные игры Adopt Me, Piggy, Murder Mystery 2 и многие другие.
На движке Roblox Studio дети могут создавать свои собственные трёхмерные игровые миры и программировать на языке Lua. Это упрощённый язык, предназначенный для пользователей, не являющихся профессиональными программистами.
У Roblox Studio непростой интерфейс, поскольку набор функций и вкладок велик. Сложность ещё и в том, что названия в программе даны на английском языке, а к этому ещё нужно привыкнуть. Когда вы только начинаете работу над проектом, перед вами открывается библиотека шаблонов: можно создавать игру на обычной равнине (Flat Terrain) или, например, в замке (Castle) или в деревне (Village). Выбор шаблона также может определять жанр игры: например, есть ландшафт для гонок или для игры Obby (игра с препятствиями).
Далее вы переходите в рабочее пространство. Посередине экрана находится сцена, а вокруг — разные вкладки, которые можно открывать и скрывать. Наверху в разделе Home вы найдёте инструменты, которые позволяют работать с объектами на сцене: создавать, двигать (Move), вращать (Rotate), изменять их размер (Scale).
Справа расположен Explorer, где находятся инструменты для настройки уровней. Самый важный из них — Workspace, куда попадают все объекты, добавленные на игровую сцену. Если нажать на объект, то под Explorer заполнится окно Properties, где можно изменить свойства объекта (например, размер или цвет).
Слева находится Toolbox — коллекция моделей, созданных разработчиками Roblox и обычными пользователями. Их можно добавлять в игровой мир. Слева же должна быть вкладка Editor (чтобы открыть её, нажмите на название Editor в верхней панели), где находятся инструменты для изменения ландшафта.
Если вы потеряли какую-либо вкладку, просто нажмите в верхнем меню на View, там можно будет выбрать любое нужное окно (такой вопрос у начинающих ребят возникает часто).
Чтобы передвигаться по игровому миру (движение камеры), нужно нажимать на клавиши W, A, S, D и зажимать правую кнопку мыши.
Создаем симулятор копателя в Roblox Studio (ночной режим)
Область программирования открывается через Explorer. Нужно нажать на плюсик рядом с Workspace (или там же рядом с объектом, для которого нужно создать код) и добавить скрипт.
Пишем код на языке Lua для симулятора копателя
Также в Roblox Studio можно подключить плагины, которые расширяют набор инструментов. Они позволяют быстрее изменять цвет, создавать окружности, разрезать блоки на тонкие пластины и др.
В Roblox можно создавать игры самых разных жанров: Obby, шутер, гонки, симуляторы (например, симулятор копателя), раннеры и многое другое.
Игры публикуются на сайте Roblox, там же можно играть в них вместе с друзьями, комментировать и ставить лайки, получать фидбек от пользователей. В Roblox также можно получать внутриигровую валюту Robux, например, за продажу мерча или когда в вашу игру играют пользователи с премиум-аккаунтом.
Roblox Studio — это полноценный инструмент, который познакомит детей с разработкой игр. Он приближен к профессиональным движкам, но упрощён и адаптирован так, что дети могут без проблем создавать в этой среде свои игры. А язык программирования Lua доступен для понимания ребенка и станет отличным началом на пути освоения программирования.
Моделирование 3D-миров поможет развить пространственное и алгоритмическое мышление ребенка. Дети смогут познакомиться с тем, как работают профессиональные разработчики игр и, возможно, загорятся в будущем освоить эту специальность.
В этом динамичном туториале я покажу вам основные приёмы создания пиксельарта. Спрайты - это картинки в 2D играх, которые представляют собой различные объекты: игрового персонажа, монстров, предметы и т.д.
Пиксельарт, также известный как дот-арт в Японии, это вид цифрового искусства, где рисование происходит на пиксельном уровне. В основном он ассоциируется с графикой игр 80-90 годов, в которых художники преодолевали технические ограничения (небольшое количество памяти и маленькое разрешение), создавая все более захватывающие картины.
В наши дни пиксель арт все еще актуален и используется в играх, несмотря на возможность создания реалистичной 3D графики. Почему? - cпросите вы. Если не брать во внимание ностальгию, то создавать хорошие рисунки с такими жесткими ограничениями все также интересно и достаточно сложно. Также, как мы восхищаемся тем, что художник, сделав пару мазков, может показать объем и вызвать у нас какие-то эмоции, мы любуемся несколькими соединёнными пикселями, выполняющими ту же работу.
Порог вхождения в пиксельарт довольно низкий, по сравнению с традиционным рисунком и 3D графикой, позволяя инди разработчикам воплощать свои идеи в жизнь. Но это никоим образом не означает, что закончить игру с ним будет легко. Я видел много пиксельарт проектов на кикстартере, которые думали, что управятся с игрой за год, когда в реальности нужно было около шести лет. Пиксельарт на том уровне, который хотят видеть люди требует достаточно много времени и усилий, есть лишь пару путей, позволяющих ускорить этот процесс.
Работая с 3D моделью ты, по крайней мере, можешь крутить ее, деформировать, перемещать её конечности, копировать анимацию с одной модели на другую и т.д, чего не скажешь о пиксельарте. Профессиональный пиксельарт почти всегда подразумевает под собой большое количество кропотливого размещения пикселей на каждом кадре анимации.
Как говорится “Кто предупрежден, тот вооружен!”, а теперь о моем стиле: по большей мере я использую пиксельарт для своих игр, они же и воодушевляют меня продолжать заниматься этим. Если быть точным, то я фанат Famicon(NES), 16 битных консолей и аркадных автоматов 90ых годов.
Мои любимые игры этой эры имели пиксельарт, который нельзя описать иначе как насыщенный, дерзкий и чёткий. но не настолько, чтобы быть чопорным или минималистичным. Это стиль, который я взял за основу своего, но вы можете легко использовать техники, применяемые в этом туториале для чего-то совсем другого. Смотрите на художников, которые вам нравятся и делайте пиксельарт, какой вашей душе угодно!
Самыми базовыми инструментами для занятия пиксельартом являются лупа и карандаш. Также будут полезными линия, фигуры, выделение и заливка цветом. Есть большое количество как платных, так и бесплатных программ, в которых имеются данные инструменты. Я расскажу о самых популярных из них (включая те, которые использую сам).
Если у вас Windows, вы можете использовать Paint, несмотря на скудность программы, в ней имеются все нужные инструменты, чтобы заниматься пиксельартом.
На удивление неплохой редактор, которым вы можете пользоваться прямо через ваш браузер. Может производить экспорт как в png и gif, так и сохранять спрайты в браузере. Неплохой способ начать заниматься пиксельартом.
GraphicsGale - это первый редактор, о котором я узнал, разработанный и предназначенный именно для пиксельарта и его анимации. Созданный компанией HUMANBALANCE, он стал бесплатным в 2017 году и до сих пор широко используется несмотря на рост популярности Aseprite. К сожалению, доступен только обладателям Windows.
Самый популярный редактор на данный момент. Содержит большое количество полезных функций и инструментов, постоянно обновляется, доступен как на Windows и Mac, так и на Linux. К тому же вы можете пользоваться программой бесплатно, скомпилировав её исходный код. Если вы серьёзно хотите заниматься пиксельартом и ещё не выбрали себе редактор, то Aseprite будет неплохим вариантом.
GameMaker Studio 2 - это отличный движок для создания 2D игр, который также содержит достойный редактор спрайтов. Если вы собираетесь делать игры с пиксельартом, то это лучший выбор для обоих. В данный момент (2019 год) я использую его для создания UFO 50, коллекции из 50 ретро игр. В основном я использую местный редактор для создания спрайтов, а тайлсеты делаю в Photoshop.
Так как Photoshop требует ежемесячную плату и не приспособлен для пиксельарта, я не рекомендую его, если только вы уже не используете его. Несмотря на выше сказанное, его вполне можно использовать для статических спрайтов, но он достаточно громоздкий по сравнению с GraphicsGale или Aseprite.
Я настоятельно рекомендую пользоваться графическим планшетом для любого вида иллюстраций, чтобы предотвратить заболевания повторяющейся длительной нагрузки на запястье (туннельный синдром). Такие заболевания намного легче предотвратить, чем вылечить. Когда появляется боль, вы уже обречены ( мои дни рисования мышкой, сделали невозможным играть в игры с быстрым нажатием кнопок). Так, что позаботьтесь о себе пока не поздно – это того стоит! В данный момент я использую маленький Wacom Intuous Pro.
Если у вас нет возможности купить планшет, по крайней мере, возьмите лучезапястный бандаж. Я использую от компании Mueller Green Fitted Wrist Brace. У других брендов бандажи были либо слишком неудобными, либо недостаточно эффективными.
Давайте приступим к делу! Мы начнем со спрайта персонажа размером 96x96 пикселей. Я решил нарисовать орка, но вы вправе выбрать что-то другое. Конечный вариант орка находится на скриншоте Final Fight, который вы можете увидеть выше, для того, чтобы вы понимали масштаб спрайта– он большой для большинства ретро игр (оригинальный скриншот имеет размер 384x224 пикселя).
Причина по которой мы начинаем с такого большого спрайта заключается в том, что мне будет легче показать техники пиксельарта именно на нем. К тому же, создание больших спрайтов очень похоже на обычное рисование, которое может быть вам знакомо. После того, как мы изучим базовые техники можно будет уменьшить размер спрайта.
Пиксельарт характеризуется своими ограничениями. Каждый пиксель имеет большое значение, по сравнению с другими видами иллюстраций, также как и цвета, количество которых должно быть ограничено.
Так, что да, выбор палитры цветов очень важен и помогает обозначить ваш стиль. Но для начинающих пиксельарт художников лучшим вариантом будет отложить теорию насчёт цветов в сторону и просто выбрать одну из существующих палитр ( или несколько рандомных цветов), чтобы начать рисовать. Одно из преимуществ пиксельарта заключается в том, что вы в любой момент можете поменять палитру цветов.
Именно для этого туториала я буду использовать палитру из 32 цветов, созданную специально для UFO 50. Палитры из 32 и 16 цветов используются достаточно часто. Данная палитра была создана для выдуманной консоли, которая бы находилась где-то между Famicon и PC Engine. Можете спокойно взять эту палитру и двигаться дальше (или нет! Это не столь важно).
Мы начнем рисовать наш спрайт с наброска карандашом, также как если бы мы рисовали на бумаге. Опираясь на свой опыт, могу сказать, что неплохие пиксельарт художники достаточно хороши в обычном рисовании и наоборот. Так что никогда не помешает улучшить свои навыки рисования.
Дальше мы должны убрать лишние пиксели и сделать все линии толщиной в один пиксель. Но какие пиксели являются лишними? – для того, чтобы ответить на данный вопрос, нам нужно познакомиться с таким понятием как зазубрины.
Нам нужно научиться делать два вида линий: прямые и закруглённые. На бумаге все будет зависеть от контроля мышц, но мы работаем с маленькими цветными блоками, что создает свои трудности.
Для того, чтобы делать хорошие линии, нужно свести к минимуму количество зазубрин: маленьких пикселей или группы пикселей, которые нарушают последовательность линии. Так как в пиксельарте каждый пиксель имеет большое значение, пару зазубрин могут испортить весь спрайт. Представьте, что вы рисуете линию на кусочке бумаги и кто-то внезапно стукает по столу, получившаяся у вас загогулина является тем же, что и зазубрины в пиксельарте.
Читайте также: