Открыть список
Как стать автором
Обновить

Комментарии 41

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

UPD: Опоздал с комментом :)
Вот это у вас фантазия!..
В chromium на 1366x768 (debian gnome) видимо при окончании фона справа — появляется кратковременно белая полоса…
Движок автора ради простоты перерисовывает весь экран, игнорируя даже невидимые участки, не округляет координаты до целого, чем еще добавляет расчетов цвета для соседних пикселей. Ну и код примера в любом случае рисует по 2 дубля фонов. Skaner, прочитай про createPattern().
Это все опционально настраивается через настройки, и округление, и сглаживание, и отрисовки (включая обрезку объектов) ну или включение WebGL режима отрисовки. Последний пока в разработке.
Но ведь это ложь)
Во всем движке нашлась только одна функция для «округления» — toInt и она не используется ни при задании позиции, ни при отрисовке (я про типы объектов с собачкой и фоном, конечно), не говоря уже о других способах округления.
Сглаживание это про то, что получается из-за разницы между canvas.width и canvas.style.width? Других вариантов как это «настраивается» я пока не нашел.
Про обрезку это кажется про параметры context,drawImage(), но там везде по нулям по-умолчанию.

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

Это был бы хороший ответ для сейлза или маркетолога но не для разработчика движка.
Как на счет уроков по созданию мультиплеерных игр на JS (agar, slither, etc.)? В одиночных играх люди долго не задерживаются.
Да, потому что кто-то (я) случайно не в ту папку залил эксперимент)) Все уже поправил, соответствует статье)
Результат, мягко говоря, никакой. Фон картонный сзади. Для параллакса двух слоёв мало. Висюльки желтые должны были бы быть ближе, а дальние деревья дальше, тогда бы смотрелось хорошо. Псевдотрехмерность дорожки тоже не добавляет красивости.
Кстати, на месте стыков фона у меня полоска вертикальная видна. Уж не знаю фаерфокс так рендерит или что.

В чем инновационность метода? Я из статьи не понял о чем она вообще. Параллакс в играх используется испокон веков и никто не делает никогда бесконечную простыню, это не разумно и не логично, ну и не очень экономично по отношению к ресурсам ПК.
Я честно говоря не понял зачем point? Обьясните для тех кто в танке
Спасибо за статью. Мне, как новичку, статья оказалась очень полезной и познавательной!
32% загружено на Core i5, визуально подлагивает…
i5, Windows 10, Chrome 52 — загрузка ~3%, «лагов» не замечено.
48% загружено, тоже Ubuntu 16.04 на i5. Но лагов не видно.
Урок уровня hello world от человека который даже не знает слова background.
Покажите как надо ;) Вы ведь слова на ветер не бросаете? Так ведь?
Нет, правда. Минусовать любой сможет. Вы статью напишите.
Не правда, минусовать тут может далеко не каждый ;)

Вы лучше вместо того чтобы высказываться в стиле «сперва добейся», аргументируйте в чем конкретно я неправ в моем комментарии
Ваш комментарий имеет крайне негативный оттенок, который демотивирует людей к написанию статей.
Согласитесь, можно было бы написать коментарий и по другому, указывая на недостатки и что именно следует проработать и дополнить.
Он как раз и написан чтобы демотивировать писать мусорные статьи.
Нейтральный комментарий скорее всего был бы проигнорирован. Ну и согласитесь, на недостатки я все-таки указал.
+shushu Не любой. Не у всех статус позволяет.
В песочницу любой может написать.
Ваш пример аналогичен бесконечной «карусели».
Если открыть эту игру на относительно слабых мобильных устройствах, то 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
для каждого слоя фона. В таком случае на многих устройствах так же бывают просидания но скорость в несколько раз выше чем в примере статьи.
И получите дерганный и жрущий ужас. Для подобной анимации надо использовать requestAnimationFrame, тут рисовать нужное кол-во «кадров» раз в секунду. Но этого может оказаться недостаточно, придется воспользоваться will-change.
«Моя идея заключается в том, чтобы сделать уровень бесконечным, но при этом не создавать бесконечной длины ленту для фона и «земли». Задумка в целом очень и очень проста: создать несколько объектов, которые заполнят собой заднее пространство, и немного «вылезут» за пределы экрана, чтобы имитировать эффект движения. Для «земли» все в точности так же.»

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

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

Хабр скатился куда-то…
Движок автор сам написал, насколько я понимаю
«Так как я выбрал для работы PointJS, то и язык будет — JavaScript.» — а я так понял он взял готовый ибо, видимо, не умеет три картинки в JS вывести на экран без движков =)
Сцена и интересная, релаксирующий скринсейвер. Только спрайт вырезан не идеально, видны остатки белого фона по краям. И полном экране (по F11), появляется белая полоса внизу, скрипт не отследил увеличение по вертикали.
Автору спасибо за статью, скрипт и урок! ) Жаль скрипт чуть тормозит, идёт рывками: Chrome 52.0.2743.116 m, Mozilla 48, Opera 28.0.1750.48.
Но всё равно прикольно.
У меня 7-ка Максималка.
«Первым делом я думал воспользоваться массивом, но новичкам, скорее всего, пример с массивами будет ненаглядным, поэтому я воспользуюсь обычными переменными»
«Зачем нам onload? Тут в целом всё ясно для тех, кто использует JavaScript»

Кто целевая аудитория?
Статья отличная! Надеюсь будет продолжение в виде дресировки прикручивания управления песиком. Пока смотрел на пример хотелось нажать на пробел — чтоб песик исполнил какой-нибудь финт в прыжке. Интересно увидеть практическую реализацию смены анимации персонажа.
Накидал все то же самое на Phaser.js, как мне кажется немножко плавнее анимация. Но все равно есть рывки.
пример
Сделал анимации на CSS3 и ужаснулся. Видны рывки. Похоже суть проблемы в том, что каждый раз перерисовывается элемент с нужной позицией фона.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.