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



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

У цій статті ми розглянемо анімацію світла площинами, коли ми анимируем світло великими заливками і лише потім починаємо його деталізувати. Анімацію світла по контуру об'єкта, і поведінку світла на різних поверхнях, інакше на об'єктах з різними матеріалами. Три голови. Три кулі. Сподіваюся, що в ціль.

Мета цієї статті показати наскільки сильний дует брата і сестри, Світла і Тіні в русі. Ми вже бачили, як вони перетворюють сцени в статистиці. Але динаміка нам ще не знайома. Давайте виправимо це упущення.

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



Читати далі →

Анімація в Spine, поради і рекомендації, псевдо 3D ефект

Хочу поділитися своїм досвідом роботи з Spine — програмою для створення скелетної анімації, спеціально заточеною під ігри.

Після перегляду офіційного гайда виникає багато питань, поговоримо про те, які підводні камені чекають нас при роботі з цією програмою на кожному етапі робочого процесу (на прикладі Spine — Unity), як можна оптимізувати свою роботу, а так само розглянемо деякі популярні фішки типу 3D ефекту. У статті буде багато важких гифок.

Читати далі →

Анімовані текстури OpenGL

Використання текстур OpenGL досить поширена тема на різних навчальних сайтах і форумах. Але коду необхідна зробити анімовану текстуру все стає не так просто. Мені відомо 2 способи це зробити і 1 з них я опишу.

Читати далі →

Функціональна анімація UX дизайні. Що робить її ефективною?

Пропоную читачам «Хабрахабра» переклад статті «Functional Animation In UX Design: What Makes a Good Transition?» за авторством Nick Babich.



Функціональна анімація – це акуратна анімація, яка має чітку, логічну мета. Вона знижує когнітивну навантаження, фокусує увагу на змінах і робить просторові взаємозв'язки більш зрозумілими. Але є ще одне. Анімації оживляють інтерфейс.

Рух може вдихнути життя в робочий простір, множачи і ділячи його, змінюючи його форму і розмір. Ви повинні використовувати функціональну анімацію для плавних переходів користувача між різними функціями програми, поясненні зміни розташування елементів посилення ієрархії об'єктів.

Читати далі →

«Галоп пікселя — частина друга» — перспектива, колір, анатомія та прикладні вправи



Перша стаття цього циклу була сприйнята тепло, внаслідок чого затягувати з продовженням не мало ніякого сенсу, але, на жаль, це сталося. Зимовий наступ захлинувся і плавно переросло в літню кампанію. В кінці статті я поясню чому, не хотілося б вас засмучувати з самих перших рядків. Отже. Публіка висловила бажання ознайомитися з предметом, глибше, ніж передбачалося спочатку. Велику кількість листів прийшло на пошту, поряд з регулярними стусанами в соціальних мережах. У цьому місці мені пригадується одна фраза – «будьте обережні в своїх бажаннях».

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

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



Читати далі →

Малюємо анімовану сцену з допомогою css

Перепочинемо від верстки всяких користувальницьких інтерфейсів і просто порисуем на CSS. Малювати будемо ось таку сцену:



Дивитися на sfiddle.

У статті я спробую описати покрокове створення цієї сцени.


Читати далі →

Анімації c допомогою Transitions API

Всім привіт!
На хабре ще не була висвітлена тема Transitions API для анімацій, які з'явилися в Android починаючи з 4.4 (KitKat) і продовжили свій розвиток у 5.0 (Lollipop). У своїй статті я розповім про те, як спростити роботу з анімаціями з їх використанням і як застосовувати їх на будь-якому пристрої з версією Android 3.0 і вище.
image

Читати далі →

Як зробити гарне відео для сторінки додатка в App Store

Привіт, Хабр!

Мене звуть Олена, я працюю в студії motion-графіки. Нещодавно додаток з нашим роликом успішно пройшло модерацію, так що хочу поділитися досвідом, як зробити відео для сторінки в App Store і не зганьбитися: що і як може зробити сам розробник, що краще віддати на аутсорс, а від яких фішок краще взагалі відмовитися.



Читати далі →

Створення гри на ваших очах - частина 7: 2D-анімації в Unity («як у флеші»)

    У цій статті поговоримо про 2D анімації в Unity. Я розповім про свій досвід роботи з рідними анімаціями в ЮНИТИ, про те, наскільки тайм-лайни схожі на флешевскіе, про управління анімаціями, event'ах, вкладеності, і про те, як художник справляється з анимирования.
 
Для початку, трохи теорії.
 
В Unity є дві сутності:
 
1. Анімація (те, що відображається у вікно «Animation»)
2. Mechanim дерево анімацій (те, що відображається у вікні «Animator»).
 
 
 
Нижче я трохи розповім, що це таке і як нам може припадати (або не згодитися).
 
Читати далі →