游戏引擎从零开始(29)-2D Renderer 准备工作

前言

到目前,我们的引擎已经完成了最基本的渲染API、纹理、输入控制等逻辑。

今天我们基于这个引擎,在Application层增加一个2D渲染Demo的示例,将引擎的使用流程走一遍。实现一个可设置颜色、可控制移动的矩形。

后续将以这个2D的Demo为起点,实现一个2D渲染器(Renderer2D)

2D Renderer

在SandBoxApp中增加一个Layer(Sandbox2D),继承自Layer并实现Layer的接口。

Renderer2D中添加最基本的三个元素Camera(CameraController)、VertexArray、Shader,就可以实现渲染的逻辑了

实现逻辑如下图:

Sandbox/src/Sandbox2D.h

c++ 复制代码
#pragma once

#include "Hazel.h"

class Sandbox2D : public Hazel::Layer {
public:
    Sandbox2D();

    ~Sandbox2D() override = default;

    void OnAttach() override;

    void OnDetach() override;

    void OnUpdate(Hazel::Timestep ts) override;

    void OnImGuiRender() override;

    void OnEvent(Hazel::Event &e) override;

private:
    Hazel::OrthographicCameraController m_CameraController;

    // Temp
    Hazel::Ref<Hazel::VertexArray> m_SquareVA;
    Hazel::Ref<Hazel::Shader> m_FlatColorShader;

    glm::vec4 m_SquareColor = {0.2f, 0.3f, 0.8f, 1.0f};
};

Sandbox/src/Sandbox2D.cpp

c++ 复制代码
#include "Sandbox2D.h"
#include "imgui.h"

#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>

#include "Platform/OpenGL/OpenGLShader.h"

Sandbox2D::Sandbox2D() : Layer("Sandbox2D"), m_CameraController(1280.0f / 720.0f) {
}

void Sandbox2D::OnAttach() {
    m_SquareVA = Hazel::VertexArray::Create();
    float squareVertices[5 * 4] = {
            -0.5, -0.5f, 0.0f,
            0.5, -0.5f, 0.0f,
            0.5, 0.5f, 0.0f,
            -0.5, 0.5f, 0.0f,

    };

    Hazel::Ref<Hazel::VertexBuffer> squareVB;
    squareVB.reset(Hazel::VertexBuffer::Create(squareVertices, sizeof(squareVertices)));
    squareVB->SetLayout({
                                {Hazel::ShaderDataType::Float3, "a_Position"}
                        });
    m_SquareVA->AddVertexBuffer(squareVB);

    uint32_t squareIndices[6] = {0, 1, 2, 2,3, 0};
    Hazel::Ref<Hazel::IndexBuffer> squareIB;
    squareIB.reset(Hazel::IndexBuffer::Create(squareIndices, sizeof(squareIndices) / sizeof(uint32_t)));
    m_SquareVA->SetIndexBuffer(squareIB);

    m_FlatColorShader = Hazel::Shader::Create("../assets/shaders/FlatColor.glsl");
}

void Sandbox2D::OnDetach() {

}

void Sandbox2D::OnUpdate(Hazel::Timestep ts) {
    // Update
    m_CameraController.OnUpdate(ts);

    // Render
    Hazel::RenderCommand::SetClearColor({0.1f, 0.1f, 0.1f, 1.0});
    Hazel::RenderCommand::Clear();

    Hazel::Renderer::BeginScene(m_CameraController.GetCamera());
    m_FlatColorShader->Bind();
    std::dynamic_pointer_cast<Hazel::OpenGLShader>(m_FlatColorShader)->UploadUniformFloat4("u_Color", m_SquareColor);

    Hazel::Renderer::Submit(m_FlatColorShader, m_SquareVA, glm::scale(glm::mat4(1.0f), glm::vec3(1.5f)));
    Hazel::Renderer::EndScene();
}

void Sandbox2D::OnImGuiRender() {
    ImGui::Begin("Settings");
    ImGui::ColorEdit4("Square Color", glm::value_ptr(m_SquareColor));
    ImGui::End();
}

void Sandbox2D::OnEvent(Hazel::Event &e) {
    m_CameraController.OnEvent(e);
}

Sandbox2D中用到了一个shader

Sandbox/assets/shaders/FlatColor.glsl

ini 复制代码
// Flat Color Shader

#type vertex
#version 330 core

layout(location = 0) in vec3 a_Position;

uniform mat4 u_ViewProjection;
uniform mat4 u_Transform;

void main()
{
	gl_Position = u_ViewProjection * u_Transform * vec4(a_Position, 1.0);
}

#type fragment
#version 330 core

layout(location = 0) out vec4 color;

uniform vec4 u_Color;

void main()
{
	color = u_Color;
}

SandboxApp中添加Sandbox2D

注释调之前实现的ExampleLayer,添加S

c++ 复制代码
class Sandbox : public Hazel::Application {
public:
    Sandbox(){
//        PushOverlay(new ExampleLayer());
        PushOverlay(new Renderer2D());
    }

    ~Sandbox()

程序入口调整

一个程序只能有一个main入口,将Hazel.h中的include放到SandBoxApp中

Sandbox/Hazel/src/Hazel.h

c++ 复制代码
// -----Entry Point-------
//#include "Hazel/Core/EntryPoint.h"

#endif //SANBOX_HAZEL_H

另外还调整了一些代码,不一一说明,请参考完整代码。

如果运行正常的话,能看到一个可以操作的矩形:

完整代码 & 总结

完整代码:
github.com/summer-go/H...

相关推荐
技术小甜甜13 小时前
[Godot] 解决导出APK安装失败的常见问题:深入分析与调试方法
游戏引擎·godot·游戏开发
SmalBox16 小时前
【节点】[RGBtoGrayscale节点]原理解析与实际应用
unity3d·游戏开发·图形学
技术小甜甜17 小时前
[Godot][入门] 安装与版本选择:3.x 还是 4.x?(按项目类型一键决策)
游戏引擎·godot·游戏开发·2d
雪弯了眉梢2 天前
OpenGL(八)摄像机(Camera)
算法·图形渲染·opengl
SmalBox2 天前
【节点】[RGBtoLuminance节点]原理解析与实际应用
unity3d·游戏开发·图形学
SmalBox3 天前
【节点】[ColorspaceConversion节点]原理解析与实际应用
unity3d·游戏开发·图形学
_大学牲4 天前
Flutter 勇闯2D像素游戏之路(三):人物与地图元素的交互
flutter·游戏·游戏开发
wonder135794 天前
UGUI重建流程和优化
unity·游戏开发·ugui
SmalBox4 天前
【节点】[Adjustment-WhiteBalance节点]原理解析与实际应用
unity3d·游戏开发·图形学
CreasyChan4 天前
Unity 中的反射使用详解
unity·c#·游戏引擎·游戏开发