Как увеличить пиксель арт без потери качества

Как изменить размер пиксельного искусства, сохранив резкость

Пиксель-арт может выглядеть 8-битным, но при наличии творческого чутья и навыков работы в Photoshop вы можете создать с его помощью несколько очень хороших произведений искусства. Как обычно, есть несколько приемов, которые пригодятся вам при работе с пиксельным искусством. Один из них — изменение размера и масштабирование без размытия изображения. Это не так просто, как кажется на первый взгляд, поэтому мы и создали этот учебник.

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

Сложность изменения размера пиксельного искусства

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

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

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

Изменение размера пиксельного искусства с сохранением резкости

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

Вот как это сделать:

1. Откройте ваше пиксельное изображение в Photoshop.
2. Откройте Image и Image Size.
3. Включите Preview, если он еще не включен.
4. Установите флажок рядом с Resample. Это позволит Photoshop сохранить резкость.
5. Измените интерполяцию с автоматической на ближайшего соседа.
6. Добавьте процент в поле Ширина и высота, чтобы изменить размер.
7. После завершения выберите OK.

Инструмент Resample в Photoshop позволяет программе посмотреть на изображение и изменить его соответствующим образом при изменении размера. Он очень хорошо подходит для пиксельного искусства и заполняет изображение большинством необходимых данных. На всякий случай перед сохранением следует внимательно осмотреть изображение.

Очевидно, лучше использовать проценты, чем точный размер изображения, так как при этом сохраняется форма каждого пикселя. Если вы укажете размер, Photoshop может изменить форму пикселей, чтобы добиться изменения. При указании процента каждый отдельный пиксель увеличивается на этот процент. При этом сохраняется форма и положение каждого из них относительно соседнего.

При изменении интерполяции на «Ближайший сосед» Photoshop не использует встроенную логику для добавления деталей к изображению. Поскольку мы обычно изменяем размер стандартных изображений, Photoshop угадывает данные, необходимые для сохранения изображения при изменении размера. Нам это не нужно. Нам нужно увеличение размера в процентах пиксель за пикселем без добавления дополнительных деталей. Установка значения Ближайший сосед гарантирует это.

Изменение размера пиксельного изображения по точному размеру

Очевидно, вы можете изменить размер пиксельного изображения до точного размера, если вам это нужно, но это требует немного больше работы. Например, если вы собираетесь опубликовать его в Интернете и у вас есть место для размещения определенного размера, вы можете изменить размер пиксельного изображения до этого размера.

1. Следуйте приведенному выше руководству до шага 6.
2. Добавьте десять процентов к желаемому размеру изображения, чтобы оно было больше, чем вам нужно. Если вы изменили размер изображения до 200% выше, сделайте это до 220% здесь.
3. Откройте Изображение и Размер изображения.
4. Установите ширину и высоту в пикселях до желаемого размера.
5. Измените интерполяцию с автоматической.
6. Выберите OK.

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

Другие графические или фоторедакторы, вероятно, работают так же. У меня нет большого опыта работы с пиксельным искусством, поэтому я приму совет эксперта. Если вы знаете что-то другое или знаете другие способы изменения размера пиксельного искусства без потери резкости, расскажите нам об этом ниже!

YouTube видео: Как изменить размер пиксельного искусства, сохранив резкость

Вопросы и ответы по теме: “Как изменить размер пиксельного искусства, сохранив резкость”

Как изменить размер картинки сохранив пропорции?

Интерполяция1. Выберите команду «Изображение» > «Изменить размер» > «Размер изображения». 2. Выполните команду «Интерполировать изображение» и выберите метод интерполяции: 3. Чтобы сохранить текущее соотношение высоты и ширины изображения, установите флажок «Сохранить пропорции».

Как сохранить пиксель арт без потери качества?

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

Как увеличить пиксельную картинку?

