Читать книгу Конструктор игр Clickteam Fusion - Семён Леонидович Углев - Страница 2

Урок 1. Интерфейс программы

Это наш самый первый урок. Мы познакомимся с интерфейсом программы, рассмотрим основные возможности и даже напишем свою первую мини-игру. Для этого откроем нашу программу и нажмём сочетание клавиш Ctrl-N (создание нового документа).

Окно программы можно условно разделить на несколько частей. Первая – это меню, находящееся вверху. Вторая строка, чуть ниже, на которой находятся иконки – меню быстрого доступа, представляющее собой графическое представление некоторых возможностей программы. На третьей строчки расположен ползунок масштаба и иконки визуального представления фрейма, находящегося в правой части экрана.

Боковое меню, как мы видим, разбито на две части, верхнюю и нижнюю. В верхней части расположена панель Workspace Toolbar, которая предоставляет быстрый доступ к настройкам приложения, фреймов и элементов, находящихся в нём. Нижнюю часть называют Properties Toolbar, и она пока недоступна. Информация в ней будет размещена при выборе элементов рабочей панели или элементов фрейма.

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

В правом краю экрана расположена малозаметная панель слоёв, о которой мы подробно расскажем в процессе создания игр.

Итак, рассмотрим верхнее меню.

В крайней правой части находится иконка свойств самой программы (закрыть, развернуть и пр.). Её можно скрыть, дважды кликнув по ней. За ней идут элементы меню, способные раскрываться, предоставляя доступ к различным функциям.

Первое меню – File (работа с файлами).

Структура выпадающего меню такова. Слева находится иконка данного пункта меню – если она предусмотрена и находится в строке ниже. Правее – текстовое описание действия пункта. В правом краю находятся «горячие» клавиши, благодаря которым можно совершить нужное действия, не используя выпадающее меню.

Первое меню представляет возможности:

New (Ctrl-N) – создать новый документ с чистого листа;

Open (Ctrl-O) – открыть новый документ;

Close – закрыть документ;

Save (Ctrl-S) – сохранить документ (чуть ниже находится пункт Save as… «Сохранить как», предусматривающий возможность сохранение в нужном месте);

New Project – новый проект;

Другие действия с проектом (Open Project, Close Project, Save Project, Save Project as… – аналогично документам – «открыть», «закрыть», «сохранить» и «сохранить как»);

Build – собрать. Собрать проект можно в виде готового приложения или программы-инсталлятора (а также и того, и другого). В зависимости от имеющихся экспортёров, мы можем собирать проекты для разных операционных систем;

Ниже находится перечень последних открытых проектов, а в самом низу – возможность выхода из программы (Exit).

Второе меню – Edit (редактирование).

Сейчас все пункты неактивны, поскольку документ только что открыт, и мы не производили над ним никаких действий. Тем не менее вот перечень пунктов:

Undo (Ctrl-Z) –  отменить последнюю операцию;

Redo (Ctrl-Y) –  повторить последнюю операцию;

Cut (Ctrl-X) –  вырезать элемент (с возможностью последующей вставки с удалением элемента);

Copy (Ctrl-C) –  копировать элемент (с возможностью последующей вставки без удаления данного элемента);

Paste (Ctrl-V) –  вставить элемент;

Delete (Delete) –  удалить элемент;

Clone – клонировать элемент. При этом будет создан элемент с новым именем (к наименованию добавляется цифра), с которым можно проводить независимые операции в редакторе событий;

Duplicate – дублировать элемент. Элемент с новым именем программа не создаёт, в редакторе событий он остаётся один. При этом на экране размещены для одинаковых элемента с одинаковыми именами и параметрами;

Select All (Ctrl-A) –  выделить всё;

Unselect – сбросить выделение;

Invert Selection – инвертировать выделение;

Properties – открыть окно настроек.

Третье меню – View (просмотр).

И сразу же первый пункт меню, Toolbars, предоставляет нам возможность открытия ещё одного пункта меню:

