Создание Flash-игр

пиженум-сановель


Эффект трехмерности

Исходные файлы: 3d.fla, 3dcubepoints.fla, 3dcube.fla, 3dspaceship.fla

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

Задача проекта

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

Подход

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

Подготовка ролика

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

Создание кода

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

Преобразование координат

Местоположение объектов на экране определяется двумя координатами: х и у. Объекты в трехмерном пространстве должны иметь три координаты: х, у и z. Последняя определяет глубину.
Для отображения объектов на рабочем поле необходима функция, преобразующая х, у и z в экранные координаты х и у. Кроме того, вы будете наклонять и вращать объекты. Поэтому функция преобразования должна учитывать базовые наклоны и вращение.
Учтите, что это самый сложный сценарий из тех, которые мы до сих пор рассматривали и, возможно, из всех сценариев данной книги.
Математическая функция Math.atan (arctg, арктангенс) используется для преобразования координат в угол, а функции Math.sin и Math.cos - для преобразования значения углов обратно в координаты. Таким o6разом, координаты точки преобразуются в угол и расстояние от центра плоскости. Затем точка поворачивается и вновь преобразуется в координаты. Данное действие выполняется один раз для вращения и один раз для наклона. В результате вы получите координаты х и у, которые можно использовать на экране компьютера.
Комментарии, содержащиеся в нижеприведенном коде, объясняют, какое действие выполняет каждая его часть. Затем приводятся пошаговые объяснения.

