Глава 4. Управление перемещением

В этой главе мы собираемся перемещать нашего Героя по карте игры, используя клавиши перемещения на клавиатуре. Герой идет в каком-то направлении и перемещение соответственно анимируется. Анимация останавливается, когда цель достигнута. Итак творим анимацию.

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

Первое, определим примитивную анимацию движения нашего Героя. Создаем 3 новых клипа. Вам будет нужен один клип для перемещения Героя налево ( или направо, Я выбрал налево), 1 клип для перемещения вверх и последний клип для перемещения вниз. Внутри каждого из этих клипов размещаем Героя.

(Лучше посмотреть клипы в соответствующем файле исходника к этой главе. Герой стал Треугольным, так это ни чего, потом разъестся.)

Для этих клипов не требуется код.

Подредактируем основной клип "char" – создаем 5 ключевых кадров внутри клипа.

В 1-ом ключевом кадре размещаем клип "char_up", во 2-ом размещаем "char_left", в 4-ом – клип "char_right" и в 5-ом – клип "char_down". Можно использовать один и тот же клип для перемещения влево-вправо, только нужно перевернуть его по горизонтали. Теперь удостоверьтесь, что каждый экземпляр анимации перемещения имеет экземпляр с наименованием "char". Проверьте каждый кадр с 1 по 5. Все поименованы одинаково? Не волнутесь, даже, если ничего не понимаете, все разъяснится после просмотра анимации

(Сейчас, главное не изыски рисования во Flash, а понимание сути построения движка. Поэтому самый простой путь, скачать исходник примера к главе, и взять клип Героя из библиотеки. Сначала бросить его на любое место рабочего экрана из библиотеки в исходнике, потом копируем экземпляр клипа и переходим к своему проекту. Вставляем экземпляр клипа и после этого клипы в рабочей области своего проекта и исходного файла можно удалить. При этом в библиотеке вашего проекта останется клип Героя.)

Отлично, пришло время писать код.

Кодирование

Наш Герой будет перемещаться по горизонтали и вертикали, для этого добавим в свойства объекта - скорость перемещения:

char={xtile:2, ytile:1, speed:4};

Скорость – количество пикселов, пройденных нашим Героем на экране. Выше скорость и Герой движется быстро, меньше скорость и Герой движется медленно. Это хороший пример использования целых чисел для данного свойства. Это намного лучше, чем искать разницу между 10 пикселами и 10,05678 пикселами. Экранные координаты всегда целые числа, а у нас пока координаты Х и У полностью соответствуют экранным координатам.

Как вы помните (если забыли, гляньте предыдущую главу), мы создали объект _root.char, чтобы хранить информацию о себе любимом. Клип "char" мы поместили в клип "tiles". Чтобы наш Герой встал и пошел, нужны две функции и диспетчер для проверки движения.

Перенесите клип "empty" на экран. Его можно разместить где-нибудь за границей видимой области. Его единственное назначение вызывать функцию и не важно, где он распологается. Теперь пишем код :

onClipEvent (enterFrame) {

_root.detectKeys();

}

Как можно видеть в каждом кадре мы вызываем функцию detectKeys. Теперь пишем и ее.

//****************
// Функция: detectKeys
// Назначение: Определение нажатых клавиш, вызывается в событии onClipEvents
// Параметры:
// Возвращает:
// ****************************
function detectKeys() {

var ob = _root.char; // Героя запишем в промежуточную переменную
var keyPressed = false; // Флаг нажатия клавиши

// Проверим (Нажата кнопка ВПРАВО)?
if (Key.isDown(Key.RIGHT)) {

// Да – запускаем перемещение Вправо
// Здесь вызываается функция, как метод _root, как то об этом ничего не говорилось
keyPressed=_root.moveChar(ob, 1, 0);
// Нет – Проверим (Нажата кнопка ВЛЕВО)?
} else if (Key.isDown(Key.LEFT)) {

keyPressed=_root.moveChar(ob, -1, 0);
// Нет – Проверим (Нажата кнопка ВВЕРХ)?
} else if (Key.isDown(Key.UP)) {

keyPressed=_root.moveChar(ob, 0, -1);
// Нет – Проверим (Нажата кнопка ВНИЗ)?
} else if (Key.isDown(Key.DOWN)) {

keyPressed=_root.moveChar(ob, 0, 1);
}

// Проверим (клавиши не нажимались)?
if (!keyPressed) {

// ДА – стоять зорька, конец анимации
ob.clip.char.gotoAndStop(1);

} else {

// НЕТ – смотрим анимашку движения
ob.clip.char.play();
}

}

