Работа со спрайтами — Часть 4

Спрайты — основные строительные блоки, используемые для создания вашей сцены, поэтому понимание спрайтов необходимо прежде чем переходить к другим классам в Sprite Kit. Спрайты представлены объектами SKSpriteNode. Объект SKSpriteNode можно сделать либо в виде прямоугольника с текстурой отображающейся на нем или в виде цветного прямоугольника без текстуры. Текстурированные спрайты являются более распространенными, поскольку они представляют основной интерес для игровых проектов.
Текстурированными спрайтами может быть все угодно — элементы фона, символы, герои или элементы интерфейса в вашей игре. Основной принцип работы с ними следующий — художник создает образы, ваша игра загружает их в качестве текстур, затем вы создаете спрайты с этими текстурами и добавляете их их на сцену.

Создание спрайта с текстурой
Создать текстурированный спрайт очень просто — замените строку кода:

SKSpriteNode *hull = [[SKSpriteNode alloc] initWithColor:[SKColor redColor] size:CGSizeMake(64,32)];

на строки:

SKSpriteNode *hull = [SKSpriteNode spriteNodeWithImageNamed:@"spaceship.png"];
[hull setSize:CGSizeMake(51,90)];

и не забудьте добавить в Images.xcassets картинку spaceship.png spaceship

Вообщем то этого достаточно для того, чтобы придать вашей игре более менее симпатичный внешний вид. Но если вы хотите более глубоко изучить класс SKSpriteNode и его возможности, то мы продолжим.

Кастомизация спрайта с текстурой
Чаще всего, настройка спрайта состоит из настройки четырех параметров — позиция, размер, цвет и блендинг. Все эти параметры обычно связаны с картинкой, используемой для создания текстуры спрайта. Поэтому вам придется плотно работаеть с вашим художником, чтобы ваша игра и спрайты в ней выглядели красиво.
Вот некоторые из возможных стратегий, которыми вы можете воспользоваться в этом вопросе:

— Создание спрайтов с жестко прописанными свойствами в коде. Это самый быстрый подход, но наименее желательный в долгосрочной перспективе, потому что при каждом изменении графики, вам придется исправлять код.

— Вы можете создать свои собственные инструменты, используя Sprite Kit, которые позволяют точно настроить значения свойств спрайта. После того как спрайт настроен, можете сохранить спрайт в архив. А ваша игра бедет использовать архив для подгрузки спрайтов во время выполнения.

— Храните данные конфигурации спрайтов в plist, которые хранятся в вашем приложении. Когда спрайт загружается, загрузите список свойств и значений и используйте их, чтобы настроить спрайт. Ваш художник может потом сам настраивать параметры спрайта (через plist) без внесения изменений в код.

Использование якорных точек при перемещении спрайта по сцене
По умолчанию, спрайт и его текстура отцентрованы по отношению к позиции спрайта. Система координат спрайта выглядит как показано на рисунке ниже:
img3
Тем не менее, вы можете изменить якорную точку своего спрайта, например на (0,0) — левый нижний угол или правый верхний (1,1). По умолчанию якорная точка установлена в (0.5, 0.5).
Обратите внимание, когда спрайт поворачивается, текстура вращается вокруг этой якорной точки. Устанавливать якорную точку вы можете в любой момент исполнения программы, кадр сразу обновится.
Пример:

hull.anchorPoint = CGPointMake(0.5,1.0);

Изменение размера спрайта
Размер спрайта определяется следующими свойствами:
— Площадь спрайта равная размеру текстуры. Задается при инициализации.
— Базовый размер спрайта, затем может масштабироваться на основании xScale и yScale свойств, унаследованных от класса SKNode.

Например, если базовый размер спрайта 32 x 32, при этом xScale=1.0 и yScale=2.0, то размер спрайта в кадре будет 32 x 64.

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

Часто возникает необходимость использовать спрайты как элементы пользовательского интерфейса, такие как кнопки или графики. Часто такие спрайты содержат элементы фиксированного размера, например, боковины кнопки, которые не должны быть растянуты. В этом случае можно использовать часть текстуры без растяжения, а остальную часть текстуры растянуть на спрайт.
CenterRect свойство спрайта, которое указано в координатах текстуры. Оно управляет поведением масштабирования. Значение по умолчанию представляет собой прямоугольник, который охватывает всю текстуру, поэтому вся текстура растягивается по всему спрайту. Если указать прямоугольник, который охватывает лишь часть текстуры, вы создаете сетку 3 х 3. Каждая ячейка в сетке имеет свое собственное поведение масштабирования.
Участки текстуры в четырех углах сетки рисуются без масштабирования. Ячейка в центре сетки масштабируется в обоих направлениях. Верхние и нижнии средние части масштабируются только в горизонтальном положении. Левые и правые среднии части масштабируются только в вертикальном положении.

Рисунок ниже показывает крупным планом вид текстуры которую можно использовать для кнопку пользовательского интерфейса. Полный размер текстуры 28 х 28. Угловые элементы 12 х 12 и центр 4 Х 4.
img4

Следующий код показывает, как эта кнопка спрайт будет инициализирована. Свойство centerRect вычисляется на основе конструкции текстуры. Установливаем центральный прямоугольник спрайта для регулировки растяжения

SKSpriteNode *button = [SKSpriteNode
spriteNodeWithImageNamed:@"stretchable_button.png"];
button.centerRect = CGRectMake(12.0/28.0, 12.0/28.0, 4.0/28.0, 4.0/28.0);  //x,y, width,heigh

Рисунок ниже показывает, что углы остаются не растянутыми, даже когда кнопка будет иметь различные размеры
img5

Раскрашивание спрайта
Вы можете использовать свойства color и colorBlendFactor для того, чтобы раскрасить текстуру перед ее наложением на спрайт. Коэффициент смешивания цветов (colorBlendFactor) по умолчанию 0, для того, чтобы текстура использовалась в неизменном виде. Когда вы увеличите этот коэффициент, текстура начнет смешиваться с цветом. Например, когда космический корабль в вашей игре получает повреждения, вы можете добавить ему красный оттенок. Это просто — добавьте в newSpaceship этот код:

hull.color=[SKColor redColor];
hull.colorBlendFactor=0.5;

И ваш космический корабль станет таким
img7

Также вы можете анимировать цвета и цветовые факторы смешивания с помощью SKAction. Например этот код ненадолго подкрашивает спрайт, а затем возвращает его в нормальное состояние

    SKAction *pulseRed = [SKAction sequence:@[
                                              [SKAction colorizeWithColor:[SKColor redColor] colorBlendFactor:0.5 duration:0.15],
                                              [SKAction waitForDuration:0.3],
                                              [SKAction colorizeWithColorBlendFactor:0.0 duration:0.15]]];

    [hull runAction: [SKAction repeatActionForever:pulseRed]];

И ваш космический корабль будет пульсировать красным цветом.

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

hull.blendMode = SKBlendModeAdd;

Эксперементируйте с этим свойством. По умолчанию свойство равно SKBlendModeAlpha.

В следующей части, более подробно разберем текстуры и их возможности. Спасибо за внимание.