Создание пикселизированного изображения в Photoshop1. Откройте фотографию. 2. Преобразуйте фотографию в смарт-объект. 3. Выполните пикселизацию изображения. 4. Выберите уровень пикселизации. В окне предварительного просмотра переместите ползунок вправо, чтобы увеличить видимый размер в пикселях, или влево, чтобы уменьшить его.

Как в Фотошопе изменить размер изображения без потери качества?

Откройте изображение в Photoshop. Пройдите в пункт меню Изображение и далее Размер Изображения. Перед вами откроется окно с настройками размеров и разрешения вашего изображения. Изображения, которые вы планируете использовать в Интернете, переведите в пиксели.

Как быстро изменить размер картинки?

Проще всего на щёлкнуть правой кнопкой мыши в проводнике на фотографии, разрешение которой Вы хотите изменить, и выбрать в контекстном меню “Изменить”. А затем в приложении Paint нажать “Изменить размер”, ввести в открывшемся окошке новое разрешение в пикселах и подтвердит Ваш выбор.

Как изменить размер изображения в пикселях?

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

Как изменить размер пиксельной графики в фотошопе (видео)

Нужно изменить размер пиксельной графики? Узнайте, как увеличить ваши художественные работы и сохранить четкие и четкие формы с помощью Photoshop!

Из этого урока вы узнаете, как получить отличные результаты при изменении размера пиксельной графики в Photoshop! Пиксель-арт отличается от стандартных изображений и создает уникальные проблемы при изменении его размера. Обычно, увеличивая изображение и добавляя больше пикселей, Photoshop старается не давать результату выглядеть блочным и пикселированным, смешивая пиксели вместе и сглаживая все.

Но «блочный и пиксельный» — это весь смысл пиксельной графики! Итак, чтобы изменить размеры пиксельной графики, нам нужен способ для Photoshop просто добавить больше пикселей, и все. Вместо того, чтобы сглаживать вещи, нам нужно, чтобы формы и края рисунка выглядели четкими и четкими. На этом уроке я покажу вам, как это сделать.

Наряду с изменением размера пиксельной графики, я также использую эту же технику для изменения размера скриншотов, используемых в моих уроках. И вы можете использовать его для изменения размера любой графики, где вам нужно сохранить четкие, резкие края или читаемый текст. Чтобы получить наилучшие результаты на этом уроке, вы захотите использовать Photoshop CC , но подойдет любая версия Photoshop.

Я буду использовать этого маленького персонажа пиксельной графики, который я скачал с Adobe Stock :

Это урок 7 в моей серии «Изменение размера изображения» . Давайте начнем!

Как увеличить пиксель арт в фотошопе

Вот персонаж, открытый в фотошопе. И, как вы можете видеть, он выглядит довольно маленьким:

Шаг 1. Откройте диалоговое окно «Размер изображения»

Лучший способ увеличить пиксельную графику — использовать диалоговое окно «Размер изображения» в Photoshop. Чтобы открыть его, перейдите в меню « Изображение» в строке меню и выберите « Размер изображения» :

В Photoshop CC диалоговое окно содержит удобное окно предварительного просмотра слева, а также параметры размера изображения справа:

Просмотр текущего размера изображения

Текущий размер изображения находится вверху. Рядом со словом « Размеры» мы видим, что мое изображение довольно маленькое, с шириной и высотой всего 500 пикселей:

Шаг 2: Включите опцию Resample

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

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

Шаг 3: Введите процент в поля Ширина и Высота

Вместо того, чтобы увеличивать пиксель-арт до определенного размера, лучший способ увеличить его — использовать проценты . И чтобы избежать искажений и сохранить каждый квадрат в эскизе идеально квадратным, вам нужно придерживаться процентов, кратных 100 (например, 200%, 300%, 400% и т. Д.). Я увеличить изображение, установив как ширину и высоту до 400 процентов :

Это увеличит размеры в пикселях с 500 пикселей на 500 пикселей до 2000 пикселей на 2000 пикселей :

Изменение размера окна предварительного просмотра

