Часть 4. Добавление элементов уровня. | В паутине

Часть 4. Добавление элементов уровня.

Вольный перевод статьи How to Create a Platform Game in AS3 – Part 4 Часть комментариев (особенно по математическим расчетам) - моя.

На этом уроки мы добавим в нашу игру различные элементы типа лестниц, трамплинов и препятствий.
Лестницы
Первым делом добавим лестницы, которые позволят персонажу подниматься с одной платформы на другую. В нашей игре они будут выглядеть так же, как основные блоки, то есть будут простыми квадратиками 25х25. Для опознания сделаем их желтого цвета. Необходимо разместить их на сцене. Все лестницы будут помещены в отдельный контейнер ladderHolder для удобства. Кроме того мы создадим специальный объект, в котором будут содержаться все элементы уровня, включая blockHolder и ladderHolder. Найдите в коде место, где мы создавали blockHolder и допишите следующий код:

//этот спрайт будет своеобразным контейнером
//для всех добавленных на сцену лестниц
var ladderHolder:Sprite = new Sprite();
//добавляем его на сцену
addChild(ladderHolder);

Теперь внесем изменения в функцию createLvl(). Условным обозначением для лестниц на схеме уровня будет «2». Нужно немного отшлифовать наш цикл создания уровня:

for(var i:int = 0;i<lvlArray.length;i++){
	//проверяем, не закончен ли ряд
//если закончен, переходим к следующему
if(i/lvlColumns == int(i/lvlColumns)){
row ++;
}
	//определяем элемент массива
var newPlacement;
if(lvlArray[i] == 1){
		//создаем блок
		newPlacement = new Block();
		newPlacement.graphics.beginFill(0xFFFFFF);
		newPlacement.graphics.drawRect(0,0,25,25);
		blockHolder.addChild(newPlacement);
	} else if (lvlArray[i] == 'MAIN'){
		newPlacement = mcMain;
	//если элемент массива = 2,
	//рисуем лестницу
	} else if (lvlArray[i] == 2){
		newPlacement = new Sprite();
		newPlacement.graphics.beginFill(0xFFFF00,1);
		newPlacement.graphics.drawRect(0,0,25,25);
		//добавляем ее в контейнер
		ladderHolder.addChild(newPlacement);
	}
 	//определив элемент уровня, устанавливаем его координаты
	if(lvlArray[i] != 0){
		newPlacement.x = (i-(row-1)*lvlColumns)*newPlacement.width;
		newPlacement.y = (row-1)*newPlacement.height;
	}
}

Теперь при нажатии управляющих стрелок вместо blockHolder необходимо двигать lvlHolder. Надеюсь, вы знаете, как это сделать. Подсказка: посмотрите в функции moveChar().
Добавим нашим лестницам функциональности. Введем переменную, хранящую информацию о том, контактирует ли персонаж с лестницей.

// находится ли герой на лестнице
var mainOnLadder:Boolean = false;
Создадим цикл, проверяющий все имеющиеся у нас лестницы на предмет столкновения с персонажем. Этот код необходимо добавить в функцию moveChar().
//проверяем столкновение с лестницами
for(i=0;i<ladderHolder.numChildren;i++){ //на каждой итерации получаем текущую лестницу var hitLadder:DisplayObject = ladderHolder.getChildAt(i); //проверяем на столкновение if(mcMain.hitTestObject(hitLadder)){ //проверяем, достаточно ли близко персонаж if(mcMain.x >= hitLadder.x + lvlHolder.x - 10 && 
		   mcMain.x <= hitLadder.x + lvlHolder.x + 35){
			//меняем состояние героя – «на лестнице»
			mainOnLadder = true;
			//не даем ему прыгать
			jumpSpeed = jumpSpeedLimit;
			break;
		}
	}
	//если нет столкновения, персонаж «не на лестнице»
	mainOnLadder = false;
}

Мы не должны позволять персонажу прыгать, когда он находится на лестнице. Вместо этого он должен подниматься вверх или вниз, в зависимости от того, какая клавиша нажата. Чтобы добиться этого, необходимо отредактировать наш код:

