Да нет, никаких преобразований на клиенте не нужно :)
Просто интересно, не делал ли кто-то библиотеку по отрисовке изометрической (из готовых тайлов) графики, ленивой подгрузке карт через AJAX, JS-анимацией и звуком. Понятно, что всё это велосипедится на раз, но велосипед же...
а есть какие-нибудь бибилиотеки просто для преобразования java-кода в браузерный жаваскрипт? Ну как вот какой-нибудь викет: в java-коде добавляешь компоненту .addBehavior(AjaxBehavior(«onChange»,...), а он сам генерит и веб-страничку, и все нужные скрипты.
Тогда задачу можно было бы свести к скрещиванию произвольного изометрического движка с этой рендерилкой..
Теперь думаю о смешанном варианте. На сервере генерятся два слоя бэкграунда (обычный, мелкая повторяющаяся картинка + слой с div'ами с модификациями основного слоя - речка, там, рельеф). И объекты div'ами. Скорость должна приличная выйти, но вылезает миллион тонкостей в вопросе совместимости.
Например, как делать «бесконечную» карту? В JavaScript нельзя слой произвольно подрезать/наращивать по координатам с любой стороны. Получается, нужно делать два слоя. Один при перемещениях показывается, другой - готовится в фоне. Как подходим к краю слоя - меняем их видимость.
SVG поможет тем, что передавать надо будет меньше данных. Плюс, если умело организовать, часть манипуляций можно будет проделывать на стороне клиента. Canvas, IMHO, более тормозная штука.
>Плюс, если умело организовать, часть манипуляций можно будет проделывать на стороне клиента.
Так канвас тоже там же рисуется. В обоих случаях (и свг, и канвас), всё
придётся делать через js.
Canvas, IMHO, более тормозная штука.
Если выводить сплошной растр, то не факт, что канвас будет медленнее свг. Всё ещё от самого способа отрисовки зависит - канвас низкоуровневый, красить пиксели вручную может быть удобнее, чем двигать уже готовые объекты в DOM.
Пиксели там точно красить не надо. Задача - в загрузке целых PNG и GIF с прозрачностью (фон, объекты статические и динамические) и максимально незагрузочном рисовании этого зоопарка. В идеальном, неупрощённом варианте - это одновременно тысяча статических объектов бэкграунда + десятки объектов. В принципе, как я писал, обычный JS с div'ами с этим справляется. Но недостаточно плавно. Хочется скроллинга без рывков, на манер гуглекарт :)
Погуглил, поэкспериментировал... Походу, всё, включая бэкграунд, нужно в canvas рисовать. Самый быстрый способ. А бесконечную карту делать не одним div'ом, на который накладывается мелочь, а несколькими связанными небольшими div'ами, скажем, 512x512. И подгружать уже в фоне готовые div'ы с выгрузкой ненужных. Линковку при перемещении делать или через jquery.ui.multidraggable, или потом, вручную, если multidraggable не покатит со временем.
Где-то так :)
...
Нагуглил парочку 2D-isometric engines на canvas, но все в стадии закрытого бета-тестирования. Правда, там народ замахивается на совсем серьёзную изометрию, в духе Diablo - со стенами, арками и прочим.