Гайд [GameDev] Урок 2. Отрисовка картинки и тайлсета

[entrypoint]

Приветствую. Продолжаю писать гайды по созданию своей игры. Если вы не читали первую статью, то советую прочитать, иначе у вас ничего не выйдет. Сегодня мы:

• узнаем что такое тайлсет (TileSet)
• научимся выводить картинку на экран
• научимся выводить тайлсет на экран

Итак, приступим. Начнем с того, что мы ещё не обучились выводу на экран объектов. Для начала попробуем вывести обычный круг. Для этого в SFML есть объект под названием "CircleShape". Давайте создадим его до начала основного цикла. Круг будет радиусом 100 пикселей и зеленого цвета

CircleShape shape(100.f);
 shape.setFillColor(Color::Green);

Но как же вывести объект на экран? Для этого существует функция draw у объекта window:

window.draw(shape);

Вызываем после window.clear(). Если вы запустите программу сейчас, то вы получите похожий результат:

Теперь поговорим о главном герое. Кем он будет - ваша фантазия, но имейте ввиду, что вам понадобиться тайлсет вашего героя. Но что же такое тайлсет?
Тайлсет — это изображения, которые игра использует для отображения графики или анимации. То есть это набор кадров, на которых герой находиться в разных положениях (движение вперед, назад, влево, вправо, прыжок и др.)
Об анимации мы поговорим в следующем уроке, а пока просто мы выведем этот тайлсет на экран. Но где же его достать? В конце статьи я оставлю вам пару вариантов, которые используются у меня в игре.
Но для начала давайте научимся выводить картинку. Для этого создадим объект типа Image и загрузим в него наш тайлсет.

Image tileset_image;
tileset_image.loadFromFile("data/images/tileset.png" );

Заметьте, я указал путь "data/images/tileset.png", следовательно, нам надо создать соответствующие папки рядом с исполняемым файлом. Советую именно все распределять по каталогам, вам будет гораздо легче в будущем, когда будет много файлов.
Далее мы должны сделать из картинки текстуру, давайте создадим ее объект и загрузим текстуру из картинки.

Texture tileset_texture;
tileset_texture.loadFromImage(tileset_image);

А вот теперь одна из важнейших деталей, мы должны сделать спрайт. Сейчас спрайтом будет вся текстура, но в будущем мы будем "вырезать" из текстуры нужные нам части и их отображать поочередно, получая анимацию. Ну а пока, просто выведем полный тайлсет, перед этим не забыв создать спрайт из текстуры.

Sprite tileset;
tileset.loadFromImage(tileset_texture);

Ну и мы уже знаем как выводить объект:

window.draw(tileset);

Вот и все, всем спасибо за внимание!

​

Спойлер: Полный код

#include "imgui.h"[/SIZE][/LEFT][/SIZE][/LEFT]
[SIZE=4]
[LEFT][SIZE=4]
[LEFT]#include "imgui-sfml.h"

#include <SFML/Graphics/RenderWindow.hpp>
#include <SFML/System/Clock.hpp>
#include <SFML/Window/Event.hpp>

using namespace sf;

int main()
{
    sf::RenderWindow window(sf::VideoMode(640, 480), "Window"); // создаем окно с названием "Window" и разрешением 640X480
    window.setVerticalSyncEnabled(true); //устанавливаем вертикальную синхронизацию для плавности картинки
  
    ImGui::SFML::Init(window); //инициализируем окно ImGui с нашим омновным окном
  
    Image tileset_image;
    tileset_image.loadFromFile("data/images/tileset.png" );
    Texture tileset_texture;
    tileset_texture.loadFromImage(tileset_image);
    Sprite tileset;
    tileset.loadFromImage(tileset_texture);
  
    sf::Clock deltaClock; //создаем "таймер" который будет обновлять окно
  
    while (window.isOpen())  //основной цикл программы, работающий, пока окно открыто
    {
        sf::Event event; //событие, может быть равно "закрытию программы", "нажатию клавиши" и др.
        while (window.pollEvent(event))  //обработчик события
        {
            ImGui::SFML::ProcessEvent(event); // программа принимает на себя событие

            if (event.type == sf::Event::Closed)   // обработчки события, в данном случае, закрытия окна
            {
                window.close();
            }
        }

        ImGui::SFML::Update(window, deltaClock.restart()); // обновляем окно

        ImGui::Begin("ImGui Window"); // создаём окно ImGui
    
        ImGui::End(); // end window

        window.clear(Color::White); // заполняем окно заданным цветом
        window.draw(tileset);
        ImGui::SFML::Render(window);// отображаем окно ImGui в основном окне
        window.display(); // отображаем все это на экране
    }

    ImGui::SFML::Shutdown(); // завершаем работу ImGui при закрытии программы
}

​

​

Спойлер: Тайлсеты

Пожалуйста, авторизуйтесь для просмотра ссылки.

​

 

[VortexTts]

Спасибо за информацию, все четко и понятно

 

[Viimp]

Спасибо за информацию, все четко и понятно

Давай, друг, почти 50 сообщений