Обратите внимание, что, увеличив ширину и высоту в 4 раза, изображение теперь слишком велико, чтобы поместиться в маленьком окне предварительного просмотра. Чтобы увеличить окно предварительного просмотра, я увеличу само диалоговое окно «Размер изображения», перетаскивая нижний правый угол наружу. Затем я нажму и перетащу в окно предварительного просмотра, чтобы центрировать изображение внутри него:

Подробнее: диалоговое окно «Размер изображения» в Photoshop CC — Возможности и советы

Проблема с изменением размера пиксельной графики

Все идет нормально. Либо это? Если мы посмотрим на иллюстрацию в окне предварительного просмотра, мы увидим, что она выглядит неправильно. Вместо того, чтобы края вокруг фигур выглядели четкими и резкими, они выглядят немного мягкими и размытыми:

И если мы посмотрим поближе, то увидим ореолы вокруг фигур, особенно в областях с более высокой контрастностью. Я увеличу изображение, используя кнопки масштабирования в нижней части окна предварительного просмотра. И здесь, на уровне увеличения 400%, мы можем ясно видеть ореолы, особенно вокруг глаз персонажа:

Однако обратите внимание, что если вы щелкнете мышью по обложке в окне предварительного просмотра и удержите ее, ореолы исчезнут, а края будут выглядеть очень острыми, чего мы и хотим:

Но как только вы отпустите кнопку мыши, вы снова увидите ореолы:

Метод интерполяции изображения

Причина в том, что когда вы щелкаете и удерживаете в окне предварительного просмотра, вы видите изображение с повышенной дискретизацией до того, как Photoshop применяет любую интерполяцию изображения . Интерполяция — это то, как Photoshop усредняет пиксели вместе и сглаживает результат. Когда вы отпустите кнопку мыши, вы увидите обложку с примененной интерполяцией. И именно метод интерполяции вызывает проблемы и создает эффект ореола.

Опция интерполяции находится справа от опции Resample. И по умолчанию установлено значение « Автоматически» :

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

Шаг 4: Установите метод интерполяции на Nearest Neighbor

Для этого нажмите на опцию Интерполяция, чтобы открыть список методов, которые мы можем выбрать. Если вы используете Photoshop CC, то метод интерполяции, который Photoshop выбирает для изображений с повышенной дискретизацией, — это « Сохранить детали» . А в Photoshop CS6 он выбирает Bicubic Smoother . Но ни один из них не работает хорошо с пиксельной графикой:

Чтобы повысить качество иллюстрации без усреднения пикселей, необходим метод интерполяции « Ближайший сосед» :

Как только вы выбираете Nearest Neighbor, изображение в окне предварительного просмотра выглядит четким и четким! И если вы щелкните и удержите в окне предварительного просмотра, а затем отпустите кнопку мыши, вы увидите, что на этот раз ничего не происходит. Иллюстрации выглядят одинаково четко до и после применения метода интерполяции.

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

Шаг 5: Нажмите ОК

Когда вы будете готовы пробовать иллюстрацию, нажмите кнопку «ОК», чтобы принять ваши настройки и закрыть диалоговое окно «Размер изображения»:

И теперь мой маленький герой пиксельной графики выглядит намного больше, но все же он сохраняет тот же блочный, пиксельный вид, который мы ожидали:

Как увеличить пиксель арт — краткий обзор

Прежде чем идти дальше, давайте кратко суммируем шаги для получения наилучших результатов при расширении пиксельной графики в Photoshop.

• 1. Откройте диалоговое окно «Размер изображения» («Изображение»> «Размер изображения»).
• 2. Установите для параметра Ширина и высота значение Процент, а затем для получения наилучших результатов выберите процент, кратный 100 (200%, 300%, 400% и т. Д.).
• 3. Измените метод интерполяции на «Ближайший сосед».
• 4. Нажмите ОК.

Как изменить размер пиксельной графики до точного размера

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

Например, увеличив частоту дискретизации на 400%, я увеличил ширину и высоту с 500 до 2000 пикселей:

Но что, если мне нужно, чтобы ширина и высота были немного меньше, например, 1600 пикселей? Если бы я увеличил частоту дискретизации моего изображения 500 px x 500 px на 300%, его ширина и высота были бы равны только 1500 пикселям, оставив его все еще слишком маленьким. А повышение частоты дискретизации на 400% сделало его слишком большим. Что мне действительно нужно было что-то среднее. В этом случае вам нужно изменить размер изображения в два этапа .

Шаг 1. Отобразите пиксельную графику в процентах.

Во-первых, увеличьте образец пикселя, используя процентное значение, кратное 100, что сделает его больше, чем вам нужно. В моем случае, я уже сделал это, увеличив частоту дискретизации на 400%, поэтому первый шаг сделан.

Шаг 2. Повторно откройте диалоговое окно «Размер изображения»

Затем измените его размер во второй раз, на этот раз, чтобы уменьшить его до точных размеров в пикселях. Для этого снова откройте диалоговое окно «Размер изображения», зайдя в меню « Изображение» и выбрав « Размер изображения» :

Шаг 3: Оставьте опцию Resample включенной

Убедитесь , что Resample вариант еще на так что вы можете изменить количество пикселей:

Шаг 4: Установите ширину и высоту в пикселях

Введите нужный вам размер в пикселях в поля Ширина и Высота . Я установлю их на 1600 пикселей:

Шаг 5: Установите метод интерполяции на Автоматический

И наконец, хотя метод интерполяции Nearest Neighbor отлично работает для пиксельной графики с повышенной дискретизацией , вы не хотите использовать его при понижающей дискретизации. Вместо этого для получения самых резких результатов измените метод интерполяции обратно на автоматический . Это вернет управление обратно в Photoshop, а при уменьшении количества изображений автоматически выберет Bicubic Sharper :

Когда вы будете готовы изменить размеры иллюстрации до точного размера, нажмите кнопку ОК, чтобы закрыть диалоговое окно, и все готово:

И там у нас это есть! Вот как можно добиться наилучших результатов при изменении размера пиксельной графики, снимков экрана или аналогичной графики в Photoshop! В следующем и последнем уроке этой серии мы рассмотрим лучший способ увеличения изображений в Photoshop CC с помощью новой функции, известной как Preserve Details 2.0 !

Или посмотрите предыдущие уроки этой серии:

• 01 — пиксели, размер изображения и разрешение
• 02 — Команда Photoshop’s Image Size — Особенности и советы
• 03 — Как изменить размер изображения для печати с помощью Photoshop
• 04 — Как изменить размер изображения для электронной почты и обмена фотографиями
• 05 — Как рассчитать размер изображения
• 06 — правда о разрешении изображения, размере файла и сети
• 07 — Как изменить размер пиксельной графики
• 08 — Лучший способ увеличить изображения в Photoshop CC

И не забывайте, что все наши учебники теперь доступны для скачивания в формате PDF !

Как менять размер пиксель-арта без потери качества ⁠ ⁠

Привет. Хочу поделиться своей находкой, которую только что обнаружил в редакторе. Не буду говорить, что рисовал, сразу к методу. Нам понадобится paint.net ( полное название программы, не сайт ). Рисуем спрайт:

Идём во вкладку «изображение» и нажимаем «изменить размер»

В строке «перерисовка» выбираем «метод соседних пикселей»

Я поменяю свой быстроскетч на с 42х17 на 64х26

Но можно и больше:

Незначительные ошибки можно подредачить:

Ну вот и всё. Надеюсь, кому-то помог. Спасибо за внимание :>

Играйте в старые-добрые Танчики с новой графикой из настольной игры СУПЕРТАНК!⁠ ⁠

Если вы являетесь большим поклонником оригинальной игры Battle City, то у нас для вас есть хорошие новости. В старую игру теперь можно поиграть на компьютере с новой 16-битной графикой из настольной игры СУПЕРТАНК.

