Каким образом лучше реализовать эффект падающей монеты в банку с другими монетами?

Question

[wildden]

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

Первое, что пришло в голову: вставить банку двумя картинками (передняя часть и задняя), между картинками просто появляется свёрстанная монета/монеты и при помощи 3d трансформации вращается и движется вниз. Но больше всего интересует, как сделать горку монет, которая должна расти? Можно просто подменять картинки по мере наполнения банки с разной её заполненностью, но может есть ещё какие интересные решения? Возможно, какие-нибудь инструменты, которые помогут с реализацией? C js анимацией, canvas знаком плохо, поэтому ищу совета. Ниже скрин.

Answer 1

[Сергей Соколов]

Я бы всё переусложнил.
1. от дизайнера потребовалось бы в 3D нарендерить для разных степеней заполненности банки кучи монет в ней. Может, большими шагами, но для каждого шага - состояние «до» и «плюс 1-2 монеты». Для перфекционистов ещё пара кадров встряски/подпрыгивания монет в этом состоянии от падения на них новых.
2. рендеры монет в полёте, непременно с ускорением, вращением и motion blur (размытием от движения) – это размытие сложно реализовать средствами js/css, поэтому именно рендер.
3. озвучка падения монет на монеты.
4. монеты падают, анимация обрывается в нужный момент, куча меняется с «до» на «плюс 1-2 монеты» (возможно, с анимацией подскока).

Comments

[Stalker_RED]

Внезапно, размытие на css: https://jsfiddle.net/f1kncmpe/show/
Вращение тоже есть (см. transform)

[Сергей Соколов]

Stalker_RED, падающая вращающаяся монетка: там и радиальное размытие и линейное смешиваются. Желательно честно просчитать положения монетки +\– несколько под-кадров.

[wildden]

Спасибо за ответы! Идея с подпрыгиванием монет хорошая. Буду пробовать)

[Alex Wells]

Да можно сразу игровой движок подключать, зачем рисовать каждый кадр отдельно)

[Сергей Соколов]

Alex Wells, пушка по воробьям. 3D кадры однажды отрендерить, и быстро подгрузить.

[Wentixon]

Сергей Соколов, да здесь без канваса не обойтись в любом случае

Answer 2

[xmoonlight]

lo-th.github.io/Oimo.js/examples/test_basic.html
Сыпать нужно жёлтые цилиндры высотой в 1-2 см.

Бонусом: https://github.com/bebraw/jswiki/wiki/Physics-libraries

Comments

[Сергей Соколов]

там каждый кадр - четкая картинка тела в опр. позиции. Для глаза естественнее смотрятся размытые в движении кадры.

[wildden]

Спасибо! Даже не думал, что есть столько библиотек для работы с 3d, поковыряюсь)

Answer 3

[Exploding]

Сделал бы как в ответе xmoonlight (бонусом)
Ну и вот еще некое подобие "банки с монетами" (без физики правда), но может что-то оттуда можно подсмотреть.

Answer 4

[Alexander Litvinenko]

Монеты спрайтом или применить что-то из разряда 3д.