Первая строка – объявляем две переменные. Переменная ob хранит информацию об объекте (вспомните, там мы храним информацию о себе любимом), а вторая переменная keyPressed примет значение false. Ее будем использовать для проверки - нажато что-то или нет.

Следующие строки содержат 4 одинаковых проверки условия. Каждое из условий проверяет нажатие соответствующей клавиши. Если клавиша нажата, то вызывается функция moveChar :

keyPressed=_root.moveChar(ob, 1, 0);

При вызове функции используются 3 параметра. Первый параметр определяет объект, который проводит перемещение. Последние два параметра всегда принимают значения -1, 1 или 0. Они определяют направление перемещения по горизонтали Х (второй параметр) и вертикали У (третий параметр). Функция moveChar возвращает логическое значение, сохраняемое в переменной keyPressed. Как вы скоро увидите, функция moveChar всегда возвращает значение "true". Итак, если нажата клавиша перемещения, то переменная keyPressed примет значение true.

Последний кусок кода, если keyPressed равна false, считаем клавиша не нажата и анимация движения останавливается используя команду gotoAndStop(1). Если переменная keyPressed равна true, значит продолжаем смотреть анимацию.

Теперь вторая функция:

//****************
// Функция: moveChar
// Назначение: Перемещение объекта (Героя или еще кого)
// Параметры:
// ob - объект,
// dirx - направление по горизонтали -1, 0, 1,
// diry - направление по вертикали -1, 0, 1
// Возвращает: true
// ****************************
function moveChar(ob, dirx, diry) {

// увеличиваем коодинату по Х
ob.x += dirx*ob.speed;
// увеличиваем коодинату по У
ob.y += diry*ob.speed;
// Устанавливаем кадр анимации
ob.clip.gotoAndStop(dirx+diry*2+3);
// Запомним координаты Х и У в свойствах клипа
ob.clip._x = ob.x;
ob.clip._y = ob.y;
return (true);

}

Функция moveChar с 3 параметрами, параметр ob – объект перемещения, dirx и diry значения для перемещения по Х и У. Это универсальная функцция, мы будем использовать ее еще много раз в игре. Если у нас будут летать шары (кегли), то вызываем функцию moveChar с параметрами для шара, ну и т.п.

Следующие две строки определяют координаты Х и У объекта с учетом свойства скорости объекта ob.speed. Напомню, если у нас есть разные объекты (шары, кегли), то каждый из них имеет свою скорость перемещения. Итак, когда мы определили нажатие клавиши ВПРАВО, то вызываем функцию moveChar с параметром 1, 0 и тем самым dirx=1, diry =0. Теперь координата Х клипа будет увеличена на величину свойства скорости. Если вызывается функция moveChar с параметрами -1, 0, то координата Х будет уменьшена на величину скорости.

Примечание. Если мы хотим учитывать при движении дополнительные штучки в виде гравитации, конфликтов или еще что-то, то нужно менять формулы расчета Х и У именно здесь, прежде, чем перемещать клип. Этот способ намного лучше, по сравнению с использованием метода определения положения объекта с помощью функции клипа mc.hitTest.

Строка

ob.clip.gotoAndStop(dirx+diry*2+3);

переводит клип на кадр анимации, соответствующей направлению перемещения. Вы можете сами проверить разные вариации сочетания параметров dirx/diry, соответствующих направлениям движения (существует 4 различных пары сочетания параметров которые надо проверить). И вы увидите, что клип объекта переходит на соответствующий кадр анимации.

Не знаете как считать? Давайте прикинемся чайником: нажата клавиша ВПРАВО - dirx = 1, diry = 0. Определим кадр - diry * 2 = 0, dirx + 0 + 3 = 1 + 3 = 4.

Показывается анимация с кадра 4, и он соответствует анимации перемещения ВПРАВО - char_right.

Следующие две строки устанавливают свойства клипа _x/_y в соответствии с расчитанными координатами Х и У.

Наконец, мы возвращаем значение "true" в качестве результата выполнения функции и запоминаем его в переменной keyPressed.

Конфликты со стенками рассмотрим в следующей главе. Вот и все :)

Можно загрузить исходные коды и клипы отсюда.

Есть вопросы - пишите мне на semikin@dionaholding.ru

Читаем дальше - Глава 5. Встреча со стенкой

Возвращаемся на Начало учебника