Pull to refresh
41
0
White @MaxiS

User

Send message

«Галоп пикселя — часть пятая» — Анимация персонажей. Ходьба

Reading time30 min
Views39K


«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)

Доброго времени суток, Хабр. Мы продолжаем цикл «Галоп Пикселя». Сейчас, находясь на старте 2019 года, можно с уверенностью говорить, что это не только цикл статей, но и многолетняя сага. Пространное повествование о пикселях, их жизни, способе их создания, приёмах и уловках в работе с ними. Мы не будем рассуждать о причинах первоначального «спринта», который затем превратился в многолетний марафон, ибо нет ничего более жизненного, чем сама жизнь. Кому нужны причины отсутствия или пауз, если можно просто вернуться к тому, что мы делали, в чём варились, и в чём, даст бог — будем наблюдаться и далее. В пикселях, конечно же!

Сегодняшняя публикация станет очередной, и возможно даже поворотной вехой в нашем повествовании. Наконец-то мы подошли к созданию полноценной анимации персонажей. Двумя предыдущими главами мы охватили анимацию света и тени, а также анимацию неподвижных персонажей (idle-animation) без ярко выраженных действий. Но сегодня наши персонажи пойдут, а в следующей части даже побегут, завоевав то, что уже давно их по праву рождения. Ещё один плодородный регион. И пройдут ещё одну точку, которая ознаменует окончание базового цикла. Наши пиксели наконец-то станут живыми.

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


Лопатить пиксели
Total votes 94: ↑88 and ↓6+82
Comments30

Дизайн низкополигональных персонажей

Reading time8 min
Views44K
image

Персонаж — это личность. Без истории нет индивидуальности. Каждый хороший персонаж начинается с истории, а дизайн персонажа должен рассказать эту историю.

В своей предыдущей статье How To Make Low Poly Look Good я говорил, что главная цель низкополигонального (low poly) дизайна — донести сообщение через наименьшее количество форм.

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

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



Я буду работать в Blender. В Maya, Max и других 3D-редакторах есть похожие инструменты, так что не беспокойтесь об этом.
Читать дальше →
Total votes 56: ↑56 and ↓0+56
Comments14

Фоны старых квестов — методы разработки, секреты, советы

Reading time12 min
Views43K


Сегодня мы исследуем вопрос разработки фонов «как в старых адвенчурах». Это не совсем то, чего вы от меня ожидали. Однако, очередная часть «Галопа Пикселя» задерживается по двум серьезным причинам. Во-первых, главы посвященные анимации требуют — качественной анимации, иначе они не смогут претендовать на лавры материала обучающего. Во-вторых, «галопу» необходима ещё одна публикация до начала цикла об анимации, который уже находится в разработке. Связано это с тем, что я занимаюсь не только классическим пиксель-артом, но и тем, что выходит за пределы канонических разрешений, и у меня, определенно, есть чем поделиться. К сожалению, такой тип пиксель-арта сейчас более моден, чем классика, если судить по откликам публики.

Давайте, впрочем, вернемся к теме сегодняшней публикации. Считаю это маленьким открытием, и мне непременно нужно поделиться им с теми, кто собирается соединить некоторый отрезок своей жизни с тем, что может называться классической адвенчурой. Быть может это поможет вернуть на рынок игры, которые немного оттеснят «хипстерский пиксель» заменив его на то, что может напомнить времена лучших игр от «Westwood Studios», «Sierra» и «Lucas Arts». Предположу вскользь, что множество художников и так знают это. И, тем не менее — я не заметил публикаций на эту тему. Наша братия не спешит делиться своими секретами, сохраняя некую монополию на собственные открытия.

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


Продолжить копать
Total votes 107: ↑103 and ↓4+99
Comments59

«Галоп пикселя — часть четвертая» — Анимация света и тени

Reading time18 min
Views30K


«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)

