Створення гри в Flash, Програми для роботи з графікою, Програмні керівництва, статті

Сьогодні я навчу вас, як зробити невелику, але класну іграшку на флеші з книжки “Написання розважальних та ігрових сценаріїв”. Це гра “на втікання”, єдина мета грає – ухилятися, щоб в нього не потрапили. Ми тут все трохи спростимо, але лише для того, щоб ви могли ясніше зрозуміти суть. Потім можете все це прикрасити, якщо захочете. Ми будемо керувати прямокутником, завдання якого – Ухилятися від рухомих квадратів. Приклад перед вами. Приступимо!


Відкрийте Флеш, залиште всі налаштування за замовчуванням. Ми створимо всі кліпи прямо зараз, тому приберіть все зайве. Вийдіть в пункт меню Insert

2. Візьміть інструмент Rectangle (прямокутник) – для цього треба натиснути R. Щоб вийшов квадрат, утримуйте клавішу “SHIFT”. Створіть скромненький квадратик … як щодо розміру 45 на 45? Перейдіть до пункту меню Window> Align або натисніть CTRL + K. Клацніть на двох зображених нижче кнопках, і переконайтеся, що кнопка “To Stage” (поставити) теж натиснута.


Тепер у другому фреймі створіть ще один квадрат, але іншого кольору. Я взяв червоний. Щоб відцентрувати його, скористайтеся Align Window (вирівнювання). Потім зробіть те ж саме в третьому фреймі, але на Цього разу нехай квадрат буде синім. Вирівняйте його таким же чином, і повертайтеся в основну робочу область.


4. Натисніть CTRL + F8 або Insert> New Symbol (вставка> новий символ) і створіть новий кліп. Тепер назвіть його “rect”. Як ви могли вже здогадатися, в ньому буде перебувати наш прямокутник, який буде ухилятися від квадратів. Отже, намалюйте в першому фреймі цього кліпу пріямоугольнік малої ширини і великої висоти. (Якщо я незрозуміло висловився, погляньте на малюнок внизу). Своєму я задав ширину 75 і висоту 130. Давайте-но, виконуючи цей урок, і ви візьмете ті ж розміри.


5. Вирівняйте його по центру тим же способом, що попередні. Тепер клацніть на фреймі один і відкрийте вікно Properties Inspector (інспектор властивостей), звернувшись до пункту меню Window> Properties (вікно > Властивості). Там, де запросять мітку фрейма, назвіть його “normal”. Створіть ключовий кадр в другому фреймі (для цього треба на ньому клікнути і натиснути F6). Візьміть інструмент Transform (трансформація) і злегка поверніть прямокутник, щоб він виглядав, як на нижчеподаній картинці. Потім задайте фрейму мітку “right”.


Тепер клацніть на фреймі 3 і ще раз натисніть F6. Тепер зверніться до пункту меню Modify> Transform> Flip Horizontal (модифікація> трансформація> відображення по горизонталі). Зробивши все це, задайте фрейму мітку “left”. Тепер перейдіть до фрейму 1, клікніть на прямокутнику і скопіюйте його – Edit> Copy (редагувати> копіювати). Тепер вставте в четвертий фрейм порожній ключовий кадр – для цього клацніть на четвертому фреймі і натисніть F7. Потім пройдіть по меню Edit> Paste In Place (редагувати> вкласти в область) або, що те ж саме, натисніть CTRL + SHIFT + V. Тепер кликніть на дванадцятому фреймі і знову натисніть F6. Клацніть на четвертому фреймі, відкрийте вікно Properties Inspector (інспектор властивостей) і виберіть Motion (рух). Там, де написано “rotate” (обертання) вкажіть “CW” (“за годинниковою стрілкою”) і “3 times” (“3 рази”).


Тепер відкрийте бібліотеку Windows> Library (вікна> бібліотека), клікніть правою кнопкою миші на “box” (пункт) і в контекстному меню клацніть на “Linkage” (зв’язки). Проставте галочку в пункті “Export for Actionscript” (експорт для скрипта). Натисніть ОК. Зверніть увагу! в цей момент з’явиться галочка в пункті “Export in first frame” (“експортувати в перший кадр”). Потім проробіть все те ж саме для кліпу “rect”.