if(upKeyDown || mainJumping){
	if(!mainOnLadder){
		mainJump();
	}
}
if(upKeyDown && mainOnLadder){
	mcMain.y -= mainSpeed;
}
if(downKeyDown && mainOnLadder && !mainOnGround){
	mcMain.y += mainSpeed;
}

Изменим теперь схему уровня, чтобы проверить, как работают лестницы.

var lvlArray1:Array = new Array(
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,X,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
);

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

//размещение героя на переднем плане
MovieClip(root).setChildIndex(mcMain,MovieClip(root).numChildren-1);

Бамперы

Разобравшись с лестницами, перейдем к бамперам (препятствиям). Они действуют как разновидность стен, при столкновении с ними персонажа, он отталкивается обратно. У нас они будут выглядеть как зеленые квадратики. Прежде всего, конечно, создадим контейнер для всех бамперов:

//этот спрайт будет своеобразным контейнером 
//для всех добавленных на сцену бамперов
var bumperHolder:Sprite = new Sprite();
lvlHolder.addChild(bumperHolder);

Добавьте этот код в цикл функции createLvl():

if (lvlArray[i] == 3){
	newPlacement = new Sprite();
	//рисуем бампер
	newPlacement.graphics.beginFill(0x00FF00,1);
	newPlacement.graphics.drawRect(0,0,25,25);
	bumperHolder.addChild(newPlacement);
}

Этот код просто добавляет бампер на сцену. Теперь необходимо сделать так, чтобы персонажа отбрасывало, когда он контактирует с бампером. Используем тот же принцип, что мы использовали для прыжков. Определим для начала некоторые переменные:

//БАМПЕРЫ
//персонаж столкнулся с бампером
var mainBumping:Boolean = false;
//скорость отталкивания
var bumpSpeed:int = 10;
Напишем функцию:
//функция столкновения
function mainBump():void{
	//определяем направление отталкивания
	var bumpDirection:int;
	if(leftKeyDown){
		bumpDirection = 1;
	} else if (rightKeyDown){
		bumpDirection = -1;
	}
	if(mainBumping){
		lvlHolder.x -= bumpDirection*bumpSpeed;
		bumpSpeed *= .5;
		if(bumpSpeed <= 1){
			mainBumping = false;
		}
	}
}

Добавим следующий код в конец функции moveChar():

//проверяем все бамперы на столкновение
for(i=0;i<bumperHolder.numChildren;i++){
	var hitBumper:DisplayObject=bumperHolder.getChildAt(i);
	if(mcMain.hitTestObject(hitBumper)){
		mainBumping = true;
		bumpSpeed = 20;
	}
}
mainBump();

Вот и все, что необходимо для функционирования бамперов. Если у вас есть желание, вы можете протестировать нашу игру, добавив в схему несколько элементов 3.

Трамплины

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

//этот спрайт будет своеобразным контейнером
//для всех добавленных на сцену трамплинов
var trampHolder:Sprite = new Sprite();
lvlHolder.addChild(trampHolder);

Добавим трамплины в цикл функции createLvl(). Их условное обозначение – «4».

if (lvlArray[i] == 4){
	newPlacement = new Shape();
	newPlacement.graphics.beginFill(0x00FF00);
	newPlacement.graphics.drawCircle(12.5,25,12.5);
	trampHolder.addChild(newPlacement);
}

Мы можем добавить трамплин на схему уровня.

var lvlArray1:Array = new Array(
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,4,0,0,0,X,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
);

Теперь пропишем проверку на столкновение героя с трамплином. Как и прежде, необходимо внести дополнения в функцию moveChar().

//проверка на столкновение с трамплином
for(i=0;i<trampHolder.numChildren;i++){
	//вы все это уже знаете
	var hitTramp:DisplayObject=trampHolder.getChildAt(i);
	if(mcMain.hitTestObject(hitTramp)){
		//при столкновении просто прыгаем
		mainJump();
	}
}

Это, возможно самый простой в программировании элемент игрового уровня.
В следующей части мы добавим нашему герою врагов!

Все уроки руководства

1. Создание главного персонажа
2. Создание уровня
3. Взаимодействие персонажа с блоками
4. Добавление элементов уровня
5. Добавление врагов
6. Завершение уровня
7. Последние штрихи

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны