Фидл вот такую ошибку выдаёт — ReferenceError: perfKeeperExtFps is not defined
at new FPSMeterPugin. Я попытался исправить своими силами, однако не вышло.
Набросал — jsfiddle.net/0c2vtnb5/61. Я использую конкретно idiotwu.github.io/smooth-scrollbar. Добавил сразу 'плагин' для событий scrollStart/scrollEnd, вдруг вам нужно будет. Если как-то заставите работать всё это дело с кастомным скролом, то напишите, пожалуйста, я очень заинтересован.
Хороший инструмент вы сделали, спасибо за него. Но вот столкнулся с очень критичной для меня особенностью — у меня на всём проекте кастомный скрол (дизайн такой, ничего не поделаешь) и pk-fps-page просто не показывается, если делать всё как в примере на гитхабе, оно и понятно — не возникает самого события скрола. Есть ли какой-то обходной путь, чтобы таки получить fps при не-нативном скроле?
Спасибо за развёрнутый ответ. Будет здорово, если вы напишите по итогу, т.е. после того как перейдёте на Godot/Unity. Мне кажется, эта тема будет достойна целой статьи, т.к. может помочь многим начинающим.
А почему вы хотите уйти от веб-движков? Есть какие-то веские причины? Я как раз начал делать вещицу на Phaser 3 и меня интересует эта тема. Поделитесь, пожалуйста, а то лучше учиться на чужом опыте, чем ждать пока свой появится.
По поводу 3-го способа — т.е. «Просто возьмите движок который это уже умеет». А какой-нибудь canvas/webgl движок такое умеет из коробки? Лично для меня, это как раз самый подходящий вариант, т.к. все эти шейдеры писать весьма не просто для среднего ума. Но вот Phaser 2/3 это не очень умеет, от остальных движков ждать большего не приходится.
Поиграл, понравилось. Мне не хватет подписей, показывающих в какой из комнат я уже был, сложно запоминать номера этих комнат. Некоторая графика как будто в недосататочно высоком разрешении, хотя может это так показаны планы. Понравилось убегать от массы со щупальцами, даже умудрился помереть. Формат очень крутой, удивительно, что так мало подобных вещей. Мне кажется, что интерактивные комиксы/книги вполне логичное развитие их классических вариантов.
Производительность в Safari чертовски хороша (по моим личным наблюдениям). Это точно касается рендеринга, как минимум. Но проблема именно в многочисленных специфических багах, в не очень быстром развитии браузера и в некоторых намеренных ограниченях для iOS, которые Apple делает, подробнее можно почитать вот тут, там очень показательна боль (связанная с Safari) разработчика, который хотел сделать PWA.
Я уж было испугался, но этот метод просто переехал в другое место. Так что можно просто использовать новый вариант с фолбеком на старый вариант (который в статье)
SVG SMIL вообще крутейшая вещь. Одно время команда Хромиума объявила её «Deprecated» и собиралась вообще выпилить её, так SMIL и прожил в таком статусе несколько лет. Прочитал ваше сообщение, решил проверить на caniuse как там поживает статус SMIL'а. Оказалось ещё в середине 2016 хромиумцы под давлением сообщества решили отменить «депрекацию» и выпиливание. Это же просто праздник, теперь можно смело продолжать использовать на проде! Просто нативных аналогов вообще нет, там и морфинг, и (как в вашем примере) анимация вдоль пути. В общем хорошо, что вы упомянули ваш опыт
Очень-очень интересная техника, спасибо что написали. getPointAtLength — вообще открытие, это просто огонь! Если у вас ещё какие-нибудь новые интересные приёмы найдутся, напишите, пожалуйста. А то редко что-то новое попадается в сфере анимации, а тут ещё и Vanilla JS вариант применения.
Ого! А вот это очень хорошо, т.к. у автора как раз там была эта беда! В идеале глянуть сначала с G-Sync, затем с без него. Но это уже заморачиваться немножко нужно.
Такая же проблема есть ещё в Soma, там её даже искать не нужно, она перманентная.
Вы имеете ввиду, что вам помог G-Sync именно в том случае, который описывает автор статьи?
Я уточняю, т.к. тут очень специфическая проблема, fps нормальный, с V-Sync всегда железно 60 кадров, ничего не проседает вообще. Однако именно картинка, которую видишь своими глазами, а не на датчиках, совсем не плавная.
Автор описал достаточно распространённую проблему, которая встречается много где, много у кого. Есть весьма неудачные в этом плане игры, которые страдают такой проблемой. У других же игр, на том же железе, таких проблем нет вообще.
Т.е. достаточно странная ситуация, учитывая, что автор говорит о том, что проблема в первую очередь на стороне производителей видеокарт и драйверов.
Ребята, а есть ли какой-то способ сгладить эту проблему на стороне пользователя уже сейчас?
Мне бы очень хотелось знать, что я могу сделать, как обычный геймер. Это чертовски актуально, т.к. есть вполне отличные игры, которые «какбы» выдают свои 60fps, однако при этом картинка совсем-совсем не плавная.
На данный момент мне немного помогало лишь отключение V-Sync и таким образом разблокировка fps выше 60. Но при этом, как побочный эффект (о котором честно предупреждает Nvidia) появляются всякие разрывы изображения.
Можно ещё что-то попробовать? Помогут ли всякие мотиторы с G-Sync & FreeSync?
Спасибо, что пишете. Очень хотелось бы узнать не только о техниках и средствах анимации, но о том как она должна выглядеть, сколько длится, какие должны быть временные кривые и т.д. Т.е. свод правил, гласных и не гласных, очевидных и не очевидных. И нужно знать это не только в контексте вау-анимации для лендигов, а ещё и про интерфейсную анимацию.
Есть конечно несколько лекций на ютубчике, несколько статей про это, но всё очень не систематизировано и разбросано, а хотелось бы какой-то основательный труд видеть по этой теме.
Спасибо за статью, приятно видеть такое на русском языке. У меня к вам куча вопросов.
Какие техники и инструменты вы используете для морфинга в SVG или Canvas? Правда, это тема для статьи.
Как происходит работа с дизайнером/заказчиком. Делает ли дизайнер раскадровки и прототипы анимации? Или анимации проектируете сами?
Очень чувствителен вопрос производительности анимации. Хотелось бы разным устройствам отдавать разную анимацию, в зависимости от производительности. Есть ли какой-то реальный способ определения производительности устройства в контексте браузера? Если нет, то как следует поступать, ведь нужно же как-то сделать хорошо для разных классов устройств.
Вы имеете ввиду экспорт Unity в WebGL/Canvas? Если да, то расскажите про ваш опыт, пожалуйста. Насколько там всё хорошо, годится ли экспорт в HTML5 для создания контента для веба, в том числе не игр, а каких-то серьёзных интерактивных штуковин?
at new FPSMeterPugin. Я попытался исправить своими силами, однако не вышло.
Ситуация всё же не такая как с монополией IE5/6. Вот тут Макеев достаточно хорошо объяснил в чём фундаментальная разница.
Производительность в Safari чертовски хороша (по моим личным наблюдениям). Это точно касается рендеринга, как минимум. Но проблема именно в многочисленных специфических багах, в не очень быстром развитии браузера и в некоторых намеренных ограниченях для iOS, которые Apple делает, подробнее можно почитать вот тут, там очень показательна боль (связанная с Safari) разработчика, который хотел сделать PWA.
Я уж было испугался, но этот метод просто переехал в другое место. Так что можно просто использовать новый вариант с фолбеком на старый вариант (который в статье)
Такая же проблема есть ещё в Soma, там её даже искать не нужно, она перманентная.
Я уточняю, т.к. тут очень специфическая проблема, fps нормальный, с V-Sync всегда железно 60 кадров, ничего не проседает вообще. Однако именно картинка, которую видишь своими глазами, а не на датчиках, совсем не плавная.
Автор описал достаточно распространённую проблему, которая встречается много где, много у кого. Есть весьма неудачные в этом плане игры, которые страдают такой проблемой. У других же игр, на том же железе, таких проблем нет вообще.
Т.е. достаточно странная ситуация, учитывая, что автор говорит о том, что проблема в первую очередь на стороне производителей видеокарт и драйверов.
Мне бы очень хотелось знать, что я могу сделать, как обычный геймер. Это чертовски актуально, т.к. есть вполне отличные игры, которые «какбы» выдают свои 60fps, однако при этом картинка совсем-совсем не плавная.
На данный момент мне немного помогало лишь отключение V-Sync и таким образом разблокировка fps выше 60. Но при этом, как побочный эффект (о котором честно предупреждает Nvidia) появляются всякие разрывы изображения.
Можно ещё что-то попробовать? Помогут ли всякие мотиторы с G-Sync & FreeSync?
Есть конечно несколько лекций на ютубчике, несколько статей про это, но всё очень не систематизировано и разбросано, а хотелось бы какой-то основательный труд видеть по этой теме.