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

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

Игра из 5-го места ничем не хуже игры на 1 месте.

А сегодня я расскажу тебе как убить время. Я про вторую часть топа 5 игр с пиксельной графикой.

Освобождай память в телефоне, делай чай или кофе, я начинаю.

Часть 1

1. Pip and Pit

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

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

2. Drive Ahead!

Я играла в эту игру очень давно. С младшим братиком мы сидели и устраивали PvP на одном телефоне. Было здорово. Графон, как видишь на высоте. Ну а геймплей тебя просто засосет в смартфон и не отпустит ближайшие пару часов.

Попробуй челлендж: выиграть на детской коляске против монстр-трака

3. WorldBox - Sandbox God Simulator

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

Про графику тут даже не надо и говорить: она хоть и минималистична, но очень красива.

4. Minecraft: Story Mode

Перед тобой Шедевр среди всех игр от Telltale Games. Шикарная графика, завлекающий сюжет, QTE, увлекательный геймплей. Это все про нее.

Хочу внести небольшую ремарочку:

В данной игре используется технология вокселей (те же пиксели, только в 3d).

5. Tomb of the Mask

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

Уровней очень много. Вот прям очень!

Спасибо, что прочитал эту статейку. Приятного тебе времяпрепровождения ♥

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

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

Прежде всего это:

• деревья
• столы
• лавочки
• лестница ступенчатая
• башни

Итак, для начала давай посмотрим в существующих текстурах, что у нас есть.

Для начала нарисую лавочку в нескольких ракурсах.

Совет: если хочешь сделать тень и не использовать карты нормалей, используй черный цвет с прозрачностью 10-15%.

Начинаю рисовать столы.

Следующая по списку ступенчатая лестница.

Теперь я буду рисовать башенку.

Поехали!)

Башенка готова.

Спасибо, что прочитал статеечку. Скоро буду рисовать общие текстурки, которые понадобятся для всех сцен.

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

Это позволяет создавать более объёмные спрайты, которые будут реагировать на освещение под любым углом. Карта нормалей состоит из цветов которые берутся в специальной палитре.

Палитра выглядит следующим образом.

Верхние цвета наносятся на верхнюю часть спрайта, нижние на нижнюю и так далее.

А что нужно сделать, чтобы нарисовать карту нормалей?

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

Вот так выглядит карта нормалей. После рисования ее надо сохранить в PNG формате. Как видишь, процесс довольно долгий, но интересный.

А сейчас я покажу тебе карту нормалей в деле 😏

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

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

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

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

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

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

Для кого нужен Pinterest?

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

Что здесь можно найти?

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

И заметь, что это все совершенно БЕСПЛАТНО

Тебе, мой хороший, даже регистрироваться не обязательно.

Так использовать мне Pinterest или нет?

Пф, ты еще спрашиваешь? Этот сайт должен быть у тебя по умолчанию в закладках Chrome или Яндекс Браузера. Я не представляю себе рисование без него.

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

Так что заваривай себе либо чай, либо кофе и я начну.

И вот наш пациент. Та-да-да-дам!

Что тут можно увидеть? Стоит толпа людей, с оружием и знаменами на какой-то горе. А на заднем фоне закат или рассвет. Я так и не поняла.

И первая ошибка, которая бросается в глаза это вырвиглазные цвета. Да-да-да. Самая главная и роковая ошибка. Ну если не получается у тебя подбирать цвета, если ты не умеешь пользоваться цветовым кругом, зайди в adobe color, colorscheme или другой халявный сайт. Там уже есть готовые палитры.

Давай я объясню, если ты не понимаешь. Гора, на которой стоят эти люди, или солдаты, имеет оттенок от красного цвета. Рассвет имеет более-менее плавный переход. К нему я еще придерусь. И на фоне всего этого люди смотрятся как большие серые пятна. Я поначалу не поняла, что это за рисунок и что на нем изображено.

Вторая ошибка - дизеринг. Если ты не знаешь это, я уточню.

Дизеринг - это, простыми словами, плавный переход от одного цвета к другому

Видишь места, где идут пиксели в шахматном порядке? Это он и есть.

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

Здесь дизеринг ничуть не помог улучшить красоту.

Третья ошибка - задний фон. Взгляни на рассвет(или закат). Я так и не поняла что это. Такое ощущение, что солнышко в 2 метров от них. В пиксель арте есть такое понятие, как воздушная перспектива. Она заключается в том, что все объекты на заднем фоне имеют немного прозрачности (15-20%). Это создает туман, что отображает задний фон далеко от объектов переднего плана.

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

Пятая ошибка - отсутствие света как такого. Нет никакого освещения ни на людях, ни на оружии, ни на знаменах, что они держат.

Шестая ошибка - неестественность. Люди не одинаковых размеров. У одного ноги в 3 метра, кто-то неприлично маленький, а у кого-то оружие выше человеческого роста.

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

Приветик. Я долго думала на какую тему мне написать статейку. И всё-таки, я решила. Напишу на тему моего прихода в рисование пикселей.

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