Эта графика была нарисована для настольный игры СУПЕРТАНК.

И специально для всех поклонников оригинальной игры мы сделали этот HD Pack для эмулятора приставок Mesen.

Что нужно, чтобы сыграть в старые-добрые танчики с новой графикой:

1. Скачать эмулятор консоли NES-Famicom под названием Mesen.

2. Скачать rom-файл оригинальной игры (он имеют раширение *.nes). Подойдет оригинальная версия или ее китайский хак TANK 1990.

3. Скачать HD паки для эмулятора, который новый арт и заменят старую 8-битную графику на новую 16-битную.

4. Запустить эмулятор, открыть в нем rom нужной игры и потом в эмуляторе через меню загрузить HD Pack из архива.

Все нужные файлы мы собрали по ссылке.

HD Pack подходит как для оригинального roma японской версии игры, так и для китайского взломанной версии TANK 1990, где среди бонусов есть «пистолет» и «кораблик», а враги тоже подбирают бонусы.

Плюшки предзаказа игры СУПЕРТАНК получат все участники кампании!⁠ ⁠

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

До конца кампании по предзаказу осталось 10 дней. Ближайшая сверхцель практически с 100% вероятностью будет достигнута. Поэтому мы решили, что ВСЕ УЧАСТНИКИ оформившие предзаказ получат полный набор дополнительных плюшек предзаказа, которые полагались до достижение сверхцелей компании, а именно:

Наклейка и открытка

Набор стикеров с артом из игры: танчики, бонусы и ландшафт

2. Набор стикеров с танчиками, бонусами и ландшафтом из игры. Этим наклейками можно украсить свой телефон или ноутбук. Или как вариант из наклеек можно создать целую сцену в виде уровня из игры.3. Наборк наклеек с персанажами из игры и их коронными фразами, которые отсылают нас к боевикам 80-90-ых годов.Мы считаем, что помимо хорошей скидки в 25% у все участники предзаказа должны получить дополнительные плюшки, за то, что поддержали наш проект еще до получения нами тиража игры — так что плюшки достанутся всем!

Набор стикеров с персонажами из игры

3. Наборк наклеек с персанажами из игры и их коронными фразами, которые отсылают нас к боевикам 80-90-ых годов.

Мы считаем, что помимо хорошей скидки в 25% у все участники предзаказа должны получить дополнительные плюшки, за то, что поддержали наш проект еще до получения нами тиража игры — так что плюшки достанутся всем!

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

Часть 12. Дневник разработки настольной игры по мотивам танчиков для Dendy. Зачем нужна анимация в настольной игре?⁠ ⁠

В одной из частей дневника мы рассказывали о том как менялся арт игры от самого первого прототипа до того момента как мы начали дневник разработки. С тех пор прошло почти полгода и арт снова претерпел изменения.

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

Пиксель-арт персонажей игры от 2-битного до финального 16-битного

Пиксель-арт иконок бонусов от 8-ми до финального 16-ти битного

Пиксель-арт жетонов ландшафта от 8-ми битного до финального 16-ти битного

Более того, мы озадачились дополнить кампанию по предзаказу анимацией нашего арта. Пиксель арт значительно выигрывает если он еще и анимирован.

Понятно, что в настольной игре анимацию применить негде, но мы придумали, что промоматериалы вполне могу ее содержать. Одной из свехцелей предзаказы будут анимированные стикерпаке для мессенджера Telegram. Мы анимировали арт танчиков — теперь они и едут и стреляют.

Но еще сильнее мы озадачились анимацией персонажей игры — Генералов. Т.к. все персонажи игры отсылают нас к боевикам 80-90-ых годов, то мы дополнили анимации коронными фразами этих персонажей.

Анимация одного из персонажей игры для стикера Telegram

Суммы для достижения сверхцелей прездазаказа мы поставили минимальные и скорее всего наборы анимированных стикеров с танками и персонажами игры станут доступны для всех.

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

