Графическая библиотека SFML. Спрайты и текстуры

  Дмитрий Бушуев  | 

  Обновл. 23 Сен 2019  | 

 1139

 ǀ   4 

“-Я знаю, чем ты занимаешься… почему ты плохо спишь, почему живёшь один и почему ночь за ночью сидишь за своим компьютером. Ты ищешь его. Я знаю, потому что я сама искала. И когда он нашёл меня, он сказал, что на самом деле я искала не его. Я искала ответ. Этот вопрос ведёт нас. Он сводит нас с ума! Этот вопрос привёл тебя сюда. Ты знаешь этот вопрос точно так же, как и я… СПРАЙТЫ И ТЕКСТУРЫ… КАК SFML РАБОТАЕТ С НИМИ?”

Спрайты и текстуры

Итак, что же такое текстура, спрайт и чем они отличаются друг от друга.

   Текстура — это обычная картинка, которая накладывается на двумерный объект.

   Спрайт — это затекстурированный прямоугольник.

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

Сложного здесь ничего нет, поэтому двигаемся дальше.

Загрузка текстуры


Прежде чем создавать какой-нибудь спрайт, нам нужна текстура. Класс SFML, который предоставляет возможность работать с текстурами, называется внезапно Texture. Так как единственной целью текстуры является её загрузка из источника и нанесение на объект, то назначение практически всех функций данного класса сводится в большинстве своём к двум задачам: к загрузке текстуры и к её отображению в программе.

Основным способом загрузки текстуры является считывание информации о ней из графического файла, расположенного на компьютере. Ниже я привёл простейший пример по созданию спрайта и наложению на него текстуры:

Результат выполнения программы выше:

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

Есть ещё несколько способов загрузки текстуры:

   загрузка файла текстуры из памяти с помощью метода loadFromMemory();

   загрузка из потока с помощью метода loadFromStrean();

   загрузка из файла, который уже был загружен, с помощью метода loadFromImage().

Все эти функции имеют необязательный аргумент, который можно использовать, если вы хотите загрузить лишь часть изображения. Например, следующий код загружает небольшой кусочек текстуры размером 32×32 пикселя, начинающийся с координат (10;10):

Помимо этого, у текстуры есть два интересных свойства, которые влияют на то, как она будет отображаться на экране. Первое свойство — это сглаживание, которое делает границы пикселей менее видимыми (правда из-за этого изображение становится немного размытым). Например:

Особенно полезным это свойство является при масштабировании текстуры. Ниже, в прикреплённой gif-ке, вы можете увидеть разницу между вариантом со сглаживанием и без:

Второе интересное свойство позволяет многократно повторять текстуру в пределах одного спрайта. Например:

Результат выполнения программы выше:

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

Также можно изменить и цвет самого спрайта, который будет мультипликативно складываться с текущей текстурой. Благодаря этому свойству удобно изменять значение прозрачности спрайта. Например:

Результат выполнения программы выше:

Трансформации

К спрайтам могут быть применены различные варианты трансформаций: изменение позиции, изменение ориентации в пространстве и масштабирование. Все они выполняются с помощью методов setPosition/move, setRotation/rotate и setScale/scale. Вы можете спросить: «А почему данные методы написаны через слэш?». А дело в том, что первые методы в каждой паре производят абсолютные преобразования (преобразования относительно начала координат). Вторые же методы в каждой паре производят преобразования относительно текущих значений координат/угла/масштаба. Например:

Результат выполнения программы выше:

Точкой (началом координат), относительно которой происходят эти преобразования, является по умолчанию верхний левый угол спрайта. Если нам нужно установить начало координат в другую точку (например, в центр спрайта), то можно использовать метод setOrigin():

Проблема белого квадрата


Вы успешно загрузили текстуру, правильно построили спрайт и… всё, что вы видите на экране сейчас — это белый квадрат. Что случилось?

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

Данная проблема возникает при написании следующего рода функций:

Поэтому всегда нужно перепроверять время жизни ваших текстур.

Использование большого количества текстур

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

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

Заключение


В этом уроке мы разобрались со спрайтами и текстурами, научились накладывать текстуру на спрайт, изменять цвет. Поработали с различными типами трансформации спрайта: изменение положения, вращение, масштабирование (как в абсолютных, так и в относительных величинах). И даже рассмотрели проблему белого квадрата. На этом мы закончим знакомство с базовыми возможностями библиотеки SFML и будем двигаться дальше. Надеюсь, что вам понравилось, ведь впереди нас ждёт нечто грандиозное…

«Ты можешь лучше.
Предела нет. Знай, ты можешь.
Будь уверен… Хватит попыток! Действуй!»

Исходный код. Урок №3 — Графическая библиотека SFML

Оценить статью:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (4 оценок, среднее: 4,75 из 5)
Загрузка...

Комментариев: 4

  1. Аватар Александр:

    Ждемс!
    Есть еще просьба. Вот мы рассмотрели довольно подробно возможности языка C++. Теперь на очереди, как я понимаю, разные фреймворки.
    Можно ли увидеть какую-то статью, где будет кратко расписано, какой фреймворк для какой категории задач предназначен?
    -фреймворк "А" для разработки 3D-игр;
    -фреймворк "B" для клиент-серверных приложений;
    -фреймворк "C" для разработки 2D-игр;
    -фреймвор для разработки VR-контента.

    1. Дмитрий Бушуев Дмитрий Бушуев:

      >>Можно ли увидеть какую-то статью, где будет кратко расписано, какой фреймворк для какой категории задач предназначен?

      Как я уже писал, сейчас готовится очень интересный материал по SFML ;). Дальше запланирована статья-продолжение туториалов по Qt. А за ней, я думаю, можно будет выпустить то, о чем вы просите, т.е. обзорную статью по различным C++-фреймворкам. 🙂

  2. Аватар Александр:

    А продолжение будет?! =)
    Большое спасибо за материал!

    1. Дмитрий Бушуев Дмитрий Бушуев:

      В данный момент готовится новая статья по SFML. Так что следите за анонсами 🙂

Добавить комментарий

Ваш E-mail не будет опубликован. Обязательные поля помечены *

telegram канал
НОВОСТИ RAVESLI