6. Поверніться до основного робочого простору і знову натисніть CTRL + F8, щоб створити ще один кліп. Клацніть на кнопці кліпу і дайте їй будь-яку назву, неважливо яке. Я назвав “actions”. Тепер ця кнопка буде запускати кліп “actions”. Не хвилюйтеся, що ви нічого не написали в самому сценарії, просто поверніться до основного робочого простору. Знову відкрийте бібліотеку і перетягніть значок цього кліпу на робочий простір. Оскільки він порожній, він з’явиться тільки у вигляді білого кружальця, на якому видно кілька перехрещених ворсинок (якщо він не виділено). Виділіть відеокліп і відкрийте вікно сценаріїв – Window> Actions (вікно> сценарії). Вставте туди наступний код:


onClipEvent(load) {
     _root.initGame();
}
onClipEvent(enterFrame) {
     _root.moveRect();
     _root.newBox();
     _root.moveBox();
}


Саме ці функції знадобляться нам для створення гри. Одна з них запускає гру, інша рухає прямокутник, третя створює нова перешкода, а остання, четверта цю перешкоду переміщує. Зверніть увага – якщо ви назвали свої кліпи по-різному і залінковалі їх своїм власним назвою, то вам тепер доведеться поміняти ці назви в усьому нижчеподаному коді. Якщо, приміром, ви назвали свої квадрати не “box”, а “enemy”, то в кожному рядку, де міститься слово “box”, ви повинні будете замінити його на “enemy”. _root.moveEnemy (); і те ж саме доведеться виконати для кліпу “rect”. У будь-якому разі треба перетягнути кліп “actions” на робочий простір у фрейм 2, якщо ви цього досі ще не зробили. Ну ось і основний код. Радійте 🙂


stop();


function initGame() {
/ / Діапазон рухомих квадратів
     firstBox = 1;
     lastBox = 0;


/ / Кількість життів (спочатку)
     hits = 5;


/ / Параметр, що впливає на рівень складності
     totalBox = 50;


/ / Задати швидкість і затримку в часі
     timeSinceLastBox = 0;
     bgSpeed = 0;


/ / Створити прямокутник так, щоб він знаходився вище рівня квадратів
     attachMovie( “rect”, “rect”, 999999 );
     rect._x = 275;
     rect._y = 200;
}
function moveRect() {
     if (rect._currentFrame >4) {
         //if during a hit dont look at keys
         dx = 0;
     } else if (Key.isDown(Key.RIGHT)) {
         //rect turns right
         dx = bgSpeed;
         rect.gotoAndStop(“left”);
     } else if (Key.isDown(Key.LEFT)) {
         //rect turns left
         dx = -bgSpeed;
         rect.gotoAndStop(“right”);
     } else {
         //no key
         dx = 0;
         rect.gotoAndStop(“normal”);
     }


/ / Пересування прямокутника і обмеження цього пересування
     rect._x += dx;
     if (rect._x < 150) rect._x = 150;
     if (rect._x > 400) rect._x = 400;
    
/ / Рухатися трохи швидше. Для більш високого рівня можна підвищувати цю швидкість, щоб грати було важче, головне – не перестаратися
     if (bgSpeed < 20) bgSpeed += .5;
}


function newBox() {
/ / Додати новий, тільки якщо попередній пробув досить довго
     if (timeSinceLastBox > 5) {
/ / Починати, тольео якщо є ще квадрати
     if (lastBox < totalBox) {


/ / Додати тільки 10% часу. Щоб перешкод було більше – замінити відсоткове число
     if (Math.random() < .1) {


/ / Створити наступний квадрат і встановити його місцезнаходження
         lastBox++;
         attachMovie( “box”, “box”+lastBox, lastBox );
         _root[“box”+lastBox]._x = Math.random()*250+150;
         _root[“box”+lastBox]._y = 450;


/ / Визначити, який фрейм показувати
         f = int(Math.random()*_root[“box”+lastBox]._totalFrames) + 1;
         _root[“box”+lastBox].gotoAndStop(f);


/ / Оновити затримку часу для наступного квадрата
         timeSinceLastBox = 0;


/ / Установка того, чи було солкновеніе
         _root[“box”+i].hit = false;
     }
     }
     }


/ / Навіть якщо квадрат не додано, наблизитися до наступного квадрату
     timeSinceLastBox++;
}


