Добавлен , опубликован
Раздел:
ScaleForm

Что же такое ScaleForm

Если выражаться кратко и просто, ScaleForm - это технология, позволяющая использовать в качестве текстур flash-файлы. С помощью таковых можно сделать, например, красивую анимацию. Но это будет весьма затратно по сравнению с использованием обычных анимированных материалов. Главная ценность ScaleForm - этими flash-файлами можно управлять. По сути, вы можете контролировать текстуру в пределах возможностей Flash.
Если кто не знал, любые проявления интерфейса в большинстве игр являют собой ту же текстуру, только "натянутую" на экран. Главное меню, HUD, различные внутриигровые менюшки - это все текстуры, скомпонированные со спрайтов. Так вот, ScaleForm позволяет обойти эту систему, используя вместо текстуры flash-файл. Такая замена куда более выгодна, так как, во первых, сильно упрощает процесс создания интерфейса (вместо прописывания расположения каждого спрайта на экране, вы просто расставляете их в flash-файле), а во вторых, созданный интерфейс поддерживает весь функционал Flash, например, прозрачность, анимации, масштабирование и т.д..
Помимо прочего, ScaleForm серьезно дополняет уже упомянутый функционал псевдо-3D изменением изображения. Любой компонент flash-файла можно "сдвигать" вперед или назад относительно остальных и крутить вокруг любой оси.
Ну и напоследок этого вступления, скажу, что помимо Unreal Engine 3, эта технология сейчас используется фактически повсеместно (например, во всяких ваших Крузисах, а недавно ее прикрутили и к Unity).

Необходимые приготовления

Сразу бросаться с головой в этот омут никак нельзя. Дабы все работало правильно, для начала вам нужно правильно настроить свою среду Flash.
Для этого вам, само собой, понадобится сам Adobe Flash (я использую CS5), ну и свежая инсталляция Unreal Development Kit, куда же без этого (хотя если у вас UDK уже есть, установка новой версии опциональна).
Для начала, мы установим Scaleform Launcher, этот маленький плагин позволит нам проводить предпросмотр наших flash-файлов с учетом модификаций, присущих только Scaleform (так как стандартная публикация на это не рассчитана). Итак:
  1. Выберите в Flash Help > Manage Extensions (для русской версии Справка > Управление расширениями...) для вызова менеджера расширений (внезапно).
  2. Сверху окошка менеджера найдите кнопочку Install/Установка и нажмите ее.
  3. В появившемся окошке двигайте к директории, где у вас установлен UDK, после чего пройдите по пути Binaries\GFx\CLIK Tools, выберите файл Scaleform Extensions.msx (для различный версий UDK путь, как и название файла, может отличаться) и нажмите кнопочку Открыть/Open.
  4. У вас высветится окошко дисклеймера, просто соглашайтесь (как всегда)
  5. Должно появиться окошко, радостно сообщающее, что установка прошла успешно. Теперь лаунчер будет отображаться в списке расширений Flash.
  6. Откройте меню Window > Other Panels/Окно > Другие панели, и в нем нажмите Scaleform Launcher. Если такого пункта нет, перезапустите программу.
  7. Должно появиться новое окошко лаунчера. Пристройте его, где вам удобно (я разместил его над библиотекой).
Теперь пора перейти к настройке самого лаунчера. Вам нужно создать и настроить новый профиль. Итак:
  1. Нажмите кнопку + напротив поля Profiles (которое на этот момент должно печально вам сообщать, что Currently no profiles).
  2. Теперь нужно выбрать непосредственно сам проигрыватель файлов Scaleform. Для этого в появившемся окне нажмите + напротив поля player EXE, в появившемся окошке опять таки добираемся до папки с UDK, переходим по адресу Binaries\GFx и выбираем файл GFxMediaPlayerD3d9.exe (абсолютно то же замечание, что и для плагина - может отличаться имя или путь).
  3. В поле profile name вписываете любое понравившееся вам имя, жмете ОК, чтобы применить его, и снова ОК, чтобы закончить настройку нового профиля.
  4. Теперь вы можете проверять (и публиковать заодно) ваши flash-файлы с помощью большой кнопки Test with:...
