Урок 4: Игровой цикл. Часть 1 (Простейшая анимация и немного теории)

Тут меня попросили начать с «прикручивания» SQL базы. Но, к сожалению, это, наверное, одна из самых обширных тем, поэтому, надобно подумать с чего начать чайнику, какой сервер поставить, как проще создать БД. Дело в том, что, скорее всего, работать с БД в Silverlight’e будем через LINQ. Если кому ОЧЕНЬ надо почитать, то смотрите здесь. Просто через LINQ нельзя модифицировать и создавать БД вроде как прочитал такую информацию. Поэтому сами понимаете тут «надо покумекать». Хотя я прекрасно понимаю что «прирули» SQL к Silverlight’y даже на том уровне что знаем – то при желании можно создать клон БК или чего ни будь подобное. Кроме того я не вижу ни одного возможного применения баз данных в Silverlight’е при использованием их вместе на одной машине. Поэтому, по любому, вам необходимо будет задействовать или веб-сервисы (WCF) или работу с сокетами для прямого обращения к базе. А это работа с сетью. Так что пойдем по порядку – возможно делая небольшие отступления. Хочется заметить, что существует возможность, что до меня успеет разобраться с этим другой человек – может он и поможет нам с уроком в данном блоге.

К делу. Итак, игровой цикл, в народе известный как геймлуп (Gameloop) и анимация. В связи с тем, что эти темы ОЧЕНЬ тесно связаны – обе задействуют таймеры, мы начнем с анимации, а именно с работы с таймером и изображениями.

В Silverlight’e можно создать два типа таймеров, а именно Storyboard (System.Windows.Media.Animation) и DispatcherTimer (System.Windows.Threading). Что именно использовать мнения разделяются. Некоторые, аргументируя тем, что Storyboard легче «хакнуть» рекомендуют использовать DispatcherTimer. Другие же, рекомендуют наоборот – Storyboard уповая на его более широкие возможности.

Лично для меня окончательно поставил точку в этом вопросе Adam Kinney из Microsoft’а в своем блоге. Суть всего этого, что Storyboard во-первых более стабилен для различных ОS и браузеров. Во- вторых DispatcherTimer имеет меньшую разрешающую способность, чем Storyboard (правда у меня не получилось это протестить – и тот и другой выдают на пустом цикле максимум 63-65 fps, кстати, буду благодарен за пример с более высокими показателями). Ну и, в-третьих – функциональность: DispatcherTimer еще можно использовать для организации игрового цикла, но вот делать в Silverlight’е его средствами анимацию – это просто себя не уважать: сложно и поддерживает только процедурную анимацию, при этом теряется просто две трети всех возможностей анимации Silverlight’а.

Постораемся мы начать с небольшой теории.

Типы анимации в Silverlight’е использует два типа анимации свойств объектов. Битмап анимация в Silverlight’е невозможна в обычном понимании этого слова. Как это делается, или как этого избежать – этому будет посвящена последняя часть нашего урока. Поэтому начнем со стандартной анимации:

· From/To/By. (временная «одного свойства» от-до)

· key-frame. (покадровая на основе временной)

Перечень классов, которые позволяют работать с анимацией:

· System.Object

· System.Windows.DependencyObject

· System.Windows.Media.Animation.Timeline

· System.Windows.Media.Animation.ColorAnimation

· System.Windows.Media.animation.ColorAnimation.ColorAnimationUsingKeyFrames

· System.Windows.Media.Animation.DoubleAnimation

· System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames

· System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames

· System.Windows.Media.Animation.PointAnimation

· System.Windows.Media.Animation.PointAnimationUsingKeyFrames

· System.Windows.Media.Animation.Storyboard

При работе с анимацией Вы, как правило, будете использовать следующие свойства Storyboard:

· AutoReverse: зацикливает анимацию (заставляет проигрываться снова и снова).

· Duration: Длительность анимационного цикла,использует следующий синтаксис hh:mm:ss.

· From: Величина с которой начинается анимация.

· To: Величина которой закончится анимация.

· By: Относительная величина показывающая насколько надо менять при анимации ( альтернативных подход к использованию To).

· RepeatBehavior: Когда анимация закончилась – показывает общее количество раз, которые она должна проигрываться. Если установлено в Forever, анимация будет бесконечна.

· FillBehavior – определяет, что произойдет, когда анимация закончится. С этим параметром я еще не работал.

· BeginTime – время от старта таймера, когда начнется анимация.

· SpeedRatio – скорость анимации, в стандартном значении 1.

· TargetName: То о чем чуть раньше было сказано – Storyboard расширенные возможности. Таймер Storyboard позволяет указывать объект анимации.

· TargetProperty: Свойство объекта анимации собственно которое будет изменятся в процессе анимации (высота, расположение, прозрачность и т.д.).

Для доступа из программного кода (продцедурной анимации) используются, как правило, следующие методы Storyboard’а:

· Begin: запускает Storyboard.

· Pause: устанавливает на паузу Storyboard.

