Графическая библиотека SFML. Вступление и установка

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

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

 2969

Пссс, парень! Не хочешь попробовать немного SFML? Убойная штука. Достаточно самой малости и с её помощью ты сможешь воплотить в жизнь то, о чём раньше мог только мечтать. Тебе понравится, гарантирую. Тем более тебе, как новичку, первая порция бесплатно, я угощаю. Ну что, договорились? Тогда по рукам. 
 

Вступление

«Что же из себя представляет SFML?» —  спросишь ты.

SFML (с англ. «Simple and Fast Multimedia Library» = «Простая и быстрая мультимедийная библиотека») — это свободная кроссплатформенная мультимедийная библиотека, написанная на C++, но также доступна и для C, C#, .Net, D, Java, Python, Ruby, OCaml, Go и Rust. Представляет собой объектно-ориентированный аналог SDL.

С её помощью можно легко и непринужденно создавать любую 2D-графику: начиная от простейших одиночных геометрических фигур типа треугольника и заканчивая полноценными играми-платформерами.

Исходный код библиотеки предоставляется под лицензией zlib/png, а скачать SFML можно с оф. сайта разработчика www.sfml-dev.org.

Что нужно для начала?


Будет плюсом, если у тебя уже имеются некоторые познания в таких областях языка С++, как: указатели и ссылки, функции, циклы for и while, пространства имён, классы и наследования классов. Если эти слова для тебя звучат как эльфийский диалект языка клингонцев, то рекомендую ознакомиться с данными уроками по C++.

Все примеры в этом уроке были сделаны мной в MS Windows 7 с использованием IDE MS Visual Studio 2017 Community Edition и библиотеки SFML 2.5.1.

Ну что, парень, ты готов? Да вижу, что готов. Погнали!

Установка библиотеки SFML

Я не буду рассказывать, как установить Visual Studio, а перейду сразу к SFML. Для того чтобы установить библиотеку, нужно зайти на сайт www.sfml-dev.org и перейти в пункт меню «Download» и скачать «SFML 2.5.1»:

Как уже писалось выше, в качестве IDE я буду использовать Visual Studio 2017, поэтому скачиваем соответствующую версию SFML. Ты также можешь заметить наличие готового пакета для эстетов Code Blocks. Помимо этого, в глаза бросаются варианты библиотеки для других версий Visual Studio. Сразу дам совет — не пытайся лепить Франкештейна, используя неподходящий билд SFML, иначе ты рискуешь получить вагон и маленькую тележку всякого рода проблем на свою голову:

Теперь скачанный архив нам нужно распаковать. У себя я выбрал следующий путь C:\Soft\SFML-2.5.1-windows-vc15-32-bit.

Далее создадим пустой проект и подключим к нему библиотеку SFML. Для этого запусти Visual Studio и выбери Файл > Создать > Проект… или можно воспользоваться сочетанием горячих клавиш Ctrl+Shift+N. Задай имя и расположение проекта так, как показано на скриншоте ниже:

Теперь, когда у нас есть проект, нужно добавить в него файл, который будет содержать исходный код нашей программы. Для этого в окне «Обозреватель решений» щёлкни ПКМ по строчке Исходные файлы > Добавить > Создать элемент…:

В поле «Имя» укажи main.cpp:

Отлично! Следующим шагом будет подключение библиотеки SFML к нашему проекту. Для этого нужно:

   подключить каталог заголовочных и исходных файлов SFML (/include);

   подключить каталог библиотечных файлов SFML (/lib);

   подключить библиотечные файлы SFML в качестве дополнительных зависимостей.

Переходим в Проект > Свойства: SFML_Tutorial…:

В верхнем левом углу «Страницы свойств SFML Tutorial» есть выпадающий список «Конфигурация», установи его значение как Все конфигурации. Также проверь, что в параметре «Платформа» установлено значение Win32. Затем в левой части окна найди и выбери раздел Свойства конфигурации > С++ > Общие. Обрати внимание на правую часть. Тебя будет интересовать параметр «Дополнительные каталоги включаемых файлов». Выбери его и нажми <Изменить…>. Перед тобой появится новое окно, в котором нужно указать путь к заголовочным файлам библиотеки SFML. Обычно они располагаются в папке include. У меня этот путь выглядит как C:\Soft\SFML-2.5.1-windows-vc15-32-bit\SFML-2.5.1\include.

Похожим образом подключаются и файлы библиотек. Всё, что нужно сделать — это выбрать в левой части Свойства конфигурации > Компоновщик > Общие. Затем «Дополнительные файлы библиотек» и <Изменить…>. В открывшемся окне нужно будет указать путь к библиотечным файлам SFML, у меня это C:\Soft\SFML-2.5.1-windows-vc15-32-bit\SFML-2.5.1\lib.

