9-Patch изображения

Данная статья рассматривает 9-patch изображения, как их можно создать и как их использовать в контексте libGDX приложения.

Перед началом

Данное руководство было предназначено для старых версий scene2d и skinpacker (версии до 0.9.6). Если вы используете nightlies сборку, то руководство может дать некоторые советы, но не будет являться пошаговым руководством. Основные отличия заключаются в том, что skinpacker и texturepacker были объединены в texturepacker2 и поэтому скины загружаются по-другому.

Введение

9-patch изображение представляет собой изображение с определенными областями для растяжения. Благодаря такому свойству можно создавать изображения, которые повторяют маленькие регионы или масштабируют очень большие регионы. Поскольку области определены, изображение не будет выглядеть растянутым, так как можно это представить, посредством простого масштабирования. Смотрите NinePatch класс и его код в libGDX.

NinePatch класс используется в различных Scene2d компонентах libGDX фреймворка, включая:

• Buttons
• ScrollPanes
• Textfields

В libGDX есть несколько способов загрузки ресурсов, которые работают с 9-patch. Когда создается экземпляр NinePatch вручную, мы указываем в коде патч региона. Когда загружается NinePatch, используя Skins (и SkinPacker для его создания), процесс немного отличается. Это также будет освещено в данной статье.

Создание NinePatch экземпляра вручную

Это краткое введение в создание экземпляра NinePatch изображения вручную в коде приложения. В основе лежит создание изображения, выяснение какие регионы будут растягиваться и какие пиксели этих регионов.

Создание масштабируемого изображения

Имейте в виду, что некоторые площади вашего изображения нужны для содержания контента (текста, других изображений и так далее) и, следовательно, другие области не могут содержать контент, так как область будет масштабироваться. В данном случае мы создадим «кнопку».

Как можно заметит, данная «кнопка» довольно круглая. Одна из замечательных особенностей 9-patch в том, что происходит оборачивание изображения вокруг контента, таким образом, что при установке теста наше изображения расширится в горизонтальном направлении. Углы данной кнопки представляют простые полупрозрачные пиксели. Обратите внимание, что мы не определяем области растяжения на изображении, вместо этого мы будет делать это в коде.

Создание NinePatch экземпляра

Самый простой способ создания нового NinePatch экземпляра:

NinePatch patch = new NinePatch(new Texture(Gdx.files.internal("knob.png")), 12, 12, 12, 12);

Четыре integer аргумента указывают, какие регионы (в пикселях) изображения мы позволим растягивать.

Истинная сила NinePatch проявляется при применении вместе с Scene2D элементами. Ниже приведен пример создания экземпляра кнопки с только что созданным изображением.

// Создание нового TextButtonStyle
TextButtonStyle style = new TextButtonStyle(patch, patch, patch, 0, 0, 0, 0, new BitmapFont(), new Color(0.3f, 0.2f, 0.8f, 1f), new Color(0, 0, 0, 1f), new Color(0, 0, 0, 1f));
// Создание экземпляра TextButton
TextButton button = new TextButton("hello world", style);

Ниже показан результат добавления на сцену TextButton.

Наше изображение теперь масштабируется в соответствии с длиной содержимого теста. Кнопка использует стандартный BitmapFont.

Ограничения при создании экземпляра программно

Ограничения при создании NinePatch экземпляра непосредственно, используя libGDX, являются тем, что ваши фиксированные регионы будут тем же квадратом. Ниже приведена иллюстрация как именно четыре integer аргумента описываются в NinePatch. Серая область показывает область растяжения.

Создание NinePatch экземпляра с помощью SkinPacker

SkinPacker и 9-patch изображения

Для правильного распознавания и разбора 9-patch изображения с помощью SkinPacker, имя файла с изображением должно оканчиваться на .9.png, если используется PNG файл.

9-patch изображение должно иметь некоторые специальные свойства в пределах самого изображения, чтобы иметь возможность выступать в качестве 9-patch. Эти свойства заключаются в добавлении к изображению отступа в 1 пиксель. Шаги по созданию 9-patch описаны ниже.

Определение растягивающихся областей

Теперь нам нужно изменить изображение и добавить черные полосы там, где мы хотим, чтобы изображение растягивалось. Это можно сделать в любом графическом редакторе. Android SDK содержит отличный инструмент для этой цели и находится он в android-sdk/tools/draw9patch. Данный инструмент предоставляет предварительный просмотр масштабируемого изображения. Ниже показано изображение, загруженное в draw9patch программу. Обратите внимание на предварительный просмотр слева, и как не очень хорошо выглядит масштабируемое изображение справа.

На следующей иллюстрации определены области для контента и области для масштабирования. Опять же, это достигается добавлением отступа в 1 пиксель по границе изображения. Вы видите предварительный просмотр контента (розовая область) и гораздо лучшего масштабирования справа.

Теперь сохраните изображение как image.9.png. Ниже показано получившееся 9-patch изображение, готовое для использования в коде.

Определение NinePatch программно

Смотрите NinePatch конструктор

Упаковка изображения с помощью SkinPacker

Детали данного раздела должны рассматриваться в другой статье. Поскольку имя файла изображения оканчивается на .9.png, будут проанализированы области масштабирования, глядя на отступы в 1 пиксель, которые мы определили на предыдущем шаге.

Когда в директории экспорта находится только одно изображение, результатом работы SkinPacker будет следующее:

"resources": {
        "com.badlogic.gdx.graphics.g2d.NinePatch": {
                "knob": [
                        { "x": 2, "y": 2, "width": 13, "height": 11 },
                        { "x": 15, "y": 2, "width": 7, "height": 11 },
                        { "x": 22, "y": 2, "width": 12, "height": 11 },
                        { "x": 2, "y": 13, "width": 13, "height": 9 },
                        { "x": 15, "y": 13, "width": 7, "height": 9 },
                        { "x": 22, "y": 13, "width": 12, "height": 9 },
                        { "x": 2, "y": 22, "width": 13, "height": 12 },
                        { "x": 15, "y": 22, "width": 7, "height": 12 },
                        { "x": 22, "y": 22, "width": 12, "height": 12 }
                ]
        }
}

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