Гэри Розенцвейг - Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript

screenx += 275;

screeny += 200;

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

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

Примечание

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

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

(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. Число соответствует точке массива, которую представляет клип.

...

Примечание

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

Кроме точек и функции, преобразуюшей их координаты в экранное представление, необходимо ввести небольшую функцию, которая бы соединяла линиями полученные точки. Помимо параметров _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;

}

}...

Внимание!

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

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

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