Создание бесконечного раннера на JavaScript, механика движения фона

[Sirion]

Почему у пёсика вместо глаза картошка с пальцем?

[Mr_Rm]

Это ж Рекс (только зеркальный).

[ange007]

Отличный пёс.
Это вообще кажется пёс из польского мультика (смотрел в детстве): ВИКИ

UPD: Опоздал с комментом :)

[bjc]

Вот это у вас фантазия!..

[frustum]

В chromium на 1366x768 (debian gnome) видимо при окончании фона справа — появляется кратковременно белая полоса…

[lekzd]

Движок автора ради простоты перерисовывает весь экран, игнорируя даже невидимые участки, не округляет координаты до целого, чем еще добавляет расчетов цвета для соседних пикселей. Ну и код примера в любом случае рисует по 2 дубля фонов. Skaner, прочитай про createPattern().

[Skaner]

Это все опционально настраивается через настройки, и округление, и сглаживание, и отрисовки (включая обрезку объектов) ну или включение WebGL режима отрисовки. Последний пока в разработке.

[lekzd]

Но ведь это ложь)
Во всем движке нашлась только одна функция для «округления» — toInt и она не используется ни при задании позиции, ни при отрисовке (я про типы объектов с собачкой и фоном, конечно), не говоря уже о других способах округления.
Сглаживание это про то, что получается из-за разницы между canvas.width и canvas.style.width? Других вариантов как это «настраивается» я пока не нашел.
Про обрезку это кажется про параметры context,drawImage(), но там везде по нулям по-умолчанию.

Ждем WebGL, полагаю, не скоро.

Это был бы хороший ответ для сейлза или маркетолога но не для разработчика движка.

[botaniQQQ]

Как на счет уроков по созданию мультиплеерных игр на JS (agar, slither, etc.)? В одиночных играх люди долго не задерживаются.

[dmitryvashkevich]

Песик взлетел :)

[Skaner]

Да, потому что кто-то (я) случайно не в ту папку залил эксперимент)) Все уже поправил, соответствует статье)

[Darthman]

Результат, мягко говоря, никакой. Фон картонный сзади. Для параллакса двух слоёв мало. Висюльки желтые должны были бы быть ближе, а дальние деревья дальше, тогда бы смотрелось хорошо. Псевдотрехмерность дорожки тоже не добавляет красивости.
Кстати, на месте стыков фона у меня полоска вертикальная видна. Уж не знаю фаерфокс так рендерит или что.

В чем инновационность метода? Я из статьи не понял о чем она вообще. Параллакс в играх используется испокон веков и никто не делает никогда бесконечную простыню, это не разумно и не логично, ну и не очень экономично по отношению к ресурсам ПК.

[dolphin4ik]

Я честно говоря не понял зачем point? Обьясните для тех кто в танке

[Jmann]

Спасибо за статью. Мне, как новичку, статья оказалась очень полезной и познавательной!

[QtRoS]

32% загружено на Core i5, визуально подлагивает…

[GeMir]

i5, Windows 10, Chrome 52 — загрузка ~3%, «лагов» не замечено.

[QtRoS]

Ubuntu 16.04 :)

[Fearz]

48% загружено, тоже Ubuntu 16.04 на i5. Но лагов не видно.

[stepanp]

Урок уровня hello world от человека который даже не знает слова background.

[shushu]

Покажите как надо ;) Вы ведь слова на ветер не бросаете? Так ведь?

[shushu]

Нет, правда. Минусовать любой сможет. Вы статью напишите.

[stepanp]

Не правда, минусовать тут может далеко не каждый ;)

Вы лучше вместо того чтобы высказываться в стиле «сперва добейся», аргументируйте в чем конкретно я неправ в моем комментарии

[shushu]

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

[stepanp]

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

[ModoStudio]

+shushu Не любой. Не у всех статус позволяет.

[shushu]

В песочницу любой может написать.

[romy4]

Ваш пример аналогичен бесконечной «карусели».

[rogallic]

Если открыть эту игру на относительно слабых мобильных устройствах, то fps просидает до 5!!! (nexus 10). Эксперементировал с аналогичными параллаксами в браузере и вот результаты: Плавного хода фона на абсолютном большинстве устройств можно добиться используя CSS-анимации:

@keyframes NAME-YOUR-ANIMATION {
  0%   { transform: translate(0px, 0); }
  100% { transform: translate(YOUR-px, 0); }
}

Но в случае с CSS-анимациями на многих устройствах невозможно добиться отзывчивости (например при следовании за пальцем).
Для отзывчивого параллакса лучше просто из javascript 60 раз в секунду задавать

background-position: YOUR-CALCULATED-px

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

[profesor08]

И получите дерганный и жрущий ужас. Для подобной анимации надо использовать requestAnimationFrame, тут рисовать нужное кол-во «кадров» раз в секунду. Но этого может оказаться недостаточно, придется воспользоваться will-change.

[blackstrip]

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

Такие игры делали описанным образом уже лет 30 назад. Возьмем фон, землю, 5 кадров перса и наложим все это. Урок по бейсику в 5 классе школы.

Да еще и на очередном «движке» потому что мозга не хватает написать чего нибудь самому даже на гнусном ява-скрипте.

Хабр скатился куда-то…

[genew]

Движок автор сам написал, насколько я понимаю

[blackstrip]

«Так как я выбрал для работы PointJS, то и язык будет — JavaScript.» — а я так понял он взял готовый ибо, видимо, не умеет три картинки в JS вывести на экран без движков =)

[petr97]

В качестве «персонажа» выступает милый пёсик:

А разве этот «милый песик» не Рекс из польского мультсериала?

[sim31r]

Сцена и интересная, релаксирующий скринсейвер. Только спрайт вырезан не идеально, видны остатки белого фона по краям. И полном экране (по F11), появляется белая полоса внизу, скрипт не отследил увеличение по вертикали.

[ModoStudio]

Автору спасибо за статью, скрипт и урок! ) Жаль скрипт чуть тормозит, идёт рывками: Chrome 52.0.2743.116 m, Mozilla 48, Opera 28.0.1750.48.
Но всё равно прикольно.

[GeMir]

Ещё один пользователь Ubuntu?

[ModoStudio]

У меня 7-ка Максималка.

[AllegroMod]

«Первым делом я думал воспользоваться массивом, но новичкам, скорее всего, пример с массивами будет ненаглядным, поэтому я воспользуюсь обычными переменными»
«Зачем нам onload? Тут в целом всё ясно для тех, кто использует JavaScript»

Кто целевая аудитория?

[Taradast]

Статья отличная! Надеюсь будет продолжение в виде дресировки прикручивания управления песиком. Пока смотрел на пример хотелось нажать на пробел — чтоб песик исполнил какой-нибудь финт в прыжке. Интересно увидеть практическую реализацию смены анимации персонажа.

[VDemot]

Накидал все то же самое на Phaser.js, как мне кажется немножко плавнее анимация. Но все равно есть рывки.
пример

[profesor08]

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