Создание UI игры на Scaleform используя Flash

Дмитрий Дичковский

План доклада

• Что такое Scaleform• Рассказ о его основных возможностях с примерами использования в World of Tanks• Немного об истории развития GUI в проекте World of Tanks• Заключение• Q & A

World of Tanks

+

Scaleform

+

Flash

=

Lot’s of fun!!!

Scaleform – это решение от Autodesk, позволяющее использовать Adobe Flash для создания и интеграции графического пользовательского интерфейса в видео играх.

Что такое Scaleform?

• часть линейки Autodesk Gameware

• разработка на Flash

• высокая производительность

• алгоритм тесселяции (разбиения)

графики из Flash на треугольники

Поддерживаемые платформы

Интеграция с игровыми движками

Кто использует Scaleform?

Основные возможности

• Движок прорисовки и сглаживания векторной графики• Система высококачественных динамических шрифтов• Поддержка rich-text в текстовых полях• Использование масок любой формы для ограничения видимости или анимирования визуальных объектов• Режимы смешения и фильтры• 3D манипуляции и трансформации визуальных объектов• Scale9Grid для создания «резиновых» элементов управления

Архитектура Scaleform

Kernel(Threads, File IO)

CRI

FMOD

C++ / UnrealScript / Python / Lua Kits MMO Menu HUD Lobby

OpenGL, Direct3D, GCM, Wii API Win32, OSX, Linux, iOS, Android

Flash runtime &

Loader

AS3VM

AS2VM IME

Video

Audio

Renderer API

Tree Cache Mesh / Font Caches

HAL

Scaleform Workflow

1. Artist 2. Developer 3. Developer 4. QA

Assets Interactivity Integration Playback

GraphicsPhotoshop

Illustrator

AudioPro Tools

Soundbooth

Video After Effects

Premiere

Final Cut Pro

Flash Environment

Scaleform CLIK

Scaleform Launcher

Game Engine

3D Audio Video

GFxExport

VideoEncode

r

Game Platforms

Front End Menus

HUDs and Forms

3D Animated Textures

Mini Games

Scaleform Workflow WoT way

1. Artist 2. Developer 3. Developer 4. QA

Assets Interactivity Integration Playback

GraphicsPhotoshop

Illustrator

Video After Effects

Premiere

Final Cut Pro

Flash Environment

Scaleform CLIK

Scaleform Launcher

Game Engine

3D Audio Video

VideoEncode

r

Game Platforms

Front End Menus

HUDs and Forms

3D Animated Textures

Mini Games

Python Scripts

Библиотека UI компонентов CLIK

• базовые классы и системы• более 15 базовых UI компонентов

• кнопки• текстовые поля• скроллеры и слайдеры• списки• диалоги / окна

• инструменты ускорения процесса разработки• AS3 и AS2 версии • разрабатывал Grant Skinner

UI Kits

Scaleform поставляется в комплекте с набором UI Kits. Они разработаны для демонстрации Best Practices и ускорения ознакомления новых разработчиков с основными use cases. Доступные киты:• MMO Kit• Menu Kit• HUD Kit• Lobby Kit

Коммуникация между игрой и флешем

Scaleform поддерживает стандартные механизмы Flash для передачи событий и данных в C++ приложение. Scaleform так-же предоставляет C++ интерфейс для прямой манипуляции переменными, массивами и объектами в ActionScript, а так-же для вызова методов в ActionScript.

ActionScript -> C++ C++ -> ActionScript

FSCommand – простой вызов функции по строковому имени. Возврат значений не поддерживается. Устарела.

GFx::Movie::Get/SetVariableДоступ к данным в ActionScript по строковому пути

ExternalInterface – гибкая обработка аргументов. Поддержка возврата значений. Рекомендовано к использованию

GFx::Movie::InvokeВызов метода в ActionScript по строковому пути

Direct Access API – использует как прямую ссылку на флэш объект для доступа к данным и методам. Высокая производительность. Позволяет использовать внешние (по отношению к флэш) методы как обработчики в ActionScript VM

Локализация и работа со шрифтами в WoT

Русская конфигурация Английская конфигурация

fonts_all.swf (ru fonts) fonts_all.swf (en fonts)

fontconfig.xml fontconfig.xml

Имплементация GFx::Translator

GFxLoader statesState_FontLibState_FontMapState_Translator

widget1.swfimport $NormalFontimport $TitleFont

widget2.swfimport $NormalFont

widget3.swfimport $NormalFontimport $TitleFontimport $SmallFont

gfxfontslib.swfexport $NormalFontexport $TitleFontexport $SmallFont

texts.mo (ru phrases) texts.mo (en phrases)

Имплементация GFx::FontMap

Тестирование производительности и профилирование с помощью AMP

AMP (Analyzer for Memory and Performance) – это система удаленного профилирования, позволяющая следить за загрузкой процессора, отрисовкой графики, и потреблением памяти в Scaleform приложении.Разработан специально для художников и разработчиков UI для профилирования Flash приложений.• Графики в реальном времени• Покадровая статистика• Покадровая информация о времени исполнении AS кода• Возможность управлять различными режимами отображения Scaleform приложения

Выводы

Плюсы:• Высокая производительность• Удобные инструменты разработки• Простота внесения изменений и быстрый деплой• Итеративный процесс разработки• Отличная документация и поддержкаМинусы:• Flash IDE “заточен” под дизайнеров• Различный бэкграунд разработчиков

Создание модов игры пользователями

Выбранная в WoT модель подключения swf файлов в проект без их предварительной компиляции, открывает для фанатов игры возможность создавать моды, изменяющие практически любую часть UI игры методом простой замены swf файлов установленных вместе с игрой на собственную имплементацию.Наиболее распространенные моды: • OverTargetMarkers – изменяет внешний вид и подачу данных маркеров с информацией о технике на поле боя• «Панель повреждений» – изменяет внешний вид панели с информацией о танке игрока• HARDscope 8 - изменяет внешний вид танковых прицелов в игре с выводом дополнительной информации (время до окончания перезарядки и т.п.)

Вопросы?