Ігри. з Adobe Flash. Практика

Окремо варто відзначити, що Adobe Flash, як середовище для програмістів-початківців, схоже на Бейсіку для дітей мого покоління. Все просто, зручно, швидко в реалізації, а в даному випадку дуже барвисто. На флеш можна навчитися не тільки всім основним принципам сучасного програмування, але й отримати повноцінні знання про роботу сучасних анімаційних пакетів, програм моделювання і так далі. Тому багатьом представникам сучасної молоді настійно рекомендую розпочинати свій шлях із флешу.

Отже, почнемо. Завантажуйте Flash, закочуйте рукави та поїхали! Думаю, що запропонований приклад вам сподобається. Спочатку займемося проектуванням. Придумаємо гру і назвемо її, наприклад.

Жанр: гонки, шутер

Опис: Інопланетяни викрали з-під носа у гангстерів броньовик з грошима. Його треба наздогнати, що насправді не так вже й просто.

Мета: знищення броньовика за певну дистанцію.

Графіка: "легка" емуляція 3D у 2D.

Вигляд: від третьої особи, камера посередині дороги за машиною гангстерів.

Платформи: PC, мобільники.

Мови: українська, англійська, німецька, іспанська, французька.

В даному випадку для простоти та стислості ми не робитимемо головне меню, а передбачимо лише ігрове вікно. Його розкадрування, також через швидкість і зручність, можна намалювати у флеші інструментом "пензлик" (Brush Tool).

Отже, ми маємо фон, дорога, смуги розмітки на ній, ліхтарі по краях, машина гангстерів, броньовик інопланетян, індикатор пройденої дистанції, індикатор окулярів.

Планування ходу розробки

Спочатку потрібно визначитися з емуляцією руху. Справа в тому, що дорога як така у нас буде статичною.Ефект відчуття швидкості досягатиметься рухом та масштабованим збільшенням смуг розмітки та ліхтарів. Це буде першим етапом.

Після нього нам потрібно створити автомобіль гангстерів, показати на ньому ефект невеликого тремтіння (додамо реалістичності), забезпечити керування за допомогою стрілок клавіатури вправо-ліворуч. Це другий етап.

Далі малюємо броньовик інопланетян. Додаємо йому тремтіння, створюємо функцію плавної зміни напрямку вправо чи вліво у випадковому режимі. Це третій етап.

Потім реалізуємо функцію стрільби натисканням клавіші "пробіл". Показуємо це анімацією та звуком, пов'язуємо координати машини та броньовика для визначення попадання в ціль. Створюємо систему підрахунку очок. Це четвертий етап.

Про додаткові етапи ми поговоримо окремо і пізніше.

Відкриваємо File а New. вибираємо Flash File (Action Script 2.0). Передбачається, що багато хто вже знайомий з основними інтерфейсними елементами флешу - такими, як панель інструментів Tool, вікно Timeline, багатофункціональні вікна із закладками знизу та праворуч від робочої області.

Action Script 2.0 ми вибрали в силу його простоти та схильності до швидкого програмування.

Припустимо, що в рамках гри всі дії у нас відбуватимуться вночі. Чому? Нам же потрібна яскравість. А поїздка в нічний час буде досить ефектно виглядати – коли ми зможемо зробити світло від фар та ліхтарів за рахунок напівпрозорих елементів із градієнтною заливкою.

Спочатку розміщуємо основні статичні елементи. За допомогою ліній (Line Tool) малюємо рівнобедрену трапецію (дорогу), зафарбовуємо її в темно-синій колір. Посередині цієї трапеції таким же чином малюємо розділову смугу (вузька рівнобедрена трапеція), зафарбовуючи її в білий колір, вона також будебути статичною.

Наступним етапом стане створення смуги, що рухається, з однієї зі сторін, наприклад, що розділяє ліву половину дороги. Що для цього потрібно зробити? Мабуть, опишемо найпростіший варіант. Як і в попередньому випадку, малюємо лініями геометричну фігуру, в даному випадку чотирикутник - з тим врахуванням, що він рухатиметься з лівого боку від камери, тобто передбачимо певні кути нахилу для його бічних сторін. Зафарбовуємо його в білий колір, виділяємо та натискаємо F8. З головного меню ви можете дізнатися, що це спричиняє виклик операції Convert to symbol. що насправді передбачає виділення фрагменту властивостей одного з трьох типових об'єктів - Movie Clip, Button або Graphic. Movie Clip – це, якщо пояснювати простими словами, базовий та багатофункціональний об'єкт флешу; Button - за самим об'єктом закріплюються всі функції кнопок, у своїй на автоматі можна створювати варіанти реакцію ключові події, що з дією курсора миші; Graphic - виділений фрагмент перетворюється на звичайний графічний елемент без особливих додаткових функцій та якостей.

