Власний слайдер зображень на jQuery

image
Почну з того, що дана стаття написана з метою розповісти про те, яким чином створюється слайдер прокрутки зображень для веб-сторінок. Ця стаття ні в якому разі не несе повчальний характер, вона лише служить прикладом того, як можна реалізувати наш об'єкт розгляду. Код, наданий у цій статті ви можете використовувати як якийсь шаблон для подібних розробок, сподіваюся, що мені вдасться досить докладно і доступно донести до читача всю суть мною написаного.

Читати далі →

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

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

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

Читати далі →

HV або Про те, як непогано малювати бінарні дерева

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

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

Читати далі →

5 порад щодо вдосконалення ігрових анімацій

image

Привіт, мене звуть Дейв Блежа (Dave Bleja), я працюю в студії Volnaiskra. Протягом останніх 3 років я створював Spryke, захоплюючий і продуманий платформер про глибоководній морській кібер-рибі, досліджує чудеса суші.

Як єдиний постійний учасник команди Spryke, я ніс відповідальність за багато частині творчого і технічного процесу. Деякі завдання нудні, але більша частина — захоплююча. Моєю улюбленою аспектом була анімація, і я хочу поділитися з вами п'ятьма порадами щодо анімації, які виробилися у мене за роки роботи.

Читати далі →

Створення цікавих і привабливих анімацій простими функціями Spine (всередині важкі gif)



(Прим. пер.: 1. Spine — це патентований багатоплатформовий пакет для створення двовимірних скелетних анімацій з підтримкою різних ігрових тулкитов.
2. Обережно, в пості є близько 38 МБ gif'ок, всі вони заховані під кат.)


Як створити плавне перемикання або поворот спрайтів?
Створення плавного і природного перемикання і поворот спрайтів при роботі з Spine або будь-яким іншим інструментом інтерполяції анімації часто буває важким завданням. Воно може розвалити порядок анімації і зробити остаточний результат дергающимся або незграбним.

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

Читати далі →

Йдемо глибше в Underground: історія одного екстремального дизайну гри



Добре розмахнувшись, інженер виробляв потужний удар кулаком зверху монітора. Лунав тріск і… монітор оживав! Тоді, 30 років тому, коли у свої десять років я відвідував вечірні заняття школи юних програмістів в університеті, тільки інженер мав право так чинити монітори. Тільки він знав, яке місце і з якою силою докласти комп'ютерну техніку, щоб вона ожила і ми, діти, яким пощастило потрапити в школу програмістів, продовжили, щасливі, писати свої рядки коду.

Читати далі →

Анімація на HTML5 з допомогою GreenSock Animation Platform

днями я спробував перемалювати банер, який я раніше робив у Animate CC з експортом в CreateJS на платформі GSAP, використовуючи простий HTML і пару JS бібліотек.

Читати далі →

233 горішка для Попелюшки: відбираємо кольору для «ідеальної» палітри



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

  • Стислість: невелику кількість кольорів в палітрі. Весь набір квітів можна охопити одним поглядом.
  • Повнота: кольори палітри повинні рівномірно і досить щільно заповнювати простір.
  • Дискретність: кольори палітри повинні відрізнятися один від одного на око.
  • Угруповання: кольори повинні бути зручно згруповані для швидкого знаходження потрібного.
Виявилося, що можна підібрати набір з рівного 233 квітів, який задовольнить всім цим критеріям.

Читати далі →

Графічний інтерфейс користувача як відображення реального світу: тіні і підйом елементів

image

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


Читати далі →