function moveBox() {
/ / Закільцювати через всі існуючі кліпи з квадратами
     for (i=firstBox;i<=lastBox;i++) {
        
         //get box location


     x = _root[“box”+i]._x;
     y = _root[“box”+i]._y – bgSpeed;


/ / Перевірити, чи пройшов квадрат верх
     if (y < -50) {
         removebox(i);


/ / Щоб було зараховано зіткнення, квадрат повинен не мати зіткнень до того
/ / І квадрат з прямокутником повинні знаходитися досить близько


     } else if ((_root[“box”+i].hit == false) and (Math.abs(y-rect._y) < 90)
         and (Math.abs(x-rect._x) <25)) {
         hits -=1;


/ / Відзначити, що відбулося зіткнення
         _root[“box”+i].hit = true;


/ / Показати анімацію зіткнення
         rect.gotoAndPlay(“hit”);


/ / Зупинити прямокутник
         bgSpeed = 0;


/ / Закінчити гру?
     if (hits == 0) {
         removeAll();
         totalBox = n;
         gotoAndPlay(“lose”);
     }
     }
/ / Продовжувати рухати квадрат
     _root[“box”+i]._y = y;
     }
}


function removeBox(n) {
/ / Прибрати кліп з квадратом
     _root[“box”+n].removeMovieClip();


/ / Оновити діапазон рухомих каменів
     firstBox = n+1;


/ / Перевірити, чи останній це був квадрат
     if (n == totalBox) {
         removeAll();
         gotoAndPlay(“win”);
     }
}


function removeAll() {
/ / Прибрати всі залишилися квадрати
     for (i=firstBox;i<=lastBox;i++) {
         _root[“box”+i].removeMovieClip();
     }
     rect.removeMovieClip();
}


Не думаю, що треба пояснювати, для чого потрібна кожна з рядків – для цього є коментарі. У кожному разі, 9/10 роботи ви вже зробили.


Тепер, залишаючись все ще у фреймі 2, перейдіть на інструмент text (текст) і відкрийте вікно Properties Inspector (інспектор властивостей) – Window

Якщо ви тепер протестуєте кліп (Control> Test Movie – управління> протестувати кліп), він повинен працювати. У вас повинно виходити рухати прямокутник і ухилятися від квадратів. Якщо в вас потрапляють, ви зупиняєтеся, і ваш рахунок падає до одиниці. Але якщо ви викрутиться від всіх квадратів, нічого не відбудеться. І якщо ви втратите всі очки, теж нічого не відбудеться. Нам треба щось зробити, щоб чимось ознаменувати ці події.


8. Тому клікніть на фреймі 3, не закриваючи вікна Properties Inspector, і надрукуйте в поле “Frame Label” (мітка фрейма) значення “win”. Потім створіть за допомогою інструменту text новий статичний текст, який оголошує, що, мовляв, ви виграли. Який-небудь простенький текст типу “ви виграли!”. Клацніть на фреймі 3, відкрийте вікно actions (сценаріїв), і вставте туди дію stop ();


9. Клацніть на фреймі 4, і задайте мітку фрейма “lose”. Знову відкрийте меню actions і вставте туди дію stop (); як ви зробили це у фреймі 3. Тепер інструментом text створіть якийсь статіческій текст, який говорить щось на кшталт “ви програли!”. Перейдіть на фрейм 1 і туди теж помістіть дію stop ();


10. В якості останнього штриха треба створити кілька кнопок. Насправді навіть одну кнопку. Натисніть CTRL + F8, щоб створити новий кліп. Виберіть кліп типу button radio і назвіть його як-небудь на зразок “Play”. І просто намалюйте маленький прямокутник за допомогою інструменту Rectangle. За допомогою інструменту Text напишіть на ньому “Play”. Тепер поверніться на основне робоче поле. Відкрийте бібліотеку і перетягніть значок кнопки “Play” у фрейми 1, 3 і 4. І вставте для кожної з кнопок наступний код:


on (release) {
    gotoAndstop (2); }


Вставили? Тепер протестуйте гру ще раз. Збийте по-швидкому п’ять квадратів і подивіться, що буде. А тепер спробуйте ухилитися від усіх, і подивіться, чи працює фрейм з повідомленням про перемогу. Якщо все в порядку – значить, ви тільки що створили першу свою гру! Вітаю. Тепер можна, наприклад, зробити нові сцени і повторювати всі кроки заново, створюючи нові рівні.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*