Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Лабиринт


В этом уроке я научу вас, как создать основу игры Лабиринт с обнаружением столкновения. Обнаружение столкновения полезно во многих различных сценариях игр, и оно легче, чем вы можете подумать. Обнаружение столкновения гарантирует, что синий шарик (или Игрок - Player) не пересечет красные линии лабиринта.
Шаг 1: Настройка окружения муви клипа

1. Откройте новый Flash Movie
2. Выберите: Modify - Document
3. Установите размер: 550 x 400
4. Если желаете, установите Background Colour
5. Кликните: OK
6. В Timeline по правому клику мыши в кадре 3 выберите: Insert Frame
7. В Timeline используйте кнопку Insert Layer , чтобы добавить 5 слоев, таким образом, вы будете иметь всего 6 слоев
8. Назовите слои следующим образом:
alt
Ваша временная шкала Timeline должна выглядеть таким образом.

Шаг 2: Создание первого кадра

1. Выделите кадр 1 в слое: Text & Buttons
2. Создайте кнопку с надписью : Click to Play.
3. Дайте ей инстанс имя = But1.


Замечание:
если вы пожелаете перетащить один из экземпляров Standard Buttons из общей библиотеки: Window - Other Panels - Common Libraries - Buttons (не берите кнопки с эффектами)
4. Вы не хотите, чтобы кнопка была видима в следующем кадре, поэтому:

Правой кнопкой мыши кликните по кадру 2 в слое Text & Buttons и выберите: Insert Blank Keyframe

5. Выделите кадр 1 в слое Background
6. Поместите любую графику в этом кадре, какую желаете. Я поместил тень от лабиринта в этом кадре. Если вы хотите сделать это, вы должны будете вернуться и сделать это позже (создать задний фон), когда вы закончите создание лабиринта.
7. Если вы не хотите, чтобы фон был видимым в следующем кадре, тогда:

Правой кнопкой мыши кликните в кадре 2 в слое Background и выберите Insert Blank Keyframe

8. Выделите кадр 1 в слое ActionScript
9. Введите следующий код ActionScript в кадре 1:
CODE

 stop();
         But1.onRelease=function(){
             gotoAndStop(2);
         }        

Замечание: Причина, по которой нам это необходимо, чтобы быть уверенным, что мувик Flash находится в фокусе. По-другому, когда игрок использует клавиши со стрелками на клавиатуре, web-страница будет скроллироваться вместо того, чтобы мувик Flash реагировал на команды клавиатуры.
alt
Ваша Timeline должна выглядеть так.

Шаг 3: Создание Player

В моем случае Player - это небольшой синий кружок.

1. Правой кнопкой мыши кликните в кадре 2 в слое Player и выберите: Insert Blank Keyframe
2. Выберите Oval Tool.
3. Создайте небольшой кружок (или квадрат, если вы предпочитаете)
4. В панели Property установите размер: 8 x 8 пикселей

Замечание:
он должен быть достаточно небольшим, чтобы легко проходил и соответствовал лабиринту.

5. Вернитесь к стандартному Selection tool.
6. Выделите круг (удостоверьтесь, что он выделен целиком)
7. Правой кнопкой мыши кликните по кругу и выберите Convert to Symbol
8. Дайте имя player
9. Выберите тип Movie Clip
10. Кликните OK
11. Если панель Property закрыта, откройте ее: Window - Properties (Ctrl F3)
12. Дайте муви клипу Instance Name= player

Шаг 4: Создание End

Когда Player попадает на объект, который мы назвали End, мувик перейдет на следующий кадр. Теоретически End должен быть невидимым. Мой End выглядит таким образом:

1. Правой кнопкой мыши кликните в кадре 2 слоя End и выберите: Insert Blank Keyframe
2. Выберите Rectangle Tool:
3. Создайте небольшой прямоугольник
4. В панели Property установите размер: 30 x 20 пикселей


Замечание:
Не делайте его слишком маленьким или ваш Player сможет прыгнуть прямо через него, раньше чем столкнется с end.

5. Если вы хотите, выберите Text tool и напишите: END
6. Вернитесь к стандартному Selection tool:
7. Выделите прямоугольник (удостоверьтесь, что он выделен целиком)
8. Правой кнопкой мыши кликните по прямоугольнику и выберите: Convert to Symbol
9. Дайте имя end
10. Выберите тип Movie Clip
11. Кликните: OK
12. Если панель Property закрыта, откройте ее: Window - Properties (Ctrl F3)
13. Дайте муви клипу Instance Name: end


Шаг 5: Создание лабиринта Maze


1. Правой кнопкой мыши кликните в кадре 2 в слое ActionScript и выберите: Insert Blank Keyframe
2. Выберите один из инструментов для рисования, например Pen Tool.
3. Нарисуйте стены вашего лабиринта Maze Walls

Замечание: если вы собираетесь рисовать очень запутанный лабиринт, я предлагаю вам, нарисовать только небольшую секцию, чтобы начать с нее. Вы сможете вернуться и добавить отрисовку позже. Если стены слишком тонкие или путь (где ваша синяя точка движется) слишком узкий, вы должны проверить, не проходит ли ваш Player сквозь стены. Чем толще стенки и шире пути, тем быстрее вы можете создать движение вашего игрока, поэтому не старайтесь делать стены слишком тонкими.

