iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
自我挑戰組

翻車機率極高的2D平台遊戲(2D Platformer)製作系列 第 22

[Day 22] 2D批次渲染 (三) - 終於找到問題了

  • 分享至 

  • twitterImage
  •  

今日目標

  • [Debug] 批次渲染
  • DrawLine

終於找到問題在哪了...

終於找到問題在哪裡,有兩個地方寫錯了

頂點顏色的buffer size不正確

RenderCurrentBatch的地方,渲染之前會把要畫得頂點座標送給GPU,這裡面,我是把三種點點書屬性都拆開,然後,在顏色那邊vertex_buffer.colors那邊的size數量寫錯了他是Vector4(RGBA),但給的大小是Vector2

// 錯誤
    glBufferSubData(GL_ARRAY_BUFFER, 0, CONTEXT.RenderState.vertex_buffer.colors_count * sizeof(V2f), CONTEXT.RenderState.vertex_buffer.colors);

// 修正
    glBufferSubData(GL_ARRAY_BUFFER, 0, CONTEXT.RenderState.vertex_buffer.colors_count * sizeof(V4f), CONTEXT.RenderState.vertex_buffer.colors);

綁定貼圖(Texture)的參數,呼叫錯誤

一樣是在RenderCurrentBatch那邊,綁定「使用哪一張貼圖」的地方,原本是長這樣

glBindTexture(GL_TEXTURE0, CONTEXT.RenderState.default_texture.id);

要改成這樣,才是把綁定當前貼圖

glBindTexture(GL_TEXTURE_2D, CONTEXT.RenderState.default_texture.id);

DrawLine

終於,可以還一個欠了一段時間的債(奇怪,明明只過了3天,怎麼感覺過了很久@@),實作這個功能,直接上code

void DrawLine(V2f p0, V2f p1, int thinkness, Color c) {
    V2f delta = V2fSub(p1, p0);
    float len = V2fLen(delta);

    float scale = thinkness / (len * 2);
    V2f p = { -scale * delta.y, scale * delta.x };

    V2f top_right = { p1.x + p.x, p1.y + p.y };
    V2f bottom_right = { p1.x - p.x, p1.y - p.y };
    V2f top_left = { p0.x + p.x, p0.y + p.y };
    V2f bottom_left = { p0.x - p.x, p0.y - p.y };

    PushVertexData(top_right, top_left, bottom_right, bottom_left, c);
}

會這樣設計是因為我把線段視為有厚度的矩形這樣就可以跟其他的矩形,或是之後的貼圖、貼圖動畫用同一個buffer與初始化好的EBO(儲存頂點索引的陣列)。

在實作裡面有用到一點小小的數學,當中V2f p是利用點積算出來的,先只看p0,如果要有厚度的,假設要畫出一條水平線,那需要對p0.y加減thickness / 2的量,如果是單純水平或垂直還好,但斜率在(0, 1)區間,的有些麻煩了,所以用了點積算出與該p0到p1的線段,點積為0(也就是垂直)的差值,就可以實際求出四個頂點座標了。

關於之前說過繪製不同的多邊形...

批次渲染還有很多沒完成的,例如: 使用不同的貼圖、紋理(Texture Atlas),或許會先開始執著手文字渲染的部分,這個就會牽扯到圖集使用的部分。

關於之前說過繪製不同的多邊形,這個是為了Debug與驗證SAT碰撞偵測做的,最近想了想或許以要完成2D Platformer來說,單純的AABB就很夠用了,如果不會有實際的物理反饋的化,不應該直接先停在這邊,先已完成最小功能為目標才對(在平台上跑跑跳跳)。

今天就先這樣,Codeu一樣上傳到github


上一篇
[Day 21] 2D批次渲染 (三) - Bug!一堆Bug
下一篇
[Day23] 字形渲染(Text Rendering) - 載入字形
系列文
翻車機率極高的2D平台遊戲(2D Platformer)製作33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言