P.S. Две хорошие новости в конце.

1. Кампания достигла второй сверхцели и теперь все анимированные стикеры для Telegram доступны всем. Скачать и установить стикеры можно по ссылкам:

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

Наклейка и открытка

150 000 рублей — и все заказавшие игры получат в подарок наклейку для ноутбука и открытку с артом из игры.

Стикерпак #1 c артом из игры

200 000 рублей — все заказавшие игру, помимо открытки и наклейки получат физический стикерпак с наклейками. На наклейках будет арт из игры: танки, бонусы и ланшафт.

Стикерпак #2 c персонажами игры

250 000 рублей — все заказавшие игру, помимо открытки, наклейки и стикерпака №1 получат еще и второй физичиский стикерпак с персонажами из игры.

Наша настольная игра СУПЕРТАНК по мотивам танчиков для Dendy ушла в тираж⁠ ⁠

В ноябре выходил последний пост дневника разработки нашей настольной игры СУПЕРТАНК по мотивам танчиков для Dendy. Все это время мы активно готовили игру к отправке в производство. На данный момент игра отравлена в тираж и в конце апреля-начале мая мы его получим и разошлем в магазины.

Пока на сайте Crowd Republic у нас сегодня стартовал предзаказ. Это хорошая возможность получить игру раньше всех и дешевле на 25% чем она будет стоить в магазинах и на маркетплейсах.

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

Дневник разработки настольной игры по мотивам танчиков для Dendy⁠ ⁠

О референсах визуального стиля игры. Часть 10

В продукте важная часть которого составляет визуал важны источники вдохновения, идеи для творчества — референсы. Мозг человека по своей природе ленивый кусок плоти и приучен экономить ресурсы. Он гоняет нервные импульсы по уже протоптанным дорожкам, цепляется за знакомые образы, и упрощает восприятие новой информации.

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

Мы начали с того, что определили как будут выглядеть компоненты настольной игры, т.к. это то, с чем игроки будет взаимодействовать в первую очередь. За основу мы взяли арт оригинальной игры: тайлы местности, бонусы, внешний вид танков, палитру. Для референсов мы использовали арт версии для NES, для Gameboy и вообще игр с похожей стилистикой.

Спрайты BATTLE CITY для Gameboy и NES

Мы выделили какие детали арта будут нас отсылать к оригинальной игре.

Например, виды местности в игре характерно отличаются по цвету: кирпичи красные, кусты зеленые, вода голубая, а бетон серый. Мы мы сохранили эту цветовую гамму, но перерисовали эти тайлы.

Сравнение арта спрайтов местности версии BATTLE CITY для Gameboy, NES и настольной игры

Иконки бонусов имеют темно-синий фон, яркую белую рамку и сам символ бонуса тоже ярко-белого цвета. Мы оставили эту цветовую гамму для бонусов, но изменили разрешение арта.

Сравнение арта спрайтов бонусов версии BATTLE CITY для Gameboy, NES и настольной игры

Сами танки в оригинальной игре имели различия по цвету: зеленый и желтый — союзники, силы добра, а враги — белые и красные. У игроков было три вида апгрейда танка и каждому уровню соответствовал свой дизайн танка. Типы врагов тоже отличались между собой и соответственно отличалbсь дизайн. Помимо стандартного вражеского танка, присутствовал быстрый бронетранспортер, танк с быстрыми пулями и бронированный танк. Отличия по цвету мы отразили в арте игры. У каждого танка свой цвет. Различия дизайна танков чисто формальное, для разнообразия и не несет никакого функционала.

Сравнение арта спрайтов танков версии BATTLE CITY для Gameboy, NES и настольной игры

Сравнение арта настольной игры и оригинальной BATTLE CITY для NES

Мы уже писали, что идея Генералов, персонажей, которые управляют танками и дают им особые свойства появилась благодаря игре Broforce, которая обыгрывает образы популярных героев кинобоевиков 80-90-х годов: Рембо, Терминатор и другие.

