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

Использование спрайтовой анимации в мобильных играх

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

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

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

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

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

Работа с классами Layer и Sprite

Я упоминал, что MIDP 2.0 API включает поддержку спрайтовой анимации. Два основных класса, которые делают спрайтовую анимацию возможной, – это Layer и Sprite. Класс Layer моделирует главный графический объект – слой (layer), который служит основой для спрайтов и прочих графических объектов игры. Каждый отдельный видимый элемент игры – это слой. С точки зрения программирования, класс Layer отслеживает такую информацию как положение, ширину и видимость элемента.

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

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

Начальное положение слоя – (0,0), оно задается в системе координат объекта Graphics, передаваемого в метод paint().

Ниже перечислены методы класса Layer, которые очень важны для работы со спрайтами и слоями:

► getX() – возвращает координату X верхнего левого угла слоя;

► getY() – возвращает координату Y верхнего левого угла слоя;

► getWidth() – возвращает ширину слоя;

► getHeight() – возвращает значение высоты слоя;

► setPosition() – устанавливает координаты XY левого верхнего угла слоя;

► move() – переместить слой на заданное расстояние в осях XY;

► isVisible() – проверяет, видим ли слой;

► setVisible() – устанавливает свойства видимости;

► paint() – переопределяется в классах-потомках.

Класс Sprite построен на классе Layer, он реализует методы, необходимые для создания двухмерных графических объектов. В класс Sprite добавлены следующие основные функции:

► спрайты основаны на изображениях, они могут состоять из нескольких фреймов;

► изображения спрайта можно преобразовывать (поворачивать, отображать и т. п.);

► для спрайтов, состоящих из нескольких фреймов, можно точно определить последовательность отображения фреймов;

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

Вы видите, что класс Sprite предлагает массу возможностей для программирования графики в мобильных играх. В этой главе вы не затронете все указанные аспекты, но вскоре восполните этот пробел. Пока мы сосредоточимся на создании и основах работы со спрайтом. Чтобы создать спрайт из одного изображения, передайте созданный объект Image конструктору класса Sprite:

Sprite monsterSprite = new Sprite(Image createImage(«/monster.png»));

В этом примере изображение монстра используется как основа для создания спрайта. Проблема заключается в том, что если вы поместите этот код в мидлет, то получите сообщение компилятора об ошибке, поскольку исключение, вызываемое вводом-выводом, не обрабатывается. Это исключение может быть обработано с помощью метода createImage() в случае ошибки загрузки изображения. Ниже приведен код структуры try-catch, выполняющей это:

try {

monterSprite = new Sprite(image.createImage("/Monster.png");

monsterSprite.setPosition(0,0);

}

catch (IOException e) {

System.err.println("Failed loading image!");

}

Несмотря на то что класс Layer инициализирует положение каждого слоя в точке (0,0), полезно инициализировать положение каждого спрайта, как показано в коде. Когда вы загрузили спрайт и он готов к использованию, вы можете перемещать его по экрану, вызывая метод setPosition() или move(). Ниже объясняется, как это сделать:

1. пример использования метода setPosition() для центрирования спрайта на экране:

monterSprite.setPosition((getWidth – monsterSprite.getWidth()) / 2,

(getHeight – monsterSprite.getHeight()) / 2);

Этот метод для вычисления положения центра используют высоту и ширину холста и размеры спрайта.

2. перемещение спрайта работает несколько иначе – необходимо указать расстояния вдоль осей, на которые необходимо переместить спрайт:

monsterSprite.move(-5, 10);

В этом примере спрайт перемещается на 5 пикселей влево и 10 пикселей вниз. Отрицательные смещения задают перемещения влево или вверх, а положительные – вправо или вниз.

3. поскольку c каждым объектом класса Sprite ассоциировано изображение, то метод paint() рисует изображение в заданном месте:

monsterSprite.paint(g).

В этом коде предполагается, что у вас есть объект класса Graphics с именем g, такой объект обязательно должен присутствовать в любой игре.

Вы познакомились с основами спрайтовой анимации в MIDP API. Нам осталось только рассмотреть класс GameCanvas, специально предназначенный для анимации благодаря двойной буферной анимации.

Создание плавной анимации с помощью класса GameCanvas

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

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

Рис. 5.6. Анимация с двойной буферизацией устраняет эффект прерывистости, возникающей при использовании однобуферной анимации

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

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

На рис. 5.6 показано, как используется буфер в памяти для выполнения всех необходимых действий. Это может показаться хитрым приемом программирования, однако все делается очень просто (благодаря MIDP 2.0 API).

Кроме стандартного класса Canvas в MIDP API существует класс GameCanvas, поддерживающий графику с двойной буферизацией. Чтобы воспользоваться преимуществами класса GameCanvas, образуйте игровой класс холста от класса GameCanvas, после чего вы сможете работать с этим объектом в обычном режиме. Однако теперь все построения будут производиться в буфере. Чтобы вывести результат на экран, воспользуйтесь методом flushGraphics().

Давайте посмотрим, как работает буфер в памяти класса GameCanvas. Когда вы делаете что-либо с объектом Graphics, ассоциированным с холстом, все построения выполняются в буфере, на экране изменения не будут видны. Вызов метода flushGraphic() позволяет отобразить все, что было построено в памяти, на экране. При этом содержимое буфера не изменяется и не стирается, а просто выводится на экран.

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

Когда вы создаете объект класса GameCanvas, при инициализации буфер заполняется пикселями белого цвета.

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

Построение программы UFO

Хотя можно привести массу примеров написания программы с применением спрайтовой анимации, UFO (НЛО) – актуален всегда. Если вы когда-нибудь столкнетесь с тем, что в вашей игре чего-то не хватает, добавьте неопознанный летающий объект – это помогает всегда! В этом разделе вы научитесь использовать возможности MIDP для создания мидлета, в котором неопознанный летающий объект будет перемещаться по экрану. Пример UFO демонстрирует основы спрайтовой анимации, показывает, как применять эту методику на практике. По мере изучения материала книги вы будете знакомиться с новыми более интересными возможностями классов анимации MIDP.

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

Написание программного кода

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

private Display display;

private boolean sleeping;

private long frameDelay;

private Random rand;

private Sprite ufoSprite;

private int ufoXSpeed, ufoYSpeed;

Переменная display уже знакома вам по предыдущим примерам, она используется для работы с дисплеем. Переменная sleeping определяет, запущен ли игровой цикл. Вы можете приостановить выполнение анимации, присвоив этой переменной значение true. Переменная frameDelay тесно связана с игровым циклом, поскольку она контролирует частоту его выполнения. Если быть более точным, то эта переменная содержит число миллисекунд между итерациями цикла. Вы можете с легкостью пересчитать это число в количество фреймов, для чего нужно на него разделить 1. Например, если величина framedelay равна 40 мс (или 0.04 с), то частота кадров будет равна 25.

Аналогично, вы можете преобразовать частоту кадров во временной интервал между ними, для чего нужно поделить 1 на частоту и умножить на 1000. Например:

¹/₃₀ кадр/с = 0.333333 с = 33 мс

Член-переменная класса rand – это экземпляр стандартного генератора случайных чисел MIDP, он используется для создания произвольного движения объекта по экрану. Спрайт НЛО хранится в переменной ufoSprite, которая является объектом класса Sprite. Скорость спрайта хранится отдельно от самого спрайта – в переменной ufoSpeed.

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

С практической точки зрения, обычно лучше создавать спрайты как отдельные классы, производные от класса Sprite. Однако поскольку спрайт НЛО достаточно прост, нет необходимости создавать для него отдельный класс. Большинство спрайтов, с которыми вы столкнетесь в книге, будут созданы как отдельные классы, производные от Sprite.

Чуть раньше я упомянул, что переменная frameDelay определяет частоту кадров анимации мидлета UFO. Эта переменная инициализируется в конструкторе мидлета:

frameDelay = 33;

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

Большая часть инициализирующего кода мидлета UFO расположена в методе start(). Ниже приведена часть кода, инициализирующего спрайт:

ufoXSpeed = ufoYSpeed = 3;

try {

ufoSprite = new Sprite(Image.createImage("/Saucer.png"));

ufoSprite.setPosition(0, 0);

}

catch (IOException e) {

System.err.println("Failed loading image!");

}

Компоненты X и Y скорости спрайта равны 3, поэтому спрайт будет перемещаться на три пикселя вниз и вправо за одну итерацию. Отрицательные значения компонента скорости говорят о том, что спрайт перемещается вверх и влево. Чтобы создать объект класса Sprite, передайте созданное изображение конструктору этого класса. Начальное положение спрайта равно (0,0) – верхний левый угол экрана.

Поток анимации устанавливается также в методе start():

sleeping = false;

Thread t = new Thread(this);

t.start();

Сначала переменной sleeping присваивается значение false, это означает, что выполнение цикла разрешено. Затем создается объект класса Thread, которому передается холст с помощью параметра this. Поток вызывает метод start(), который запускает и приостанавливает выполнение игрового цикла.

Важно предусмотреть средства остановки игрового цикла, для чего предусмотрен метод stop():

public void stop() {

// остановить анимацию

sleeping = true;

}

Как вы можете видеть, приостановить выполнение цикла очень легко, для этого достаточно присвоить переменной sleeping значение true. Игровой цикл расположен в методе run():

while (!sleeping) {

update();

draw(g);

try {

Thread.sleep(frameDelay);

}

catch (InterruptedException ie) {}

}

Игровой цикл – это цикл while, который выполняется до тех пор, пока значение переменной sleeping ложно. Внутри цикла вызывается метод update(), который обновляет анимацию, после чего вызывается метод draw(), обновляющий изображение. Статический метод sleep() класса Thread используется, чтобы установить задержку потока анимации, которая определяется переменной frameDelay. Эта часть кода управляет анимацией мидлета.

Метод update() вызывается в цикле один раз, а следовательно, отвечает за обновление каждого фрейма анимации. Иначе говоря, метод update() вызывается 30 раз в секунду, поскольку частота смены кадров в мидлете UFO равна 30 кадров/с. В данном случае метод update() отвечает за случайное изменение скорости летающего объекта, а следовательно, и за изменение его положения. Приведенный ниже код изменяет скорость объекта:

if (rand.nextInt() % 5 == 0) {

ufoXSpeed = Math.min(Math.max(ufoXSpeed + rand.nextInt() % 2, -8), 8);

ufoYSpeed = Math.min(Math.max(ufoYSpeed + rand.nextInt() % 2, -8), 8);

}

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

Метод update() – это самый важный метод, который вы будете разрабатывать, создавая игры в среде J2ME. Одно выполнение метода update() составляет один игровой цикл, этот метод контролирует каждый стук сердца вашей игры. Поэтому вы должны быть уверены, что каждая строка кода этого метода хорошо продумана и тщательно проработана, а также оптимизирована с точки зрения эффективности. С некоторыми приемами оптимизации игр вы познакомитесь в главе 17.

Метод nextInt() класса Random() используется для случайной генерации случайного целого числа. Если число делится на 5, то скорость летающей тарелки изменяется. Это может показаться странным, но идея заключается в том, что скорость НЛО не должна изменяться на каждой итерации. Проверяя делимость числа на 5 (%), в среднем скорость объекта изменяется один раз за пять фреймов. Чтобы изменять скорость чаще, необходимо уменьшить число, стоящее при проверке делимости. Например, если вы хотите изменять скорость на каждом третьем кадре, то измените код так: rand.nextInt() % 3.

Скорость летающей тарелки также изменяется на случайное число. Скорость может изменяться на значение из диапазона от -2 до 2. Более того, методы Math.min() и Math.max() используются для ограничения скорости, по модулю она не должна превосходить 8. При этом отрицательные значения скорости говорят о том, что спрайт перемещается вверх или вправо.

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

Вы можете использовать и другой порог для ограничения скорости, число 8 – это не магическое число.

После того как скорость была изменена случайно, метод update() перемещает НЛО в новое положение:

ufoSprite.move(ufoXSpeed, ufoYSpeed);

Метод move() класса Sprite() перемещает спрайт на указанное число пикселей. В этом случае значения компонент скорости спрайта – это именно то, что необходимо для смещения.

Но здесь есть подводный камень. Что делать, когда НЛО достигает края экрана? Хотя вы можете сделать так, что он будет отталкиваться от стенок, намного лучше, если он будет появляться с другой стороны экрана, как в игре Asteroids. Ниже приведен код реализации этого:

if (ufoSprite.getX() < -ufoSprite.getWidth()) //По достижении НЛО края экрана при движении по горизонтали переместить его к противоположному

ufoSprite.setPosition(getWidth(), ufoSprite.getY());

else if (ufoSprite.getX() > getWidth())

ufoSprite.setPosition(-ufoSprite.getWidth(), ufoSprite.getY());

if (ufoSprite.getY() < -ufoSprite.getHeight()) //По достижении НЛО края экрана при движении по вертикали переместить его к противоположному

ufoSprite.setPosition(ufoSprite.getX(), getHeight());

else if (ufoSprite.getY() > getHeight())

ufoSprite.setPosition(ufoSprite.getX(), -ufoSprite.getHeight());

В этом коде нет ничего волшебного, он просто проверяет, не вышел ли НЛО за пределы экрана. Если да, то летающий объект появится у противоположного края.

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

Если вы не хотите идти по стопам игры Asteroids, то поступите так же, как в игре Pong. Пусть НЛО отражается от краев экрана. Вместо того чтобы изменять положение спрайта на экране, измените знак его скорости. Изменение знака компонента ufoXSpeed позволит отражаться НЛО от левой и правой границ, а ufoYSped – от верхней и нижней.

Последний элемент головоломки с названием UFOCanvas – это метод draw(), который вызывается для рисования анимации:

private void draw(Graphics g) {

// очистить экран

g.setColor(0x000000);

g.fillRect(0, 0, getWidth(), getHeight());

// нарисовать спрайт UFO

ufoSprite.paint(g);

// сменить буфер

flushGraphics();

}

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

Теперь, чтобы объединить все вышесказанное, посмотрите листинг 5.1.

Листинг 5.1. Класс UFOCanvas – это класс холста мидлета UFO

import javax.microedition.lcdui.*;

import javax.microedition.lcdui.game.*;

import java.util.*;

import java.io.*;

public class UFOCanvas extends GameCanvas implements Runnable {

private Display display;

private boolean sleeping;

private long frameDelay;

private Random rand;

private Sprite ufoSprite;

private int ufoXSpeed, ufoYSpeed;

public UFOCanvas(Display d) {

super(true);

display = d;

// установить частоту кадров 30 кадров/с

frameDelay = 33;

}

public void start() {

// установить холст как текущий экран

display.setCurrent(this);

// инициализация генератора случайных чисел

rand = new Random();

// инициализация спрайта НЛО

ufoXSpeed = ufoYSpeed = 3;

try {

ufoSprite = new Sprite(Image.createImage("/Saucer.png"));

ufoSprite.setPosition(0, 0); //НЛО стартует в верхнем левом углу экрана

}

catch (IOException e) {

System.err.println("Failed loading image!");

}

// запуск потока анимации

sleeping = false;

Thread t = new Thread(this);

t.start();

}

public void stop() {

// Stop the animation

sleeping = true;

}

public void run() {

Graphics g = getGraphics();

// The main game loop

while (!sleeping) {

update();

draw(g);

try {

Thread.sleep(frameDelay);

}

catch (InterruptedException ie) {}

}

}

private void update() {

// Randomly alter the UFO's speed

if (rand.nextInt() % 5 == 0) { //Изменить случайным образом компоненты скорости по осям Х и Y в интервале от -8 до 8

ufoXSpeed = Math.min(Math.max(ufoXSpeed + rand.nextInt() % 2, -8), 8);

ufoYSpeed = Math.min(Math.max(ufoYSpeed + rand.nextInt() % 2, -8), 8);

}

// Move the sprite

ufoSprite.move(ufoXSpeed, ufoYSpeed);

// Wrap the UFO around the screen if necessary

if (ufoSprite.getX() < -ufoSprite.getWidth())

ufoSprite.setPosition(getWidth(), ufoSprite.getY());

else if (ufoSprite.getX() > getWidth())

ufoSprite.setPosition(-ufoSprite.getWidth(), ufoSprite.getY());

if (ufoSprite.getY() < -ufoSprite.getHeight())

ufoSprite.setPosition(ufoSprite.getX(), getHeight());

else if (ufoSprite.getY() > getHeight())

ufoSprite.setPosition(ufoSprite.getX(), -ufoSprite.getHeight());

}

private void draw(Graphics g) {

// Clear the display

g.setColor(0x000000);

g.fillRect(0, 0, getWidth(), getHeight());

// Draw the UFO sprite //Спрайт очень просто вывести на экран, используя метод paint()

ufoSprite.paint(g);

// Flush the offscreen graphics buffer

flushGraphics();

}

}

Когда код UFOCanvas полностью разработан, можно перейти к встраиванию этого класса в мидлет. В листинге 5.2 приведен код класса UFOMIDlet.

Листинг 5.2. Код класса UFOMIDlet, хранящийся в файле UFOMIDlet.java

import javax.microedition.midlet.*;

import javax.microedition.lcdui.*;

public class UFOMIDlet extends MIDlet implements CommandListener {

private UFOCanvas canvas;

public void startApp() {

if (canvas == null) {

canvas = new UFOCanvas(Display.getDisplay(this)); //Настраиваемый холст – это то, что отличает класс мидлета от созданных ранее примеров

Command exitCommand = new Command("Exit", Command.EXIT, 0);

canvas.addCommand(exitCommand);

canvas.setCommandListener(this);

}

// Start up the canvas

canvas.start();

}

public void pauseApp() {}

public void destroyApp(boolean unconditional) {

canvas.stop();

}

public void commandAction(Command c, Displayable s) {

if (c.getCommandType() == Command.EXIT) {

destroyApp(true);

notifyDestroyed();

}

}

}

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