Какие-нибудь библиотеки Javascript могут создавать и отображать локальные изображения по требованию? - PullRequest
1 голос
/ 20 июля 2011

Я создаю браузерную игру. Это игра на основе тайлов (очень похожа на покемонов, если вы с ней знакомы). Я создал похожую игру на C ++ около 9 лет назад. У меня все еще есть изображения и музыка, которые я использовал. Я хочу перестроить эту игру, используя Javascript (и, возможно, html5), чтобы люди могли играть в нее онлайн.

Проблема в том, что некоторые карты слишком велики (~ 300000px * 300000px) для загрузки в виде изображений. Я гуглил «нагрузка по требованию» и нашел некоторые библиотеки, которые могут выполнять «отложенную загрузку», но есть еще одна проблема: около 3000 карт. Игрок, играющий всю игру, в конечном итоге кеширует 50 гигабайт изображений Не говоря уже о нагрузке на серверную сеть.

Поскольку игра основана на плитке и обычно карта (~ 300000px * 300000px) использует только около 100 различных компонентов карты (<2 МБ), мой подход состоит в том, чтобы поместить все компоненты, используемые картой, в одно изображение и использовать его с карта тайла так: </p>

Плитка (0, 0) из map1.png, ширина 200, высота 200, смещение_x 450, смещение_y 600

Плитка (0, 1) из map1.png, ширина 100, высота 100, offset_x 650, offset_y 500

...

Таким образом, вместо того, чтобы загружать всю карту как изображение, клиенту нужно только загрузить файл изображения размером 2 МБ плюс карту плитки размером 500 КБ. Реальные карты могут быть сформированы локально и предоставлены по запросу:

Игрок на плитке (100, 100), визуализация прямоугольника (70, 70, 130, 130)

Мои вопросы: Существуют ли какие-либо библиотеки, которые могут создавать изображения по запросу? Существуют ли какие-либо примеры или учебные пособия? Что здесь может сделать CSS Sprite? Любые другие ключевые слова и ссылки, которые я могу подобрать?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 21 июля 2011

Вы запросили несколько примеров. Я нашел это онлайн некоторое время назад.

http://www.def -logic.com / _dhtml / базовой станции /

Это отличный пример того, о чем вы говорите.

0 голосов
/ 20 июля 2011

вы можете создавать изображения с чистым JavaScript, без какой-либо библиотеки, используя холст.Но я не понимаю, почему ваши imgs около 2M, когда они 200 * 200 ... Спрайт может помочь, но есть некоторые проблемы со спрайтами больше 3000 px, так что имейте это в виду.Спрайт уменьшит размер только на несколько байт на изображение, если ваши изображения будут такими большими, что будет самой маленькой проблемой.

Мой подход заключается в том, чтобы загружать изображения по требованию и использовать 100 отдельных изображений.Таким образом, трафик сводится к конкретной потребности пользователя.Переключайте источник каждой плитки, когда игрок движется и все готово.

...