Процедурные анимации - как и зачем?

/// Внимание! Под cut'ом много гифок, траффик! ///

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

• Зачем мне процедурные анимации
• Как я их делаю
• Процесс создания
• Туторы - будут ли еще?
• Последние штуковины

Procedural animations - 7

Let's continue our talks about procedural animations. Today we are going to make shaking stuff.
Wrong password? - shake the button with the password. More examples:

• Earthquake
• Camera shaking while explosions
• Alarm UI

Actually, a lot of situations have shaking animations! So, how we should make it by code? And we want just a little bit of code, of course. Let's start!

Процедурные анимации - 7

(English version)

Продолжаем говорить о процедурных анимациях. Сегодня будем обсуждать тряску объектов. Ввели неправильный пароль - кнопка с паролем немножечко трясётся. Еще примеры:

• землетрясение 
• тряска камеры от взрывов
• иконка будильника 

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

Новости - выпуск 13, октябрь...

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

• One person story, моя новая игра
• Готовлюсь к DevGAMM'у
• Вернулся к предыдущему проекту в жанре TD
• Осень

Инвалид изучает Unity, часть 2.

Продолжаю изучать Unity3D. И это реально больно. Прям везде. Сегодня немного о странностях и костылях, которые приходится прикручивать каждый день.
Лично я предъявляю к Unity высокие требования. Почему? Всё просто:

• Я перехожу с Flash'а и хочу видеть расширенный набор тулзов. Иначе - зачем оно мне?
• Да, сейчас много движков позиционируют себя именно как "для создания игр". Unity3D один из них. И хочется, чтобы он и его функционал были заточены под игры.

Конечно, если не цепляться за всё это, а просто говорить "ну ведь можно компилировать и запускать" - то всё ок. Но мы-то хотим видеть нечто большее, чем компилятор, верно?
В комментариях мне много интересного и полезного посоветовали. В тексте это будет красным.

Procedural animations - 6

Today we'll talk about UI...
Usually user interface has a lot of animations, transitions, effects and other stuff... this is necessary to put to user feeling of interactions.
Let's make some simple but awesome animations today! I'll try to show that all of them could be reused in different situations.

Процедурные анимации - 6

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

Power Tap: Idle Clicker; релиз

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

• Попали на главную страницу App Store России
• Огреб кучу отрицательных отзывов и багов
• Разлюбил Adobe
• Не заработал денег

Погнали!

Новости - выпуск 12

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

• Был на DevGAMM-Moscow 2017
• Чуть более плотно начал изучать Unity
• Моя игра "Crafty Club" прошла гринлайт! Ура!
• Всей семьёй ездили в Турцию на отдых
• Готовлю новый тутор о процедурных анимациях (будет об UI)

Готовьте чай и вкусняшки... начинаем!

Procedural animations - 5

(Русская версия)
We had a sine at previous time... and today we continue with something similar. Circle and ellipse! Hypnotic animations, simple equations, a lot of code and math - yeah, we call it "procedural stuff". Prepare some cookies, tea and a sofa... Let's make some beauty!
Like this:



There is no common formulae and tricks. Let's concentrate on some specific things! Will be a lot of fun here. Because always we have really specific tasks like "do animation like that". So, let's try this stuff today too.

Процедурные анимации - 5

(English version)
В прошлый раз был синус... сегодня продолжаем с чем-то похожим. Круги и окружности! Гипнотические анимашки, простые формулы, сплошной код и математика - в общем всё то, что называется "процедурной анимацией". Готовьте печеньки, чай и уютный диван... будем делать красоту!
Например, вот такую:



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

Киношечки: рекомендации от Лампоголового.

Сегодня расскажу о фильмах, которые я посмотрел в период с лета 2016ого по сегодняшний день... и которые понравились настолько, что я решил написать отдельное сообщение. Лично я люблю обзоры киношек не просто в духе "хороший/плохой" фильм, а с дополнением о том, кому фильм может понравится, и в каком состоянии его лучше смотреть.

Ведь зачастую трейлеры и промо-акции фильмов совсем не соответствуют их духу. По роликам казалось, что фильм - комедия, а при просмотре оказывается, что это почти политическая документалка. Не айс...
Поэтому я постараюсь в двух-трёх словах, без спойлеров, посоветовать правильную атмосферу при просмотре :)

Procedural animations - 4 (ENG version)