Доброго времени суток Хабру и ценителям пиксель-арта, поклонникам квадратных точек, адептам лимитированных разрешений и цветов. Рад представить на ваш суд очередную статью из цикла «Галоп Пикселя». Не буду тратить время на оправдания моего долгого отсутствия и в виду явного присутствия перейду к сути дела. Сегодня мы продолжим изучать анимацию. На этот раз это будет анимация света и тени. Большей частью на статических объектах. Всё помнят – сначала база. Сначала фундамент. Сначала простое. Ну а сложное ввалится в ваши двери само, вслед за детишками.

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

Цель этой статьи показать насколько силён дуэт брата и сестры, Света и Тени в движении. Мы уже видели, как они преображают сцены в статике. Но динамика нам ещё не знакома. Давайте исправим это упущение.

Лопаты в руки.


Лопатить пиксели
Total votes 112: ↑112 and ↓0+112
Comments51

«Галоп пикселя — часть третья» — Анимация

Reading time32 min
Views75K


«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)

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

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

Не смотря на то, что вторая часть цикла о пиксель-арте собрала куда меньше положительных отзывов и согласно статистике пользовалась меньшим успехом на Хабре — мы продолжим копать пиксель-арт так, чтобы исследованные нами территории перестали быть белыми пятнами, чтобы мы могли, наконец, воздвигнуть здесь надежный укрепрайон. Популярность вещь приходящая и уходящая. Было бы смешно руководствоваться исключительно ею. Тем более что есть люди, которые настояли на скорейшем выпуске этой части цикла. Я ещё коснусь этой темы в конце публикации.

Лопаты в руки.


Лопатить пиксели
Total votes 103: ↑99 and ↓4+95
Comments21

«Галоп пикселя — часть вторая» — перспектива, цвет, анатомия и прикладные упражнения

Reading time40 min
Views89K


«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)линк)

Первая статья данного цикла была воспринята тепло, вследствие чего затягивать с продолжением не имело никакого смысла, но, увы – это произошло. Зимнее наступление захлебнулось и плавно переросло в летнюю кампанию. В конце статьи я объясню почему, не хотелось бы вас огорчать с самых первых строк. Итак. Публика выразила желание ознакомиться с предметом глубже, чем предполагалось изначально. Большое количество писем пришло на почту, наряду с регулярными тычками в социальных сетях. В этом месте мне вспоминается одна фраза – «будьте осторожны в своих желаниях».

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

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


Лопатить пиксели
Total votes 112: ↑110 and ↓2+108
Comments27

300 потрясающих бесплатных сервисов

Reading time11 min
Views1.6M


Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly.com Domain: Конструктор веб-сайтов.
  • Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
  • Withoomph: Мгновенное создание логотипов (англ.).
  • Hipster Logo Generator: Генератор хипстерских логотипов.
  • Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
  • Invoice to me: Бесплатный генератор счета.
  • Free Invoice Generator: Альтернативный бесплатный генератор счета.
  • Slimvoice: Невероятно простой счет.

Читать дальше →
Total votes 341: ↑325 and ↓16+309
Comments107

Освоение HTML5 тега audio

Reading time3 min
Views190K
С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.
Читать дальше →
Total votes 51: ↑30 and ↓21+9
Comments19

Как создать веб-сайт, используя видео с YouTube в качестве фона?

Reading time9 min
Views86K


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

Кроме того видео-фоны могут воспроизводиться плавно и без «тормозов» в отличие от фонов, созданны с помощью JavaScript, которые требуют загрузить определенный код и изображения прежде чем пользователь увидит результат анимации.

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

Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.

В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!

Скачать исходники
Демо
Читать дальше →
Total votes 75: ↑45 and ↓30+15
Comments55

«Галоп пикселя — часть первая» — базовые понятия, этапы взросления, прикладные упражнения

Reading time42 min
Views266K


«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)
«Галоп пикселя», часть VI — Анимация персонажей. Бег (линк)

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

