Поліпшення досвіду взаємодії за рахунок використання карток в дизайні

image

Талановитий Нік Бабич розробник, UX/UI фахівець поділився своїм досвідом у блозі UX Planet про Поліпшення досвіду взаємодії за рахунок використання карток в дизайні. Наша команда виконала переклад цієї статті

Веб — і мобільних пристроїв вже далеко пішли від звичайних інтернет-сторінок і перетворилися в повноцінні персоналізовані системи. Ці системи побудовані на безлічі окремих фрагментів контенту. Картки –ось новий креативний концепт.

Незалежно від того, як ви ставитеся до цієї концепції, картки тепер з нами надовго.

Що таке картки?

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

Читати далі →

Software renderer — 2: растеризації і інтерполяція атрибутів

Привіт. минулій статті я описав математику, яка необхідна для виведення тривимірної сцени на екран у вигляді сітки — тобто ми зупинилися на момент отримання координат вершин у просторі екрану. Наступний крок — це «заповнення» полігонів з яких складається об'єкт, тобто пошук пікселів, які входять до зображення об'єкта на екрані. Процес пошуку цих точок називається прастеризацией. Ми так само хочемо мати можливість текстурувати і висвітлювати об'єкти — для цього необхідно вміти інтерполювати атрибути, задані в вершинах (наприклад, текстурні координати, нормалі, колір та інші).

Наші вхідні дані — це набір полігонів (ми будемо розглядати тільки трикутники): координати їх вершин (система координат залежить від алгоритму) і значення атрибутів у кожній з цих вершин, які в подальшому будуть интерполироваться уздовж поверхні трикутника. Існує декілька підводних каменів, які я розгляну в цій статті:
  • Правило заповнення пікселів (filling convention)
  • Точність
  • Корекція перспективи при інтерполяції атрибутів (perspective-correct interpolation)
Я розгляну три підходи до растеризації:
  • «стандартний» алгоритм, що використовує нахил граней
  • цілий ряд алгоритмів, заснованих на використанні рівнянь граней полігону (traversal-алгоритми)
  • алгоритм растеризації в однорідних координатах
Так само в кінці посилання на проект, який є прикладом реалізації, звідти ж будуть і приклади коду.

Читати далі →

Як я png в 4 рази зменшував

Ця ідея виникла рік тому, коли мені на прорахунок прийшов проект веб-ігри з великою кількістю анімації, яку передбачалося робити спрайтами у гарному якості (великими спрайтами) і з якісним альфаканалом (в сенсі, не з індексованим кольором прозорості). У цій грі ви кидаєте кістки на стіл і треба, щоб вони падали завжди по-різному.

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

Читати далі →

Курс піксель-арту 6

Це переклад публікації «Les Forges Pixel Art Course».

Частина 1: Правильні інструменти
Частина 2: Лінії і криві
Частина 3: Перспективи
Частина 4: Тінь і світло
Частина 5: Палітри кольорів
Частина 6: Згладжування
Частина 7: Текстури і розмиття
Частина 8: Світ тайлів

Частина 6: Згладжування (Anti-aliasing)

Де весь ваш піксель-арт стає красивим. Чи ні. Насправді це залежить від того, наскільки жахливий він був раніше.
image

Читати далі →

Курс піксель-арту 5

Це переклад публікації «Les Forges Pixel Art Course».

Частина 1: Правильні інструменти
Частина 2: Лінії і криві
Частина 3: Перспективи
Частина 4: Тінь і світло
Частина 5: Палітри кольорів
Частина 6: Згладжування
Частина 7: Текстури і розмиття
Частина 8: Світ тайлів

Частина 5: Колірні палітри

1. Коли і чому вибирати палітру?
Хороше запитання, чому зрештою я почав про це? Просто тому що палітра — це 50% якості вашої роботи. На всьому протязі гри важливо мати послідовні панелі, тому що вони суттєво сприяють загальній атмосфері. Загалом, що становить різницю між хорошою і невдалою графікою, це в значній мірі палітра. «Добре, це важливо мати хороший вибір, я зроблю це в кінці». А-та-та, звичайно ні! Палітра працює від початку до кінця, коли ви малюєте піксель-арт. Для мене це перше і останнє що я роблю: я починаю зі створення стартової панелі в кутку мого зображення, потім я підлаштовую її по мірі просування, потім, як закінчу, я витрачаю час на поліпшення її. Покращення в основному зумовлені «чуттям», то що ви вивчіть тут, може бути поставлено під сумнів: це просто стартова точка.

Читати далі →

Курс піксель-арту 4

Це переклад публікації «Les Forges Pixel Art Course».

Частина 1: Правильні інструменти
Частина 2: Лінії і криві
Частина 3: Перспективи
Частина 4: Тінь і світло
Частина 5: Палітри кольорів
Частина 6: Згладжування
Частина 7: Текстури і розмиття
Частина 8: Світ тайлів

