Поделиться
Поделиться

После прочтения статьи о платформерном движке (дальше буду ссылаться на неё как на «предыдущий пример»), у многих возник вопрос: «Как сделать, чтобы при управлении смещался фон, а персонаж оставался на месте».

Спешу ответить.
Есть один способ, самый простой, на мой взгляд, вот его и рассмотрим. Возьмём конечный результат из «предыдущего примера», теперь «обернём» всё полученное в новый символ game. Наглядно результат показан на слайде 1 — код, персонаж, противники (если есть), платформы, графика и всё всё всё, должно оказаться внутри этого клипа. Такой клип можно смещать, масштабировать, крутить, копировать в другой fla-файл — игра будет работать.

[kml_flashembed movie=»http://xitri.com/wp-content/uploads/2009/07/backgroundscrolling.swf» height=»200″ width=»550″ /]

Принцип, по которому будем скролировать фон: при любом смещении персонажа, клип с игрой game смещаем на такое же расстояние, но в противоположную сторону. То есть, если главный герой бежит вправо, то клип с игрой нужно сместить влево. Это основа, для этого достаточно в коде игры (см. предыдущий пример) после того как переместили клип hero, добавить следующие строки:

//вместо героя сммещаем фон
_x = -(hero._x - 275);
_y = -(hero._y - 100);

275 и 100 — это половина ширины и высоты моей флешки — при этом персонаж будет всегда оставаться в центре. Что получилось, можно увидеть на слайде 2. Замечу, что на этом этапе масштабировать клип уже нельзя, так как системы координат внутри и снаружи клипа game должны быть одинаковы. Иначе получите не то что ожидали 🙂

Это уже рабочий вариант для игры. Если нарисуете интересный фон с запасом, то можно так и оставлять. Кому надо чтобы фон не прокручивался дальше пределов уровня — идём дальше.

Я немного увеличил размеры уровня, чтобы прокрутка была наглядней. Ещё нужно определить границы, за которые клип game не должен выходить. Сделать это просто: смещайте клип game в максимально допустимое положение и в панели Info смотрите его координаты. Вам придётся самим подобрать значения для вашего случая. Код теперь такой (с крайними значениями которые получились у меня):

//крайнее положение, когда персонаж упирается влево
var x0 = 39;
//крайнее положение, когда персонаж упирается вправо
var x9 = -145;
//крайнее положение, когда персонаж упирается в потолок
var y0 = 10;
//крайнее положение, когда персонаж внизу
var y9 = -130;
_x = -(hero._x - 275);
_y = -(hero._y - 100);
//проверяем чтобы клип game не выходил за ограничения
_x = (_x > x0)? x0 : (_x < x9)? x9 : _x;
_y = (_y > y0)? y0 : (_y < y9)? y9 : _y;

Получаем слайд 3. Чтобы увеличить производительность, вместо if else используется сокращённый вариант () ? :

Кому этого мало, могут использовать камеру для «слежения» за персонажем (клип с самой камерой назовём camera). В этом случае ограничивающие координаты будут чуть другими. Так же с камерой можно легко задействовать масштабирование. Код:

camera._xscale = camera._yscale = Math.max(100, 100 + (1 - hero._y / 250) * 28);
var x0 = -39 + camera._width / 2;
var x9 = 697 - camera._width / 2;
var y0 = -9 + camera._height / 2;
var y9 = 329 - camera._height / 2;
camera._x = hero._x;
camera._y = hero._y;
camera._x = (camera._x < x0)? x0 : (camera._x > x9)? x9 : camera._x;
camera._y = (camera._y < y0)? y0 : (camera._y > y9)? y9 : camera._y;

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

Это не единственный способ прокрутки фона. Можно разбить фон на квадраты и добавлять/удалять по мере необходимости, можно сдвигать всё кроме самого персонажа. Выбирать вам.

Об авторе

Денис Романко (Stormit)Занимаюсь дизайном, программированием, спецэффектами и разработкой игр.

НазадНазад