"Nine-patch" - картинки произвольной высоты и ширины

"Nine-patch" - картинки произвольной высоты и ширины

В Quest Navigator, в общем случае, рекомендуется делать скины "растягиваемыми", чтобы игра выглядела нормально при любом размере окна. В связи с этим становятся важными все приемы "тянущейся" верстки.

Один из приемов - использование техники 9-patch ("nine-patch") для создания картинок произвольной ширины и высоты. Эти картинки "подгоняют" свою ширину и высоту под блок, к которому они применяются.

Зачем это нужно в игре? В первую очередь, для красивого оформления игровых действий. Для действия, занимающего одну строку, и действия, занимающего две строки, нужны разные по высоте картинки. Иначе либо текст будет вылезать за картинку, либо будет оставаться пустое пространство, что тоже некрасиво.

Есть множество решений, разной степени удобства и универсальности. Перечислю основные из известных мне.

1. Использование свойства CSS "border-image". К очень большому сожалению, это свойство не поддерживается браузером Internet Explorer(установленным по умолчанию в Windows). На сегодняшний момент, плеер Quest Navigator собран под платформы, поддерживающие это свойство(браузеры на движке webkit), поэтому сейчас его использовать можно. В будущем, когда Quest Navigator будет портироваться под Internet Explorer, придется искать какие-то обходные пути.
Плюсы: простота использования, требует лишь задания несложного CSS-стиля для блока.
Минусы: несовместим со старыми версиями IE (поддержка появилась только в IE 11).
Ссылки:
Онлайн-генератор стилей для 9-patch
Перечень браузеров, поддерживающих border-image
Описание border-image

2. Использование JQuery-плагина "scale9grid". Так как в Quest Navigator используется JQuery, было бы здорово одним плагином решить эту проблему. К сожалению, мне не удалось "завести" его на Quest Navigator AIR, возможно баги повылезли в силу старости плагина(2009 год). В браузерах Firefox и IE работает. При этом плагин требует "ручного" запуска - каждый раз при изменении контента. Поэтому использовать его можно только встроив в движок Quest Navigator.
Плюсы: заявленная кроссбраузерность.
Минусы: требует встраивания в движок Quest Navigator. Не работает в исходном виде на Quest Navigator AIR. По всей видимости, заброшен автором. Поддерживает только "растягивание".
Ссылки:
Страница проекта scale9grid
Примеры использования scale9grid

3. Использование таблиц. Метод, предложенный werewolf. Чистый HTML и CSS. Теоретически, должен работать везде. При этом требуется задавать очень сложный HTML-код для блока, и резать картинку на девять частей.
Плюсы: кроссбраузерность.
Минусы: громоздкий HTML-код, возня с нарезанием картинок.
Ссылки:
9p-table-action.aqsp (открывать с помощью Quest Navigator AIR)

Приглашаю к обсуждению всех интересующихся. В данный момент 1-й способ используется для айфон-версии игры "Подземелье Атланта", 3-й способ используется для айфон-версии игры "Однажды в лунную ночь". Если кто-то знает другие рабочие кроссбраузерные методы, прошу поделиться.

Изменено: Nex
20.Июл.14 16:26:58
Nex
useravatar
Offline
4277 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: "Nine-patch" - картинки произвольной высоты и ширины

IE 11 уже поддерживает border-image. Отлично.

Nex
useravatar
Offline
4277 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Информация

Статистика форума:
 
Всего тем:
977
Всего опросов:
14
Всего сообщений:
16790681
Сообщений на этой неделе:
8
Пользователи форума:
 
Всего пользователей:
2396
Последним зарегистрировался:
WasTed