Как сделать игру платформер на флэше при помощи ActionScript 3

В далеких девяностых игры платформеры были очень популярны на приставках. Такое название они получили, потому что персонаж, управляемый игроком, прыгал по «платформам» (и врагам), а также лазил по лестницам, собирал предметы и выполнял различные задания на уровне.

Игры платформеры
Популярные игры-платформеры

Думаю, что многим начинающим разработчикам интересно было бы создать свою игру платформер на флэш.

В этом уроке рассмотрим несложную механику создания простой игры платформера на actionscript 3, которая скорее всего подойдет и для других языков программирования:

  1. Создание объектов-платформ
  2. Создание персонажа
  3. Создание простой гравитации
  4. Проверка столкновений с помощью функции hitTestPoint()
  5. Управление персонажем: движение и прыжок
  6. Повторное появление героя («респаун»)
  7. Список (массив) платформ
  8. Ограничение прыжка
  9. Движущиеся платформы
  10. Присоединение к двигающейся платформе
  11. Бонусы и монетки
  12. Подведение итогов и код игры платформера

Начнем с создания объектов для игры, это будет главный персонаж, платформы, бонусы и другое. Сделаем их из простых геометрических объектов, которые вы сможете затем поменять на спрайты. Основные элементы в игре-платформере, как уже понятно из названия, это платформы, а также персонаж, который будет по ним перемещаться.

Создание объектов-платформ

Сначала сделаем платформы. Для этого нарисуйте прямоугольник и конвертируйте его в символ, поставив точку регистрации в левом верхнем углу, как показано на изображении. Назовите символ «Platform», так он будет отображаться в библиотеке AdobeFlash, и на его основе будут созданы остальные платформы.

Конвертируем прямоугольник платформу в символ AdobeFlash

Создание персонажа

Давайте теперь создадим персонаж. Нарисуем еще один прямоугольник и конвертируем его в символ, установив точку регистрации внизу, как показано на изображении. Чтобы управлять персонажем, нужно задать ему имя, для этого выделите его и присвойте имя в панели properties в поле «Instance Name» введите «char».

Конвертируем прямоугольник персонаж в символ AdobeFlash

Создание простой гравитации

Теперь нужно закодировать поведение объектов, и самое первое с чего нужно начать это создание простой гравитации. Давайте займемся этим, добавим код на первый кадр панели «Timeline».

var grav: Number = 0;
var gravity: Number = 2;

addEventListener(Event.ENTER_FRAME, enter_frame);

function enter_frame (e: Event): void {
  char.y += grav;
  grav += gravity;
}

Вычисления происходят в обработчике enter_frame, который вызывается каждый кадр. Для гравитации используются две переменные, первая grav прибавляется к y персонажа, также происходит ее приращение с каждым разом на значение gravity, т.е. происходит ускорение падения.

Проверка столкновений с помощью функции hitTestPoint()

Запустите приложение и проверьте как оно работает. Обратите внимание, что персонаж падает, но не останавливается на платформе. Для этого нужно доработать код, добавив проверку столкновений с платформой. В AS3 есть два метода проверки столкновений, первый это hitTestObject(), который проверяет, столкнулись или пересеклись два объекта, второй это hitTestPoint(), который проверяет, столкнулась или пересеклась точка и объект. Вы, наверное, помните, что когда мы конвертировали объекты в символы, то для персонажа указали точку регистрации внизу, а для платформы сверху слева. Так вот теперь будем использовать hitTestPoint() и проверять на столкновение точку персонажа и объект платформу.

Нужно задать имя платформе «platform» и проверять столкновение.

if (platform.hitTestPoint(char.x, char.y)){
  char.y = platform.y;
  grav = 0;
}

При возникновении пересечения (столкновения) точки регистрации объекта char с платформой, объекту char устанавливается значение координаты y, точно такое же как и значение y платформы.

Проверьте, как работает пример, запустите приложение, теперь персонаж приземляется на платформу.

Управление персонажем: движение и прыжок

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

var left_key_down: Boolean = false;
var right_key_down: Boolean = false;
var jump_key_down: Boolean = false;

stage.addEventListener( KeyboardEvent.KEY_DOWN, on_keydown );
stage.addEventListener( KeyboardEvent.KEY_UP, on_keyup );

