Просматривая примеры разных игровых приложений и интересных решений я наткнулся на пример механики "типичного" раннера. Рассматривался там только принцип движения заднего фона с применением эффекта «параллакс», но эта идея натолкнула меня на некоторые мысли, о которых я и хотел бы рассказать ниже.
В качестве инструмента, я, как и ранее, буду использовать PointJS, потому что наглядно и просто.
Подготовка графики
Для заднего фона я буду использовать ту же картинку из примера (которая, судя по всему, взята из другого примера другого движка):
Для «земли», аналогично:
В качестве «персонажа» выступает милый пёсик:
Оригинальная идея
По задумке автора оригинального примера, первоначально создается задний фон в виде длинной ленты путем копирования картинки на задний слой какое-то количество раз, которое ограничено длиной всего уровня. Такая же ситуация и с «землей».
И это работает, но делает уровень конечным по своей протяженности.
В классических же примерах «раннеров» (тип. прим.: «FlappyBird») уровни, как правило, бесконечны, и проигрываются до тех пор, пока игрок не допустит фатальную ошибку, которая бы привела к завершению уровня.
Принцип работы
Моя идея заключается в том, чтобы сделать уровень бесконечным, но при этом не создавать бесконечной длины ленту для фона и «земли».
Задумка в целом очень и очень проста: создать несколько объектов, которые заполнят собой заднее пространство, и немного «вылезут» за пределы экрана, чтобы имитировать эффект движения.
Для «земли» все в точности так же.
Программирование
Так как я выбрал для работы PointJS, то и язык будет — JavaScript.
Подготовим полигон для действий:
// создание экземпляра движка
var pjs = new PointJS('2d', 800, 400); // размер экрана - 800x400
pjs.system.initFullPage(); // растянем на весь экран
// Объявим нужные нам для работы ссылки
var game = pjs.game; // менеджер игры
var point = pjs.vector.point; // конструктор точкиРазмеры, которые мы задали сцене (800x400) конечно хорошо подойдут для удобства расчетов, но в реальности экраны все совсем разных размеров, и больше, и меньше.
После выполнения команды initFullPage() размеры сцены изменятся, и работать мы будем именно с ними, но сперва нам надо их получить:
// получим новые размеры сцены
var height = game.getWH().h; // высота
var width = game.getWH().w; // ширинаОтлично, мы имеем рабочую область, в которой можем работать.
Первым делом я думал воспользоваться массивом, но новичкам, скорее всего, пример с массивами будет ненаглядным, поэтому я воспользуюсь обычными переменными:
// создаем изображения для фона
var fon1 = game.newImageObject({ // создание картинки
x : 0, y : 0, // начальная позиция в нулях (это левый верхний угол)
file : 'imgs/fon.jpg', // путь к самой картинке
h : height, // высоту заднего фона равна высоте сцены
onload : function () { // эта функция выполнится, когда изображение загрузится
fon2.x = fon1.x+fon1.w; // и станет доступна новая ширина
}
});Зачем нам «onload»? Тут все в целом ясно для тех, кто использует JavaScript в качестве основного языка, или хотя бы знаком с асинхронным подходом.
После создания картинки, мы явно указали ей высоту, и, новая ширина картинки после масштабирования станет доступна только после того, как картинка полностью загрузится. После загрузки в объект запишется переменная «w», которую мы и используем в формуле: «fon2.x = fon1.x+fon1.w», где fon2 — это вторая картинка.
Этой строкой мы с вами установили позицию второй картинки сразу за первой.
После этого создадим сам объект:
var fon2 = game.newImageObject({
x : 0, y : 0,
file : 'imgs/fon.jpg',
h : height
});Тут все так же, но только без «onload».
Теперь создадим объект земли:
var gr1 = game.newImageObject({
x : 0, y : 0,
file : 'imgs/ground.png',
w : width,
onload : function () {
gr2.y = gr1.y = height — gr1.h; // установим позицию по Y в низ сцены
gr2.x = gr1.x+gr1.w; // тот же принцип позиционирования, что и для фона
}
});
var gr2 = game.newImageObject({
x : 0, y : 0,
file : 'imgs/ground.png',
w : width
});Теперь создадим объект собачки, который у нас будет «бежать» по движущейся земле:
var dog = game.newAnimationObject({ // создаем анимационный объект
x : width / 4, y : 0, // позиция по X будет одна четвертая ширины сцены
h : 120, w : 150, // размеры «собачки» указываем явные
delay : 4, // задержка (в FPS) при воспроизведении анимации
animation : pjs.tiles.newAnimation('imgs/run_dog.png', 150, 120, 5) // тут получаем из файла спрайта анимацию и возвращаем её как свойство объекту «dog»
});Итак, мы создали два объекта фона, два объекта земли и один объект «собачки», можно приступать к написанию алгоритма движения.
У нас есть несколько вариантов:
- Двигать собачку, и перемещать в след за ней камеру
- Двигать фон, а собачку не двигать вообще
Я решил реализовать второй, и весь он помещается в одну функцию:
var moveBackGround = function (s) { // аргумент s — это скорость движения фона
// движение с эффектом «параллакс»
fon1.move(point(-s / 2, 0)); // двигаем первую картинку с половиной скорости
fon2.move(point(-s / 2, 0)); // двигаем вторую
gr1.move(point(-s, 0)); // «землю» же двигаем на полной скорости
gr2.move(point(-s, 0)); // и эту тоже
// теперь проверим, не ушел ли объект фона «за кадр»
if (fon1.x + fon1.w < 0) { // если ушел
fon1.x = fon2.x+fon2.w; // перемещаем его сразу за вторым
}
// аналогично для второго
if (fon2.x + fon2.w < 0) {
fon2.x = fon1.x+fon1.w; // позиционируем за первым
}
// для земли все в точности так же
if (gr1.x + gr1.w < 0) {
gr1.x = gr2.x+gr2.w;
}
if (gr2.x + gr2.w < 0) {
gr2.x = gr1.x+gr1.w;
}
};Вот и весь алгоритм, осталось только «запустить» всё это дело, для этого объявим игровой цикл:
// создание нового игрового цикла
game.newLoop('dog_game', function () {
game.clear(); // очистим все, что было отрисовано в предыдущем кадре
fon1.draw(); // рисуем первый фон
fon2.draw(); // рисуем второй фон
gr1.draw(); // рисуем первую землю
gr2.draw(); // рисуем вторую землю
// расположим нашего «пёсика» по высоте следующей формулой:
dog.y = -dog.h + gr1.y + gr1.h /2.7;
// тут все просто: нижнюю точку объекта (ноги) устанавливаем в позицию
// объекта земли, и сдвигаем еще ниже, на расстояние равное 2.7 части от всей высоты объекта земли
// ну и отрисуем его
dog.draw();
// и начинаем двигать!
moveBackGround(4);
});После объявления игрового цикла, просто призовем его к исполнению задуманного:
// запуск игрового цикла
game.startLoop('dog_game');Тут надо понимать, что «dog_game» — это произвольное название игрового цикла, которое может быть любым.
Результат не заставил себя должно ждать:
Ну и, дабы вживую убедиться, запуск в браузере этого примера: Запустить и проверить
Ну и по традиции...
var pjs = new PointJS('2d', 400, 400);
pjs.system.initFullPage();
var game = pjs.game;
var point = pjs.vector.point;
var height = game.getWH().h;
var width = game.getWH().w;
var fon1 = game.newImageObject({
x : 0, y : 0,
file : 'imgs/fon.jpg',
h : height,
onload : function () {
fon2.x = fon1.x+fon1.w;
}
});
var fon2 = game.newImageObject({
x : 0, y : 0,
file : 'imgs/fon.jpg',
h : height
});
var gr1 = game.newImageObject({
x : 0, y : 0,
file : 'imgs/ground.png',
w : width,
onload : function () {
gr2.y = gr1.y = height - gr1.h;
gr2.x = gr1.x+gr1.w;
}
});
var gr2 = game.newImageObject({
x : 0, y : 0,
file : 'imgs/ground.png',
w : width
});
var dog = game.newAnimationObject({
x : width / 4, y : 0,
h : 120, w : 150,
delay : 4,
animation : pjs.tiles.newAnimation('imgs/run_dog.png', 150, 120, 5)
});
var moveBackGround = function (s) {
fon1.move(point(-s / 2, 0));
fon2.move(point(-s / 2, 0));
gr1.move(point(-s, 0));
gr2.move(point(-s, 0));
if (fon1.x + fon1.w < 0) {
fon1.x = fon2.x+fon2.w;
}
if (fon2.x + fon2.w < 0) {
fon2.x = fon1.x+fon1.w;
}
if (gr1.x + gr1.w < 0) {
gr1.x = gr2.x+gr2.w;
}
if (gr2.x + gr2.w < 0) {
gr2.x = gr1.x+gr1.w;
}
};
game.newLoop('game', function () {
game.fill('#D9D9D9');
fon1.draw();
fon2.draw();
gr1.draw();
gr2.draw();
dog.y = -dog.h + gr1.y + gr1.h /2.7;
dog.draw();
moveBackGround(4);
});
game.startLoop('game');Автор: Skaner