Остался последний пункт - настройки ActionScript.
  1. Откройте меню Edit > Preferences\Правка > Настройки
  2. В списке слева выберите пункт ActionScript.
  3. В этой вкладке, нажмите кнопку ActionScript 2.0 Settings\Параметры ActionScript 2.0
  4. В появившемся окошке нажмите +. Появится пустая строчка. Выделите ее и нажмите иконку с показывающей вверх стрелкой, чтобы пустая строчка оказалась на втором месте. После этого нажмите на иконку с папкой, и в появившемся окне выберите папку CLIK, которая находится по пути Development\Flash\AS2\CLIK\ относительно вашей папки установки UDK. После всего этого нажмите ОК.
  1. Нажмите кнопку ActionScript 3.0 Settings\Параметры ActionScript 3.0
  2. Повторите пункт 4, с поправкой на то, что нужно нажимать самую верхнюю кнопку +, саму строчку никуда не нужно передвигать, а в пути к папке CLIK AS2 нужно поменять на AS3.
Вот и все, наш Adobe Flash в полной боевой готовности!

Простой практический пример

Дабы не оказалось, что все это было проделано зря, мы сделаем маленький пример использования Scaleform, применив простой flash-файл в качестве текстуры. Надеюсь, вы знакомы с основами работы во Flash, так как по нему тутор я писать не буду. Это же касается и UDK.

Часть первая: создание и импорт

Итак, создайте новый flash-файл на основе ActionScript 2. Перейдите в меню File > Publish Settings\Файл > Параметры публикации. На первой же вкладке уберите галочку напротив HTML (поскольку нам не нужна версия нашего файла для браузеров). Перейдите на вторую вкладку, и в первом пункте, который отвечает за проигрыватель, выберите Flash Player 8 (по умолчанию, там будет стоять десятая версия). Эти действия необходимы для работы Scaleform.
Запомните, описанные действия обязательно нужно проводить для каждого создаваемого файла.
На всякий случай, сохраните файл. Для корректного импорта в UDK, сохранять все файлы нужно в поддиректорию \UDKGame\Flash. Создайте в ней новую папку с определенным именем, и уже туда сохраняйте файл (хотя никто вам не мешает создать еще одну поддиректорию). Когда вы импортируете файл в UDK, пак с ним будет называться именно именем этой папки, запомните это.
Теперь немного о слоях. Надеюсь, вы знаете, что слои нужны для удобства, и что элементы слоев накладываются друг на друга в порядке иерархии самых слоев (то, что в слоях выше, будет перекрывать собой то, что в слоях ниже). Так что, в будущем, мы будем разделять содержимое файла на слои. Но вот что важно конкретно для Scaleform. Нам нужно создать слой, который будет находиться выше остальных, и назвать его actions. В нем будет находиться весь код ActionScript, который будет влиять на файл. Но пока нам ничего подобного не нужно, мы просто создадим его и оставим пустым.
Теперь нам нужно выбрать картинку для нашего файла. Я взял на себя труд сделать это за вас)) Важно помнить, что есть определенные правила при выборе графики. Чтобы их никто не пропустил, я их выделю. Во первых, всегда используйте png. Этот формат обеспечит хорошее качество картинки, и в нем есть альфа-канал, что тоже немаловажно. Во вторых, всегда используйте только изображения с размером, являющим собой степени двойки, например, 32х32, 64х128 и т.д.. Это крайне важное условие для импортирования изображения в Flash и UDK. Возвращаясь к самой картинке, мы будем использовать лого UDK.
Просто сохраните это изображение себе на компьютер. Размер я уже подобрал, альфа-канал присутствует. Перед тем, как импортировать картинку в файл, ее желательно сохранить туда же, где лежит ваш файл. Все изображения, используемые flash-файлом, необходимо сохранять в папку с тем же именем, которым назван файл. Например, если вы назвали ваш файл TestFlash и сохранили в папке Tutorial, то в этой папке нужно создать еще одну папку под названием TestFlash, уже туда сохранять изображение. Это необходимо во избежание разнообразных преобразований, которые может произвести Flash при импорте.
Теперь импортируйте картинку в ваш файл. Можете импортировать сразу в рабочую область. Помимо прочего, в самом Flash'e необходим еще один пункт относительно изображений. Для каждого изображения нужно проводить следующую процедуру:
  • Найдите ваше изображение в библиотеке, и откройте его свойства.
  • В окошке свойств поставьте галочку напротив Allow smoothing\Разрешить сглаживание (во избежание пикселизации изображения).
  • Пункт Compression\Сжатие поменяйте на Lossless\Без потерь.
  • Если у вас упрощенное окно свойств, нажмите кнопку Advanced\Дополнительно.
  • Поставьте галочку напротив Экспорт для ActionScript
  • Снизу станет активным поле Идентификатор с названием вашего файла; в нем обязательно нужно удалить разширение файла (для нас это .png, без него должно остаться Udk_logo). Жмите ОК.