· Resume: запускает дальше после паузы Storyboard.

· Stop: останавливает Storyboard.

· Seek: пропускает указанную часть анимации Storyboard’а.

Кey-frame анимирует между сериями величин используя key-frame объекты. Например анимация волны или звезды в квадрат а потом в круг это кey-frame анимация. А различные кривые волны или звезда, квадрат и круг это кey-frame объекты. Key-frame анимация более мощный инструмент, чем From/To/By т.к. может оперировать с различными типами интерполяции этих самых свойств.

И конечно перечисление классов анимации:

ColorAnimationUsingKeyFrames анимирует свойства оперирующие цветом(цвет для кистей SolidColorBrush или GradientBrush). DoubleAnimationUsingKeyFrames анимирует своства объета оперирующие данными double, например геометрическими свойствами (ширина, высота и т.д.), PointAnimationUsingKeyFrames анимирует все свойства оперирующие данными point (центр EllipseGeometry, ObjectAnimationUsingKeyFrames анимирует свойства объектного типа (например Fill с GradientBrush в другую кисть).

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

· KeyTime: Время в течении которого значение достигнет указанной величины (координаты)

· Value: Значение величины (координаты).

· Тип интерполяции

Если анимируемое свойство в один момент времени (первый кадр) имеет значение 20, а во второй момент времени (второй кадр) имеет уже величину 40. То между этими кадрами, как уже говорилось, вам необходимо будет указать время между кадрами и что самое интересное тип интерполяции. Silverlight поддерживает три типа интерполяции: Linear (линейное изменение свойства), Discrete(дискретное – «резкое») and Spline (по средствам сплайна).

Проще всего протестировать не процедурную key-fame анимацию в Blend’е. Там достаточно просто ее создать, и понять принципы.

Откроем Blend и создадим новый проект.

Нарисуем там что ни будь, например прямоугольники как на рисунке.

Обратите внимание на плюсик на следующем скриншоте. Нажав на него вы добавите в ресурс приложения Storyboard таймер. Заодно можете его, и переименовать удобным вам именем.

Blend сразу прореагировал на это создав timeline панель. Обведена красным.

Что она собой представляет: сверху панель для проигрывания анимации, под ней кнопка записи кадра, цифры – указывающие значение времени от начала анимации (при текущем кадре). И кнопки с линейками, первая включает выключает привязывание таймлайна. Вторая выставляет количество этих привязок в секунду. На данный момент нельзя выставить больше 60 привязок. Что это такое я пока не сильно разбирался.

А теперь попробуем создать простейшую анимацию:

Выбираем фигуру, с которой будем производить анимацию, и нажимаем кнопку записи кадра. Перемещаем указатель кадра(1) на необходимое нам время, производим нужные трансформации (изменения свойств) данной фигуры(2 – переместили и изменили цвет заливки одного из квадратов). И опять нажимаем запись кадра. Вот и все – простейшая анимация создана. Можете проиграть ее (3).

Но давайте чуть-чуть по подробнее. Если вы обратите внимание на панель объектов, то заметите что появились красные стрелочки(4) которые указывают на задействованные в анимации объекты и их свойства. Напротив каждого из них на таймлайне белый кружочек, щелкнув на котором – в панели свойств вы сможете от редактировать сплайн по которому происходит интерполяция каждого из свойств. Должен признать к своему стыду, что я не читал документацию к Blend’у – так как это все вета предпочитаю все «трогать руками», поэтому мне пришлось в VS2008 менять тип интерполяции свойств. Что и вы сами можете сделать.

Но вернемся к нашему проекту. Если вы соберете его – то не увидите никакой анимации. Почему? Потому что мы не запустили наш таймер анимации. Поэтому выбираем для простоты и наглядности конструктор страницы и добавляем в него всего одну строчку:

Storyboard1.Begin();

Запускайте.

Поэкспериментируйте с различными параметрами анимации не зря же мы их перечисляли.

Кстати, помните в начале был пример анимации звезда – квадрат – круг. Надо признать что данный пример не совсем удачный. Почему? Анимация в Silverlight’е это изменение свойств объекта. То есть Вам необходимо будет манипулировать геометрией анимированного объекта – это проще сделать изменяя свойство Data объекта Patch. Единственное совет – старайтесь избегать интерполяции кривых во время анимации – повылазят артефакты. Или просто делайте больше кадров.

Итоги первой части:

• Silverlight использует анимацию на основе временных отрезков. Вы должны задать стартовую величину, конечную величину и длительность данного изменения. Остальное Silverlight посчитает сам.
• Silverlight использует модель анимации основанную на свойствах. А это значит, что Silverlight анимация может делать только одну вещь – модифицировать какое либо свойство с течением установленного промежутка времени. Звучит как приговор, но огромное количество эффектов возможно реализовать именно данной моделью.
• Для анимирования какого либо свойства вам необходимо иметь анимационный класс поддерживающий именно тот тип данных, который имеет указанное вами свойство. Например, если вы анимируете цвет бекграунда используйте ColorAnimation класс.