В данной публикации мы не рассматриваем программы, но копаем нечто большее. Сами пиксели. От истоков, начав с четырехцветной CGA-эры, вплоть до эпохи ренессанса. В публикации мы не рассматриваем игры, не поем дифирамбы художникам прошлого (разве что самую малость), занимаясь именно процессом создания простейшего пиксель-арта. Данный материал будет интересен начинающим артистам и интересующимся. Статья практически не содержит теории, нудных умозаключений и представляет сторонний взгляд на мир пиксель-арта со стороны некоего самоучки, который предпочел открыть каждую из Америк самостоятельно, не оглядываясь на официальных, общепризнанных и задокументированных Колумбов. Статья снабжена обильным количеством поясняющих иллюстраций, примеров, и советов.

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


Лопатить пиксели
Total votes 190: ↑185 and ↓5+180
Comments86

Для чего blender фотографу?

Reading time3 min
Views51K
Существуют ли эмуляторы фотостудий? Таким вопросом однажды задался мой товарищ, изучая цены на аренду осветителей и вспоминая первые эксперименты с настольными лампами и листами ватмана. Хороший студийный свет стоит дорого, требует затемненное помещение и специальные фоны. В виртуальном мире эксперименты со светом не ограничены ничем, а результат можно повторить в реальности имея готовую схему. Мы отыскали несколько приложений. Платное и даже онлайн. Но руки чесались сделать что-то своё. Выделил пару выходных на благодатное дело и смоделировал виртуальную студию с пресетами освещения и «фотомоделью» Сюзанной — маскотом свободного 3Д редактора blender.



Читать дальше →
Total votes 68: ↑66 and ↓2+64
Comments25

500 слов в минуту без подготовки

Reading time1 min
Views518K


Обычная скорость чтения на русском языке составляет 120—180 слов в минуту. С помощью долгих тренировок можно повысить её где-то до 600 слов в минуту. Совсем недавно небольшой стартап из Бостона представил новую технологию под названием Spritz.

Мне удалось без подготовки читать со скоростью 500 слов в минуту. Разработчики утверждают, что можно достигнуть 1000; без ущерба для смысла. Более того, утверждается, что использование Spritz также увеличивает скорость чтения обычных текстов.

Вероятно, теперь можно ожидать появления устройств с крошечными экранами, которые составят конкуренцию традиционным электронным книгам. Очень рекомендую ознакомиться с демкой на сайте.
Total votes 243: ↑210 and ↓33+177
Comments272

10 мест запрещённых для просмотра на Google Maps

Reading time1 min
Views254K
Некоторые места нельзя увидеть на Google Maps из «соображений безопасности». Их изображения на карте размыты и искажены. Вот подборка из десяти таких локаций от Mashable.

1. Королевская резиденция, Нидерланды — комплекс сооружений, принадлежащих королевской семье:



Читать дальше →
Total votes 119: ↑107 and ↓12+95
Comments217

Поднять уровень английского легко!

Reading time1 min
Views15K
Чувак отлично рассказывает и подробно показывает.
Например, за 1 минуту можно выучить 50 тысяч английских слов, не верите?

В русском языке существует около 50 тысяч слов оканчивающихся на «ция» и «сия».
Так вот, почти все слова оканчивающиеся на «ция» имею окончание tion, а на «сия» — sion.
Т.е. из слова вы подставляется все до окончания «ция», «сия».
Модернизация — Modernization
Делегация — Delegation
Корпорация — Corporation
Абстракция — Abstraction
Профессия — Profession

1 урок


Остальные 3 видео доступны в плейлисте или на странице пользователя DjonikNSK
torrent: rutracker.org/forum/viewtopic.php?t=3904361
Total votes 96: ↑55 and ↓41+14
Comments65

Регистрируемся как частный предприниматель в Украине

