簡(jiǎn)介

通常情況下，在玩 2D 游戲或渲染 HTML5 畫(huà)布時(shí)，需要執(zhí)行優(yōu)化，以便使用多個(gè)層來(lái)構(gòu)建一個(gè)合成的場(chǎng)景。在 OpenGL 或 WebGL 等低級(jí)別渲染中，通過(guò)逐幀地清理和繪制場(chǎng)景來(lái)執(zhí)行渲染。實(shí)現(xiàn)渲染之后，需要優(yōu)化游戲，以減少渲染的量，所需成本因情況而異。因?yàn)楫?huà)布是一個(gè) DOM 元素，它使您能夠?qū)Χ鄠€(gè)畫(huà)布進(jìn)行分層，以此作為一種優(yōu)化方法。
常用的縮寫(xiě)

•     CSS: Cascading Style Sheets（級(jí)聯(lián)樣式表）
      DOM: Document Object Model（文檔對(duì)象模型）
      HTML: HyperText Markup Language（超文本標(biāo)記語(yǔ)言）

本文將探討對(duì)畫(huà)布進(jìn)行分層的合理性。了解 DOM 設(shè)置，從而實(shí)現(xiàn)分層的畫(huà)布。使用分層進(jìn)行優(yōu)化需要各種實(shí)踐。本文還將探討一些優(yōu)化策略的概念和技術(shù)，它們擴(kuò)展了分層方法。

您可以下載在本文中使用的示例的源代碼。
選擇優(yōu)化策略

選擇最佳優(yōu)化策略可能很難。在選擇分層的場(chǎng)景時(shí)，需要考慮場(chǎng)景是如何組成的。大屏幕上固定物的渲染經(jīng)常需要重用若干個(gè)組件，它們是進(jìn)行研究的極佳候選人。視差或動(dòng)畫(huà)實(shí)體等效果往往需要大量的變化的屏幕空間。在探索您的最佳優(yōu)化策略時(shí)，最好注意這些情況。雖然畫(huà)布的分層優(yōu)化需要采用幾種不同的技術(shù)，但在正確應(yīng)用這些技術(shù)后，往往會(huì)大幅提升性能。
設(shè)置層

在使用分層的方法時(shí)，第一步是在 DOM 上設(shè)置畫(huà)布。通常情況下，這很簡(jiǎn)單，只需定義畫(huà)布元素，將其放入 DOM 中即可，但畫(huà)布層可能需要一些額外的樣式。在使用 CSS 時(shí)，成功地實(shí)現(xiàn)畫(huà)布分層有兩個(gè)要求：

    各畫(huà)布元素必須共存于視區(qū) (viewport) 的同一位置上。
    每個(gè)畫(huà)布在另一個(gè)畫(huà)布下面必須是可見(jiàn)的。

圖 1顯示了層設(shè)置背后的通用重疊概念。
圖 1. 層示例

設(shè)置層的步驟如下：

•     將畫(huà)布元素添加到 DOM。
      添加畫(huà)布元素定位樣式，以便支持分層。
      樣式化畫(huà)布元素，以便生成一個(gè)透明的背景。

設(shè)置畫(huà)布重疊堆棧

在 CSS 中創(chuàng)建一個(gè)重疊堆棧 (overlay stack) 可能需要少量的樣式。使用 HTML 和 CSS 有許多方法進(jìn)行重疊。本文中的示例使用一個(gè)<div>標(biāo)簽來(lái)包含畫(huà)布。<div>標(biāo)簽指定了一個(gè)惟一 ID，它將樣式應(yīng)用于其子 HTML5 畫(huà)布元素，如清單 1所示。
清單 1. 畫(huà)布定位樣式
 

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表