Создание игр для мобильных телефонов

Хотя 12 кадров в секунду – технически достаточная скорость, чтобы обмануть ваши глаза, такая анимация будет очень прерывистой. Следовательно, для создания более качественной анимации требуется более высокая частота обновления кадров. Например, телевидение работает на частоте 30 кадров в секунду. В кино вы смотрите фильмы, в которых частота смены кадров равна 24 кадрам в секунду. Очевидно, что этого вполне достаточно, чтобы привлечь ваше внимание и создать иллюзию движения.

В копилку Игрока

Разница в частоте обновления кадров на телевидении и в кино связана с техническими причинами, а не с организационными. Раньше частота обновления в фильмах составляла лишь 16 кадров в секунду, но, в конечном счете, стандартом была принята частота 24 кадра в секунду, что оказалось наиболее подходящей скоростью для воспроизведения звука. Американское телевидение, также известное как NTSC (National Television Standards Committee – Национальный комитет по телевизионным стандартам), за эталон времени выбрала частоту тока в электросети (60 Гц), таким образом была получена частота 30 кадров в секунду. Тот факт, что телевидение работает на более высокой частоте, означает, что для показа фильма по телевидению его необходимо конвертировать.

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

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

Шаг в направлении компьютерной анимации

Большинство методик, применяемых для создания компьютерной анимации, были заимствованы или основаны на аналогичных техниках создания анимации в мультфильмах. Классический подход при создании анимации – это создавать фон отдельно от движущихся объектов. Объекты анимации рисуются на отдельных целлулоидных листах так, чтобы их можно было разместить поверх фоновой картинки и перемещать независимо от нее. Этот тип анимации носит название буферной анимации (cel animation). Такая анимация помогает художникам сэкономить массу времени, необходимо лишь перерисовывать объекты, которые изменяют свою форму, размер или положение от фрейма к фрейму. Это объясняет, почему во многих мультфильмах хорошо проработано фоновое изображение, а герои столь просты. Спрайты, применяемые в компьютерных играх, о которых вы узнали чуть ранее в этой главе, – это те же самые традиционные движущиеся объекты в буферной анимации.

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

В копилку Игрока

Современные мультипликационные фильмы доказали, что компьютерную анимацию можно применять не только в компьютерных играх. Популярные мультфильмы, например, «История игрушек» (Toy Story), «Ледниковый период» (Ice Age), «Корпорация монстров»(Monsters, Inc.), «В поисках Немо» (Finding Nemo), – лучшие примеры того, как традиционные анимационные методы применяются на компьютерах. Вероятно, наиболее совершенная компьютерная анимация была создана для фильма «Последняя фантазия» (Final Fantasy) – это первый фильм, в котором компьютерная анимация применялась на протяжении всего фильма.

Хотя компьютеры используют методы создания анимации, применявшиеся ранее, возможности разработчиков компьютерных игр более гибкие. Как программист вы можете получить доступ к любому пикселю растрового изображения и изменять его в соответствии с потребностями.

2D против 3D

Перед тем как приступить к созданию игры, вам необходимо выбрать один из двух существующих типов анимации: 2D или 3D. В случае 2D-анимации объекты перемещаются в плоскости. Объекты при таком типе анимации могут быть трехмерными, они просто не могут перемещаться в третьем измерении. Большинство методик двумерной анимации имитируют трехмерную анимацию, придавая объектам глубину. Например, чтобы создать иллюзию того, что автомобиль уезжает, его изображение можно просто уменьшать пропорционально увеличению расстояния. Тем не менее не нужно использовать 3D-анимацию, поскольку вы добиваетесь желательного трехмерного эффекта, используя простое масштабирование. Хотя эффект трехмерный, машина – двухмерный объект.

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

В реальности многие игры используют сочетание этих двух типов графики. Например, в игре Doom трехмерная графика используется лишь для построения ландшафта, в то время как монстры – это двухмерные графические объекты. Монстры выглядят объемно, но они – плоские изображения.

Смесь 2D– и 3D-графики дает хорошие результаты в игре Doom, поскольку плоские изображения выглядят достаточно реалистично в 3D-окружении. Конечно, со времен Doom многое изменилось. Так, Quake и другие современные трехмерные игры этого жанра используют теперь трехмерные объекты.

