Игра "Трон" на Flash (AS 2.0)
TimeWeb

Игра "Трон" на Flash (AS 2.0)

Введение

В данном уроке мы с вами сами с "нуля" создадим игру "Трон" на Flash. Данный урок я реализовывал во Flash CS4 с использованием Action Script 2.0.

Ну я думаю, что если у вас CS3 или CS5, то особых проблем не возникнет.

Итак, начнем...

Создание проекта

Создадим отдельную папочку "tron", в ней мы будем хранить все файлы нашей игры (сам файл игры + файлы классов).

Создадим проект: File --> New... --> Flash Project. В выпадающем меню выберем "New Project...":

Далее создадим основной файл игры: кликаем по пиктограмме "New File" в нижней части окна "PROJECT", имя задаем как "index", тип "Flash File", галочу открытия сразу после создания оставляем активной. Итак, окно "PROJECT" у нас сейчас выглядит так:

Окно PROJECT

Двинемся дальше...

Зададим настройки нашему главному файлу. Для этого надо кликнуть мышкой при активном инструменте "Selection Tool" на пустом месте рабочей области и в перейти в панель "Properties":

Небольшое отступление: если я в дальнейшем буду упоминать какую-либо панель или окно и не буду говорить где её найти, то знайте: все панели во Flash находятся в верхнем выпадающем меню "Windows".

Создание объектов

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

Перейдем в библиотеку (окно "Library") и кликнем по пиктограмме "New Symbol...", имя зададим как "Игрок 1", тип "Movie Clip", кликнем OK, откроется окно создания МувиКлипа. Первый игрок у нас будет синяя мигающая точка, её и создаем:

Выберем инструмент "Oval Tool", нарисуем круг, в панели "Properties" зададим ему настройки:

Окно PROPERTIES

Теперь сделаем так, чтобы наш круг моргал:

Панель "Time Line" для МувиКлипа "Игрок 1" у нас выглядит так:

Панель TIMELINE

Вернемся к сцене, кликнув по ссылке "Scene 1" (она видна на рисунке выше).

По аналогии сами создайте МувиКлип "Игрок 2", отличие его будет лишь в том, что его цвет будет красным.

Перейдем в библиотеку (окно "Library") и кликнем по пиктограмме "New Symbol...", имя зададим как "След игрока 1", тип "Movie Clip", кликнем OK, откроется окно создания МувиКлипа. След игрока 1 у нас будет синяя точка, её и создаем:

Выберем инструмент "Rectangle Tool", нарисуем прямоугольник, в панели "Properties" зададим ему настройки:

Панель TIMELINE

Вернемся к сцене, кликнув по ссылке "Scene 1".

По аналогии сами создайте МувиКлип "След игрока 2", отличие его будет лишь в том, что его цвет будет красным.

Написание кода

Определим то, что у нас должны "уметь" объекты.

Игрок должен:

След должен:

Приступим к реализации...

Для игроков мы не будем создавать отдельные классы, т.к. их у нас будет всего два и проще весь код запихать внутрь самих объектов.

Переместим на сцену из библиотеки по одному экземпляру каждого игрока (просто перетищив их мышкой из библиотеки на сцену) и зададим им следующие настрокий в панеле "Properties" (выделяя важдый из них):

Теперь выделим первый кадр на панели Time Line (собственно и единственный) и нажмем F9, откроется панель "Actions" (для программирования в кадре), здесь мы напишем следующий код:

Панель ACTIONS

Закроем панель "Actions".

Теперь выделим игрока 1 и нажмем F9, откроется панель "Actions" (для программирования внути объекта), здесь мы напишем следующий код:

Панель ACTIONS

Закроем панель "Actions".

Игрок 2 у нас будет рулить уже не стрелочками, а кнопками W-S-A-D (в обработчике события Key.isDown() следует использовать их ASCII код), также его начальное местоположение немного изменится, поэтому для него код будет выглядеть так (вставьте его в игрока 2):

Панель ACTIONS

Закроем панель "Actions".

Поздравляю! Теперь вы можете запустить проект (Ctrl + Enter) и увидеть, что оба игрока уже могут управлять своими "Мотоциклами".

Полезное примечание: когда вы находитесьв панеле "Actions" и уже хотите её закрыть (код написан), не поленитесь нажать кнопку в виде синей галочки "Sheck syntax", она попробует найти ошибки в вашем коде и подскажет как их исправить. При нажатии на эту кнопку, если есть ошибки, то они отображаются в панеле "Compilel Errors".

Можно сказать что половина игры написана. Далее мы будем дорабатывать полученное.

Промежуточный результат: скачать .swf (правой кнопкой --> "сохранить объект по ссылке как...")

Оставление следа

