React與遊戲引擎設計原理的相互印證

前幾年做網頁遊戲,近來改做基於React的單頁應用。雖然這是完全不同的兩種軟件產品,但感覺React和遊戲引擎本身的設計頗有相似之處:

架構層級中的定位

無論是遊戲引擎,還是React,都是作爲核心基礎庫被應用於軟件中。而且,它們的用處都是用於幫助構建圖形用戶界面(GUI)的工具,即視圖層的基礎工具組件。更具體來講就是用於渲染。

組件化

爲方便開發者的工作,React和遊戲引擎都會提供自定義組件的功能,使得重用代碼變得方便,也使得業務邏輯變得更清晰。不過遊戲引擎中的組件往往叫做精靈(sprite)。

圖形緩衝區與虛擬DOM

爲了使界面流暢,遊戲引擎往往有圖形緩衝區,把渲染好的界面緩存進去,真正繪製屏幕的時候從緩衝區讀取。React 也是這樣,不過它緩存的不是像素陣列而是虛擬DOM樹(Virtual DOM)。開發者在業務邏輯代碼中並不直接操控屏幕,業務邏輯狀態的改動影響的是緩衝區。隨後遊戲引擎或React會把它們從緩衝區繪製到屏幕上。

獨立的渲染循環

無論是遊戲引擎還是React都是使用一個獨立於業務邏輯的渲染循環,負責把緩衝區的內容繪製到屏幕上。這個機制最簡單的實現就是使用一個定時任務,比如每秒60次繪製,那麼軟件體現出來就是每秒繪製60幀。然而爲了兼顧流暢性和性能,無論是遊戲引擎還是React都會智能調整幀率,不需要的時候就不繪製。不過由於遊戲動畫多,畫面品質要求高,一般來說需要的幀率會遠高於React應用。

髒區重繪

隨着時間的推移軟件的發展,屏幕像素越來越大,圖形界面上畫的東西越來越多,也越來越複雜,如果完全重繪整個屏幕是很耗時的操作。爲了渲染性能,React 和遊戲引擎都使用了按需繪製的策略,即使用某些算法來檢測改動的區域即髒區,只繪製改動的部分。遊戲引擎檢測的一般是緩存中的位圖哪些區域變化,React則檢測虛擬DOM中哪些節點變化。

目前想到的就這麼多,總結來說就是它們在基本設計原理上都使用了相似的方案,可以相互印證。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章