Сравнение спрайтов игры Broforce и арта настольной игры

Также мы сделали отсылку к персонажам популярной серии игр Contra от Conami. На иллюстрации для нашей игры изображены персонажи очень похожие на героев этой игры — мощные суровые мужчины.

Варианты иллюстрации на коробку с настольной игрой СУПЕРТАНК

Суровые мужчины с обложки игры Contra от Conami

Также мы хотели, чтобы визуально наша игра была «войнушкой в песочнице».

Как референс композиции на обложке мы использовали игры General Chaos для Sega Mega Drive,Team Fortress 2 от Valve и арты обложек оригинальной Battle City для NES и Gameboy. Гротескные персонажи этой игры нам кажется хорошо передают атмосферу игрушечной войны.

Арт игры General Chaos

Арт игры Team Fortress 2

Обложка BATTLE CITY для NES и Gameboy

Для дизайна танков на обложке игры мы как референсы давали художнику арт техники из популярной серий игр Metal Slug и Advance Wars. Нам нравится как выглядел арт техники в этих играх, особенно Metal Slug, т.к. к этой игре в гротескном стиле удалось сделать отсылки в технике времени Первой и Вторых Мировых войн.

Арт игры Metal Slug

Арт к серии игр Advance Wars

Логотип игры для обложки мы делали по мотивам игры Mercenary Kings крутейший пиксель-арт художника Пола Робертсона. Если что это тот художник, который создал арт серии комиксов про Скотта Пилигрима.

Арт из игры Mercenary Kings

Мы собрали в наш логотип отсылки к самым узнаваемым образам игры: орлу-штабу, и бонусам «звезда». Звезд в логотипе три. Столько звезд нужно собрать по правилам игры, чтобы ваш танк стал СУПЕРТАНКОМ.

Иллюстрация для коробки настольной игры СУПЕРТАНК

Настольная игра по мотивам танчиков для Dendy⁠ ⁠

Солнечное субботнее утро. Родители уехали на дачу. Китайская восьмибитная приставка, цветной телевизор «Рубин» и россыпь желтых картриджей в вашем полном распоряжении. Никто не скажет: «Посадишь зрение и кинескоп!» — играй хоть до посинения. Картридж уже в приставке, джойстик в руках, вы нажимаете «start» и из динамика телевизора раздается знакомая восьмибитная мелодия.

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

Взрослый человек, чье детство пришлось на 90-ые хоть одним глазком, но видел эту игру и слышал знакомую мелодию. Как правило картридж с этой игрой шел в комплекте с китайской приставкой-клоном знаменитой восьмибитной Dendy. На картридже была оптимистичная надпись «9999 games in 1». Правда, больше часть этих игр составляли взломанные копии тех самых «танчиков», типа Tank 1990, но кого это смущало.

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

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

Очевидная идея — сделать новую компьютерную игру по мотивам. Но оригинальная игра и по сей день отлично играется и этим ценна.

Поэтому мы объединили, то что любим сами — настольные игры и пиксельный ретро-стиль компьютерных игр нашего детства. В итоге получилась настольная игра по мотивам любимых «танчиков».

Это первый пост в серии, в дальнейшем мы расскажем о основных аспектах разработки настольной игры:

Как сделать Pixel Art в высоком качестве?

Если вы хотели спросить, как увеличить изображение 16х16 до 1000х1000 без сглаживания (antialiasing), то решение зависит от редактора, которым вы располагаете. Скажем, в IrfanView нужно просто указать опцию Resize вместо Resample.
В обычном Microsoft Paint вообще ничего не нужно выключать — он не умеет делать сглаживание при увеличении, потому просто превращает один пиксель в столько, во сколько раз вы увеличиваете изображение.

Но если вы спрашиваете не об этом, а о том, как увеличить изображение в стиле pixel art так, чтобы толщина линий на нем не увеличивалась, а увеличивалась только площадь заливок и длина линий (см. иллюстрацию ниже), то ответ — никак.