function on_keydown( e : KeyboardEvent ) : void {
	//LEFT Key 
	if (e.keyCode == 37) {
		left_key_down = true;
	}
	//RIGHT Key
	else if (e.keyCode == 39) {
		right_key_down = true;
	}
	//Up Key
	else if (e.keyCode == 38) {
		jump_key_down = true;
	}
}

function on_keyup( e : KeyboardEvent ) : void {
	//LEFT Key  
	if (e.keyCode == 37) {
		left_key_down = false;
	}
	//RIGHT Key
	else if (e.keyCode == 39) {
		right_key_down = false;
	}
	//Up Key
	else if (e.keyCode == 38) {
		jump_key_down = false;
	}
}

Можно было бы сразу сделать проверку нажатия клавиш и реакцию на них в обработчике события on_keydown, но лучше использовать вариант проверки в обработчике enter_frame, так как он будет легче для понимания.

Также нужно добавить еще две переменные speed:Number и maxJump:Number, первая будет скоростью, а вторая максимальной выстой прыжка.

var speed:Number = 3; 
var maxJump:Number = -25;

Проверка будет происходить в обработчике enter_frame.

if (right_key_down) {
  char.x += speed;
}
		
if (left_key_down) {
  char.x -= speed;
}
		
if (jump_key_down) {
  grav = maxJump;
}

Теперь можно управлять главным героем, и, как вы уже, наверное, заметили, если нажать на прыжок, то он слишком высоко прыгает. Это происходит, потому что мы не ограничили прыжок, когда персонаж находится не на платформе. Давайте добавим еще одну переменную, которая будет указывать, находится ли персонаж на платформе, и немного дополним код проверки на пересечение с платформой и проверку на нажатие клавиши прыжка. Если нажата клавиша вверх и персонаж находится не в прыжке, а на платформе, то он сможет прыгнуть.

var touchingGround:Boolean = false;

if ( platform.hitTestPoint(char.x, char.y) ){
  char.y = platform.y;
  grav = 0;
  touchingGround = true;
}
else{
  touchingGround = false;	
}

if (jump_key_down && touchingGround) {
  grav = maxJump;
}

Повторное появление героя («респаун»)

Давайте еще немного улучшим наш платформер, добавим возможность повторного появления персонажа, если он упал с платформы. Для этого нужно проверять по y положение персонажа, если он вышел за пределы экрана, то просто меняем y на первоначальный. Можно добавить переменные начального положения персонажа, и присваивать их, если персонаж упал ниже установленных ограничений.

var start_x:int = 50;
var start_y:int = 150;

if (char.y > 450) {
  char.x = start_x;
  char.y = start_y;
  grav = 0;
}

Список (массив) платформ

Так как в игре будет много платформ, то будет не просто проверять столкновение с каждой. Чтобы решить эту проблему давайте создадим список (массив) платформ, в который будут добавляться платформы. Используя оператор for будем проходить по всему списку и проверять каждую платформу, а также выполнять другие действия с ней, если это необходимо.

var list_platforms: Array = new Array();

for (var i: int = 0; i < list_platforms.length; i++ ) {
	
  var platform: MovieClip = list_platforms[ i ];
	
  if (platform.hitTestPoint( char.x, char.y )){
    char.y = platform.y;
    grav = 0;
    touchingGround = true;
  }
  else{
    touchingGround = false;	
  }
	  
  if (jump_key_down && touchingGround) {
    grav = maxJump;
  }
	
}
	
if (right_key_down) {
  char.x += speed;
}
		
if (left_key_down) {
  char.x -= speed;
}

Чтобы каждая платформа добавлялась в список, добавьте следующий код в кадр символа Platform.

var game: MovieClip = parent as MovieClip;
game.list_platforms.push(this);

Давайте разместим еще платформы и проверим, как работает приложение.

Ограничение прыжка

Обратите внимание, что если персонаж находится под платформой и прыгает, то появляется над ней. Можно ограничить такое поведение, сделать так, чтобы персонаж «ударялся» и снова оказывался на нижней платформе. Для этого нужно добавить следующий код в цикл, где происходит проверка платформ.

if (platform.hitTestPoint(char.x, char.y - (char.height))) {
  grav = 3; 
}

Движущиеся платформы

Теперь сделаем движущуюся платформу, которая будет подниматься и опускаться.

Сделаем вторую платформу движущейся вверх-вниз. Выделите ее и на панели Properties в поле «Instance Name» введите имя moving_platform. Теперь мы сможем обращаться в коде к этой платформе.

Сразу создадим новые свойства для этого объекта и присвоим им значения.

moving_platform.moving = true;
moving_platform.start_y = moving_platform.y;
moving_platform.sp = 1.0;

Сначала обозначаем то, что платформа может двигаться, второе свойство будет сохранять начальную позицию по координате y платформы, далее идет скорость.

Вставьте следующий код в начале цикла for, который перебирает платформы из списка list_platforms.

if (platform.moving){
  platform.y += platform.sp;
  
  if (platform.y>=platform.start_y+50 || platform.y<=platform.start_y-50){
    platform.sp=platform.sp*-1;
  }
}

В условии проверяем, может ли платформа двигаться, если это так, то прибавляем к ее координате y скорость. Далее идет проверка, какое расстояние прошла платформа, если расстояние от первоначального больше или меньше 50, то меняем знак скорости на противоположный, чтобы платформа двигалась уже в обратном направлении. Проверьте, как работает приложение, теперь платформа должна подниматься и опускаться, попробуйте прыгнуть на нее персонажем.

Присоединение к двигающейся платформе

Можно заметить, что персонаж немного подпрыгивает, когда стоит на платформе при ее движении. Это происходит потому, что действует сила гравитации при опускании платформы, и он как бы немного падает. Чтобы этого не происходило нужно присоединить персонаж к платформе, когда он находится на ней. Есть два способа реализации, хотя они фактически делают одно и то же. Можно сохранять индекс платформы из массива list_platforms или сохранять в переменную ссылку на платформу как объект MovieClip. После этого увеличивать свойство y персонажа на значение скорости платформы.

Давайте применим второй способ, так как он проще для понимания и возможности ActionScript 3 позволяют это сделать. В начале кода нужно создать свойство для объекта char и присвоить ему первоначальное значение.

char.platform = null;

В этом свойстве будем сохранять ссылку на платформу, а затем прибавлять к координате y персонажа ее скорость. В условии, где происходит проверка на пересечение, добавьте следующий код.

char.platform = platform;

В этом выражении просто сохраняем ссылку на платформу с которой произошло пересечение.

Теперь нужно добавить код, который будет прибавлять скорость платформы к координате y персонажа, если ссылка на платформу равна двигающейся платформе.

  if (platform.moving){

    platform.y += platform.sp;
   
    if (char.platform == platform){ 
      char.y += platform.sp;
    }
   
    if (platform.y>=platform.start_y+50 || platform.y<=platform.start_y-50){
      platform.sp=platform.sp*-1;
    }
  } 

Можете запустить приложение и проверить, как персонаж стоит на платформах.

Бонусы и монетки

Во многих играх-платформерах главный герой что-то собирает, давайте тоже добавим монетки, которые нужно будет собирать. Нарисуем обычный кружок желтого цвета и конвертируем его в символ, имя можете дать любое, например «Coin».

Нарисуйте простую желтую окружность, это будет монетка в игре платформере

Теперь можно разместить несколько монет, но сначала нужно создать список как для платформ.

var list_coins: Array = new Array();

И точно таким же образом добавить их в него, то есть записать следующий код в первом кадре символа монеты.

var game: MovieClip = parent as MovieClip;
game.list_coins.push(this);

Проверяем столкновение игрока с каждой монетой, если это происходит, то удаляем монетку со сцены и из списка.

for (i = 0; i < list_coins.length; i++) {
  var coin : MovieClip = list_coins[ i ];
  if (coin.hitTestObject(char)){
    removeChild(coin);
    list_coins.splice(i,1);
  }
}

Подведение итогов и код игры платформера

Запустите приложение и проверьте, как работает игра платформер. Можете расставить еще платформы и монетки. В этом уроке мы рассмотрели основы создания игры платформа на флэш при помощи ActionScript 3. Код еще можно дорабатывать и оптимизировать, также добавить врагов, лестницы, скорллинг и многое другое. Чуть ниже приведен весь код игры платформера, также можете скачать исходники здесь.

import flash.events.MouseEvent;

var start_x:int = 50;
var start_y:int = 150;

var grav:Number = 0; 
var gravity:Number = 2; 
var speed:Number = 3; 
var maxJump:Number = -25; 
var touchingGround:Boolean = false;

var list_platforms: Array = new Array();
var list_coins: Array = new Array(); 

var left_key_down: Boolean = false;
var right_key_down: Boolean = false;
var jump_key_down: Boolean = false;

moving_platform.moving = true;
moving_platform.start_y = moving_platform.y;
moving_platform.sp = 1.0;
char.platform = null;

addEventListener( Event.ENTER_FRAME, enter_frame );
stage.addEventListener( KeyboardEvent.KEY_DOWN, on_keydown );
stage.addEventListener( KeyboardEvent.KEY_UP, on_keyup );

function enter_frame ( e: Event ) : void {
  char.y += grav;
  grav += gravity;
	
  for ( var i : int = 0; i < list_platforms.length; i++ ) {
	
    var platform: MovieClip = list_platforms[ i ];
	  
    if (platform.moving){
      platform.y += platform.sp;
			
      if (char.platform == platform){	
        char.y += platform.sp;
      }
							
      if (platform.y>=platform.start_y+50 || platform.y<=platform.start_y-50){
        platform.sp=platform.sp*-1;
	  }
	}

	if(platform.hitTestPoint( char.x-15, char.y ) || platform.hitTestPoint( char.x+15, char.y )){	
	  char.platform = platform;
	  char.y = platform.y;
	  grav = 0;
	  touchingGround = true;
    }
	else{
	  touchingGround = false;
	}
	  
	if (jump_key_down && touchingGround) {
	  grav = maxJump;
 	}
	  
    if (platform.hitTestPoint(char.x, char.y - (char.height))) {
	  grav = 3; 
    }	  
  }
	
  if (right_key_down) {
    char.x += speed;
  }
		
  if (left_key_down) {
    char.x -= speed;
  }

  for (i = 0; i < list_coins.length; i++) {
    var coin : MovieClip = list_coins[ i ];
    if (coin.hitTestObject(char)){
      removeChild(coin);
      list_coins.splice(i,1);
    }
  }
	
  if (char.y > 450) {
    char.x = start_x;
    char.y = start_y;
    grav = 0;
  }
}

function on_keydown( e : KeyboardEvent ) : void {
  //LEFT Key 
  if (e.keyCode == 37) {
    left_key_down = true;
  }
  //RIGHT Key
  else if (e.keyCode == 39) {
	right_key_down = true;
  }
  //Up Key
  else if (e.keyCode == 38) {
	jump_key_down = true;
  }
}

function on_keyup( e : KeyboardEvent ) : void {
  //LEFT Key  
  if (e.keyCode == 37) {
    left_key_down = false;
  }
  //RIGHT Key
  else if (e.keyCode == 39) {
    right_key_down = false;
  }
  //Up Key
  else if (e.keyCode == 38) {
    jump_key_down = false;
  }
}

Если у вас есть какие-то вопросы (предложения) или вы хотите продолжения урока, то пишите в комментариях. Если вам понравился урок, то поделитесь им или добавьте в закладки — нажмите на значки внизу.

Автор: Jean Winters

Комментариев: 5 на “Как сделать игру платформер на флэше при помощи ActionScript 3

  1. Давно искал, как сделать платформер. В этом уроке все просто и ничего лишнего, самое основное и простым языком написано, легко читать и воспринимать.

  2. Захотелось сделать игру платформер и, наконец-то, нашел описание работы обычным, человеческим языком. понятным для любителя.

  3. Как понять следующий шаг?
    var game: MovieClip = parent as MovieClip;
    game.list_platforms.push(this)

    я не очень понимаю куда это вставить. В полном листинге я его не нашел.

  4. Отличный урок! Хотелось бы еще добавить противников и способы взаимодействия с ними, например прыгнуть сверху чтобы убить или поймать выпущенный противником сняряд и погибнуть или потерять часть здоровья. Очень интересно, как это реализуется.

Комментировать

Почта не публикуется.Обязательные поля отмечены *