Как использовать packed изображения

1. Введение

Иногда мы объединяем несколько небольших изображений в одно большое, такой подход часто используется в игровой индустрии и при разработке экранов последовательных портов. Это делается по следующим причинам:

• Удобство для художников.
• Использование существующих ресурсов без необходимости их ретуширования.
• При наличии GPU можно повысить производительность до определённой степени.

Новейшая версия AWTK поддерживает использование packed изображений. В этой статье мы рассмотрим, как использовать такие изображения.

2. Как указать на под-изображения в packed изображении

При указании имени изображения в стиле (style), используйте «#» для разделения имени изображения и области под-изображений. Символ «#», за которым следует строка, определяет область под-изображений, а символ «#», за которым ничего не следует, указывает на использование текущей области элемента управления для определения положения и размера под-изображений. Вот несколько способов указания области под-изображений:

1. Пустая строка: используется текущая область элемента управления xywh для определения положения и размера под-изображений. Например:

<pressed bg_image="image_packed_fg#"/>

Если текущая область элемента управления — (10, 20, 30, 40), то область под-изображений также будет (10, 20, 30, 40).

2. «g»: используется текущая область элемента управления xywh для определения положения и размера под-изображений, но координаты xy преобразуются в глобальные координаты. Например:

<pressed bg_image="image_packed_fg#g"/>

Если текущая область элемента управления (10, 20, 30, 40) относительно окна, то область под-изображений будет (50, 60, 30, 40).

3. «xywh(x, y, w, h)» указывает абсолютные координаты под-изображений. Например:

 <pressed bg_image="image_packed_fg#xywh(106,0,106,54)"/>

Тогда область под-изображений будет (106, 0, 106, 54).

4. «grid(rows, cols, row, col)» делит изображение на сетку с заданным количеством строк и столбцов. Строка и столбец определяют область под-изображений в сетке. Например:

<pressed bg_image="image_packed_fg#grid(4,3,0,2)"/

Если размер изображения составляет 80 x 60 пикселей, область под-изображений составит (40, 0, 20, 20).

3. Примеры

Здесь представлены две упакованные картинки: одна для нормального эффекта (image_packed_bg), другая для эффекта нажатия (image_packed_fg), вторая немного темнее первой.

3.1 UI файл

<window>
  <view style="image_packed" x="c" y="m" w="320" h="216" children_layout="default(r=4,c=3)">
    <button style="num_1"/>
    <button style="num_2"/>
    <button style="num_3"/>
    <button style="num_4"/>
    <button style="num_5"/>
    <button style="num_6"/>
    <button style="num_7"/>
    <button style="num_8"/>
    <button style="num_9"/>
    <button style="dot"/>
    <button style="num_0"/>
    <button style="backspace"/>
  </view>
</window>

3.2 Style файл

• Первая картинка используется как фон для view. Кнопки в нормальном состоянии ничего не отображают.
• Кнопки в состоянии нажатия используют указанную область изображения.
• Этот пример демонстрирует различные способы использования. Обычно достаточно использовать метод по умолчанию:

<pressed bg_image="image_packed_fg#" />

<button>
	<style name="num_1">
		<normal />
		<pressed bg_image="image_packed_fg#xywh(0,0,106,54)" />
	</style>
	<style name="num_2">
		<normal />
		<pressed bg_image="image_packed_fg#xywh(106,0,106,54)" />
	</style>
	<style name="num_3">
		<normal />
		<pressed bg_image="image_packed_fg#grid(4,3,0,2)" />
	</style>
	<style name="num_4">
		<normal />
		<pressed bg_image="image_packed_fg#grid(4,3,1,0)" />
	</style>
	<style name="num_5">
		<normal />
		<pressed bg_image="image_packed_fg#grid(4,3,1,1)" />
	</style>
	<style name="num_6">
		<normal />
		<pressed bg_image="image_packed_fg#grid(4,3,1,2)" />
	</style>
	<style name="num_7">
		<normal />
		<pressed bg_image="image_packed_fg#grid(4,3,2,0)" />
	</style>
	<style name="num_8">
		<normal />
		<pressed bg_image="image_packed_fg#grid(4,3,2,1)" />
	</style>
	<style name="num_9">
		<normal />
		<pressed bg_image="image_packed_fg#grid(4,3,2,2)" />
	</style>
	<style name="dot">
		<normal />
		<pressed bg_image="image_packed_fg#" />
	</style>
	<style name="num_0">
		<normal />
		<pressed bg_image="image_packed_fg#" />
	</style>
	<style name="backspace">
		<normal />
		<pressed bg_image="image_packed_fg#" />
	</style>
</button>
<view>
	<style name="image_packed">
		<normal bg_image="image_packed_bg" />
	</style>
</view>

3.3 Запуск программы

./bin/preview_ui ui=design/default/ui/image_packed.xml

4 Ограничения

• В настоящее время поддерживается только в style и image элементах управления.
• draw_type поддерживает только default|scale|center|icon и другие подобные типы.

5 Прочее

• Демо с использованием packed изображений