Оставшаяся часть главы и книга в целом сфокусированы на рассмотрении 2D-анимации, поскольку она проста и более эффективна, а следовательно, лучше приспособлена для написания мобильных игр. Хорошая новость – вы можете создавать великолепные эффекты с использованием 2D-анимации.

Анализ 2D спрайтовой анимации

Хотя эта глава целиком посвящена спрайтовой анимации, необходимо понять основные типы анимации, используемые в программировании игр. Существует множество различных типов, каждый из которых целесообразно применять в определенных случаях. Рассматривая анимацию в контексте создания мобильных игр, я разбил ее на два типа: фреймовую (frame-based animation) и композиционную анимации (cast-based animation). С технической точки зрения, существует еще и третий тип анимации – анимация палитрой (palette animation), – анимация цвета объекта, однако он не является основным.

Фреймовая анимация

Наиболее простая анимация – фреймовая, она распространена очень широко. Фреймовая анимация имитирует движение путем быстрой смены заранее созданных изображений – кадров (или фреймов). Фильм – это хороший пример такого типа анимации. Каждый кадр фильма – это фрейм анимации, а когда эти фреймы сменяют друг друга с определенной скоростью, создается иллюзия движения.

Фреймовая анимация не предусматривает разделения объекта и фона, любой объект фрейма является его неотъемлемой частью. В результате каждый фрейм содержит статическую информацию. Это основное отличие фреймовой анимации от композиционной, с которой вы познакомитесь в следующем разделе. На рис. 5.1 показаны кадры из фреймовой анимации.

Рис. 5.1. При использовании фреймовой анимации для создания иллюзии движения изменяется весь фрейм

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

Композиционная анимация

Более совершенная методика создания анимации, используемая в большинстве игр, – это композиционная анимация, которая также известна как спрайтовая. При этом объект анимации – это графический объект, который может перемещаться независимо от фона. С этой точки зрения, вы можете быть немного озадачены применением термина «графический объект», когда речь идет о различных частях анимации. В данном случае графический объект – это объект, который логически может быть отделен от фона. Например, при создании анимации для космического шутера корабли пришельцев – это отдельные графические объекты, которые логически отделены от фона.

В копилку Игрока

Термин «композиционная анимация» (cast-based animation) происходит потому, что спрайт можно представить как часть композиции (изображения). Можно провести аналогию между компьютерной анимацией и театром. Представьте спрайт актером, а фон сценой, тогда о спрайтовой анимации можно думать как о театральном действе. Это не так далеко от истины, потому как цель театрального представления – развлечь зрителя, рассказывая какую-нибудь историю и разыгрывая спектакль. То же можно сказать и про спрайтовую анимацию, которая развлекает пользователя, повествуя историю.

Каждый графический объект композиционной анимации, называемый спрайтом, имеет определенное положение, которое может меняться с течением времени. Другими словами, спрайт может иметь скорость, которая и определяет, как изменяется его положение с течением времени. Почти все видеоигры используют спрайты. Например, каждый объект в классической игре Asteroids – это спрайт, перемещающийся независимо от фона. Несмотря на то, что в игре Asteroids применяется векторная графика, игровые объекты – спрайты. На рис. 5.2 показано, как композиционная графика упрощает пример с парашютистом, который вы видели в предыдущей главе.

Рис. 5.2. Композиционная анимация, графический объект может перемещаться независимо от фона, создавая эффект движения

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

Несмотря на то что основополагающий принцип спрайтовой анимации – перемещение изображения независимо от фона, вы можете использовать этот метод в совокупности с фреймовой анимацией. Таким образом, вы можете изменять не только положение спрайта, но и его вид. Как вы узнаете позже, такой гибридный тип анимации реализован в MIDP 2.0.

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

Прозрачные объекты

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

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

Создание глубины с помощью Z-слоев

Часто возникает необходимость поместить одни спрайты поверх других. Например, в военной игре могут летать самолеты и сбрасывать бомбы. Если спрайт самолета будет пролетать над спрайтом танка, то, вероятно, вы захотите, чтобы самолет оказался поверх танка, и следовательно, танк оказался позади самолета. Чтобы решить эту проблему, вы можете определить для каждого спрайта глубину или Z-слой (Z-order).

