Комментарии 41
Почему у пёсика вместо глаза картошка с пальцем?
В chromium на 1366x768 (debian gnome) видимо при окончании фона справа — появляется кратковременно белая полоса…
Движок автора ради простоты перерисовывает весь экран, игнорируя даже невидимые участки, не округляет координаты до целого, чем еще добавляет расчетов цвета для соседних пикселей. Ну и код примера в любом случае рисует по 2 дубля фонов. Skaner, прочитай про createPattern().
Это все опционально настраивается через настройки, и округление, и сглаживание, и отрисовки (включая обрезку объектов) ну или включение WebGL режима отрисовки. Последний пока в разработке.
Но ведь это ложь)
Во всем движке нашлась только одна функция для «округления» — toInt и она не используется ни при задании позиции, ни при отрисовке (я про типы объектов с собачкой и фоном, конечно), не говоря уже о других способах округления.
Сглаживание это про то, что получается из-за разницы между canvas.width и canvas.style.width? Других вариантов как это «настраивается» я пока не нашел.
Про обрезку это кажется про параметры context,drawImage(), но там везде по нулям по-умолчанию.
Ждем WebGL, полагаю, не скоро.
Это был бы хороший ответ для сейлза или маркетолога но не для разработчика движка.
Во всем движке нашлась только одна функция для «округления» — toInt и она не используется ни при задании позиции, ни при отрисовке (я про типы объектов с собачкой и фоном, конечно), не говоря уже о других способах округления.
Сглаживание это про то, что получается из-за разницы между canvas.width и canvas.style.width? Других вариантов как это «настраивается» я пока не нашел.
Про обрезку это кажется про параметры context,drawImage(), но там везде по нулям по-умолчанию.
Ждем WebGL, полагаю, не скоро.
Это был бы хороший ответ для сейлза или маркетолога но не для разработчика движка.
Как на счет уроков по созданию мультиплеерных игр на JS (agar, slither, etc.)? В одиночных играх люди долго не задерживаются.
Песик взлетел :)
Результат, мягко говоря, никакой. Фон картонный сзади. Для параллакса двух слоёв мало. Висюльки желтые должны были бы быть ближе, а дальние деревья дальше, тогда бы смотрелось хорошо. Псевдотрехмерность дорожки тоже не добавляет красивости.
Кстати, на месте стыков фона у меня полоска вертикальная видна. Уж не знаю фаерфокс так рендерит или что.
В чем инновационность метода? Я из статьи не понял о чем она вообще. Параллакс в играх используется испокон веков и никто не делает никогда бесконечную простыню, это не разумно и не логично, ну и не очень экономично по отношению к ресурсам ПК.
Кстати, на месте стыков фона у меня полоска вертикальная видна. Уж не знаю фаерфокс так рендерит или что.
В чем инновационность метода? Я из статьи не понял о чем она вообще. Параллакс в играх используется испокон веков и никто не делает никогда бесконечную простыню, это не разумно и не логично, ну и не очень экономично по отношению к ресурсам ПК.
Я честно говоря не понял зачем point? Обьясните для тех кто в танке
Спасибо за статью. Мне, как новичку, статья оказалась очень полезной и познавательной!
32% загружено на Core i5, визуально подлагивает…
Урок уровня hello world от человека который даже не знает слова background.
Покажите как надо ;) Вы ведь слова на ветер не бросаете? Так ведь?
Нет, правда. Минусовать любой сможет. Вы статью напишите.
Не правда, минусовать тут может далеко не каждый ;)
Вы лучше вместо того чтобы высказываться в стиле «сперва добейся», аргументируйте в чем конкретно я неправ в моем комментарии
Вы лучше вместо того чтобы высказываться в стиле «сперва добейся», аргументируйте в чем конкретно я неправ в моем комментарии
+shushu Не любой. Не у всех статус позволяет.
Ваш пример аналогичен бесконечной «карусели».
Если открыть эту игру на относительно слабых мобильных устройствах, то fps просидает до 5!!! (nexus 10). Эксперементировал с аналогичными параллаксами в браузере и вот результаты: Плавного хода фона на абсолютном большинстве устройств можно добиться используя CSS-анимации:
Но в случае с CSS-анимациями на многих устройствах невозможно добиться отзывчивости (например при следовании за пальцем).
Для отзывчивого параллакса лучше просто из javascript 60 раз в секунду задавать
@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 классе школы.
Да еще и на очередном «движке» потому что мозга не хватает написать чего нибудь самому даже на гнусном ява-скрипте.
Хабр скатился куда-то…
Такие игры делали описанным образом уже лет 30 назад. Возьмем фон, землю, 5 кадров перса и наложим все это. Урок по бейсику в 5 классе школы.
Да еще и на очередном «движке» потому что мозга не хватает написать чего нибудь самому даже на гнусном ява-скрипте.
Хабр скатился куда-то…
В качестве «персонажа» выступает милый пёсик:
А разве этот «милый песик» не Рекс из польского мультсериала?
Сцена и интересная, релаксирующий скринсейвер. Только спрайт вырезан не идеально, видны остатки белого фона по краям. И полном экране (по F11), появляется белая полоса внизу, скрипт не отследил увеличение по вертикали.
Автору спасибо за статью, скрипт и урок! ) Жаль скрипт чуть тормозит, идёт рывками: Chrome 52.0.2743.116 m, Mozilla 48, Opera 28.0.1750.48.
Но всё равно прикольно.
Но всё равно прикольно.
Ещё один пользователь Ubuntu?
«Первым делом я думал воспользоваться массивом, но новичкам, скорее всего, пример с массивами будет ненаглядным, поэтому я воспользуюсь обычными переменными»
«Зачем нам onload? Тут в целом всё ясно для тех, кто использует JavaScript»
Кто целевая аудитория?
«Зачем нам onload? Тут в целом всё ясно для тех, кто использует JavaScript»
Кто целевая аудитория?
Статья отличная! Надеюсь будет продолжение в виде дресировки прикручивания управления песиком. Пока смотрел на пример хотелось нажать на пробел — чтоб песик исполнил какой-нибудь финт в прыжке. Интересно увидеть практическую реализацию смены анимации персонажа.
Накидал все то же самое на Phaser.js, как мне кажется немножко плавнее анимация. Но все равно есть рывки.
пример
пример
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Создание бесконечного раннера на JavaScript, механика движения фона