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

Участник
Статус
Оффлайн
Регистрация
4 Авг 2017
Сообщения
464
Реакции[?]
212
Поинты[?]
0
Приветствую. Продолжаю писать гайды по созданию своей игры. Если вы не читали первую статью, то советую прочитать, иначе у вас ничего не выйдет. Сегодня мы:
  • узнаем что такое тайлсет (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 при закрытии программы
}





Пожалуйста, авторизуйтесь для просмотра ссылки.
 
Последнее редактирование:
Забаненный
Статус
Оффлайн
Регистрация
27 Июн 2020
Сообщения
51
Реакции[?]
49
Поинты[?]
0
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки.
Спасибо за информацию, все четко и понятно
 
Сверху Снизу