Осталось подключить несколько файлов в виде дополнительных зависимостей для «Компоновщика». Для этого нужно переключить тип конфигурации на Debug, а затем в левой части окна выбрать Свойства конфигурации > Компоновщик > Ввод. Переведи взгляд на правую часть, где нужно найти строчку «Дополнительные зависимости» и нажми <Изменить…>. В появившемся окне впиши имена следующих 4-ёх файлов:

sfml-graphics-d.lib
sfml-window-d.lib
sfml-audio-d.lib
sfml-system-d.lib

Должно получиться следующее:

Первые шаги и первые…


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

Я вижу, как твоя рука уже потянулась к кнопке «Скомпилировать и запустить проект», но не торопись, давай сначала разберём данный код:

Строка №1: Директива препроцессора #include…, которая подключает исходный файл SFML/Graphics.hpp в наш проект. Как раз этот файл и предоставляет нам возможность работать с 2D-графикой: спрайтами, текстом, геометрическими фигурами и прочими объектами.

Строка №3: Подключаем пространство имён sf.

Строка №8: Создаём объект window класса RenderWindow. Данный объект — это наше окно, в котором будет отображаться 2D-графика. Первый параметр VideoMode(200, 200) задаёт видеоразрешение окна (ширину и высоту). Второй параметр "SFML Works!" — это заголовок окна.

Далее идут 2 цикла while: внешний (строка №11) и внутренний (строка №15). Сложного тут ничего нет. SFML предлагает удобные средства для работы с событиями. Именно их мы и будем использовать для создания цикла работы приложения и обработки событий окна. Во внешнем цикле while при помощи метода isOpen() мы проверяем, открыто ли наше окно в данный момент. Во внутреннем цикле while метод pollEvent(event) перебирает очередь событий (сообщений), которые возникают в нашем окне.

Очередь может содержать любое количество сообщений, именно по этой причине мы и используем цикл, чтобы перебрать их все. Предположим, например, что пользователь перемещает курсор во время выполнения нашей программы или нажимает на какие-то объекты. SFML обнаружит это и поместит два события в очередь: одно на перемещение курсора и одно на нажатие на объект. Выбрать определённое сообщение из очереди можно с помощью метода pollEvent() класса RenderWindow. Так вот, если какое-то событие из этой очереди совпадает с Event::Closed (т.е. пользователь нажал на крестик, тем самым послав сигнал «Закрыть окно»), то при помощи windows.close() мы закрываем окно. По сути, этот цикл бесконечен и выход из него только один — закрыть окно программы.

В строке №23 мы вызываем метод display(), который отвечает за отрисовку нашего окна.

Вот теперь можно перейти к компиляции и первому запуску программы. Для этого нужно нажать в MS Visual Studio Отладка > Запуск без отладки (или Ctrl+F5). Ииии, вот и она! Твоя первая… ЧТО…??? ОШИБКА…?!?!!! WTF…?!?!?!?!?!

«Что за хрень?!?!» — спросишь ты. Столько времени потрачено на ковыряние, настройку и прочее ради вот этого вот?! Долбанного окна с ошибкой?! Нафиг всё, дизлайк/отписка, го даст2 я создал.

А проблема в том, что исполняемый файл нашей программы не может найти *.dll-файлы, в которых хранятся используемые нашим приложением функции. Решение очень простое — нужно скопировать все файлы (11 штук) из папки C:\Soft\SFML-2.5.1-windows-vc15-32-bit\SFML-2.5.1\bin\ в папку C:\dev\SFML_Tutorial\Debug\, в которой хранится наш исполняемый файл SFML_Tutorial.exe:

Теперь снова попробуй скомпилировать и запустить проект. В результате должно получиться следующее:

Это твоя первая программа, написанная на C++ с использованием SFML. Черное окно Малевича. Как по мне, это выглядит как-то убого. Предлагаю добавить красок и поменять цвет фона с чёрного на какой-нибудь более весёлый цвет. Для этого нам пригодится метод windows.clear(). Ниже представлен участок кода, куда нужно добавить данный метод:

В методе window.clear() параметр Color(250,220,100,0) — это конструктор соответствующего класса Color, который создаёт соответствующий объект, принимая в качестве параметров 4 значения цвета в формате RGBA: Red (Красный), Green (Зеленый), Blue (Синий), Alpha (Альфа-канал, он же «Мистер прозрачность»):

Снова запустив нашу программу, мы увидим следующее:

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

Заключение

Это была первая часть большого (я надеюсь на это) цикла статей по использованию библиотеки SFML в связке с языком C++. Мы узнали, что вообще из себя представляет SFML, как её подключить к MS Visual Studio. Собрали наше первое работоспособное приложение и даже немного поигрались с изменением цвета фона. В дальнейшем мы рассмотрим способы отрисовки различных геометрических фигур и добавим дополнительные проверки для работы с системой реагирования на события в окне. Ставьте лайки, подписывайтесь на мой канал. Удачи!


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

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

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

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