// Переводим трехмерные координаты в координаты на экране
// (делаем проекцию).
function plotPoint(object) {
(1) //Берем координаты объекта.
х = object.x;
у = object.у
z = object.z;
(2) // Вычисляем расстояние от центра, radius = Math.sqrt (x*x+y*y);
(3) // Вычисляем первый угол.
if (х == 0) angle = Math.atan(1000000);
else angle = Math.atan(y/x);
if (x < 0) angle += Math.PI;
(4) // Поворачиваем объект,
angle += rotation;

(5) // Вычисляем новые координаты,
realx = radius*Math.cos(angle);
realz = radius*Math.sin(angle);
realy = z;
(6) // Определяем новое расстояние от центра,
radius = Math.sqrt(realy*realy+realz*realz);
(7) // Вычисляем второй угол.
if (realz == 0) angle = Math.atan(1000000);
else angle = Math.atan(realy/realz);
if (realz < 0) angle += Math.PI;
(8) // Добавляем угол наклона сечения,
angle += plane;
(9) // Вычисляем координаты для экрана,
screenx = realx;
screeny = radius*Math.sin(angle);
screenz = radius*Math.cos(angle);
(10) // Центрируем положение объекта. screenx += 27 5; screeny += 200; (11) // Возвращаем новые координаты. return({х:screenx,y:screeny,z:screenz});

Интересно, что Flash распознает понятие бесконечности. Так, выражение Math.atan(1/0) будет вычислено с результатом 1,5707963267949, то есть Pi/2!

Функция Math.atan() преобразует линию в угол в радианах. Необходимо указать значение разницы между начальной и конечной точками линии по вертикали, разделенное на значение этой же разницы по горизонтали. Например, если значения координат начальной и конечной точек линии соответственно равны (200, 200) и (275, 250), то, . чтобы получить угол, необходимо записать Math, atan (75/50). Результатом будет значение .9828 радиан, что составляет примерно 56 градусов. В действительности функция Math.atan () немного сложнее, однако данный пример позволит вам создать общее представление о ней.

Опишем каждый шаг вышеприведенного кода: (1) Задаются координаты х, у и z объекта.
(2) Вычисляется расстояние на плоскости ху от центра координат до проекции объекта на плоскость.
(3) Определяется угол на плоскости ху.
(4) Значение угла увеличивается на величину поворота объекта.
(5) Задаются новые координаты х, у и z с учетом изменения угла.
(6) Задается расстояние от центра координат до объекта на плоскости yz.
(7) Определяется угол на плоскости yz.
(8) Задается наклон плоскости.
(9) Задаются новые координаты х, у и z с учетом наклона.
(10) Центр новых координат имеет значение 0. Для корректировки к ним прибавляется действительное значение центра экрана (в данном случае (275, 200)).
(11)Теперь координаты х и у могут использоваться для отображает объекта на экране. С помощью координаты z можно также снизить яркость объектов, которые должны казаться расположеными дальше от пользователя.
Функция plotPoint преобразует точки с трехмерными координатами в точки с двумерными координатами при помощи ортогональной проекции. Это означает, что перспектива здесь не используется, и объекты находящиеся на дальнем плане, не уменьшаются. Это подходит для моделирования небольших объектов и специальных эффектов, но не годится для создания больших трехмерных сцен.

Углы куба

Теперь приступим к созданию восьми вершин куба. Данные о каждой вершине будем хранить в объекте со свойствами х, у и z. Весь список объектов хранится в массиве.

// Создаем массив из 8 точек для вершин куба,
function makePoints() {
points = new Array();
points[0] = {x: 30, y: 30, z: 30};
points[1] = {x: -30, y: 30, z: 30};
points[2] = {x: -30, y: -30, z: 30};
points[3] = {x: 30, y: -30, z: 30};
points[4] = {x: 30, y: -30, z: -30};
points[5] = {x: 30, y: 30, z: -30};
points[6] = {x: -30, y: 30, z: -30};
points[7] = {x: -30, y: -30, z: -30};
// Создаем восемь клипов для вершин куба,
for(i=0;i attachMovie( "point", "point"+i, i )
}
}

Данная функция создает восемь клипов из эталона, хранящегося в библиотеке. Имя каждого клипа состоит из слова "point" и числа от 0 до 7. Число соответствует точке массива, которую представляет клип.

Команда attachMovie создает новый клип из эталона, хранящегося в библиотеке. Однако для того, чтобы его можно было воспроизвести во Flash player или на Web-странице, необходимо назначить ему свойство Export for ActionScript. Это можно сделать, выбрав команду Options -> Linkage в окне Library. Вы также должны назначить клипу идентификатор. В данном случае назовем его "point".

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

// Устанавливаем координаты точек и их яркость на экране,
function drawPoints() {
for(i=0;i loc = plotPoint(points[i]);
this["point"+i]._x = loc.x;
this["point"+i]._y = loc.y;
this["point"+i]._alpha = loc.z+100;
}
}

Все вышеупомянутые функции должны помешаться в главную временную шкалу. Следующие строки вводят модель и подготавливают переменную rotation.

// Вызываем функцию инициализации и останавливаем
// воспроизведение ролика в этом кадре,
rotation = 0;
makePoints();
stop();

Теперь остается только обратиться к функции drawPoints. Обращение выполняется в небольшой функции reposition. Она изменяет переменную rotation в зависимости от положения курсора в правой или левой части экрана. Функция также задает переменную plane исходя из положения курсора по вертикали. Затем функция вызывает функцию drawPoints для задания текущей позиции каждой точки.

// Изменяем позицию куба в каждом кадре,
function reposition () {
rotation += (275-_xmouse)/1000;
plane =- (200-_ymouse)/100;
drawPoints();
}

Функция reposition вызывается в каждом кадре из клипа, который находится за пределами рабочего поля и предназначен для запуска данной части кода при каждом его повторе.

onClipEvent(enterFrame) {
_root.reposition ( );
}

Создание ролика практически завершено. Восемь точек на экране составляют куб, который вращается и поворачивается в зависимости от того, как пользователь перемешает мышь. Ролик можно посмотреть в 3dcubepoints.fla. Фрагмент этой анимации. изображен на рис. 5.10.

Рисунок 5.10 Трехмерный куб, представленный восемью точками на экран

Добавление ребер

Восемь точек куба создают довольно точную иллюзию трехмерного объекта, но вы можете усовершенствовать модель. Если добавить линии для каждого ребра фигуры, она приобретет еше больше сходства с кубом даже когда не вращается.
Во Flash динамические линии создаются на основе библиотечного эталона, содержащего простую линию. Линия начинается в центре клипа и тянется вправо и вниз. Она простирается ровно на 100 пикселов по горизонтали и по вертикали. В панели Properties необходимо установить толщину линии как hairline. На рис. 5.11 изображено основное окно Flash, которое содержит такую линию. Обратите внимание, что шаг сетки составляет 50x50 пикселов.

Рисунок 5.11 Клип простой линии используется для создания динамических линий на рабочем поле

У куба 12 граней, следовательно, вам необходимо 12 линий. Вместо того чтобы задавать координаты х, у и z обоих концов каждой линии, вы можете использовать две точки, уже имеющиеся в массиве points. Каждая линия имеет два параметра: p1 и р2.

// Создаем массив из 12 линий для граней куба,
function makeLinesO {
lines = new Array ();
lines[0] = {pi: 0, p2: 1};
lines[1] = {pi: 1, p2: 2};
lines[2] = {pi: 2, p2: 3};
lines[3] = {pi: 3, p2: 0};
lines[4] = {pi: 4, p2: 5};
lines[5] = {pi: 5, p2: 6};
lines [6] = {pi: 6, p2: 7};
lines[7] = {pi: 7, p2: 4};
iines[8] = {pi: 0, p2: 5};
lines[9] = {pi: 1, p2: 6};
lines [10] = {pi: 2, p2: 7J} ;
lines [11] = {pi: 3, p2: 4J];
for(i=0;i<lines.length;i++) {
attachMovie("line","1ine"+i,50+i)
}
}

Вышеописанная функция создает 12 клипов. Каждый клип получает имя linex, где х - номер линии в массиве lines.
Чтобы динамически нарисовать во Flash линию, надо задать положение клипа, который ее содержит, в первой точке, затем измененить масштаб клипа и определить положение конца линии во второй точке. Так как начало линии находится в центре клипа, в первой точке задается ее верхний левый угол. Масштаб определяет протяженность линии по горизонтали и вертикали, поэтому, задав его значение равным разнице координат х и у начальной и конечной точек, вы разместите линию нужным образом.
К примеру, если вы хотите, чтобы ваша линия начиналась в точке с координатами (50,80) и заканчивалась в точке с координатами (170,210), то надо задать первую точку, присвоив переменным _х и _Y значения 50 80 соответственно. Затем вы должны вычислить разницу координат по горизонтали: 170 - 50 = 120. Разница координат по вертикали будет следующей: 210 - 80 = 130. Задав значения переменных _xscale и _yscale равными 120 и 130 соответственно, вы получите линию с начальными координатами (50,80) и конечными координатами (170,210).

// Рисуем грани куба,
function drawLines() {
for(i-0;i loci = plotPoint(points[lines[i].pi]);
Ioc2 = plotPoint(points[lines[i].p2]);
this["line"+ij._x = locl.x;
this [ "line"+i] ._y = locl.y;
this["line"+i]._xscale = loc2.x-locl.x;
this["line"+i]._yscale = loc2.y-locl.y;
this["line"+i]._alpha = loc1.z+100;
}
}

Важно, чтобы высота и ширина клипа линии была равна 100 пикселам. Тогда масштаб 100% будет соответствовать 100 пикселам по ширине и высоте, 200% - 200 пикселам и т. а. Параметр толщины линии должен быть определен как "hairline", чтобы масштабирование не оказывало никакого влияния на ее толщину. Линия любой другой толщины, например 1, изменит свой масштаб соответственно изменению переменных _xscale и _yscale.

Все, что осталось сделать для того, чтобы к кубу были добавлены грани, - это задать вызов функции makeLines при запуске ролика, а также функцию drawLines из функции reposition. На рис. 5.12 показан полученный результат. Весь ролик вы можете увидеть, запустив файл 3Dcube.fla.

Рисунок 5.12 Трехмерный куб, состоящий из точек и пиний

Другие возможности

Конечно, вы можете создавать фигуры более сложные, чем куб. На рис. 5.13 изображена небольшая модель космического корабля. Эта программа, содержащаяся в файле 3Dspaceship.fla на Web-сайте, обходится без функции drawPoints, хотя и использует массив points для задания углов фигуры.

Рисунок 5.13 Простая трехмерная модель космического корабля; в ролике корабль вращается

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

Назад Начало  



Книжный магазин