Мои стены такие: 6 пикселей в толщину
Мои пути такие: 10 пикселей в ширину
4. Вернитесь к стандартному Selection tool.
5. Выделите нарисованное (проверьте, что вы выделили все целиком)
6. Правой кнопкой мыши кликните по нарисованному лабиринту и выберите: Convert to Symbol
7. Дайте имя: walls
8. Выберите тип: Movie Clip
9. Кликните: OK
10. Если панель Property закрыта, откройте ее: Window - Properties (Ctrl F3)
11. Дайте муви клипу Instance Name: walls
12. Правой кнопкой кликните снова по муви клипу и выберите: Convert to Symbol
13. Дайте имя: maze
14. Тип: Movie Clip
15. Кликните: OK

Замечание:
этим создается серия вложенных муви клипов один внутри другого. Муви клип walls находится внутри муви клипа maze. Муви клип maze находится на основной сцене:
alt
16. Напишите следующий код ActionScript во 2 кадре слоя ActionScript:
CODE

         maze.onEnterFrame=function() {
             with (_root.player) {

                 // управляем скоростью для Player
                 mySpeed = 3;

                 // управляем расстоянием, на которое отскакивает Player от стены после удара
                 myBounce = 3;

                 // контролируем клавиатуру
                 if (Key.isDown(Key.DOWN)) {
                     _y += mySpeed;
                 }
                 if (Key.isDown(Key.UP)) {
                     _y -= mySpeed;
                 }
                 if (Key.isDown(Key.LEFT)) {
                     _x -= mySpeed;
                 }
                 if (Key.isDown(Key.RIGHT)) {
                     _x += mySpeed;
                 }

                 // определяем, соприкасаются ли края player со стенками walls лабиринта Maze
                 if (this.walls.hitTest(getBounds(_root).xMax, _y, true)) {
                     _x -= myBounce;
                 }
                 if (this.walls.hitTest(getBounds(_root).xMin, _y, true)) {
                     _x += myBounce;
                 }
                 if (this.walls.hitTest(_x, getBounds(_root).yMax, true)) {
                     _y -= myBounce;
                 }
                 if (this.walls.hitTest(_x, getBounds(_root).yMin, true)) {
                     _y += myBounce;
                 }

                 // проверяем, закончился ли лабиринт
                 if (_root.end.hitTest(_x, getBounds(_root).yMax, true)) {
                     _root.gotoAndStop(3);
                 }
             }
         }


Шаг 6: Кадр 3

1. Правой кнопкой мыши кликните в кадре 3 слоя Text&Buttons и выберите: Insert Blank Keyframe
2. Напишите что-нибудь подобное этому: You won!!!
3. Создайте кнопку, чтобы возвратиться и начать игру снова: кнопку Replay
4. Дайте кнопке инстанс имя But2.
5. Добавьте следующий код ActionScript для работы этой кнопки в слой ActionScript:
CODE

         But2.onRelease=function(){
             gotoAndStop(2);
         }

Шаг 7: Тестирование мувика

1. В кадре 2 поместите муви клип Player на начальную позицию.
2. В кадре 2 поместите муви клип end на конечную позицию.

Создание мувика завершено. При тестировании вы можете получить такой результат, что Player будет качаться из стороны в сторону и пройдет через стенки.

Колебания

Player может вибрировать, если путь между стенками не достаточно длинный, а отскок слишком большой

Чтобы решить эту проблему, нужно сделать одно из двух:
Сделать переменную myBounce меньше
Сделать Player меньше
Сделать путь (дырку между стенками) больше

Нет столкновения
Если, например, ваша скорость (переменная mySpeed) равна 3, то Player тогда должен состоять, по крайней мере, из 3 пикселей. Этот анимационный эффект выглядит как плавное движение, но фактически это не так. Если ваша стена тоньше, чем это, игрок Player просто перепрыгнет через нее сверху , хотя это выглядит так, будто Player проходит через стену навылет, а не прыгает. Даже, если вы думаете, что ваши стены достаточно толстые, вы можете иногда получить проблему. Это случается потому, что отскок+скорость+размер игрока + ширина стен, все это вычисленное контролирует движение игрока. Это может давать иногда непредсказуемые результаты. Если столкновение не работает корректно, то Player может просто пройти сквозь стены.

Чтобы решить эту проблему, попробуйте следующее:
Сделайте переменные myBounce и mySpeed меньше
Сделайте путь (расстояние между стенками) больше
Сделайте стенки толще
Сделайте размер Player больше или меньше

Замечание: я обнаружил, что переменные myBounce и mySpeed вызывают больше проблем, если они имеют разные значения. Поэтому я рекомендую, чтобы вы, если будете изменять одно значение, изменили и другое.
3. Протестируйте ваш мувик: Control - Test Movie (Ctrl Enter)

Замечание: если вам необходимо отредактировать ваш лабиринт, рисуйте его, чтобы он был не длиннее сцены, но вложен внутри муви клипов. Дважды кликайте по мувику-лабиринту на основной сцене (тем самым вы будете входить в содержимое вложенных мувиков), пока нарисованное не станет выделенным. После этого здесь вы можете продолжить отрисовку лабиринта.

Это все !!


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (5)

#1 написал: TaUReN | 3 августа 2009 10:47
     

Прикольно, прошёл.
#2 написал: naikon | 3 августа 2009 19:18
     

Получше будет, если
"mySpeed = 3;"
поставить где-то 8, то сильно медленно передвигается шарик.
#3 написал: Алинчик | 19 ноября 2009 15:36
     

подскажите, пожалуйста..
сделала как написано, но запускаю, а все мегает :(
#4 написал: naikon | 19 ноября 2009 18:52
     

Алинчик,
Флэш не простая штука, что-то не в том слое прописал, или ошибка в коде и может все насмарку пойти..., так что тут дело на внимательность.
#5 написал: Алинчик | 20 ноября 2009 11:19
     

спасибо:)
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.