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

boolean drawImage(Image img, int x, int y, int anchor)

Вероятно, этот метод покажется вам знакомым, поскольку в нем, также как и в методе drawString(), используются анкеры. Подобно drawString() метод drawImage() выводит изображение в точке с координатами (x,y) и с учетом параметра anchor. Для вывода изображений можно использовать те же константы, что и при выводе текста. Итак, чтобы нарисовать изображение, сначала необходимо вызвать статический метод Image.createImage() и создать и загрузить изображение. Затем следует вызвать метод drawImage() и вывести изображение на экран. Ниже приведен код, который загружает и выводит изображение:

public void paint(Graphics g) {

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

g.setColor(255,255,255); //белый

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

//создать и загрузить изображение

Image img = Image.createImage("Splash.png");

//вывести изображение

g.drawImage(img, getWidth() / 2, getHeight() / 2, //Поскольку используются атрибуты HCENTER и VCENTER,

Graphics.HCENTER | Graphics.VCENTER); //изображение выводится в центре экрана

}

В этом примере сначала очищается дисплей, для чего выбирается белый цвет, которым заполняется весь экран. Перед рисованием необходимо получить чистую поверхность. Затем с помощью метода createImage() загружается и создается изображение Splash.png. После того как изображение создано, вызывается метод drawImage(), и картинка выводится на дисплей, константы HCENTER и VCENTER определяют анкер.

Создание программы Olympics

Теперь у вас есть представление о MIDP-графике и, вероятно, вам не терпится посмотреть, как это все работает в контексте мидлета. Вы узнали, что графика обрабатывается методом paint(). Однако класс мидлета не содержит этого метода, поэтому для выполнения операций с графикой вы должны использовать класс Canvas. Класс Canvas представляет собой абстрактную поверхность и должен быть включен в класс мидлета. Графические операции выполняются с помощью класса Graphics. Класс, производный от Canvas, можно использовать для вывода изображений на экран.

Чтобы начать работу над графическим мидлетом, вы должны выполнить следующее:

1. создать класс, производный от Canvas и ассоциированный с мидлетом;

2. создать объект класса Canvas как член-переменную класса мидлета;

3. установить объект класса Canvas как текущий экран мидлета, для чего вызвать метод setCurrent().

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

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

Давайте начнем с класса OCanvas, который создаст холст для использования в мидлете Olympics. Код класса OCanvas приведен в листинге 4.1.

Листинг 4.1. Класс OCanvas служит настраиваемым холстом для мидлета Olympics

import javax.microedition.lcdui.*;

public class OCanvas extends Canvas {

private Display display;

public OCanvas(Display d) {

super();

display = d;

}

void start() {

display.setCurrent(this);

repaint();

}

public void paint(Graphics g) {

// Clear the display

g.setColor(255, 255, 255); // White

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

// Draw the first row of circles //Дуги выводятся как идеальные окружности, если задать одинаковые значения высоты и ширины, а также изменение угла от 0° до 360°

g.setColor(0, 0, 255); // Blue

g.drawArc(5, 5, 25, 25, 0, 360);

g.setColor(0, 0, 0); // Black

g.drawArc(35, 5, 25, 25, 0, 360);

g.setColor(255, 0, 0); // Red

g.drawArc(65, 5, 25, 25, 0, 360);

// Draw the second row of circles

g.setColor(255, 255, 0); // Yellow

g.drawArc(20, 20, 25, 25, 0, 360);

g.setColor(0, 255, 0); // Green

g.drawArc(50, 20, 25, 25, 0, 360);

}

}

Этот класс расширяет класс Canvas и устанавливает себя как экран мидлета. Конструктор вызывает конструктор родительского класса Canvas и инициализирует переменную display. Метод start() устанавливает холст текущим экраном мидлета и обновляет изображение. Наиболее важный код содержится в методе paint(), он вызывает функции setColor() и drawArc() и рисует олимпийский символ. Обратите внимание, что все аргументы углов в функциях drawArc() равны 0 0 и 360°, в результате чего будут нарисованы полные эллипсы. Когда вы определили класс OCanvas, можно объявить член-переменную класса мидлета OlympicsMIDlet:

private OCanvas canvas;

Член-переменная класса должна быть инициализирована конструктором класса:

canvas = new Ocanvas (Display.getDisplay(this));

Это весь код для обработки графики, который необходим в мидлете Olympics. В листинге 4.2 представлен полный код класса OlympicsMIDlet. Листинг 4.2. Код класса OlympicsMIDlet содержится в файле OlympicsMIDlet.java

import javax.microedition.midlet.*;

import javax.microedition.lcdui.*;

public class OlympicsMIDlet extends MIDlet implements CommandListener {

private OCanvas canvas;

public void startApp() {

if (canvas == null) {

canvas = new OCanvas(Display.getDisplay(this));

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

canvas.addCommand(exitCommand);

canvas.setCommandListener(this);

}

// инициализация

canvas.start(); //Метод start() холста запускает мидлет

}

public void pauseApp() {}

public void destroyApp(boolean unconditional) {}

public void commandAction(Command c, Displayable s) {

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

destroyApp(true);

notifyDestroyed();

}

}

}

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

Тестирование готового приложения

Чтобы собрать и протестировать мидлет Olympics, скопируйте папку Olympics в папку apps, расположенную в папке установки J2ME Wireless Toolkit. Чтобы собрать мидлет, щелкните по кнопке Build (Собрать), а чтобы запустить эмулятор J2ME, щелкните по кнопке Run (Запустить). На рис. 4.5 показан мидлет The Olympics MIDlet.

Рис. 4.5. Мидлет The Olympics MIDlet демонстрирует построение основных геометрических фигур

Создание слайд-шоу

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

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

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

private Display display;

private Image[] slides;

private String[] captions = { "Love Circle Bowl", "Double Wide Spine",

"Flume Zoom Over-vert", "Kulp De Sac Bowl",

"Louie's Ledge" };

private int curSlide = 0;

Переменная sliders – это массив объектов Image, она инициализируется в конструкторе класса SSCanvas. Ниже приведен код этого конструктора:

public SSCanvas(Display d) {

super();

display = d;

// загрузить изображения слайд-шоу

try {

slides = new Image[5];

slides[0] = Image.createImage("/LoveCircle.jpg");

slides[1] = Image.createImage("/DoubleWide.jpg");

slides[2] = Image.createImage("/FlumeZoom.jpg");

slides[3] = Image.createImage("/KulpDeSac.jpg");

slides[4] = Image.createImage("/LouiesLedge.jpg");

}

catch (IOException e) {

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

}

}

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

...

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

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

Основные действия выполняются в методе paint() класса SSCanvas, который выводит текущее изображение слайд-шоу и подпись на экран. Ниже приведен код метода paint():

public void paint(Graphics g) {

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

g.setColor(255, 255, 255); // белый

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

// вывести текущее изображение

g.drawImage(slides[curSlide], getWidth() / 2, getHeight() / 2, //Текущее изображение выводится в центре экрана

Graphics.HCENTER | Graphics.VCENTER);

// настроить шрифт

Font f = Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_BOLD,

Font.SIZE_MEDIUM);

g.setFont(f);

// вывести текущее изображение

g.setColor(0, 0, 0); // Черный //Текущая надпись центрирована и выводится вдоль верхней границы экрана

g.drawString(captions[curSlide], getWidth() / 2, 0,

Graphics.HCENTER | Graphics.TOP);

}

Метод paint() сначала очищает экран, тем самым удаляя то, что осталось от предыдущего слайда. Затем в центре экрана выводится текущее изображение. Далее выполняется настройка шрифта – полужирный, среднего размера, пропорциональный. Наконец, устанавливается черный цвет, и по центру у нижнего края экрана выводится текст. Когда вывод графики завершен, последняя часть кода класса SSCanvas занимается обработкой пользовательского ввода. Нажимая клавиши со стрелками влево и вправо, пользователь может перелистывать слайды. Технически до главы 6 вы не научитесь обрабатывать ввод в играх, но здесь я познакомлю вас с основами. Ниже приведен код метода keyPressed():