Частина 4: Тінь і світло

Сьогодні ми перейдемо з 2D в 3D, в той час як залишимося в 2D. Ви побачите (або немає). З тим що ми обговорювали досі, ви зможете робити красиві штрихові малюнки та малювати предмети з коректною перспективою. Це гарний початок, але цього недостатньо, щоб робити піксель-арт. У цій частині ми поглянемо на затінення. Це набір технік, що дозволить нам ліпити наші краєвиди і персонажів щоб уявити обсяг (і я врятую вас від довгого розповіді про традиційну важливості цієї частини, ЦЕ ПРОСТО СУПЕР ВАЖЛИВО).

Читати далі →

Software renderer - 1: матчастину

Програмний рендерінг (software rendering) — це процес побудови зображення без допомоги GPU. Цей процес може йти в одному з двох режимів: у реальному часі (обчислення великої кількості кадрів в секунду — необхідно для інтерактивних додатків, наприклад, ігор) і «оффлайн» режимі (при якому час, який може бути витрачений на обчислення одного кадру, не обмежена настільки строго — обчислення можуть тривати годинник або навіть дні). Я буду розглядати тільки режим візуалізації в реальному часі.

У цього підходу існують як недоліки так і переваги. Очевидним недоліком є продуктивність — CPU не в змозі конкурувати з сучасними відеокартами в цій області. До переваг слід віднести незалежність від відеокарти — саме тому він використовується як заміна апаратного рендеринга у випадках, коли відеокарта не підтримує ту або іншу можливість (так званий software fallback). Існують і проекти, мета яких — повністю замінити апаратний рендеринг програмним, наприклад, WARP, що входить до складу Direct3D 11.

Але головним плюсом є можливість написання подібного рендерера самостійно. Це служить освітнім цілям і, на мій погляд, це — найкращий спосіб зрозуміти, що лежать в основі алгоритми і принципи.

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

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

В кінці статті посилання на гитхаб проекту, який можна розглядати як приклад реалізації.

Читати далі →

Курс піксель-арту 3

Це переклад публікації «Les Forges Pixel Art Course».

Частина 1: Правильні інструменти
Частина 2: Лінії і криві
Частина 3: Перспективи
Частина 4: Тіні і світло
Частина 5: Палітри кольорів
Частина 6: Згладжування
Частина 7: Текстури і розмиття
Частина 8: Світ тайлів

Частина 3: Перспективи

Проблема перспективи в 2D іграх, це питання яке виникає часто, і це можливо те, чому так багато аматорських ігор мають безліч противоречивостей в цій області. Зокрема ця частина адресується до типовим перспектив у RPG, так що якщо ви шукаєте інформацію про вид збоку або від першої особи, вам слід пошукати де-небудь ще. Це важливо, пам'ятати що перспектива — це «мистецтво представлення тривимірних об'єктів на плоскій поверхні (в даному випадку це ваш екран) як їх побачив би спостерігач.»

Читати далі →

Курс піксель-арту 2

Частина 2: Лінії і криві

Якщо ви ще не відбувся художник, кращий шлях почати малювати, робити це олівцем, після чого обводити чорнилом, потім розфарбовувати. Те ж саме стосується і до піксель-арту: перший крок у зображенні, це позначити контури — цей крок називається «штриховий малюнок» (Lineart). Штриховий малюнок — це дуже важливий крок для досягнення хорошого результату. Кілька пікселів зображення, можуть бути більшою його частиною (в протилежність малювання, де масштаб дозволяє більше припущень) так що помилка в один або два пікселя, може зробити так, що ваш персонаж буде виглядати спотвореним. Для ясності, точність штрихового малюнка є Р-Е-Ш-А-Ю-Щ-Е-Й для успіху піксель-арту.

Читати далі →

Курс піксель-арту

Це переклад статті.

Передмова



Є багато визначень піксель-арту, але тут ми будемо використовувати таке: зображення піксель-арт, якщо воно створено цілком руками, і присутній контроль над кольором і позицією кожного пікселя, який намальований. Безсумнівно, в піксель арт включення або використання кистей або інструментів розмиття або машин деградації (degraded machines, не впевнений), та інших опцій, які «сучасним», нами не
використовуються (взагалі-то put at our disposal значить «в нашому розпорядженні», але за логікою начебто так правильніше). Він обмежений такими інструментами як «олівець» і «заливка».

Проте не скажеш, що піксель-арт або не-піксель-арт графіка — більш або менш красива. Справедливіше сказати, що піксель-арт інший, і він краще підходить для ігор стилю «ретро» (як Супер Нінтендо або Гейм Бій). Ви також можете комбінувати техніки вивчені тут, з ефектами з не-піксель-арту, для створення гібридного стилю.

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

Читати далі →