Основи scaleform - статті - unreal engine


»Розділ: 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 вже є, установка нової версії опціонально).

Залишився останній пункт - налаштування 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.

Частина перша: створення та імпорт

Запам'ятайте, описані дії обов'язково потрібно проводити для кожного створюваного файлу.

Про всяк випадок, збережіть файл. Для коректного імпорту в 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.

Частина друга: текстура рендеринга

Тепер нам потрібно безпосередньо використовувати наш файл в якості текстури. Для початку, створите простий рівень, де буде фігурувати куб. Або скачайте ось цю простеньку карту.

Частина третя: застосовуємо матеріал до брашу

Останній етап - ми нарешті змусимо наш файл відображатися в якості матеріалу Браша.

Застосуйте створений в попередній частині матеріал до однієї зі сторін куба на карті, яку ви скачали (або до будь-якої поверхні вашої власної карти; якщо карта моя, то, ясна річ, бажано щоб цей бік було добре видно).

А тепер, ось як це все працює. Ми можемо відкрити 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). Лікується просто виставленням мастшаба в розмірі двійки у властивостях поверхні.