(Russian version)
"Powerful sine" - yeap, this is the today's post main idea. Sine function is awesome :) And we will try to make some animations with this function. Cosine is just shifted Sine, so I don't know why people invented Cosine too... maybe just to shorten equations. Anyway, today we will make this:

Процедурные анимации - 4

(English version)
"Мощь синуса" - так я решил назвать сегодняшние анимации. Да, функция синуса - очень крутая :) Если что: косинус - это тот же синус, только смещённый немного. Вообще не знаю, зачем ввели эту вторую функцию под названием "косинус" - возможно, просто для сокращения некоторых математических записей. А так - вполне достаточно было бы одной из них...
Что-то я отвлёкся! Сегодня делаем такие анимашки:

Procedural animations - 3 (ENG version)

(Russian version)
Hey! I make procedural animations faster, than I can write tutors about them. So, today we will code really simple physical particles. We can you them for different simulations: sand, snow, ash... But let's call today's animation "sugar". And it looks like this:

Процедурные анимации - 3

(English version)
Анимации делаются быстрее, чем я успеваю записывать и делать туторы о них. Сегодня будем делать простые физические частицы. Можно использовать очень много где: песок, снег, пепел... Давайте договоримся называть его "сахар", чтобы было понятно. Выглядит приблизительно так:

"Crafty Club" is on Steam Greenlight!

Hi everyone! Today I've published my game on the Steam Greenlight. Please vote and help this game get on Steam!
What is this game? Why Steam? And what's going on here? About all of this - today and here! Be ready for positive news and juicy stuff :)

"Crafty Club" на Steam greenlight

Всем привет! Сегодня выложил игру на Steam GreenLight. Буду рад поддержке, комментариям и голосу "да" :)
Что это за игра, почему именно стим и что вообще происходит - в сегодняшнем выпуске! Держитесь - всё будет хорошо.

Рисую для отдыха...

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

Procedural animations - 2 (ENG version)

(Russian version)
Hey!
Let's continue with procedural animation. It's really interesting thing! And I have a lot of ideas what to show you. But I don't have enough time just to type it here...
Today I took a rest and made this for you (source code):

I've wanted this to my collection for a long time. It was interesting, how is it possible to make squeezing (at the bottom point) and stretching (while moving) with really simple code. As it turned out, there is no way to do it withoud math. But I am sure, we are OK with it after my first post.

Процедурные анимации - 2

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

Если честно, то я давно хотел такое в свой арсенал. Было интересно, как можно простенько сделать сжатие при касании земли и растяжение в полете. Как оказалось - без математики не обойтись. Но мы, уверен, не боимся её после первого поста :)

Procedural animation - 1 (ENG version)

(Russian version)
Hi! I'd like to split the big tutor about "procedural animations" to small parts. So, this is the first one. I will concentrate on practice and animation. So, today we will make this one (with source code and gifs!):

Why this? On the one hand I will use it later (in part 4, I guess)... on the other hand to make this animation we should understand a lot of math stuff. So, this example will be like an introduction for us. Let's start making this fun procedural animation!

Процедурные анимации - 1

(версия на английском)
Я решил разбить большой кусок информации под названием "процедурные анимации" на несколько маленьких. Не буду вдаваться в сложные загогулины, а постараюсь внести побольше практики. Итак, сегодня будем делать такое (с исходником и множеством гифок!):

Зачем? Во-первых, мне это пригодится позже (в выпуске, эдак, четвертом)... во-вторых, для получения подобного движения нужно понимать много всякого в математике. Получается, это вроде и учебная анимация, но вроде как и веселая на вид.

UI: разные варианты одной панельки!

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

Unity: первые шаги одноного-однорукого инвалида

Я новичок. Совсем недавно установил этот движок. Поэтому здесь как и с донорским органом - только под таблетками свой собственный организм не будет отторгать новинку. Ломка началась и у меня - всё кажется неудобным, странным...
По мере продвижения буду стараться делать небольшие отчёты... зачем? Чтоб потом самому не забыть как нашаманить то или иное действо.
Посмотрим, что из этого выйдет :)

Депрессия... или как вкус пепла стал привычным.

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

Депрессия - очень коварный враг. Нужно быть с ней аккуратным. Главное - не играть с этим. Что-то заподозрили такое - и нужно бить в колокол. Искать, общаться, находить пути решения. Промедление может стоить жизни. Не в переносном смысле.