Все эти действия нужно проводить для каждого импортированного изображения
Теперь маленькое примечание. Помните, я упоминал расширение функционала Flash? Если вы хотите использовать их, вам нужно в начале каждого файла вписывать одну строчку. Выберите первый кадр слоя actions и нажмите F9 - это вызовет встроенный редактор ActionScript. В первую строчку впишите:
_global.gfxExtensions = true;
Буква Е обязательно должна быть прописной.
Опять таки, это надо делать для каждого файла, или даже группы кадров, где вы хотите использовать эти расширения.
Теперь можно публиковать наш файл. Для этого достаточно просто нажать на кнопку теста на лаунчере, а можно и стандартным пунктом Flash.
Теперь нам нужно импортировать наш файл в UDK. Откройте браузер контента и нажмите кнопку Import. Доберитесь к расположению вашего файла и выберите его. Вам высветится окошко импорта. Как видите, имя ресурса и пака уже назначены (а если вы создавали поддиректорию, то ее имя будет использоваться в качестве группы). Просто нажмите ОК. Если все в порядке, вас должно переадресовать в свежесозданный пак, где будет ваш файл, а также все использованные для него изображения. Последний шаг для импорта - сохранить пак, куда вам угодно.

Часть вторая: текстура рендеринга

Теперь нам нужно непосредственно использовать наш файл в качестве текстуры. Для начала, создадите простой уровень, где будет фигурировать куб. Или скачайте вот эту простенькую карту.
Само собой, просто так назначить flash-файл в качестве материала, у нас не получится, так как это абсолютно разные типы данных. Но для этого у нас есть такая вещь, как текстура рендеринга (сиречь render texture). Верней, сама текстура нам никак не поможет, но вот материал с ее участью... В общем, в том же паке, где мы оставили файл (дабы не плодить кучу лишних паков), на пустом месте вызовите контекстное меню и выберите New TextureRenderTarget2D. В всплывшем окошке выберите подходящее имя (я выбрал лаконичное RenderTex) и размер (само собой, в степенях двойки, и желательно квадратный). Лично я размер не менял. После того, как нажмете ОК, вам вылезет еще одно окно, но нам оно не нужно, и его можно сразу закрывать. Теперь у нас есть текстура рендеринга, являющая собой банальный ядовито-зеленый квадрат. Пора сделать для нее материал. Вызывайте контекстное меню и выбирайте New Material. Опять таки, подберите имя, я выбрал RenderMat. После создания, вы попадете в редактор материалов. Внизу вы увидите окошко свойств материала (если его нет, откройте вкладку Material). Для начала, поменяйте пункт Blend Mode на BLEND_AlphaComposite (это для того, чтобы то, что прозрачное на картинке, делало прозрачной и поверхность). Теперь в самом поле редактора, вызовите контекстное меню, выберите пункт Texture, и из выпавшего списка выберите New TextureSample. Соедините черный выход сэмпла (он отвечает за всю RGB палитру) с входом Diffuse основы материала, а белый выход - с входом Opacity.
Теперь, не закрывая окошко редактора материалов, сдвиньте его в сторону, в браузере контента выделите нашу текстуру рендеринга, вернитесь в редактор, выделите сэмпл, и в строчке Texture нажмите на зеленую стрелку (это присвоит строке выбранную вами текстуру). Шарик предпросмотра слева должен позеленеть. Можете закрывать редактор. Выскочит окошко подтверждения применения изменений (вот такая хрень), согласитесь. Теперь можете сохранить пак.

Часть третья: применяем материал к брашу

Последний этап - мы наконец-то заставим наш файл отображаться в качестве материала браша.
Примените созданный в предыдущей части материал к одной из сторон куба на карте, которую вы скачали (или к любой поверхности вашей собственной карты; если карта моя, то, ясное дело, желательно чтобы эту сторону было хорошо видно).
А теперь, вот как это все работает. Мы можем открыть flash-файл с помощью Kismet, но если мы откроем его просто так, то он просто налезет на экран. Для этого и нужна текстура рендеринга - мы сообщаем игре, что нам нужно, чтобы этот файл отображался именно на этой поверхности. В общем, откройте Кисмет, вызовите контекстное меню и выберите New Event > Level Loaded. Теперь вызовите контекстное меню опять и выберите пункт New Action > GFx UI > Open GFx Movie. Соедините выход Loaded and Visible первого узла со входом In второго. Откройте браузер контента, выберите ваш flash-файл, вернитесь в Кисмет, выделите узел Open GFx Movie, и в разделе GFx Action Open Movie, в строчке Movie нажмите зеленую стрелку, чтобы назначить наш файл в качестве значения строки. Теперь нужно выбрать, на какой именно материал будет отображаться наш файл (как я уже говорил, если этого не сделать, то файл будет отображаться на весь экран; можете попробовать). Вернитесь в браузер контента и выделите наш материал. Снова вернитесь в Кисмет, выделите тот же узел, и в том же разделе найдите строчку Render Material, и снова нажмите зеленую стрелку. Если наша текстура использует альфа-канал (а наша использует), нужно выбрать пункту Render Material Mode значение RTM_AlphaComposite. В новых версиях UDK вместо Render Material вы можете увидеть Render Texture. В таком случае, просто выделите в браузере текстуру вместо материала.
Сохраните уровень, и проверьте.
Как видите, все работает)) Правда, учтите, что если размер вашей картинки больше или меньше размера куба, то она либо не влезет на поверхность, либо заполнит ее плиткой. В нашем случае, кстати, второй вариант (так как куб 512х512х512, а картинка 256х256). Лечится просто выставлением мастшаба в размере двойки в свойствах поверхности.

Итог

Вот и все. Пусть заняло это немного больше моего времени, но это вся базовая информация, которая может пригодиться юному игроделу, по этому вопросу. В последующих статьях я напишу о создании контролируемых изображений, а также о создании HUD с помощью Scaleform.
`
ОЖИДАНИЕ РЕКЛАМЫ...
1
26
11 лет назад
1
Может, маловато скринов на этапе настройки, но расписывал я настолько подробно, насколько мог. А делать скрины мне просто лень))
Простите если определенные английские аналоги названий указаны неверно, или не указаны вообще. Просто у меня русская версия Флеша, и если некоторые значения я нашел в разных статейках, а некоторые перевел сам, то есть и такие, которые я перевести не могу.

Пофиксил все видимые для меня очепятки в статье. Но поскольку это стена текста, я спокойно мог что-то упустить. Если найдете что-то - пишите, исправлю.
0
11
11 лет назад
0
Очень хорошая статья, всю не осилил, но то что прочитал было написано очень даже не плохо, правда было бы неплохо добавить еще больше скринов.
0
26
11 лет назад
0
Slavker, возможно, но все эти настройки я уже проводил давно, и проводить их заново, чтобы сделать скринов, было бы несколько глупо. А на некоторые моменты я даже не знаю, что скринить. Так что, простите, но вам придется довольствоваться текстом, благо, расписал я максимально подробно.

Возможно, несколько стандартных элементов управления изображением добавлю сразу же в эту статью.
0
1
10 лет назад
0
Спасибо за отличную статью! Скринов вполне хватает. Будет ли продолжение? Очень интересует создание HUD.
Чтобы оставить комментарий, пожалуйста, войдите на сайт.