游戏引擎从零开始(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...

相关推荐
浪浪山_大橙子21 小时前
被1.4 MB的射击游戏震撼后,我认真拆了一遍Fable的实现
ai编程·游戏开发·three.js
SmalBox1 天前
10-02-实战-Unity原生AssetBundle实战
unity3d·游戏开发
SmalBox2 天前
10-01-实战-环境搭建与集成
unity3d·游戏开发
SmalBox3 天前
09-04-生态-UOS CDN与服务器部署
unity3d·游戏开发
️公子3 天前
可插拔 13 款实时棋牌对战平台实践:房间容器、Plugin SDK 与幂等账本
websocket·typescript·游戏开发·monorepo·插件架构·棋牌平台·实时对战
SmalBox4 天前
09-03-生态-与GameFramework-xAsset等框架集成
unity3d·游戏开发
SmalBox5 天前
09-02-生态-小游戏平台适配
unity3d·游戏开发
ZzT5 天前
vibe coding 做小游戏·玩法重做篇:只留自走棋、去掉羁绊,用电脑自动对局调难度
ai编程·游戏开发
SmalBox5 天前
09-01-生态-YooAsset+HybridCLR热更新方案
unity3d·游戏开发
房西杭7 天前
AttrMgr 属性管理器(传奇MMO Lua服务端)
游戏开发