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

相关推荐
foxgod2 天前
qt + opengl 给立方体增加阴影
qt·opengl·光照
Thomas游戏开发7 天前
Unity3D游戏排行榜制作与优化技术详解
前端框架·unity3d·游戏开发
山东布谷科技官方7 天前
小游戏源码开发之可跨app软件对接是如何设计和开发的
游戏开发·游戏源码·小游戏开发·小游戏源码·直播间小游戏·语音房小游戏
Thomas游戏开发9 天前
Unity3D 架构师如何处理大世界地图技术详解
前端框架·unity3d·游戏开发
Thomas游戏开发9 天前
Unity3D MMORPG 任务系统的架构与设计详解
前端框架·unity3d·游戏开发
YxVoyager9 天前
OpenGL学习笔记(十二):初级光照:投光物/多光源(平行光、点光源、聚光)
c++·图形渲染·opengl
逝水流光10 天前
Canvas系列(20):画布中画满圆
前端·游戏开发·canvas
用户7418835239313 天前
4、LibGDX 游戏循环:深入理解与实现
游戏开发·libgdx
charon877816 天前
Games202Lecture 6 Real-time Environment Mapping
图形学
Winston-Tao20 天前
skynet 源码阅读 -- 核心概念服务 skynet_context
lua·游戏开发·c 语言·skynet·游戏服务器框架