Я постоянно искала себя: создание музыки, написание скриптов и парсеров на python; разработка сайтов на HTML, CSS, JS; создание своего анимационного мультфильма в Майнкрафт тематике и написание своего фанфика (10 глав). Всем этим, я начинала заниматься и бросала так и не закончив.

С тобой, наверное, тоже такое бывает: занимаешься чем-то, а потом выгораешь. Весь энтузиазм пропадает, теряется интерес, внутри чувствуешь пустоту.

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

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

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

Но деньги всегда были плохой мотивацией. И вот, я проверила это на свой шкуре. У меня было отлично с писательством, хотя по русскому у меня твёрдая 4. Людям понравился мой мультик на Ютубе. Музыка была сделана старательно и на совесть, а моя первая серьёзная программа продана за 5000 рублей и до сих пор работает у заказчика.

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

4 месяца назад я наткнулась на видео человека по имени artalasky. Он занимается разработкой игр на движке Unity в одиночку.

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

Я захотела создавать игры.

Включив своего мэтра (я про комп), я принялась тыкать в unity все что тыкалось и не тыкалось. Но ничего не получалось.

Тогда я подумала: "Что нужно для создания игры? Музыка, сценарий, графика, скрипты, анимации. Это все требуется."

"Почему бы не заниматься только графикой?" – сказала я себе – "Я же ничем не хуже арталаски. Начав заниматься одним делом я достигну куда большего успеха.

Да, это очевидно.

Заниматься пиксельной графикой я начала не сразу. Начала я с воксельной. Представь себе пиксель в 3д. Это воксель.

Когда-нибудь, я напишу об этом статью.

Я делала все, что попадалось под руку, вступила во все группы вк. И когда люди увидели, что я регулярно выкладываю свои работы, мне поступило предложение. Юный инди-разработчик предложил поработать над его проектом. Нужно было сделать модели.

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

Но вот игра закончена, проект загружен в гугл плей и после тщательной гугловской модерации начинаются скачивания. Где же деньги?

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

Так мои 72 модели осталось неоплаченными. Я впала в депрессию. С творчеством завязала на 2 месяца.

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

Так я начала заниматься пикселькой. Я занимаюсь ею 4 месяца. За это время я рисовала много различных полотн пиксель арта, спрайтов и график паков.

И я даже не думаю на этом останавливаться.

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

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

Спасибо, что ты у меня есть ♥.

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

Знай себе цену. И занимайся тем, что любишь ❤

А на этом я с тобой прощаюсь. Делай выводы и до встречи 👋 😘

10. Headshot ZD

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

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

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

Лично я получила огромное удовольствие 😊

Доступна на андроид.

9. One Bit Adventure

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

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

Игра также доступна в Play Market.

8. Noita

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

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

Это настоящий мед для глаз😊.

Данная игра есть в steam (10.49$).

7. Terraria

Ну эта игра точно в представлении не нуждается. Графика просто на высоте. Хоть анимации и примитивные, они не режут глаза. Освещение тоже приятное. Текстуры все читаются и выглядят приятно. Цвета не конфликтуют.

Игра есть в steam и андроид(6.99$).

6. Minecraft

Я чуть не забыла про эту игру. Надеюсь, ты на меня не сердишься? 😻

Думаю не стоит говорить, что тут идеально ВСЁ: текстуры, монстры, анимации, персонажи, эффекты, постобработка.

Если ты не играл в неё, значит ты не с этой планеты 😀.

Она доступна на всех платформах. На PC (23.95 €) и андроид (7.95 $).

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

5. The Escapists

Примитивная графика, деревянные анимации играют маленькую роль по сравнению с Геймплеем. Думаю, не надо говорить о чем игра.

Доступна в steam (11.59 $) и на андроид (6.66 $)

4. Distraint: Pocket Edition

Хоррор-игра про налогового инспектора с невероятно атмосферной графикой. Анимации такие же деревянные, но немного более оживленные, чем в Terraria. (Не кидайтесь помидорками 🙏)

Игра доступна в Play market-e бесплатно.

3. Mini DAYZ

Пиксельный аналог с ОГРОМНЕЙШИМ открытым миром. Эти дорожки, тропинки, деревца – все реалистично. До сих пор в нее гоняю 😏.

Доступна на андроид бесплатно.

2. Stardew Valley

Фермерская РПГ с очень даже достойной графикой. Задний фон, спрайты отрисованы на совесть.

Доступна в steam (9.99 $).

1. Hyper Light Drifter

Когда-то эта игра набрала на Kickstarter-e 600 000 $ вместо 25 000$. И эти деньги не прошли даром. Ты посмотри на эту графику. Каждый пиксель тут был поставлен с ювелирной точностью. А размер игрового пространства может дать фору большинству игр выше.

Эта игра доступна в steam (19.99 $)

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

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

Тут мне придётся тебя разочаровать. Любой предмет из этих игр можно нарисовать в точности не напрягаясь.

Эта статья была для тебя посылом, что это одна из сфер, где ты сможешь найти себе применение.

