Читать онлайн «Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript». Страница 26

screenx += 275;

screeny += 200;

(11) → // Возвращаем новые координаты.

return({x:screenx,y:screeny,z:screenz});...

Опишем каждый шаг вышеприведенного кода:

(1)  Задаются координаты x, у и z объекта.

(2) Вычисляется расстояние на плоскости xy от центра координат до проекции объекта на плоскость.

(3) Определяется угол на плоскости xy.

(4) Значение угла увеличивается на величину поворота объекта.

(5) Задаются новые координаты x, у и z с учетом изменения угла.

(6) Задается расстояние от центра координат до объекта на плоскости yz.

(7) Определяется угол на плоскости yz.

(8) Задается наклон плоскости.

(9) Задаются новые координаты x, у и z с учетом наклона.

(10)  Центр новых координат имеет значение 0. Для корректировки к ним прибавляется действительное значение центра экрана (в данном случае (275, 200)).

(11)  Теперь координаты x и у могут использоваться для отображения объекта на экране. С помошью координаты z можно также снизить яркость объектов, которые должны казаться расположенными дальше от пользователя.

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

Углы куба

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

// Создаем массив из 8 точек для вершин куба.

function makePointsO {

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<points.length;i++) {

attachMovie("point", "point"+i, i)

}

}

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

...

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

// Устанавливаем координаты точек и их яркость на экране.

function drawPoints() {

for(i=0;i<points.length;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, размешенном на Web-сайте. Фрагмент этой анимации изображен на рис. 5.10.

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

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

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

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

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

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

// Создаем массив из 12 линий для граней куба.

function makeLines() {

lines = new Array ();

lines[0] = {p1: 0, p2: 1};

lines[1] = {p1: 1, p2: 2};

lines[2] = {p1: 2, p2: 3};

lines[3] = {p1: 3, p2: 0};

lines[4] = {p1: 4, p2: 5};

lines[5] = {p1: 5, p2: 6};

lines[6] = {p1: 6, p2: 7};

lines[7] = {p1: 7, p2: 4};

lines[8] = {p1: 0, p2: 5};

lines[9] = {p1: 1, p2: 6};

lines[10] = {p1: 2, p2: 7};

lines[11] = {p1: 3, p2: 4};

for(i=0;i<lines.length;i++) {

attachMovie("line","line"+i,50+i)

}

}

Вышеописанная функция создает 12 клипов. Каждый клип получает имя linex, где x – номер линии в массиве lines.

Чтобы динамически нарисовать во Flash линию, надо задать положение клипа, который ее содержит, в первой точке, затем измененить масштаб клипа и определить положение конца линии во второй точке. Так как начало линии находится в центре клипа, в первой точке задается ее верхний левый угол. Масштаб определяет протяженность линии по горизонтали и вертикали, поэтому, задав его значение равным разнице координат x и y начальной и конечной точек, вы разместите линию нужным образом.

К примеру, если вы хотите, чтобы ваша линия начиналась в точке с координатами (50,80) и заканчивалась в точке с координатами (170,210), то надо задать первую точку, присвоив переменным _x и _Y значения 50 и 80 соответственно. Затем вы должны вычислить разницу координат по горизонтали: 170 – 50 = 120. Разница координат по вертикали будет следующей: 210 – 80 = 130. Задав значения переменных _xscale и _yscale равными 120 и 130 соответственно, вы получите линию с начальными координатами (50,80) и конечными координатами (170,210).

// Рисуем грани куба.

function drawLines() {

for(i=0;i<lines.length;i++) {

loc1 = plotPoint(points[lines[i].p1]);

loc2 = plotPoint(points[lines[i].p2]);

this["line"+ij._x = locl.x;

this["line"+i]._y = locl.y;

this["line"+i]._xscale = loc2.x-loc1.x;

this["line"+i]._yscale = loc2.y-loc1.y;

this["line"+i]._alpha = loc1.z+100;

}

}...

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

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