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)

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

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

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

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

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



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

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)
Анимации делаются быстрее, чем я успеваю записывать и делать туторы о них. Сегодня будем делать простые физические частицы. Можно использовать очень много где: песок, снег, пепел... Давайте договоримся называть его "сахар", чтобы было понятно. Выглядит приблизительно так:

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

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

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

Растровые шрифты Лампоголового :)

Почитал я Антона Карлова и решил тоже чего-нибудь черкануть про растровые шрифты... ну как бы это тренд, видимо, не?
Начну с того, что шрифты имеют дико клевую историю... сначала они были набором пикселей (растр), потом их решили делать векторными (ибо мониторы стали разные, и текст стал масштабируемым), а теперь разработчики под мобильные платформы вынуждены красивые векторные шрифты снова превращать в набор пикселей. Досада...
Как это делаю я - сегодня! И только здесь! :)

Мой старый друг "ApplicationVerificationFailed"

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

Будем последовательными.