Reading time14 min
Views116K
Осознав необходимость выхода из тени или же просто смены формы деятельности из наемного работника в самозанятого гражданина приходим к тому, что надо бы зарегистрироваться в качестве частного предпринимателя (ЧП, ИП, СПД ФОП). О том, как зарегистрироваться, какую форму налогообложения выбрать IT-шнику, сколько и куда платить читаем под катом. В конце так же приложен бонус «Как получить деньги под открытие от Центра занятости» (на оплату налогов на первое время), какие виды деятельности выбрать согласно КВЭДа, а так же несколько примеров типичных документов. Актуально только для Украины.
Читать дальше →
Total votes 86: ↑75 and ↓11+64
Comments98

Стартап? Завязывайте

Reading time5 min
Views1.8K
На Хабре много статей, посвященных стартапам, инвесторам, искуственным и естественным мотиваторам и прочему-прочему, ни разу не АЙТИшному смысловому маркетингу. Цель их одна — «добиться успеха». Ибо успех и процесс его достижения — это есть одна из главных составляющих счастья. А его нам всем хочется.

Стоит отметить, что статья на все 100% субъективна, не претендует на истину в какой-либо инстанции, старается не поучать и не наставлять. Тот минимум, на который я рассчитываю — это поделиться своим мнением, показать, что бывает и так. Может быть кто-то разделит мою позицию, кто-то задумается, кто-то пройдет мимо, остальным же Хабр дает великолепную возможность минусовать.

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

Друзья-коллеги-читатели, попрошу еще минутку внимания, вкратце о себе. Я НЕ являюсь — преподавателем, коучем, тренером, наставником, философом, псих\ологом\иатром\отерапевтом, ах да, мастером эпистолярного жанра и русского языка, к сожалению, тоже. Кем я в действительности являюсь — не важно. Т.к. что бы я не сказал, каждый из Вас придумает решит это сам. Я могу лишь очертить сектор в котором стоит смотреть и это я сделал, прислушайтесь. Вообще, если сейчас у Вас между бровей полным-полно скепсиса, то лучше сразу перейти к «минусу», дабы не тратить время — это действительная ценность — ее не стоит тратить на то, что кажется Вам не достойным. Если же на данный момент у Вас есть интерес, то до какого-то момента Вы будете со мной, т.к. интерес уже разгорелся и раздувать вы его будете самостоятельно. Моя задача — постараться все не испортить.
Читать дальше →
Total votes 207: ↑161 and ↓46+115
Comments110

Убойный комплект

Reading time11 min
Views13K
   Всем своим обзорам я присваиваю тег "оbзор". Сегодня этот тег пополнился еще одной записью — героем оbзора стал планшет Wacom Intuos4 — это опять не горячая новинка сезона, но подобные устройства со временем хуже не становятся.

image

Читать дальше →
Total votes 148: ↑91 and ↓57+34
Comments172

SpeedReader — Qt библиотека для скорочтения

Reading time5 min
Views31K
image

Предисловие


Некоторое время назад на Хабре была новость о Spritz — программной реализации техники скорочтения, основанной на быстрой смене слов в виджете с определенным центрированием самого слова внутри виджета, а чуть позже и другая новость. Так как тема довольно актуальная я, недолго думая, решил реализовать нечто подобное и универсальное, с возможностью встраивания такого виджета для скорочтения в программы на различных платформах (win, linux, mac, android). Исходя из этого условия был выбран Qt фрейморк с его широкой поддержкой различных платформ.

То, что получилось и как с этим работать описано ниже. Кому интересно, добро пожаловать.
Читать дальше →
Total votes 54: ↑52 and ↓2+50
Comments43

Скорочтение по технологии spritz на любом сайте

Reading time2 min
Views167K


Совсем недавно, была представлена технология скорочтения spritz (500 слов в минуту без подготовки) она позволяет вам читать тексты намного быстрее, но, к сожалению, разработчик не реализовал тогда её в виде приложения для прочтения собственных текстов.

Теперь же, появился проект Squirt, который позволяет читать любой текст по технологии скорочтения от spritz, установив только 1 букмарклет.
Читать дальше →
Total votes 84: ↑72 and ↓12+60
Comments71

Information

Rating
Does not participate
Location
Киевская обл., Украина
Date of birth
Registered
Activity