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