Пройшло три тижні з часу останньої публікації. Втім, весь цей час я не сидів, склавши руки, а дуже активно працював над розробку своєї першої гри у Flash. Поки що я не відкриватиму всіх карт і не показуватиму гру, а скажу лишень, що це логічна головоломка, в якій гравець змагатиметься з комп’ютером.
Зараз, робота над грою вже добігає кінця і я постаю перед дилемою, чи варто спробувати вийти з нею на FGL (сайт, де можна продати гру спонсорам). Втім, як би там не було – я обов’язково покажу результат своєї праці в рамках цього блога. Тому, якщо вам цікаво – обов’язково підпишіться на RSS і стежте за оновленнями.
Працюючи над розробкою своєї першої гри, я ще раз переконався, що немає кращого способу вивчити щось нове, ніж застосувати його на практиці. За кілька тижнів я вивчив ActionScript 3 краще, ніж за кілька років до того, студіюючи книги. Тому, якщо ви також хочете розібратися у премудростях цієї мови програмування – раджу якомога більше читати і головне – втілювати отримані знання на практиці. А коли основні принципи мови будуть уже засвоєні – ставити перед собою власні завдання і намагатися виконати їх.
Це була лірика, а тепер, власне, перейдемо до практики.
Створення програмної анімації вибуху з використанням мови ActionScript 3
У одному із попередніх уроків ми вчилися малювати вибух м’ячика вручну. Сьогодні я продемонструю, яким чином можна створити анімацію вибуху програмно – тобто з використанням вбудованої мови ActionScript 3. Хочу подякувати авторові блога Xitri.com, чия стаття про ефект вибуху стала поштовхом до написання цього матеріалу.
В рамках сьогоднішнього уроку ми не лише дізнаємося, як створюється програмна анімація вибуху, але й закріпимо вже вивчені елементи ActionScript 3 (слухачі подій, події миші, розташування об’єктів на сцені), а також познайомимося з деякими новими елементами цієї мови: циклами та масивами.
- Створіть новий файл, та намалюйте на сцені форму уламку. Вибух складатиметься з великої кількості таких уламків, які будуть розлітатися навсібіч. Форма уламку повинна бути максимально простою – я використав для цієї потреби два круга різного кольору, які накладаються один на одного. Це може бути уламок розплавленого металу, іскра феєрверку чи будь-яка інша частинка.
- Конвертуйте уламок на символ (movie clip) (детальніше про символи Flash можна прочитати у відповідній статті), назвавши його movingPart. Оскільки цей кліп додаватиметься на сцену програмно, нам потрібно під час створення поставити галочку навпроти поля Export for ActionScript. Галочку у полі Export in frame 1 ставити не потрібно. При цьому Flash автоматично додасть ім’я класу – movingPart та базовий клас – flash.display.MovieClip, тим самим уможлививши використання кліпу програмним методом. Всі інші опції у вікні створення символу можна залишити без змін.
- Всередині символу movingPart створіть класичну анімацію руху (classic tween), скажімо, на 15 кадрів. Змусьте частинку летіти праворуч, зменшуючись до мінімальних розмірів. Якщо ви ще не знаєте, як створити класичну анімацію – ознайомтесь зі статтею за наведеним вище посиланням. В результаті при компіляції кліпу у вас повинно вийти щось таке:
- Поверніться на головну сцену (вийдіть з режиму редагування символу movingPart). Видаліть екземпляр символу movingPart з основної сцени (він додаватиметься програмно) і у першому кадрі додайте наступний код ActionScript.
Зараз анімація програється циклічно безкінечну кількість разів. Для наших же потреб необхідне одноразове програвання. Для цього додайте у символ movingPart ще один шар (layer). Вставте ключовий кадр у 16-тий кадр цього шару і додайте до нього наступний код ActionScript: stop(); Це зупинить анімацію. Детальніше про додавання коду ActionScript до кадрів, а також оператор stop(); можна прочитати у відповідній статті.
Протестуйте кліп ще раз. Тепер частинка летить праворуч один раз і зникає. Анімація більше не повторюється.
var part: Array = []; //Створюємо масив
//додаємо слухач подій миші
stage.addEventListener (MouseEvent.CLICK, explode);
//додаємо функцію вибуху, яка виконуватиметься при кліку мишею
function explode (e:MouseEvent):void
{
//Додаємо цикл, який повториться 30 разів
for (var i:int=0; i<30; i++)
{
//Створюємо 30 екземплярів символу movingPart
part[i] = new movingPart();
//Повертаємо символи довільно
part[i].rotation = Math.random()*360;
//Визначаємо координати кліку мишею
part[i].x = e.stageX;
part[i].y = e.stageY;
//Задаємо випадкові розміри уламків
part[i].scaleX = part[i].scaleY = (Math.random()+0.8)/1.5;
//Додаємо кліпи на сцену
addChild(part[i]);
}
}
Нові елементи коду
Давайте проаналізуємо, які нові елементи ми використали в цьому коді і що робить кожен із них.
Стрічка var part: Array = []; задає новий масив. Масив – це набір однотипних змінних, кожна з яких відрізняється від попередньої індексом. У нашому коді ми створюємо 30 екземплярів символу movingPart, роблячи кожну з них елементом нашого масиву. Таким чином всього у масиві буде 30 елементів: part[0], part[1], part[2], …, part[29].
Стрічка stage.addEventListener (MouseEvent.CLICK, explode); повинна бути вже знайомою вам з попередньої статті про слухачі подій. Вона додає слухач події, а саме: клік мишею – до нашої сцени (stage). При кліку мишею у будь-якій частині сцени викликатиметься функція explode. Формат виклику функцій – function explode (e:MouseEvent):void – також повинен бути знайомий вам із попередньої статті.
Далі починається найцікавіше. В тілі нашої функції, між символами { і } знаходиться цикл for (var i:int=0; i<30; i++) Цей запис означає, що тіло циклу (всі оператори, які знаходяться після оголошення циклу між символами { і }) виконається 30 разів.
Яким чином працює цикл?
Змінна «і» набуває значення 0 (це оголошується в стрічці var i:int=0;) після чого відбувається перевірка чи дійсно змінна «і» є меншою за 30 (i<30;). Якщо результат цієї дії – правда (тобто і<30) – виконується тіло циклу, після чого змінній «і» присвоюється значення, на одиницю більше, ніж раніше (i++). Тепер змінна «i» набуває значення 1, і цикл повторюється.
Як тільки нерівність і<30 перестане бути правдою – цикл зупиняється! Тобто у нашому випадку він виконається 30 разів: і=0, і=1, і=2, …, і=29.
Що ж відбувається у тілі циклу?
Перш за все, змінній part[i] (тобто при першому виконанні циклу це буде змінна part[0], при другому – part[1], при третьому – part[2] і так далі) присвоюється значення нового символу movingPart. Іншими словами – ми створюємо 30 копій нашого символу, кожен з яких зберігається у власній змінній.
Згадуємо властивості об’єктів, розглянуті у попередній статті.
Стрічка part[i].rotation = Math.random()*360; задає випадковий поворот нашого кліпу movingPart. Функція Math.random() генерує абсолютно випадкове число, значення якого коливається від 0 до 1. Множимо його на 360 і отримуємо набір випадкових чисел від 0 до 360 (тобто випадковий кут повороту).
Стрічки part[i].x = e.stageX; і part[i].y = e.stageY; задають координати уламку по вісі X та вісі Y відповідно. Значення e.stageX та e.stageY – це координати курсору мишки. Таким чином ми розташовуємо епіцентр вибуху в тій точці, куди клікнемо мишею.
Оскільки під час вибуху осколки рідко бувають однакового розміру, ми вносимо ще один елемент випадковості, змінюючи атрибути scaleX та scaleY об’єктів. Оскільки, як нам вже відомо, розмір scale об’єкта при значенні 1 дорівнює 100%, 2 – 200% і так далі, нам зовсім не складно провести маніпуляції з функцією Math.random таким чином, щоб вона видавала випадкові значення від 0,5 (50% від розміру уламку) до 1,2 (120%) від розміру уламку. Тим самим ми робимо ефект вибуху більш реалістичним.
Ось і все – останнє, що нам залишилося – це додати всі створені і налаштовані дублікати символу на сцену. Робиться це з допомогою ключового слова addChild.
Якщо ви все зробили правильно, то результат не змусить себе довго чекати:
Основна перевага програмного методу створення вибуху полягає в тому, що зрозумівши принцип, ви можете змінювати та модифікувати ефект як завгодно. Наприклад, щоб перетворити іскри салюту на уламки космічного корабля, вам потрібно замінити один символ, а не перемальовувати весь вибух повністю.
На сьогодні це все! Сподіваюся, ви не лише зуміли повторити ефект програмного вибуху, але й зрозуміли всі елементи коду, використаного в цій статті. Якщо у вас залишилися будь-які запитання або ви щось не зрозуміли – не соромтесь задавати запитання у коментарях. Хай краще ми зразу розберемо помилки, щоб уникнути їх у майбутньому.
А оскільки у останніх трьох статтях ми дуже активно взялися за вивчення і практичне використання ActionScript 3 – наступні кілька уроків я присвячу закріпленню матеріалу та детальному опису вивчених нами елементів. Розповім про можливі застосування слухачів подій, подій миші, циклів, масивів, умовних операторів та всіх нюансів, пов’язані з ними.
Щоб не пропустити нових публікацій, стежте за блогом «Вивчаємо Flash та ActionScript разом» через RSS.