Эти инструменты позволяют нам открывать или закрывать на основном экране панели инструментов, предназначенные для быстрого доступа. Попробуйте снять или установить галочку с любого из них, и вы увидите, как появляется или исчезает та или иная панель. Можно настроить программу так, чтобы на экране были расположены только те панели инструментов, с которыми проходит активная работа.

Также, с помощью пунктов Import Settings и Export Settings можно сохранить и при необходимости восстановить сделанные настройки. Пункт меню Customize даёт нам возможность расширенных настроек каждой панели инструментов, вплоть до добавления и удаления любого пункта.

Четвёртое меню – Insert (вставка).

Меню позволяет вставить новый фрейм (New Frame), новую папку (New Folder), новый объект (New Object Ctrl-J) соответственно.

Пятое меню – Run (запуск).

Меню Run позволяет запускать весь проект, отдельное приложение и отдельный фрейм. При этом надо отметить, что при запуске одного фрейма по кнопке F7 будет запущен непосредственно выбранный фрейм, а в случае наличия в нём инструкций по переходу на другой фрейм он будет просто закрывать приложение.

Пункт Build & Run Ctrl-F8 позволяет собрать и запустить наше приложение, а пункт Stop – остановить его работу.

Шестое меню – Tools (утилиты).

Windows Explorer – открывает в проводнике Windows папку установки программы Clickteam Fusion;

Steam Workshop Tool – предоставляет доступ к хранилищу различных приложений (как правило, в формате *.mfa), которые можно скачивать и открывать программой  Clickteam Fusion;

Keyboard shortcuts – клавиатурные ярлыки – открывает окно «Помощь по клавиатуре», где можно посмотреть те или иные сочетания клавиш;

Preferences – предпочтения – открывается окно настроек программы, состоящее из нескольких вкладок.

В последнем пункте мы рассмотрим самое главное.

Во вкладке General – основные настройки для нас важно меню выбора языка (требуется перезапуск) и нижнее меню Exporters – настройки экспортёров. В первом его пункте, Android, нам необходимо установить и указать путь к директории JDK (скачать можно по ссылке www.oracle.com/technetwork/java/javase/downloads/), а также Android SDK (developer.android.com/intl/ru/sdk/index.html).

Во втором пункте, BlackBerry Java, нужно установить и указать путь к BlackBerry JDE.

Третий пункт, HTML5, равно как и четвёртый, SWF, просят нас указать путь к  директории JDK, о которым было написано в первом пункте.

Ещё одна немаловажная вкладка – это Extensions to ignore.

Иногда так случается, что при открытии скачанного проекта мы наблюдаем такое окно:

Пока в данном случае не будет установлено расширение Control X (путём нажатия на кнопку Extension Manager и выбора расширения), мы не сможем открыть проект. В данном случае мы можем помочь этому, добавив расширение ctrlx.mfx во вкладку Extensions to ignore. При этом нужно помнить, что часть функционала, связанная с этим расширением, будет потеряна.

Седьмое меню – Window (окно).

Его задачи: открыть новое окно (New Window), расположить окна каскадом (Cascade), выделить окно фреймов отдельным окном (Tile), расположить иконки (Arrange Icons) или разделить фрейм на несколько частей (Split).

С помощью данного меню можно выбрать текущим новый документ из списка, либо с помощью выбора меню Windows…

И последнее, восьмое меню, отвечает за помощь в работе с программой (совсем как этот урок).

Это собственно доступ к справке Windows (Contents), справочник по примерам (Tutorial), сами примеры (будет открыт проводник Windows), переход на официальный сайт, форум, магазин, проверка обновлений, а также окно «О программе» (About). На этом мы закончим знакомство с основными элементами интерфейса и будем возвращаться или заново изучать их в других уроках.

Ну и на последнем небольшом примере можно создать небольшую игру, чтобы понять, как работает программа.

Дважды кликнем по нашему фрейму и дважды щёлкнем левой кнопкой мыши по любому месту в белом прямоугольнике.

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

Снова аналогичным образом воспользуемся этим окном, выбрав слева вкладку Background, и разместим в нашем фрейме объект Backdrop на высоте ниже нашего объекта.

Щёлкнем левой кнопкой мыши по нему один раз и потянем вправо за правую точку, растягивая объект на ширину фрейма.