Z-слой – это относительная глубина спрайта на экране. Глубина спрайта называется Z-слоем по аналогии с другим измерением, z-осью. Спрайт может передвигаться по экрану в осях XY. Аналогично z-ось определяет глубину экрана или то, как спрайты перекрывают друг друга. Иначе говоря, Z-слой определяет глубину спрайта на экране. Из-за того что используется третья ось, вы можете подумать, что такие спрайты объемны. Но это не так. Дело в том, что третья ось используется лишь для определения взаимного перекрытия спрайтов.

Совет Разработчику

Самый простой способ управлять Z-слоем в игре – это внимательно следить за тем, как вы создаете графику. К счастью, в MIDP API есть класс LayerManager, который упрощает управление множеством графических объектов (слоев) и их относительными Z-слоями. В главе 11 вы узнаете, как применять этот класс в мидлетах.

Чтобы вы лучше поняли, как работает Z-слой, давайте вернемся в старые добрые времена традиционной анимации. Вы уже знаете, что при создании традиционной анимации, например, мультфильмов Disney, для анимации объектов использовались целлулоидные листы, поскольку их можно было накладывать на фоновое изображение и перемещать независимо друг от друга. Такая анимация – ранняя версия спрайтовой анимации. Каждому целлулоидному листу соответствовал один Z-слой, определявший место листа в стопке. Если случалось так, что спрайт, который находится в верхних слоях, совпадал со спрайтом из нижних слоев, то он перекрывал его. Положение листов в стопке – это Z-слой, определяющий его видимость. То же самое относится и к спрайтам при использовании композиционной анимации, за исключением того, что Z-слои определяют порядок, в котором спрайты выводятся на экран, а не место в стопке листов.

Определение столкновений объектов

Нельзя завершить разговор об анимации, не рассмотрев вопрос о детектировании столкновений объектов. Определение столкновений – это метод детектирования столкновения спрайтов. Хотя этот метод напрямую не связан с созданием иллюзии движения, он тесно связан со спрайтовой анимацией и очень важен для игр.

Детектирование столкновений используется для определения физического взаимодействия друг с другом. Например, в игре Asteroids, если спрайт корабля сталкивается со спрайтом астероида, корабль разрушается и происходит взрыв. Детектирование столкновений – это механизм, встроенный для проверки столкновения корабля и астероида. Вероятно, вы подумаете, что это несложно. Нужно просто знать их местоположение на экране и проверить, совпадают ли они, не так ли? Все именно так, но подумайте, сколько проверок необходимо осуществить, если перемещается большое число спрайтов, каждый из которых нужно проверить на столкновение. Нетрудно представить, насколько сложной становится задача.

Неудивительно, что существует множество различных методик определения столкновений. Самый простой способ – это сравнить ограничивающие прямоугольники спрайтов. Этот метод весьма эффективен, но если ваши спрайты непрямоугольной формы, то столкновения будут определяться с погрешностями. Углы прямоугольников могут перекрываться, и таким образом будет определено столкновение, в то время как сами изображения не перекрываются. Чем меньше форма объекта похожа на прямоугольник, тем больше погрешность определения столкновения. На рис. 5.3 показано, как работает этот метод определения столкновений.

Рис. 5.3. Детектирование столкновений с помощью ограничивающих прямоугольников сводится к простой проверке их перекрытия

На рисунке перекрывающиеся области затемнены. Вы можете видеть, насколько неточен этот метод, если объекты непрямоугольной формы. Улучшить эту технику можно, немного уменьшив размер ограничивающего прямоугольника, тем самым снижая ошибку. Этот метод дает небольшое улучшение, однако он может повлечь за собой появление другой ошибки, не определяя истинное столкновение спрайтов. На рис. 5.4 показано, как уменьшение ограничивающего прямоугольника может уменьшить ошибку определения столкновения объектов. Этот метод эффективен ровно настолько, насколько эффективен метод, применяющий обычные ограничивающие прямоугольники, поскольку в обоих случаях проверяется наложение прямоугольников.

Рис. 5.4. Детектирование столкновений с помощью уменьшенных ограничивающих прямоугольников аналогично обычному методу проверки

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