Так я ответила на твой главный вопрос: "Зачем мне рисовать пиксельку?"

Затем, что это легко, просто, интересно и прибыльно.

Свой варианты для следующей подборочки отправляй в комментариях.

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

Для начала я рисовала макет(на бумажке). Ну думаю, это итак понятно. Макет нужен для того, чтобы понять где какие объекты должны находиться (увы, я его не сохранила).

Внимание! Я никаких палитр не использовала. Подбирала цвет сама. Да, я горячая штучка XD

После этого начался творческий процесс.

Все началось с круга

Поскольку телеграм обрезает фото в круглый размер для миниатюры. Впрочем, сейчас это делают везде: whats app, fb, vk, pinterest, даже Яндекс.

После этого начала рисовать сам пол.

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

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

Сверху я сделала потолок. Обычный потолок темного цвета.

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

Пару минут и окно было готово. Обычное окно со стеклами.

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

На заднем плане я поставила небольшую елочку с подарками. Подарочки получились очень миленькие.

А на заднем фоне, я повесила гирлянды для большей атмосферности.

И тут я вспомнила, как в других странах люди отмечают Рождество. Они вешают носочки для конфет. И я подумала: "Почему бы мне не сделать также?". Сказано - сделано.

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

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

Теперь я начала работать с освещением. Сколько чая было выпито, сколько нервных клеточек я убила (((

Но получилось вот что.

Согласна, теней немного не достает. Я вынесла их в отдельный слой.

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

В общем и целом, я потратила на данную работу около 5 часов +-. И мне данный результат нравится.

С чего начинается рисование? Конечно же, с подбора цвета. Сперва, захожу на сайт colorhunt.co и выбираю понравившуюся мне палитру цветов.

Мне понравилась вот эта

Открываю Aseprite и начинаю рисование.

Я составила список элементов, которые буду отрисовывать.

Для начала сделаю кнопочку Play.

После неё буду рисовать кнопку для настроек.

Теперь сделаю кнопочку для изменения громкости. У неё будут два состояния: со звуком и без звука.

Как видишь, милый я использую 3 цвета из палитры.

Теперь нужно создать поле для ввода текста.

Вот такое вот текстовое поле у меня получилось.

Думаю, теперь пора создать текстовый курсор.

Вот так выглядит textbox вместе с курсором.

Так, теперь пришла очередь рисовать Label.

Вот такой вот курсор получился.

Теперь самое время сделать загрузку.

Чтож, сейчас нужно сделать выпадающий список.

Выпадающий список готов.

Тут я закончила делать стрелочку для увеличения или уменьшения значения числа.

И последнее мне осталось сделать небольшой чекбокс.

Вот чекбоксик и готов.

Теперь нужно анимировать все элементы UI.

Вот так у меня все получилось.

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

Мне самой очень понравился результат. С ограниченной палитрой элементы смотрятся более гармонично.

Приступаем к рисованию. Для начала я наметила, где будет пол, а где будет стена данной таверны.

Сразу распределяю все по слоям, чтобы потом не путаться

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

Я закончила полы.

Теперь начинаю делать стены.

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

Итак, стены тоже готовы. Теперь нужно подумать, что может быть в таверне.

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

Понадобятся и источники освещения: , свечки на столах. Также можно поставить камин и дверь для входа на склад, откуда бармен будет приносить еду или питье. Для окружения можно добавить кое-какие объекты окружения: кошечку, спящую на стуле, поиграться с освещением.

Чтож, за дело.

Для начала я создам барную стойку.

Я наметила небольшой её макет. Сейчас её доработаю.

Вот такая вот барная стойка у меня получилась.

А теперь внимание! Смотри, мой хороший, как улучшает обводка.

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

Теперь я данный объект еще немного доработаю.

Как ты заметил, я добавила верхнюю часть и тени. Скажу сразу, как я делаю тени - создала отдельный слой Shadows (имя может быть любым), выбираю черный цвет и ставлю непрозрачность примерно на 10% +-. Таким образом затемняются те цвета, которые я закрашиваю. Все гениальное просто. Еще я хочу добавить небольшие фонарики, которые будут свисать с верхней части барной стойки. Но их я добавлю немного позже. Теперь я собираюсь создать боченки.

акет для стенда из бочек. Теперь надо его доработать.

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

По-моему, получилось красиво.

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

Небольшой макет готов.

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

Настала очередь самого трудного - КАМИНА!!! Л

Пока что работа над камином закончена. С освещением

Теперь можно заняться столами и стул.

А вот так выглядит стул

Теперь нужно сделать обустройство для стол

Самое время сделать тарелку с едой. Из еды будет хлеб и сыр.

Вот что пока получилось. Сейчас я думаю заняться соз

Вот я добавила освещение, табуретку и кружку с пивом (если что я против алкоголя).

Теперь надо поработать над освещением.

Вот что пока мись получилось.

Иии вот, что получилось в итоге.

Как видишь, освещение стало более насыщенным. Сейчас я расскажу

Слой Light - это сами точки освещения.