В окне настроек слева мы увидим настройки выбранного объекта. Нам нужно перейти в пункт RunTime Options и в выпадающем меню Obstacle Type выбрать тип Obstacle.

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

Затем перейдём в редактор событий (Event Editor) с помощью горячей комбинации клавиш Ctrl-E. И создадим свою первую программу, кликнув по надписи New Condition любой кнопкой мыши.

С помощью очередного клика на нашем ромбовидном объекте и выборе пунктов Collision и Backdrop создадим условие соприкосновения объекта с нашей «землёй». Теперь в правом столбце редактора найдём наш ромб и, кликнув правой кнопкой мыши по клетке ниже выберем пункты Movement и Stop.

Для большей наглядности перейдём в Event List Editor (Ctrl-L):

Если изображение на экране компьютера совпадает с картинкой, значит, программа создана правильно. Теперь проверим работу игры, нажав F8.

Клавиши управления: стрелки лево, право, Shift = прыжок.

Урок 2. "Движок" для игры

Сегодня у нас снова довольно большой урок, демонстрирующий возможности программы Clickteam Fusion. Мы напишем ни много ни мало, а собственный движок для игры.

Как мы уже умеем из предыдущего урока, создадим новый документ и установим цвет фона, к примеру, голубого цвета. Делаем это в свойствах фрейма:

Кликнем дважды левой кнопкой мыши по любому месту и выберем создание активного объекта (Active). Его мы будем использовать в большинстве случаев.

Разместим его на экране и дважды кликнем теперь по нему, попав в редактор объекта. Об этом окне стоит рассказать поподробнее.

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

Первый ряд.

 Clear (Ctrl-N) – очистить текущий рисунок;

Import (Ctrl-O) – импортировать изображение или набор анимаций;

Export (Ctrl-S) – экспортировать текущий рисунок;

Options – выбор предпочтений.

Второй ряд.

Cut (Ctrl-X) – вырезать выделенную часть;

Copy (Ctrl-C) – скопировать выделенную часть;

Paste (Ctrl-V) – вставить предварительно вырезанную или скопированную часть;

Delete – выполнить процедуру удаления.

Третий ряд.

Третий ряд представлен кнопками «Восстановить действие» (Undo Ctrl-Z) и повторить отменённое действие (Redo Ctrl-Y).

Четвёртый ряд.

Flip horizontally (Ctrl-I) – отразить горизонтально;

Flip vertically (Ctrl-J) – отразить вертикально;

Crop (Ctrl-K) – обрезать пустое прозрачное место вокруг объекта;

Transparency (Y) – произвести действия с прозрачностью объекта.

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

 Шестой ряд.

 Selection tool (B) – выделяет часть объекта с помощью мыши;

Color picker (P) – пипетка, определяет цвет внутри данного окна и устанавливает его в окне цветовой палитры;

Brush tool (D) – кисть для рисования произвольных линий;

Line tool (L) – кисть для рисования прямых линий.

Седьмой ряд.

Rectangle tool (R) – рисование прямоугольника;

Circle tool (E) – рисование окружности;

Polygon tool (G) – рисование многогранников;

Shape tool (M) – создание очертаний.

Восьмой ряд.

Fill tool (F)  – инструмент «Заливка»;

Spray tool (S) – инструмент «Аэрозоль»;

Text tool (T) – инструмент для создания текста;

Eraser tool (U) – стирательная резинка.

Девятый ряд.

Size (W) – изменение размера;

Rotate (A) – поворот объекта;

View hot spot (H) – показывает место отсчёта координат объекта;

View action point (Q) – просмотр и изменение «активной точки», например, места, откуда будут вылетать другие объекты.

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

Цветовая палитра в особом представлении не нуждается, поэтому перейдём к рассмотрению редактора анимаций.

В самом левом окне мы видим названия анимаций. Вот они:

Stopped – объект в состоянии покоя;

Walking – объект идёт;

Running – бежит;

Appearing – появляется;

Disappearing – исчезает;

Bouncing – отскакивает;

Launching – запускает;

Jumping – подпрыгивает;

Falling – падает;

Climbing – лезет по лестнице;