среда, 9 февраля 2011 г.

Урок 14. Меню как основа для игр

Вроде бы сделал игру, можно играть, но понимаешь, что чего-то не хватает. Чего? Меню. А добавлять его, когда сама игра уже сделана, как-то не хочется. Приходится что-то менять, появляются ошибки и т.д. Как же это исправить? Сделать шаблон меню с основными пунктами, которые есть/должны быть в игре. Чем мы сейчас и займёмся.
Как оно у нас будет работать:





Меню будет у нас как отдельный мувиклип со своим классом, чтобы не мучаться с настройкой/приклейкой меню к игре.
Для начала нам нужно его нарисовать: рисуем кнопки (start game, options и help). Так, теперь конвертируем их в мувиклипы НЕ экспротирум в ActionScript (они нам там не понадобятся) и раз мы их не экспротировали, то называем каждую кнопку start game – start_game_bt, options – options_bt и help - help_bt. Кнопки нарисовали.
Теперь выделяем ВСЕ кнопки, нажимаем F8, называем main_menu И экспортируем в ActionScript. Заходим в меню, там видим наши кнопки, если не видим – значит, что-то не правильно сделали.
А теперь я расскажу принцип работы нашего меню. Но очень прост:
1ый кадр – просто кнопка возврата в главное меню, а всё остальное прозрачное, чтобы была видна сама игра, и не приходилось удалять это меню.
2ой кадр – именно главное меню с теми кнопками, которые мы нарисовали.
3ий кадр – настройки. Там у нас будет переключатель звука и качества изображения.
4ый кадр – help – помощь, просто текст с объяснением сути игры и как в ней играть.
Options:
Вот и всё. Теперь руководствуясь этим планом, доделаем наши кнопки. Создаём переключатель:
1ый кадр переключателя – Рисуем зелёный фон, создаём статичное текстовое поле и пишем там “on”
2ой кадр переключателя – всё то же самое только текст уже “off” и фон уже красный.
Пошли настройки качества изображения.
3ий кадр переключателя – всё то же самое только текст - “best” и фон зелёный.
4ый кадр переключателя – всё то же самое только текст - “low” и фон красный.
Всё это было у нас в мувиклипе переключатель, не буду уже говорить, как его создать.
Теперь создаём кейфрейм на 3ем кадре в нашем меню. Добавляем туда 2 статичных текстовых поля с текстами Sounds и Quality, напротив них размещаем 2 переключателя.
Help:
На 4ом кадре создаём keyFrame. Добавляем статичное тестовое поле и пишем туда что-то умное.

И последний штрих: кнопка для возврата в главное меню. Тут всё просто. Создаём кнопку (как создать описано выше) и называем её to_main_menu_bt. А теперь размещаем эту кнопку по всем кадрам меню, кроме 2ого (т.к. там и находится наше главное меню).
Всё. Меню мы нарисовали. Теперь код. Если у нас есть наше меню на сцене – удаляем его.
В первом кадре ничего не должно быть, там и пишем код (не создаём класс т.к. тут будет всего 1 строчка):
var Main_menu=new main_menu(stage);
эта строчка создаст это меню.
Ну, а теперь создаём новый документ ActionScript File и копируем туда код:
package {
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 import flash.filters.GlowFilter;
 public class main_menu extends MovieClip {
  private var stg;
  private var sound, quality:Boolean;
  
  public function main_menu(Stg) {
   stg=Stg;
   sound=true;
   quality=true;
   
   stg.addChildAt(this,0);
   this.gotoAndStop(2);
   
   addEventListeners();
  }
  private function addEventListeners(){
   this.start_game_bt.addEventListener(MouseEvent.CLICK, start_game);
   this.options_bt.addEventListener(MouseEvent.CLICK, options_clicked);
   this.help_bt.addEventListener(MouseEvent.CLICK, help_clicked);  
   
   this.start_game_bt.addEventListener(MouseEvent.MOUSE_OVER, start_game_mouseOver);
   this.options_bt.addEventListener(MouseEvent.MOUSE_OVER, options_mouseOver); 
   this.help_bt.addEventListener(MouseEvent.MOUSE_OVER, help_mouseOver); 
   
   this.start_game_bt.addEventListener(MouseEvent.MOUSE_OUT, bt_mouseOut);
   this.options_bt.addEventListener(MouseEvent.MOUSE_OUT, bt_mouseOut); 
   this.help_bt.addEventListener(MouseEvent.MOUSE_OUT, bt_mouseOut); 
  }
  //делаем свечение при наводе мышкой на кнопку
  private function help_mouseOver(e:MouseEvent){
   this.help_bt.filters = [new GlowFilter(0xFFFF00, 0.5, 40, 40, 3.2, 9, false, false)];
  }
  private function start_game_mouseOver(e:MouseEvent){
   this.start_game_bt.filters = [new GlowFilter(0x00FFFF, 0.5, 40, 40, 3.2, 9, false, false)];
  }
  private function options_mouseOver(e:MouseEvent){
   this.options_bt.filters = [new GlowFilter(0xFF00FF, 0.5, 40, 40, 3.2, 9, false, false)];
  }
  //эта функция убирает свечение кнопки 
  private function bt_mouseOut(e:MouseEvent){
   if(this.currentFrame==2){
    e.target.filters = [];//e.target - "текущая кнопка"
   }
  }
  private function help_clicked(e:MouseEvent){
   this.gotoAndStop(4);
   this.to_main_menu_bt.addEventListener(MouseEvent.CLICK, toMainMenu);
  }
  private function start_game(e:MouseEvent){
   new_game();
   self_destruction();
  }
  private function options_clicked(e:MouseEvent){
   this.gotoAndStop(3);
   
   if(sound){
    sound_bt.gotoAndStop(1);
   }
   else{
    sound_bt.gotoAndStop(2);
   }
   
   if(quality){
    quality_bt.gotoAndStop(3);
   }
   else{
    quality_bt.gotoAndStop(4);
   }
   
   sound_bt.addEventListener(MouseEvent.CLICK, sound_clicked);
   quality_bt.addEventListener(MouseEvent.CLICK, quality_bt_clicked);
   this.to_main_menu_bt.addEventListener(MouseEvent.CLICK, toMainMenu); 
  }
  private function new_game(){
   // START GAME
  }  
  public function toMainMenu(e:MouseEvent){
   this.gotoAndStop(2);
   
   addEventListeners();
  }
  private function self_destruction(){   
   this.removeEventListener(MouseEvent.CLICK, start_game);
   this.gotoAndStop(1);
   this.to_main_menu_bt.addEventListener(MouseEvent.CLICK, toMainMenu);
  }
  private function sound_clicked(e:MouseEvent){
   //в зависимости от переменной sound звук будет играть или нет
   if(sound){
    sound=false;
    sound_bt.gotoAndStop(2);
   }
   else{
    sound=true;
    sound_bt.gotoAndStop(1);
   }
   
  }
  private function quality_bt_clicked(e:MouseEvent){
   //чтобы у нас в настройках было по больше пунктов)) делаем пункт качество изображения
   //quality влияет только на те изображения, которые нарисованы во flash
   if(quality){
    quality=false;
    quality_bt.gotoAndStop(4);
    stg.quality = "low"
   }
   else{
    quality=true;
    quality_bt.gotoAndStop(3);
    stg.quality = "best"
   }
   
  }
 }
}
На этом всё. Для ленивых вот исходник) Пока!

1 комментарий:

  1. Учу as3 :)
    Искал именно это :)
    Спасибо,помогло :)

    ОтветитьУдалить