Теперь нам надо создать сласс следа для одного из игроков. Откроем окно "Project" (Window --> Other Panels --> Project) и создадим новый класс, кликнув по пиктограмме "Create Class". Зададим классу имя "Sled1" и кликнем "Create class".

Перед нами файл, описывающий класс следа для игрока 1. Изменим его следующим образом:

Класс следа

Теперь перейдем в библиотеку, кликнем правой кнопкой по символу "След игрока 1" и выберем "Properties...". Нам необходимо привязаь след к классу, который мы только что создали:

Настройки мувиклипа След игрока 1

Далее мы создадим еще один класс, он будет хранить все наши следы игрока 1. Т.е. в нем мы заведем массив, в котором будут храниться наши следы. Также в этом классе мы предусмотрим функцию, которая будет добавлять следы игрока 1. Для этого снова в панели "Project" создадим новый класс, который назовем "MassivSled1". Выглядеть он у нас будет следующим образом:

Класс группы следов игрока 1

Теперь в пером кадре добавим несколько строк кода, инициирующих появение класса следов 1:

Код кадра 1

Нам надо добавлять появление следа после каждого движения игрока 1. Для этого в код игрока 1 добавим следующее:

Код добавления следа для игрока 1

Весь алгоритм оставления следа мы с вами проработали. По аналогии сами реализуйте оставление следа игроком 2. Примите во внимание, что переменная "i1", созданная для определения идентификатора каждого следа игрока 1, началась с нуля и увеличивается при каждом следе. Поэтому стоит переменную "i2" (для следа игрока 2) создать и сразу приравнять не к нулю, а к 100000, к примеру.

Промежуточный результат: скачать .swf (правой кнопкой --> "сохранить объект по ссылке как...")

Ограничение для игроков

Нам нужно ограничить игрока в передвижении. А именно: если игрок двигется вперед, то нам надо запретить ему двигаться назад, даже если он нажал кнопку движения назад. Аналогично со всеми другими сторонами. Зайдем в код игрока 1 (Выделим его и нажмем F9) и немного откорректируем код, создадим небольшие проверки:

Код игрока 1

Аналогично измените код игрока 2.

Немного интересного (отзеркаливание)

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

Код кадра 1

Небольшая оптимизация игры

Сейчас наша игра написана немного неправильно. Если вы поиграете в неё 2-3 минуты, то все начнет тормозить. Происходит это из-за того что у нас обьектов (следов) становится очень много и у каждого есть событие "onClipEvent (enterFrame)" - оно очень сильно загружает процессор. Давайте вынесем его в отдельную функцию и будем её вызывать из самих игроков.

Из класса следа это событие удалим полностью:

Код класса След 1

Аналогично измените класс следа 2.

В первом кадре создадим функцию, которая будет производить проверку:

Функцию проверяющая соприкосновение объектов 1

Осталось вызвать эту функцию из игроков, передав в неё нужные параметры:

Вызов функции из игрока 1

Для игрока 2 пропишите те же самые строки когда, но в качестве второго параметра передайте двойку.

Ну вот, наша игра стала полегче. Однако, все равно, если долго играть, то она будет "виснуть" - слишком уж много объектов на сцене появляется (следов), а здесь уже дело не в процессоре, а в оперативной памяти. Другими словами: чем больше у пользователей свободной оперативной памяти, тем дольше они смогут играть в игру. Ну ладно - наша с вами задача не оптимизировать игры, а пока что, только научиться их делать.

Проигрыш

Давайте сделаем прогирыш. Переменная, отвечающая за проигрыш у нас есть, осталось только везде подставить её проверку, а в случае проигрыша вывести результат игры.

Давайте в кодах игроков зададим эту самую проверку:

Код игрока 1

Для второго игрока код будет абсолютно идентичным, пропишите его.

Сообщение о проигрыше

Теперь когда какой-либо игрок во что-нибудь врезается, то игра останавливается. Осталось только вывести надпись: кто проиграл. Добавьте на сцену текстовое поле и задайте ему следующие характеристики:

Динамическое текстовое поле 1

Теперь запишем в него сообщение, если кто-то проиграл. Сделать это можно из любого объекта, но правильней это будет сделать из функции, которая проверяет столкновения (находится она у нас в первом кадре):

Код кадра 1

И последний штрих: добавим рамку границу для нашей игры. Сделать это можно следующим образом: нарисовать прямоугольник с черной границей и без заливки во вся сцену.

Итоговый результат: скачать .swf (правой кнопкой --> "сохранить объект по ссылке как...")

Исходники: скачать .7z

Заключение

На этом мы остановимся. Игра готова, играть можно, а самое главное, можно играть вдвоем и это куда интереснее. Если вы все поняли, то ,я думаю, для вас не составит труда её доработать. Как? Ну например:

Ну вот и все. Собственно, это все, что я хотел вам рассказать. Если есть какие-то вопросы - готов на них ответить - задавайте.