|
2D Анимация в браузерных играх на HTML5
|
|
| Kronos1026 | Дата: Воскресенье, 05 Июля 2015, 20:07 | Сообщение # 1 |
|
был не раз
Сейчас нет на сайте
| Доброго времени суток, уважаемые пользователи ресурса http://gcup.ru, возник такой вопрос с которым не в состоянии разобраться самостоятельно, поэтому надеюсь на Вашу помощь. Думаю многие из Вас слышали, а возможно и играли в браузерную игру гладиаторы онлайн (http://www.gladiators.ru/). Кратко о сути игры: Вы покупаете/нанимаете гладиатора и выставляя некоторые параметры перед боем (блок/уворот, атака/защита, сила/скорость) отправляете его в бой с другим соперником, который делает тоже самое со своими гладиаторами. Далее Вам демонстрируется мультик боя, который сделан на Flash. В настоящее время Flash технология начинает вымирать и в ближайшие 2-3 года, полагаю все перейдет на HTML5. Меня заинтересовал сам механизм поединков, но в графике я не очень силен отсюда и возник вопрос, как реализовать построение таких мультиков в HTML5. Можно использовать спрайты и это отлично получается, но мне бы хотелось "одевать" своих персонажей в шмотки и чтобы эти одетые вещи отображались на бойце во время мультика, но с помощью спрайтовой графики такого не реализовать (ведь для каждого придется рисовать новые спрайты), посему возникает сам вопрос, каким образом сделать задуманное? т.е. Вы выбираете персонажа, одеваете его, отправляете в бой и все что на нем надето, отображается на нем и во время боя. Спасибо за внимание, надеюсь на Вашу помощь.
|
|
|
| |
| triptix | Дата: Воскресенье, 05 Июля 2015, 20:32 | Сообщение # 2 |
постоянный участник
Сейчас нет на сайте
| canvas на js в помощь. Почти тот же флеш, только анимировать хуже в 10 раз.
Чем спрайты не нравятся? Поверх них накладываешь изображения одежды и вперед.
|
|
|
| |
| Kronos1026 | Дата: Воскресенье, 05 Июля 2015, 20:40 | Сообщение # 3 |
|
был не раз
Сейчас нет на сайте
| Почему не Flash - хочется уйти от этой технологии, попробовать что-то новое. (HTML5 и предполагает использование JS и CANVAS)
Что касается наложения одежды поверх персонажа - получается придется отрисовывать одежду во всех возможных позициях игрока. А если будут разные классы, у которых действия отличаются друг от друга, то придется рисовать одну и ту же вещь во всевозможных положениях для всех классов и т.д. Возможно есть более элегантный способ. Например перевод векторной графики в HTML5 и отрисовка картинки как набор объектов (линии, круги, квадраты и т.д.) Тут уже можно будет изменив несколько координат изменить и сам рисунок вещи или даже самого персонажа, но не знаю как это отразиться на производительности... Как считаете? Может еще есть какие-то идеи на этот счет?
|
|
|
| |
| vladhad22 | Дата: Воскресенье, 05 Июля 2015, 20:50 | Сообщение # 4 |
участник
Сейчас нет на сайте
| Kronos1026, как насчёт вставки видео? По-моему в тех же гладиаторах тоже проигрывается видео, только сделано на том же Flash)
Prepare for unforeseen consequences
|
|
|
| |
| triptix | Дата: Воскресенье, 05 Июля 2015, 21:03 | Сообщение # 5 |
|
постоянный участник
Сейчас нет на сайте
| В canvas можно рисовать программно, никаких проблем. Только не знаю, есть ли какой то редактор анимации. Можно webGL использовать, если покопаться, наверняка еще что-нибудь есть.
Как ни крути, flash изначально заточен под анимацию, и делать в нем гораздо быстрее. Пробовать новое - js от as не сильно отличается, правда после as ощущение что вернулся в каменный век ))
|
|
|
| |
| Kronos1026 | Дата: Воскресенье, 05 Июля 2015, 21:33 | Сообщение # 6 |
|
был не раз
Сейчас нет на сайте
| Почитаю про webGL, посмотрю на что способен, возможно это то что нужно, но на первый взгляд слишком тяжеловат (посмотрел пример отрисовки гоночной машины, смотрится конечно офигенно, но отрисовка заняла около 30 секунд). Вообщем попробую копнуть в сторону webGL, завтра-послезавтра расскажу о результатах эксперимента. (+ передачу параметров из php в webGL)
vladhad22, Что вы имеете ввиду под видео? Мне важен процесс сам отрисовки мультика и само собой конвертация его в такой формат, чтобы у пользователя не было лагов (если конечно данный этап необходим).
Сообщение отредактировал Kronos1026 - Воскресенье, 05 Июля 2015, 21:39 |
|
|
| |
| vladhad22 | Дата: Воскресенье, 05 Июля 2015, 23:04 | Сообщение # 7 |
|
участник
Сейчас нет на сайте
| Kronos1026, я иммею ввиду заранее зарендерить мультик, а потом уже вставить его в игру.
Может, наступит времмя и кто нибуть сделает редактор анимаций на html5(если это вообще возможно), а пока пытаться сделать что то подобное и реально качественое на html5 мне кажется невозможным.
Prepare for unforeseen consequences
|
|
|
| |
| Kronos1026 | Дата: Понедельник, 06 Июля 2015, 06:58 | Сообщение # 8 |
|
был не раз
Сейчас нет на сайте
| vladhad22, я немного не понимаю как Вы думаете реализовать то, что я описал в задаче. Вы предлагаете нарисовать несколько мультиков с разными поединками и просто включать их в игру? Такой подход меня не устраивает, т.к. придется рисовать очень много мультиков и они не будут уникальны. Если не сложно, то опишите весь процесс от выставления параметров персонажам, до показа мультика пользователю, как это видите Вы.
|
|
|
| |
| IvanKorobko | Дата: Понедельник, 06 Июля 2015, 07:02 | Сообщение # 9 |
IK Studio
Сейчас нет на сайте
| Можно использовать костную анимацию, чтобы не перерисовывать спрайты полностью - программой Spriter к примеру
|
|
|
| |
| Kronos1026 | Дата: Четверг, 09 Июля 2015, 17:09 | Сообщение # 10 |
|
был не раз
Сейчас нет на сайте
| IvanKorobko, но тогда как решить вопрос со шмотками (костная анимация - те же спрайты, и анимирование через костную анимацию не даст такой естественной физике движений например как тут http://bellatmp.alexeypruglov.ru/ )? При надевании на персонажа, чтобы в мультике эта шмотка на нем отображалась? Добавлено (09 июля 2015, 17:09)
---------------------------------------------
Посмотрел на WebGL он довольно тяжеловесен + больше адаптирован под 3D, хотя работа с 2D объектами тоже на хорошем уровне. Думаю использовать обычный канвас + библиотеку Fabric (для упрощения построения графических примитивов). Насчет графики видимо придется отказаться от рисовки шмоток на персонажах. т.к. анимация спрайтами выглядит много лучше, чем например костная анимация, в то же время анимация трансформаций тоже не позволит добиться нужного результата.
|
|
|
| |
| Viktor-Kor | Дата: Вторник, 14 Июля 2015, 17:52 | Сообщение # 11 |
|
был не раз
Сейчас нет на сайте
| Не понимаю, зачем изобретать велосипед!
Берете Blender, вставляете текстуры в Plane, создаете анимации с помощью костей.
Далее берете trhree.js и экспортируете сцену в JSON. Код пишется на JavaScript (нужен хороший программист)
Другой вариант - Blend4Web. Полная интеграция с Blender (визуальная часть, физика и т.д.), тот же JavaScript, экспорт в WebGL. Только обратите внимание на лицензии.
|
|
|
| |
