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.

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

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

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

Поддержка геймпадов во Flash (as3)...

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

Сохраняем объект в SharedObject

Всем привет! Когда мы играем в игры, то хотим, чтобы наши достижения сохранялись. Зайдем ли мы завтра в игру или через неделю - оружие, прокачка, пройденные уровни - все это должно быть "на прежних местах". Игра должна выглядеть так, как будто мы и не выходили из нее. Для сохранения локальных данных во флеше используется SharedObject. Раньше я всегда записывал только числовые значения - количество собранных звезд, номер пройденного уровня,  найденные секреты и так далее. Но сегодня мне стало необходимо записать целый объект. Казалось бы, никаких трудностей быть не должно... но, по обыкновению, сложность кроется там, где ее не ждешь.  Сегодня расскажу, как сохранить и прочитать целый объект во флеше.

Flash: делаем анимированный блеск

В рамках ответов на вопросы по Flash, я решил также выделять некоторые хитрости в отдельные сообщения. Думаю, так будет проще воспринимать смысл этой самой хитрости... Сегодня сделаем анимированный блеск на предмет. Довольно простой эффект, без шуток. К тому же я только что его применил на объекты-трофеи, которые герой может собирать в моей новой игре. Так что сегодняшняя демка можно сказать "пришла из реальной жизни". От слов к делу - давайте реализуем наш замечательный блеск!

Flash: плавная смена кадров

Сегодня я посмотрел на последние записи в журнале и понял, что я перестал писать о программировании... сегодня немного исправим это! Поиграв немного в такие игры как CurveFever2 и RocketPets, я понял, что игры нужно насыщать всякого рода красивыми переходами, эффектами и прочими свистелко-анимационными штуковинами. Давайте смастерим что-нибудь простое для разминки, хорошо? В общем, сейчас будет немного кода, маленькая демка и море позитива. Готовы? Тогда поехали!

Gui: ButtonsDemo

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

Gui: использование анимированных кнопок

В различных играх часто приходится видеть выбор персонажа, автомобиля или другого объекта с помощью кнопок пролистывания < > В рамках серии сообщений о gui-элементах я решил показать, что подобную смену картинок сделать невероятно просто. За основу решил взять предыдущую статью, в которой уже присутствуют сами кнопки пролистывания. Поэтому сегодня мы продолжим дорабатывать нашу демонстрацию по использованию анимированных кнопок. По сути, у нас уже имеется заготовка, куда мы просто добавим немного интерактивности и декораций. Заодно чуть подробнее остановимся на некоторых классах нашей иерархии gui-объектов.

Gui: простая анимированная кнопка

Вот и наступило время для реализации долгожданных кнопок. Как я говорил в одном из прошлых сообщений, мы будем делать не просто статичные спрайтовые картинки, а кнопки, подсвечивающие свое состояние. Навели курсор, кнопка подсветилась, увели курсор, кнопка вернулась в прежнее состояние. Конечно, реализовать данный механизм можно полсотней строк, но на данный момент gui-демонстрации дошли до такого уровня, когда хочется сделать все по науке: адекватная иерархия объектов, подумать о дальнейших планах, заготовить фундамент для более сложных кнопок.