У нашому випадку ми вибираємо MovieClip. У полі Name вікна Convert to symbol. набираємо "road_line_left" або щось на вашу думку. Це ім'я в нашому випадку найчастіше буде використовуватися для того, щоб швидко діставатися графічного наповнення об'єкта з бібліотеки проекту, тому тут можна діяти і як великі С-програмісти складних програм :).

А інше ім'я, яке буде використовуватися нами в рамках коду ActionScript, вводиться у вікні властивостей Properties в полі Instance Name. Допустимо, "rl_left". У цьому ж вікні Properties ви можете поекспериментувати з об'єктом, змінюючи його прозорість, колірну гаму по відношенню до фонового.кольору дороги і таке інше. Розташуйте смужку в найдальше по нашій віртуальній трасі місце, при цьому дотримуючись пропорцій і розташування.

Далі натискаємо F9 (це виклик вікна Actions, в якому ми будемо вводити код), а вказівником миші у вікні Timeline клацаємо на першому кадрі (кадрі) нашого шару Layer 1. Цим самим зроблено перспективу наступної дії: у вікні Actions ми вводимо код для першого кадру першого шару. Що ми введемо насамперед? Давайте надійдемо просто - перенесемо вихідні дані про початкові координати та розміри об'єкта "rt_left" в код. Це вигідно, особливо у випадках, якщо ви щось випадково змістили і таке інше.

Отже, вводимо щось на кшталт:

Зверніть увагу, що після введення цих рядків у вікні Timeline у першому кадрі Layer1 з'явився значок ?. Це означає, що тут є код.

Тепер приступаємо до анімації. Робити ми її будемо суто програмним методом, причому не виходячи з першого кадру.

Як ви розумієте, будь-яка анімація пов'язана із змінами чогось у процесі часу. У Flash є кілька варіантів завдання тимчасових відліків. Найрідкісніший, до того ж неефективний - використання циклів. Цю думку відкидаємо одразу. Також можна створити таймер з урахуванням функції setInterval(), що викликає певну функцію чи способи через певно зазначений часовий інтервал.

Але оскільки ми не тільки все намалювали, а й програмуємо в рамках одного кадру, він циклічно повторюватиметься знову і знову з частотою зміни кадрів на секунду (fps), яку можна змінювати в налаштуваннях проекту. Причому це чудовий "природний" таймер. До речі, саме такі специфічні моменти та методи відрізняють програмування у флеші від будь-якого іншого. Тому використовуємо подію onEnterFrame.

Під ужевведеним кодом напишемо (самі коефіцієнти змін потрібно ставити свої):

Пояснимо. Функція rt_left.onEnterFrame визначає зміну станів при кожному оновленні цього кадру (у разі першого). Тобто при кожному відліку ми зміщуємо нашу смугу на 20 точок по ординаті, на 4 по абсцисі, збільшуємо довжину та ширину об'єкта. У разі коли він виходить за видиму область (у рядку з умовою if (rt_left._y>500) ми передбачили варіант положення, близького до крайнього), повертаємо нашу дорожню смугу в початкове положення, і потім всі дії повторюються заново. Виходить циклічний режим.

Продовження першого етапу

Оскільки місце в газеті обмежене, і наступні операції для першого етапу фактично повторюють вже описані, ви можете аналогічним способом самостійно зробити смугу для правої сторони, що рухається, а також ліхтарі по краях дороги.

Малюючи останні, необхідно передбачити емуляцію освітлення дороги, адже йдеться про ліхтарі, для чого при їх створенні передбачте напівпрозорі графічні елементи (використовуючи альфа-канали), зафарбовані заливкою градієнта з відтінками жовтого. Для отримання доступу до прозорості дані проміжні елементи потрібно конвертувати в символи типу Graphic (F8). Якщо у вас малопотужні ПК, то особливо експериментувати з градієнтом не потрібно, тому що його наявність сильно завантажує комп'ютер.