Можно создавать игру на коммерческом движке. Это дорого — нужно лицензировать чужой "инджайн" (engine).
Можно написать свой движок. Это сложно. Нужно нанимать программиста, платить ему зарплату — тогда движок будет хороший. Можно попросить соседа Петю, который на коленке за бутылку пива напишет вам плохой движок.
Можно создавать игру на бесплатном движке типа Genesis3D. Это — дешево, сердито, но долго, и игру в итоге придется распространять бесплатно.
В первый раз, прочитав статью про Genesis3D в "Игромании", я сел за компьютер и решил создать игру "Институт МЭСИ". Я построил первый этаж своего института, и в нем уже можно было ходить. Но... на большее меня не хватило. Так что бесплатные движки — путь для педантов. Сколько времени уходит только на построение уровня, не говоря уже про все остальное... Я так и не закончил работу. Бросил, создав пару кабинетов.
В этой и последующих статьях мы рассмотрим технологию, с которой просто и приятно работать. Главное — результат получается очень быстро. Полчаса — и вот перед вами уже почти готовая игра. Я говорю о технологии Flash. Flash — это дешево, сердито и быстро. Flash — это практично.
Во тьме веков
Первоначально технология Flash была разработана исключительно для Интернета. Созданные в ней части html-страниц (или даже целые страницы) поражают своими спецэффектами, но в то же время могут занимать всего 5 кб. Но позже начали появляться игры на Flash. Большинство из них не уступают по качеству играм, созданным при помощи специализированных движков. Quake на Flash-e сделать не получится (хотя шутер типа Doom — реально), зато игрушки наподобие "Диггера", "Пакмена", "Арканоида" — запросто. И благодаря простоте редактора Macromedia Flash на создание может уйти всего пара часов.
|
Теоретическая база
Изучим основы программирования во Flash. Первое, чему нам следует научиться — это рисование. Оно имеет ряд особенностей. В редакторе любое компьютерное изображение может быть представлено в двух видах: в векторном и растровом.
Векторная графика
Картинка состоит из отдельных линий-векторов, которые образуют рисунок. В файле хранится информация не о каждой точке, а об элементах, из которых состоит изображение.
Плюсы: Изображения обычно занимают достаточно мало места и более легки в редактировании. Картинка может менять свои размеры, не теряя при этом четкости и общего расположения элементов.
Минусы: Изображения достаточно "простые". Заметна их, как бы сказать, "нарисованность".
Растровая графика
Изображение в растровой графике состоит из отдельных точек различных цветов.
Плюсы: Изображение фотографического качества.
Минусы: Большой размер файлов и трудоемкость редактирования, плохая масштабируемость. При уменьшении — исчезают мелкие детали, при увеличении изображение может превратиться всего лишь в кучу разноцветных квадратов.
В Macromedia Flash работа в основном происходит с векторными изображениями.
Первые шаги
В первый раз загрузив редактор, вы ужаснетесь — так много там всяких менюшек, кнопочек, непонятных символов. Но все станет просто, как только мы разберемся, что за что отвечает. Из чего же состоит Flash-редактор?
Меню
Здесь мы только вкратце разберем
|
Меню File:
Import — добавление в проект готовых графических и звуковых объектов.
Publish Settings — опция позволяет настроить все необходимые параметры для сохранения проекта в готовом для публикации виде.
Меню Edit:
Edit Symbols — редактирование символов.
Cимволом во Flash называется любой самостоятельный графический объект, преобразованный в символ. Символ может быть неподвижной картинкой, кнопкой или клипом.
Меню Insert:
Convert to Symbol — преобразовать выделенный объект в символ.
New Symbol — создать новый символ.
Layer — добавляет новый, пустой слой.
Motion Guide — добавляет слой, который предназначен для задания произвольной траектории движения объекта.
Frame (кадр) — создать новый, пустой кадр.
Remove Frame — удалить кадр.
Keyframe — создает новый ключевой кадр с тем же содержимым, что и предыдущий ключевой кадр в этом слое. Ключевой кадр — кадр, в котором задаются параметры изменения анимации.
Blank Keyframe — создает пустой ключевой кадр.
Clear Keyframe — превращает выделенный Keyframe в обычный.
Create Motion Tween — задает режим передвижения объекта от предыдущего Keyframe до последующего.
Scene — вставить новую сцену в фильм.
Remove Scene — удалить сцену.
| |
Меню Modify:
Instance — запускает окно Instance Properties для задания свойств выделенному объекту.
Frame — свойства кадра.
Layer — свойства рабочего слоя.
Movie — параметры фильма (размер, кадры).
Smooth — сгладить.
Straighten — выпрямить.
Optimize — оптимизировать изображение.
Trace Bitmap — трассировка растровой графики. Перевод обычной графики в векторную.
Transform — трансформация объектов (повороты, изменение размеров).
Arrange — позволяет изменять уровень "наложенности" объектов.
Frames — синхронизация кадров, или их реверс.
Group — группировка различных объектов в одну фигуру.
Ungroup — разгруппировка.
Break Apart — разбивает изображение на отдельные символы.
Меню Window:
Library — хранилище объектов текущего проекта.
Common Libraries — стандартная библиотека. Содержит набор объектов "по умолчанию".
Панели инструментов
Инструменты овал (Oval), прямоугольник
|
Заливка. Использование заливки имеет свои маленькие хитрости. Наверняка вам знакома ситуация, когда, рисуя что-либо в другом графическом редакторе, вы решили закрасить, как вам казалось, замкнутую область и вдруг закраска залила все вокруг? Если в других редакторах помогала только отмена предыдущего действия, то во Flash этого можно избежать, задав величину зазора Gap Size. А если хочется в качестве заливки применить не цвет или градиент, а фотографию или рисунок? Достаточно импортировать изображение во Flash — File\Import, затем его разбить Modify\Break Apart (Ctrl+B), далее "собрать" изображение пипеткой (Dropper), и оно станет текущей заливкой, которой можно закрасить необходимую нам фигуру. Для знающих Photoshop данные действия знакомы.
Для выполнения действия с фигурой, например такого как движение, потребуется объединить (Group — Ctrl+G) все объекты текущего слоя в один объект. А для выполнения действия трансформации (см. следующий номер "Мании"), наоборот, потребуется разбить объект (-ы) на множество точек (Break — Ctrl+B). Сгруппированные объекты вы не можете непосредственно редактировать (изменять цвета, толщину линий, изменять отдельные части). Для этого надо объект разбить.
Инструменты Ink Bottle и Paint Bucket. Ink Bottle служит для изменения параметров границ объекта, в то время как инструмент Paint Bucket — для изменения заливки.
Инструмент Arrow Tool. Он позволяет изменять контуры уже нарисованных объектов. В Options инструмента можно включать/выключать режим Snap to Objects (притягивать к сетке и другим объектам).
Инструмент Line (линия). Толщину/цвет/стиль линии можно задать, выделив оную, нажав на самую первую кнопочку (Info) в правом нижнем углу и выбрав там закладку Stroke.
Немного поэкспериментировав с закладками, вы научитесь изменять параметры заливки (закладка Fill), поворачивать/сжимать объекты (Transform) и увеличивать/уменьшать/двигать объект на точное количество пикселей (Info). Оперировать с цветами поможет кнопочка Mixer (параметр Alpha означает прозрачность). Для работы же с текстом подойдет кнопка Text. Закладку Text Options там можете пока не трогать — это тема следующей статьи. Другие кнопки, скорее всего, вам также пока не понадобятся.
Рабочая зона (Stage)
В рабочей зоне происходит основная работа над игрой или мультфильмом.
Слои (Layers). Расположены в самом верху экрана. Они позволяют создавать сложное многоуровневое изображение, различные части которого наложены друг на друга сверху или снизу. Добавить новый слой можно, выбрав в меню Insert\Layer. Менять чередование слоев можно, перетаскивая их мышкой.
Линейка времени (Timeline). Состоит из кадров (frames), а из кадров, в свою очередь, состоит наш фильм. Добавлять кадры можно, используя меню Insert.
Специфика рисования
У рисования во Flash есть свои особенности. Связано это с тем, что рисовать приходится в векторной графике, а не
|
Объединение. Любая фигура с однотонной заливкой и не имеющая границ, наложенная на другую фигуру с теми же характеристиками, после снятия выделения образует единое целое. Используя данный прием, можно составить сложные фигуры из готовых объектов.
Сегментирование. Если на фигуру будет наложена другая фигура, но с отличными характеристиками, например другого цвета, то склеивания не произойдет.
Деление на части. Как работает деление, поясним на наглядном примере. Нарисуем любую замкнутую фигуру с однотонной заливкой. Теперь пересечем ее карандашом или прямой линией. Части заливки, разделенные чертой, стали самостоятельными фигурами, с которыми можно работать отдельно. После изменения самостоятельных заливок черту можно убрать и получить фигуру с новыми характеристиками закраски.
Разберемся с особенностями рисования во Flash на примере. Изобразим флаг России. Нарисуем прямоугольник, удалим границы, начертим 2 разделяющие линии, раскрасим нужные части и удалим уже ставшие ненужными линии. Занесем наш флаг в библиотеку (Library). Библиотека представляет собой своеобразное хранилище часто используемых объектов. Например, вы в течение всего фильма используете определенный объект. Но вдруг в конце работы над фильмом вам понадобилось добавить к нему какую-либо деталь. Что делать? Придется изменять каждый кадр на протяжении всего фильма? Если вы занесли объект в библиотеку, то не придется. Изменяем объект в библиотеке — и теперь все изображения объекта в каждом кадре фильма изменятся.
Чтобы добавить объект в библиотеку, его нужно выделить. Далее можно выбрать меню Insert\Convert to Symbol, либо просто нажать клавишу F8. Появится меню со свойствами библиотечных объектов.
Movie Clip — большинство объектов библиотеки являются "клипами". Это могут быть как статические картинки, так и клипы с анимацией.
Button — кнопка (как работать с кнопками, мы поговорим в следующей статье).
Graphic — графическое изображение.
Для нашего флага мы выберем тип Movie Clip.
Жмем Ok. Флаг — в библиотеке. Чтобы в любой момент посмотреть содержимое библиотеки, достаточно нажать Ctrl+L.
И все-таки оно движется!
Пришло время вдохнуть жизнь в наш статический рисунок. Проделаем следующие действия.
1. Щелкнем на первом кадре Timeline. Прямоугольник, символизирующий кадр, станет черного цвета с белым кружочком, а нарисованная фигура будет выделена.
2. Зададим начало анимации Insert\Create Motion Tween. Штриховка, символизирующая выделение нарисованных фигур, будет снята, а вокруг объекта появится общая рамка выделения. Флаг автоматически будет преобразован в символ и помещен в библиотеку.
3. Щелкнем на любом кадре Timeline (например, на 30-ом), кадр станет синего цвета.
4. Создадим ключевой кадр Insert\Keyframe (F6), выбранный кадр станет черного цвета с белым кружочком, то есть он станет ключевым, а между предыдущим и созданным кадром будет нарисована стрелочка на голубом фоне, символизирующая анимацию.
5. Оставаясь в последнем кадре, перенесем нарисованный объект в другое место экрана.
Первый фильм (а может, и заставка игры) готов. Жмем Control\Test Movie или Ctrl+Enter и смотрим, что же у нас получилось.
Подведем итог. Мы научились основам рисования во Flash, изучили особенности использования векторной графики. И создали простенькую анимацию, хотя толком и не поняли, по каким принципам она работает.
Конкурс! Конкурс!
Прощаясь с вами до следующей статьи, хочу дать небольшое домашнее задание, которое поможет хорошенько освоиться с рассмотренными функциями и закрепить полученные знания. Предлагаю всем желающим сделать фильм. Пусть он будет называться "Чебурашка в гнезде" (для самых ленивых — пускай будет "Мышка в норке", но работы с мышкой на конкурсе не рассматриваются)). Идея такова.
1. Есть Че-Бурашка. Для тех, кто плохо рисует или кому не хочется искать картинку — можно взять изображение мышки из стандартной библиотеки: Window/Common Libraries/Graphics /Mouse).
2. Есть Че-Бурашкино гнездо (норка), состоящее из двух половинок.
3. Че-Бурашка летит в гнездо (мышка бежит в свою норку).
4. За счет того, что гнездо (норка) состоит из двух частей, мистер Чебби (мыша) как бы постепенно в гнезде прячется.
|
1. Всего должно быть не менее трех слоев. Два слоя по краям — части гнезда, слой между ними — летящий Чебур. Как будут выглядеть Че-Бурашка и гнездо — решать вам. Чем прикольней, тем лучше.
2. Гнездо разбиваем на две части с помощью свойства "деление на части", предварительно разбив (Ctrl+B) его до точек.
Свои шедевры можете присылать на ящик MakarenkOFF@igromania.ru. От вас требуется исходник, сжатый RAR-ом. Сжатый файл не должен быть больше 50 кб. Наиболее оригинальные работы будут размещены на нашем компакте, а за самую прикольную работу лично от себя обещаю выслать победителю компакт с подборкой прикольных Flash'ек (несколько десятков мультов, игр, черного юмора и просто красивых работ на Flash).