縮放：Matrix4x4與Shader實戰(zhàn))
1. 項目概述當(dāng)棋盤上的棋子需要“呼吸感”在開發(fā)2D棋盤類游戲比如自走棋、戰(zhàn)棋或者一些策略游戲時我們經(jīng)常會用到Unity的Tilemap系統(tǒng)來構(gòu)建規(guī)整的網(wǎng)格地圖。Tilemap高效、易用是處理網(wǎng)格化地圖的不二之選。但不知道你有沒有遇到過這樣的需求當(dāng)玩家選中一個單位棋子或者某個單位觸發(fā)特殊狀態(tài)如“巨大化”、“強(qiáng)化”時你希望這個棋子能有一個醒目的、動態(tài)的縮放效果以增強(qiáng)視覺反饋和游戲表現(xiàn)力。最初你可能會想到直接去修改這個棋子Tile的Transform.localScale。這很直觀對吧但在Tilemap的世界里事情沒那么簡單。Tilemap中的每個瓦片Tile并不是一個獨(dú)立的GameObject它們是由Tilemap Renderer批量渲染的。你無法直接獲取并修改其中某一個特定位置瓦片的Transform。直接修改整個Tilemap的縮放又會影響到棋盤上所有的格子這顯然不是我們想要的。那么如何精準(zhǔn)地控制棋盤上某一個特定格子里“棋子”的大小呢這就是本次實戰(zhàn)要解決的核心問題。我們將深入Tilemap的渲染底層借助Matrix4x4四維矩陣這個強(qiáng)大的數(shù)學(xué)工具實現(xiàn)針對單個或多個瓦片的動態(tài)縮放。這種方法不依賴額外的GameObject性能開銷極低并且能與Tilemap系統(tǒng)無縫集成是實現(xiàn)高級棋盤游戲視覺效果的關(guān)鍵技巧。2. 核心原理Matrix4x4與自定義瓦片渲染要理解解決方案我們得先拆解一下Unity Tilemap的渲染流程。Tilemap Renderer在繪制每一個瓦片時并不是簡單地把一張圖片貼上去。對于每一個瓦片單元系統(tǒng)內(nèi)部會計算一個“變換矩陣”這個矩陣決定了這個瓦片最終在世界空間中的位置、旋轉(zhuǎn)和縮放。默認(rèn)情況下這個矩陣只包含位置信息即該瓦片在網(wǎng)格中的坐標(biāo)縮放和旋轉(zhuǎn)都是單位值即1和0。Matrix4x4是計算機(jī)圖形學(xué)中用于描述線性變換平移、旋轉(zhuǎn)、縮放、錯切等的標(biāo)準(zhǔn)工具。在Unity中一個Matrix4x4可以完整定義一個從局部空間到世界空間的變換。我們的突破口就在這里我們可以為Tilemap中指定的瓦片替換掉它默認(rèn)的變換矩陣注入一個包含了自定義縮放甚至旋轉(zhuǎn)信息的新矩陣。2.1 技術(shù)選型為何是Matrix4x4你可能會問還有其他方法嗎比如在Tile上疊加一個SpriteRenderer的GameObject這能解決問題但破壞了Tilemap的批處理優(yōu)勢當(dāng)棋子數(shù)量成百上千時Draw Call會暴增性能堪憂。使用Tilemap的Animation Tile可以制作縮放動畫但這是預(yù)定義的、靜態(tài)的很難根據(jù)游戲邏輯如選中、Buff狀態(tài)進(jìn)行動態(tài)、實時的控制。修改Tile的Sprite換成一張更大的圖片這不夠靈活無法實現(xiàn)平滑的過渡動畫。相比之下使用Matrix4x4修改渲染矩陣的方案具有顯著優(yōu)勢高性能它仍在Tilemap的渲染管線內(nèi)享受合批優(yōu)化僅增加了極少的CPU計算開銷。高靈活度縮放值scale可以隨時通過代碼動態(tài)計算和修改輕松實現(xiàn)動畫、插值。功能強(qiáng)大矩陣不僅能處理縮放稍加擴(kuò)展就能支持以任意點(diǎn)為中心的旋轉(zhuǎn)為游戲特效如攻擊旋轉(zhuǎn)、眩暈效果打開大門。注意這種方法本質(zhì)上是“欺騙”渲染器。Tilemap的碰撞體Tilemap Collider 2D和網(wǎng)格坐標(biāo)cell位置不會因為我們的矩陣變換而改變。一個被放大了2倍的棋子其邏輯位置和碰撞邊界仍然在原單元格內(nèi)。這是需要特別注意的我們會在后續(xù)章節(jié)討論如何同步處理邏輯與視覺。2.2 Matrix4x4基礎(chǔ)構(gòu)造一個縮放矩陣一個標(biāo)準(zhǔn)的縮放矩陣非常簡單。假設(shè)我們要在X軸和Y軸上進(jìn)行均勻縮放縮放系數(shù)為s那么對應(yīng)的4x4矩陣如下[ s, 0, 0, 0 ] [ 0, s, 0, 0 ] [ 0, 0, s, 0 ] [ 0, 0, 0, 1 ]在Unity中我們可以使用Matrix4x4.Scale(Vector3 scale)這個便捷方法來創(chuàng)建縮放矩陣。例如Matrix4x4.Scale(new Vector3(2f, 2f, 1f))會創(chuàng)建一個在XY平面放大2倍的矩陣Z軸保持1因為我們是2D。然而僅僅有縮放矩陣還不夠。這個縮放是以世界原點(diǎn)為中心的。如果我們直接應(yīng)用棋子會從網(wǎng)格原點(diǎn)開始放大位置就錯亂了。因此我們需要的是一個“平移-縮放-平移回”的復(fù)合變換也就是以棋子自身中心點(diǎn)為縮放原點(diǎn)。先將棋子“平移”到世界原點(diǎn)減去其單元格中心位置。在世界原點(diǎn)進(jìn)行縮放。再“平移”回原來的位置。這個過程用矩陣乘法表示就是T * S * T_inv。在Unity中我們可以通過Matrix4x4.TRS方法一次性創(chuàng)建這個復(fù)合矩陣。TRS代表Translation平移、Rotation旋轉(zhuǎn)、Scale縮放。// 假設(shè)cellPosition是世界空間中某個單元格的中心點(diǎn)坐標(biāo) Vector3 cellCenterWorldPos tilemap.GetCellCenterWorld(cellPosition); float scaleFactor 2.0f; Matrix4x4 customMatrix Matrix4x4.TRS( cellCenterWorldPos, // 平移位置縮放后的位置其實最終位置沒變但TRS內(nèi)部會處理 Quaternion.identity, // 旋轉(zhuǎn)無 new Vector3(scaleFactor, scaleFactor, 1f) // 縮放 ); // 這里需要理解TRS中的平移參數(shù)是指執(zhí)行完縮放和旋轉(zhuǎn)后物體最終的原點(diǎn)位置。 // 對于以自身中心縮放位置參數(shù)就是cellCenterWorldPos縮放中心自然就是該位置。3. 實戰(zhàn)架構(gòu)自定義Tile與渲染器拓展理解了原理我們來搭建實現(xiàn)框架。我們不會直接修改Unity內(nèi)置的Tilemap渲染流程而是通過創(chuàng)建一個自定義的Tile類和一個配套的Tilemap渲染器拓展腳本來協(xié)作完成。3.1 創(chuàng)建可縮放瓦片ScalableTile首先我們需要一種特殊的Tile它能夠攜帶一個“縮放系數(shù)”的信息。Unity允許我們創(chuàng)建繼承自TileBase的自定義Tile類。using UnityEngine; using UnityEngine.Tilemaps; [CreateAssetMenu(fileName New Scalable Tile, menuName 2D/Tiles/Scalable Tile)] public class ScalableTile : TileBase { public Sprite sprite; // 瓦片顯示的精靈 public Color color Color.white; // 顏色 [Range(0.1f, 5f)] public float baseScale 1.0f; // 基礎(chǔ)縮放用于在編輯器中調(diào)整大小 // 注意這個baseScale是編輯器用的運(yùn)行時動態(tài)縮放由另一個系統(tǒng)控制。 public override void GetTileData(Vector3Int position, ITilemap tilemap, ref TileData tileData) { // 這是TileBase的核心方法用于向Tilemap提供渲染數(shù)據(jù)。 tileData.sprite sprite; tileData.color color; tileData.flags TileFlags.LockColor; // 鎖定顏色避免被Tilemap覆蓋 tileData.colliderType Tile.ColliderType.Sprite; // 設(shè)置碰撞體類型 // 這里不直接設(shè)置transform因為我們需要每幀動態(tài)計算。 } }這個ScalableTile和普通Tile幾乎一樣只是多了一個baseScale用于在Unity編輯器里預(yù)設(shè)一個大小。真正的動態(tài)縮放系數(shù)不會存儲在這里因為Tile是ScriptableObject資產(chǎn)同一資產(chǎn)被多個格子使用時修改其字段會影響所有實例。動態(tài)數(shù)據(jù)應(yīng)該存儲在運(yùn)行時腳本中。3.2 核心控制器TileScaleController我們將創(chuàng)建一個名為TileScaleController的MonoBehaviour腳本把它掛載到你的Tilemap GameObject上。它是整個縮放系統(tǒng)的大腦負(fù)責(zé)管理哪些格子上的棋子需要縮放以及縮放倍數(shù)。在每幀渲染前將計算好的變換矩陣設(shè)置給Tilemap。using System.Collections.Generic; using UnityEngine; using UnityEngine.Tilemaps; public class TileScaleController : MonoBehaviour { private Tilemap _targetTilemap; private DictionaryVector3Int, float _scaleData new DictionaryVector3Int, float(); private DictionaryVector3Int, Matrix4x4 _matrixCache new DictionaryVector3Int, Matrix4x4(); private bool _isDirty false; // 標(biāo)記數(shù)據(jù)是否變化用于優(yōu)化 void Start() { _targetTilemap GetComponentTilemap(); if (_targetTilemap null) { Debug.LogError(TileScaleController must be attached to a GameObject with a Tilemap component.); enabled false; return; } // 關(guān)鍵訂閱Tilemap在發(fā)送給渲染器之前的事件 _targetTilemap.GetComponentTilemapRenderer().RegisterSpriteBatchCallback(UpdateTileMatrices); } void OnDestroy() { if (_targetTilemap ! null) { var renderer _targetTilemap.GetComponentTilemapRenderer(); if (renderer ! null) { renderer.UnregisterSpriteBatchCallback(UpdateTileMatrices); } } } // 公共方法設(shè)置或更新某個格子的縮放 public void SetTileScale(Vector3Int cellPosition, float scale) { if (_targetTilemap null) return; // 檢查該位置是否是我們定義的可縮放Tile TileBase tile _targetTilemap.GetTile(cellPosition); if (!(tile is ScalableTile)) return; scale Mathf.Max(0.1f, scale); // 防止縮放過小 if (_scaleData.ContainsKey(cellPosition)) { if (Mathf.Approximately(_scaleData[cellPosition], scale)) return; _scaleData[cellPosition] scale; } else { _scaleData.Add(cellPosition, scale); } _isDirty true; // 標(biāo)記數(shù)據(jù)已更新 _matrixCache.Remove(cellPosition); // 清除該位置的緩存矩陣下次重新計算 } // 公共方法獲取某個格子的縮放 public float GetTileScale(Vector3Int cellPosition) { return _scaleData.TryGetValue(cellPosition, out float scale) ? scale : 1.0f; } // 公共方法清除某個格子的縮放恢復(fù)為1 public void ClearTileScale(Vector3Int cellPosition) { if (_scaleData.Remove(cellPosition)) { _isDirty true; _matrixCache.Remove(cellPosition); } } // 核心回調(diào)在Tilemap渲染前被調(diào)用用于注入自定義矩陣 private void UpdateTileMatrices(SpriteBatch spriteBatch) { if (!_isDirty _matrixCache.Count 0) return; // 數(shù)據(jù)無變化且已有緩存跳過 // 獲取Tilemap內(nèi)部用于渲染的“區(qū)塊”數(shù)據(jù) var chunkData spriteBatch.GetChunkData(); // 這里是一個簡化說明。實際我們需要遍歷所有受影響的格子。 // 更高效的實現(xiàn)是只更新_isDirty為true時涉及的格子。 // 以下為概念性循環(huán) foreach (var kvp in _scaleData) { Vector3Int cell kvp.Key; float scale kvp.Value; if (scale 1.0f) continue; // 縮放為1無需特殊處理 // 計算世界空間中心點(diǎn) Vector3 worldPos _targetTilemap.GetCellCenterWorld(cell); // 創(chuàng)建以自身為中心縮放的變換矩陣 Matrix4x4 customMatrix Matrix4x4.TRS( worldPos, Quaternion.identity, new Vector3(scale, scale, 1f) ); // 關(guān)鍵步驟將這個自定義矩陣設(shè)置給這個格子對應(yīng)的渲染數(shù)據(jù)。 // 我們需要找到spriteBatch中對應(yīng)這個cell的渲染項。 // 此處涉及對SpriteBatch內(nèi)部數(shù)據(jù)的查找和修改需要用到更底層的方法。 _matrixCache[cell] customMatrix; // 緩存起來 // 實際設(shè)置矩陣的代碼需要在SpriteBatch的API中操作見下一節(jié) } _isDirty false; } }上面的代碼勾勒出了框架但最關(guān)鍵的一步——UpdateTileMatrices中如何將矩陣設(shè)置給渲染器——我們用了注釋。因為直接操作SpriteBatch是相對底層的操作Unity的公開API沒有直接提供這個方法。我們需要用到反射或者自定義Shader來實現(xiàn)。這里提供兩種主流且更實用的實現(xiàn)路徑。4. 完整代碼實現(xiàn)兩種實戰(zhàn)方案由于直接通過C#代碼注入矩陣到內(nèi)置渲染流程比較晦澀我提供兩種經(jīng)過實踐驗證、更清晰的方案。方案一利用MaterialPropertyBlock方案二使用自定義渲染通道。4.1 方案一使用MaterialPropertyBlock傳遞縮放數(shù)據(jù)推薦這個方案的核心思想是不直接修改每個瓦片的變換矩陣而是通過Shader根據(jù)瓦片的世界位置動態(tài)計算縮放。我們在控制器里計算好每個需要縮放的格子的“縮放值”和“位置”然后通過MaterialPropertyBlock以數(shù)組形式傳遞給Tilemap的材質(zhì)。Shader根據(jù)當(dāng)前渲染的像素是否在目標(biāo)格子范圍內(nèi)來決定是否應(yīng)用縮放。步驟1修改TileScaleControllerusing System.Collections.Generic; using UnityEngine; using UnityEngine.Tilemaps; public class TileScaleController : MonoBehaviour { public Tilemap targetTilemap; private MaterialPropertyBlock _propertyBlock; private static readonly int ScaleDataArrayID Shader.PropertyToID(_ScaleData); private static readonly int ScaleDataLengthID Shader.PropertyToID(_ScaleDataLength); private static readonly int CellSizeID Shader.PropertyToID(_CellSize); [System.Serializable] public struct TileScaleInfo { public Vector3 worldPosition; // 格子中心世界坐標(biāo) public float scale; } public ListTileScaleInfo activeScaledTiles new ListTileScaleInfo(); private DictionaryVector3Int, int _tileIndexMap new DictionaryVector3Int, int(); void Start() { if (targetTilemap null) targetTilemap GetComponentTilemap(); _propertyBlock new MaterialPropertyBlock(); targetTilemap.GetPropertyBlock(_propertyBlock); // 獲取現(xiàn)有的 UpdateShaderData(); } void Update() { // 每幀更新MaterialPropertyBlock確保數(shù)據(jù)同步 if (targetTilemap.HasPropertyBlock()) { targetTilemap.GetPropertyBlock(_propertyBlock); } UpdateShaderData(); targetTilemap.SetPropertyBlock(_propertyBlock); } public void SetTileScale(Vector3Int cellPosition, float scale) { Vector3 worldPos targetTilemap.GetCellCenterWorld(cellPosition); if (_tileIndexMap.TryGetValue(cellPosition, out int index)) { // 更新已有項 var info activeScaledTiles[index]; info.scale scale; activeScaledTiles[index] info; } else { // 新增項 activeScaledTiles.Add(new TileScaleInfo { worldPosition worldPos, scale scale }); _tileIndexMap[cellPosition] activeScaledTiles.Count - 1; } } public void ClearTileScale(Vector3Int cellPosition) { if (_tileIndexMap.TryGetValue(cellPosition, out int index)) { // 簡單做法將縮放設(shè)為1而不是移除避免數(shù)組索引錯亂。 // 更健壯的做法是使用List并管理索引這里為簡化用前者。 var info activeScaledTiles[index]; info.scale 1.0f; activeScaledTiles[index] info; _tileIndexMap.Remove(cellPosition); } } private void UpdateShaderData() { if (_propertyBlock null) return; // 將List數(shù)據(jù)轉(zhuǎn)換為Shader能接受的數(shù)組 Vector4[] scaleDataArray new Vector4[activeScaledTiles.Count]; for (int i 0; i activeScaledTiles.Count; i) { var info activeScaledTiles[i]; // Vector4的xyzw存儲: (世界位置.x, 世界位置.y, 縮放, 0) scaleDataArray[i] new Vector4(info.worldPosition.x, info.worldPosition.y, info.scale, 0); } _propertyBlock.SetVectorArray(ScaleDataArrayID, scaleDataArray); _propertyBlock.SetInt(ScaleDataLengthID, scaleDataArray.Length); // 傳遞格子大小用于在Shader中判斷像素屬于哪個格子 Vector3 cellSize targetTilemap.cellSize; _propertyBlock.SetVector(CellSizeID, new Vector4(cellSize.x, cellSize.y, 0, 0)); } }步驟2編寫自定義ShaderUnlit Shader Graph 或 Surface Shader這里以Shader Graph為例說明原理。你需要創(chuàng)建一個Unlit Shader Graph。暴露參數(shù)在Graph的Blackboard中創(chuàng)建三個屬性_ScaleData(類型Vector4 Array)_ScaleDataLength(類型Integer)_CellSize(類型Vector2)流程設(shè)計獲取像素世界位置使用Position節(jié)點(diǎn)空間選擇World。循環(huán)判斷使用For Loop節(jié)點(diǎn)循環(huán)次數(shù)為_ScaleDataLength。在循環(huán)體內(nèi)通過Array Element節(jié)點(diǎn)用循環(huán)的Index獲取_ScaleData數(shù)組中的一項一個Vector4。從該項中提取.xy作為目標(biāo)格子中心世界坐標(biāo)提取.z作為縮放系數(shù)。計算當(dāng)前像素世界位置與目標(biāo)格子中心的絕對距離Absolute(Distance)。判斷這個距離是否小于半個格子大小_CellSize * 0.5。這里可以稍微加點(diǎn)容差。如果判斷為真則說明當(dāng)前像素位于需要縮放的格子內(nèi)。我們可以計算一個基于距離的平滑權(quán)重可選然后利用這個權(quán)重對UV坐標(biāo)進(jìn)行反向縮放因為放大圖像實際是縮小UV采樣范圍或者更直接地計算一個偏移向量。應(yīng)用UV變換將計算出的UV偏移或縮放因子應(yīng)用到Texture Sample節(jié)點(diǎn)的UV輸入上。實操心得在Shader中精確匹配格子邊界可能因為浮點(diǎn)數(shù)精度產(chǎn)生接縫。一個常見的技巧是在判斷時使用step或smoothstep函數(shù)并給予一個很小的容差值如0.01或者直接基于像素世界位置對齊到網(wǎng)格坐標(biāo)再進(jìn)行判斷這樣更精確。方案一優(yōu)缺點(diǎn)優(yōu)點(diǎn)邏輯清晰與Tilemap標(biāo)準(zhǔn)渲染流程兼容性好不需要深入底層渲染API。缺點(diǎn)需要在Shader中做每像素的距離判斷如果需要縮放的格子很多可能會增加Shader計算復(fù)雜度。傳遞數(shù)組有長度限制具體取決于平臺和Unity版本。4.2 方案二使用CommandBuffer進(jìn)行后期縮放更靈活方案二思路完全不同我們不在Tilemap渲染時修改每個瓦片而是在整個Tilemap渲染到一張中間紋理后再通過一個后期處理對紋理上特定的區(qū)域?qū)?yīng)棋盤格子進(jìn)行縮放。這更像一個全屏后處理效果但只針對特定坐標(biāo)。步驟1創(chuàng)建縮放后期處理腳本using UnityEngine; using UnityEngine.Rendering; public class TileScalePostProcessing : MonoBehaviour { public TileScaleController scaleController; // 關(guān)聯(lián)之前的控制器 public Material scaleMaterial; // 一個特殊的材質(zhì)用于屏幕局部縮放 private CommandBuffer _commandBuffer; private Camera _mainCamera; void OnEnable() { _mainCamera Camera.main; if (_mainCamera null) return; _commandBuffer new CommandBuffer { name Tile Scale Overlay }; // 假設(shè)scaleMaterial有一個Pass它能讀取_ScaledTiles等紋理并做處理 // 這里需要scaleController把縮放格子信息渲染到一張RenderTexture上 _commandBuffer.Blit(null, BuiltinRenderTextureType.CameraTarget, scaleMaterial); _mainCamera.AddCommandBuffer(CameraEvent.AfterForwardOpaque, _commandBuffer); } void OnDisable() { if (_mainCamera ! null _commandBuffer ! null) { _mainCamera.RemoveCommandBuffer(CameraEvent.AfterForwardOpaque, _commandBuffer); } _commandBuffer?.Release(); } void Update() { // 每幀更新scaleMaterial所需的參數(shù)例如傳遞scaleController.activeScaledTiles數(shù)組 if (scaleMaterial ! null scaleController ! null) { // 將縮放信息位置、縮放值打包到一個Texture2D或ComputeBuffer傳遞給Shader // 這部分是數(shù)據(jù)傳輸?shù)木唧w實現(xiàn)略復(fù)雜 } } }步驟2編寫后期處理Shader這個Shader是一個全屏Shader。它接收一張由Tilemap渲染的_MainTex即Camera的源紋理。一個包含了所有縮放格子信息位置、半徑、縮放強(qiáng)度的緩沖區(qū)。在Fragment Shader中對于每一個屏幕像素將其UV轉(zhuǎn)換為世界坐標(biāo)。遍歷所有縮放格子信息。如果該像素在世界坐標(biāo)上位于某個縮放格子的影響范圍內(nèi)則計算一個新的UV坐標(biāo)。這個新UV是相對于該格子中心進(jìn)行縮放的(originalUV - centerUV) / scale centerUV。用新的UV去采樣_MainTex得到縮放后的顏色。方案二優(yōu)缺點(diǎn)優(yōu)點(diǎn)極其靈活可以實現(xiàn)各種復(fù)雜的屏幕空間變形效果不局限于Tilemap任何SpriteRenderer都能生效。性能開銷相對恒定與屏幕分辨率相關(guān)與縮放格子數(shù)量關(guān)系不大。缺點(diǎn)實現(xiàn)更復(fù)雜涉及CommandBuffer、RenderTexture管理需要處理渲染順序和透明混合問題。如果多個物體疊加后期處理可能難以區(qū)分層級。4.3 方案選擇與代碼整合建議對于大多數(shù)2D棋盤游戲方案一MaterialPropertyBlock Shader是更推薦的選擇。它更貼近Tilemap的渲染本質(zhì)性能可預(yù)測且不會引入后期處理可能帶來的渲染順序問題。方案二更適合需要全局、非線性變形特效的場景。這里給出方案一的簡化版整合示例假設(shè)我們使用一個預(yù)設(shè)好的Shader它已經(jīng)實現(xiàn)了根據(jù)_ScaleDataArray進(jìn)行格子內(nèi)縮放的功能。// 附加到Tilemap上的完整控制器簡化版 using System.Collections.Generic; using UnityEngine; using UnityEngine.Tilemaps; [RequireComponent(typeof(Tilemap))] public class SimpleTileScaleController : MonoBehaviour { public Material scaledTileMaterial; // 使用了我們自定義Shader的材質(zhì)球 private Tilemap _tilemap; private MaterialPropertyBlock _mpb; private ListVector4 _scaleDataList new ListVector4(); private int _scaleDataID; private int _dataLengthID; void Awake() { _tilemap GetComponentTilemap(); _mpb new MaterialPropertyBlock(); _scaleDataID Shader.PropertyToID(_ScaleData); _dataLengthID Shader.PropertyToID(_DataLength); // 確保Tilemap使用我們的特殊材質(zhì) var renderer _tilemap.GetComponentTilemapRenderer(); if (scaledTileMaterial ! null) { renderer.material scaledTileMaterial; } } void LateUpdate() { UpdatePropertyBlock(); } public void AddOrUpdateScale(Vector3Int cell, float scale) { Vector3 worldPos _tilemap.GetCellCenterWorld(cell); // 查找是否已存在 for(int i 0; i _scaleDataList.Count; i) { Vector4 data _scaleDataList[i]; if (Vector2.Distance(new Vector2(data.x, data.y), new Vector2(worldPos.x, worldPos.y)) 0.1f) { data.z scale; _scaleDataList[i] data; return; } } // 新增 _scaleDataList.Add(new Vector4(worldPos.x, worldPos.y, scale, 0)); } public void RemoveScale(Vector3Int cell) { Vector3 worldPos _tilemap.GetCellCenterWorld(cell); for (int i _scaleDataList.Count - 1; i 0; i--) { Vector4 data _scaleDataList[i]; if (Vector2.Distance(new Vector2(data.x, data.y), new Vector2(worldPos.x, worldPos.y)) 0.1f) { _scaleDataList.RemoveAt(i); break; } } } private void UpdatePropertyBlock() { if (_tilemap null) return; _tilemap.GetPropertyBlock(_mpb); _mpb.SetInt(_dataLengthID, _scaleDataList.Count); if (_scaleDataList.Count 0) { _mpb.SetVectorArray(_scaleDataID, _scaleDataList.ToArray()); } _tilemap.SetPropertyBlock(_mpb); } }這個簡化版在LateUpdate中持續(xù)更新屬性塊。在實際項目中你應(yīng)該在縮放值發(fā)生變化時才調(diào)用UpdatePropertyBlock()以避免不必要的每幀更新。5. 應(yīng)用場景與效果擴(kuò)展實現(xiàn)了基礎(chǔ)縮放后你可以輕松地將它融入到游戲邏輯中創(chuàng)造出豐富的交互效果。5.1 動態(tài)交互效果棋子選中高亮當(dāng)玩家點(diǎn)擊或鼠標(biāo)懸停在一個單位上時調(diào)用SetTileScale(cell, 1.2f)使其微微放大配合顏色變化提示選中狀態(tài)。取消選中時調(diào)用ClearTileScale。// 在玩家的輸入控制腳本中 void HandleClick(Vector3 worldPos) { Vector3Int cell _gameGridTilemap.WorldToCell(worldPos); if (IsValidUnitCell(cell)) { // 先清除上一個選中的 if (_lastSelectedCell ! null) _scaleController.ClearTileScale(_lastSelectedCell.Value); // 放大當(dāng)前選中的 _scaleController.SetTileScale(cell, 1.2f); _lastSelectedCell cell; } }技能范圍指示器當(dāng)玩家選擇一個技能時計算出技能影響的范圍格子列表然后遍歷這些格子將其中的棋子瓦片放大并改變顏色通過修改Tilemap的SetColor或Shader中的顏色參數(shù)清晰展示作用目標(biāo)。public void HighlightArea(ListVector3Int areaCells, float scale, Color tintColor) { foreach (var cell in areaCells) { _scaleController.SetTileScale(cell, scale); _tilemap.SetColor(cell, tintColor); // 同時修改顏色 } }狀態(tài)變化反饋當(dāng)單位獲得“巨大化”Buff時持續(xù)將其縮放設(shè)為1.5f當(dāng)處于“縮小”Debuff時設(shè)為0.8f。Buff結(jié)束時恢復(fù)為1.0f。5.2 結(jié)合動畫系統(tǒng)單純的跳變縮放會很生硬。我們可以結(jié)合Mathf.Lerp或DOTween等動畫插件實現(xiàn)平滑的縮放動畫。using DG.Tweening; // 使用DOTween插件 public void AnimateTileScale(Vector3Int cell, float targetScale, float duration) { float currentScale _scaleController.GetTileScale(cell); DOTween.To(() currentScale, x _scaleController.SetTileScale(cell, x), targetScale, duration) .SetEase(Ease.OutBack); // 添加一個回彈效果 }這樣棋子的放大縮小就會帶有平滑的動畫視覺體驗大幅提升。5.3 視覺與邏輯的同步問題正如之前提到的這只是視覺縮放。棋子的邏輯位置cell和碰撞體如果Tilemap Collider 2D使用了此瓦片并沒有改變。這通常是我們期望的——棋子邏輯上還在那個格子里只是看起來大了。但有些情況下你需要同步自定義碰撞檢測如果你需要根據(jù)放大后的視覺大小進(jìn)行更精確的碰撞如鼠標(biāo)點(diǎn)選你不能再依賴格子坐標(biāo)。你需要根據(jù)縮放后的瓦片世界邊界單元格中心 ± (單元格大小 * 縮放系數(shù) / 2)來進(jìn)行自定義的物理檢測如Physics2D.OverlapPoint。UI附著如果棋子頭頂有血條、名字等UI你需要讓UI跟隨棋子視覺中心移動。這時需要計算縮放后瓦片的視覺中心世界坐標(biāo)它其實和邏輯中心GetCellCenterWorld是一樣的因為我們是均勻縮放。但如果你未來實現(xiàn)了非均勻縮放或旋轉(zhuǎn)就需要用矩陣變換去計算頂點(diǎn)的世界位置了。6. 性能優(yōu)化與常見問題排查6.1 性能優(yōu)化要點(diǎn)減少每幀更新只在縮放數(shù)據(jù)真正發(fā)生變化時更新MaterialPropertyBlock或CommandBuffer。使用_isDirty這樣的標(biāo)志位來控制?？刂茢?shù)據(jù)量方案一中傳遞給Shader的數(shù)組不宜過大。如果一屏內(nèi)需要動態(tài)縮放的棋子很多比如超過50個需要考慮分幀更新或使用更高效的數(shù)據(jù)結(jié)構(gòu)如ComputeBuffer。Shader優(yōu)化在Shader的循環(huán)中盡早使用break一旦找到匹配的格子就跳出循環(huán)?？紤]將格子信息按照空間分區(qū)如網(wǎng)格傳遞給Shader減少每個像素需要遍歷的數(shù)量。對于移動設(shè)備復(fù)雜的逐像素判斷可能會成為瓶頸需進(jìn)行性能測試。批處理破壞使用MaterialPropertyBlock本身不會破壞Tilemap的靜態(tài)合批但如果你為Tilemap設(shè)置了不同的材質(zhì)實例material instance則可能會造成批處理中斷。確保所有使用此縮放系統(tǒng)的Tilemap盡量共享材質(zhì)實例。6.2 常見問題與解決方案問題1縮放后瓦片邊緣出現(xiàn)接縫或閃爍。原因Shader中判斷像素是否屬于某個格子的邏輯不精確存在浮點(diǎn)數(shù)誤差導(dǎo)致邊緣像素在“屬于”和“不屬于”之間搖擺。解決在距離判斷時增加一個小的容差epsilon例如0.005?；蛘吒€(wěn)健的方法是將像素的世界坐標(biāo)反向轉(zhuǎn)換為單元格坐標(biāo)WorldToCell然后判斷該單元格坐標(biāo)是否在需要縮放的列表中這樣判斷是離散且精確的。但這需要在Shader中訪問Tilemap的變換信息實現(xiàn)稍復(fù)雜。問題2縮放時瓦片看起來被“拉伸”了而不是以中心點(diǎn)放大。原因縮放矩陣的原點(diǎn)不對。確保你使用的是Matrix4x4.TRS并且平移參數(shù)位置是該格子中心的世界坐標(biāo)。如果你錯誤地使用了格子左下角或其他點(diǎn)作為原點(diǎn)就會出現(xiàn)拉伸。解決再次確認(rèn)worldPos的計算是tilemap.GetCellCenterWorld(cellPosition)。問題3在移動設(shè)備上幀率明顯下降。原因每幀更新的格子太多或Shader計算過于復(fù)雜。解決進(jìn)行性能剖析Profiler查看是CPU端更新數(shù)據(jù)還是GPU端Shader的瓶頸。限制同時具有動態(tài)縮放效果的棋子數(shù)量。簡化Shader減少循環(huán)次數(shù)和復(fù)雜運(yùn)算。可以考慮將縮放效果“烘焙”成簡單的Sprite動畫對于固定模式的縮放如選中態(tài)用Animation Tile替代動態(tài)計算。問題4縮放效果對某些自定義的Tile如Rule Tile、Animated Tile不生效。原因自定義Tile可能重寫了GetTileData方法返回了不同的Sprite或數(shù)據(jù)。我們的縮放系統(tǒng)依賴于特定的Tile類型如ScalableTile或通過位置信息判斷。解決在SetTileScale方法中不要檢查Tile類型或者擴(kuò)展檢查邏輯將你需要支持的所有Tile類型都加入白名單。更好的設(shè)計是不依賴Tile類型而是維護(hù)一個獨(dú)立于Tile數(shù)據(jù)的“格子狀態(tài)字典”只關(guān)心位置。問題5如何實現(xiàn)非均勻縮放只拉寬或拉高解決非常簡單。在創(chuàng)建縮放矩陣或傳遞縮放數(shù)據(jù)時將Vector3的x和y分量設(shè)置為不同的值即可。例如new Vector3(1.5f, 1.0f, 1f)表示只橫向放大1.5倍。在Shader中處理時也需要分別對UV的x和y分量進(jìn)行不同的縮放計算。 Unity Tilemap 單格瓦片動態(tài)縮放：Matrix4x4與Shader實戰(zhàn)
1. 項目概述當(dāng)棋盤上的棋子需要“呼吸感”在開發(fā)2D棋盤類游戲比如自走棋、戰(zhàn)棋或者一些策略游戲時我們經(jīng)常會用到Unity的Tilemap系統(tǒng)來構(gòu)建規(guī)整的網(wǎng)格地圖。Tilemap高效、易用是處理網(wǎng)格化地圖的不二之選。但不知道你有沒有遇到過這樣的需求當(dāng)玩家選中一個單位棋子或者某個單位觸發(fā)特殊狀態(tài)如“巨大化”、“強(qiáng)化”時你希望這個棋子能有一個醒目的、動態(tài)的縮放效果以增強(qiáng)視覺反饋和游戲表現(xiàn)力。最初你可能會想到直接去修改這個棋子Tile的Transform.localScale。這很直觀對吧但在Tilemap的世界里事情沒那么簡單。Tilemap中的每個瓦片Tile并不是一個獨(dú)立的GameObject它們是由Tilemap Renderer批量渲染的。你無法直接獲取并修改其中某一個特定位置瓦片的Transform。直接修改整個Tilemap的縮放又會影響到棋盤上所有的格子這顯然不是我們想要的。那么如何精準(zhǔn)地控制棋盤上某一個特定格子里“棋子”的大小呢這就是本次實戰(zhàn)要解決的核心問題。我們將深入Tilemap的渲染底層借助Matrix4x4四維矩陣這個強(qiáng)大的數(shù)學(xué)工具實現(xiàn)針對單個或多個瓦片的動態(tài)縮放。這種方法不依賴額外的GameObject性能開銷極低并且能與Tilemap系統(tǒng)無縫集成是實現(xiàn)高級棋盤游戲視覺效果的關(guān)鍵技巧。2. 核心原理Matrix4x4與自定義瓦片渲染要理解解決方案我們得先拆解一下Unity Tilemap的渲染流程。Tilemap Renderer在繪制每一個瓦片時并不是簡單地把一張圖片貼上去。對于每一個瓦片單元系統(tǒng)內(nèi)部會計算一個“變換矩陣”這個矩陣決定了這個瓦片最終在世界空間中的位置、旋轉(zhuǎn)和縮放。默認(rèn)情況下這個矩陣只包含位置信息即該瓦片在網(wǎng)格中的坐標(biāo)縮放和旋轉(zhuǎn)都是單位值即1和0。Matrix4x4是計算機(jī)圖形學(xué)中用于描述線性變換平移、旋轉(zhuǎn)、縮放、錯切等的標(biāo)準(zhǔn)工具。在Unity中一個Matrix4x4可以完整定義一個從局部空間到世界空間的變換。我們的突破口就在這里我們可以為Tilemap中指定的瓦片替換掉它默認(rèn)的變換矩陣注入一個包含了自定義縮放甚至旋轉(zhuǎn)信息的新矩陣。2.1 技術(shù)選型為何是Matrix4x4你可能會問還有其他方法嗎比如在Tile上疊加一個SpriteRenderer的GameObject這能解決問題但破壞了Tilemap的批處理優(yōu)勢當(dāng)棋子數(shù)量成百上千時Draw Call會暴增性能堪憂。使用Tilemap的Animation Tile可以制作縮放動畫但這是預(yù)定義的、靜態(tài)的很難根據(jù)游戲邏輯如選中、Buff狀態(tài)進(jìn)行動態(tài)、實時的控制。修改Tile的Sprite換成一張更大的圖片這不夠靈活無法實現(xiàn)平滑的過渡動畫。相比之下使用Matrix4x4修改渲染矩陣的方案具有顯著優(yōu)勢高性能它仍在Tilemap的渲染管線內(nèi)享受合批優(yōu)化僅增加了極少的CPU計算開銷。高靈活度縮放值scale可以隨時通過代碼動態(tài)計算和修改輕松實現(xiàn)動畫、插值。功能強(qiáng)大矩陣不僅能處理縮放稍加擴(kuò)展就能支持以任意點(diǎn)為中心的旋轉(zhuǎn)為游戲特效如攻擊旋轉(zhuǎn)、眩暈效果打開大門。注意這種方法本質(zhì)上是“欺騙”渲染器。Tilemap的碰撞體Tilemap Collider 2D和網(wǎng)格坐標(biāo)cell位置不會因為我們的矩陣變換而改變。一個被放大了2倍的棋子其邏輯位置和碰撞邊界仍然在原單元格內(nèi)。這是需要特別注意的我們會在后續(xù)章節(jié)討論如何同步處理邏輯與視覺。2.2 Matrix4x4基礎(chǔ)構(gòu)造一個縮放矩陣一個標(biāo)準(zhǔn)的縮放矩陣非常簡單。假設(shè)我們要在X軸和Y軸上進(jìn)行均勻縮放縮放系數(shù)為s那么對應(yīng)的4x4矩陣如下[ s, 0, 0, 0 ] [ 0, s, 0, 0 ] [ 0, 0, s, 0 ] [ 0, 0, 0, 1 ]在Unity中我們可以使用Matrix4x4.Scale(Vector3 scale)這個便捷方法來創(chuàng)建縮放矩陣。例如Matrix4x4.Scale(new Vector3(2f, 2f, 1f))會創(chuàng)建一個在XY平面放大2倍的矩陣Z軸保持1因為我們是2D。然而僅僅有縮放矩陣還不夠。這個縮放是以世界原點(diǎn)為中心的。如果我們直接應(yīng)用棋子會從網(wǎng)格原點(diǎn)開始放大位置就錯亂了。因此我們需要的是一個“平移-縮放-平移回”的復(fù)合變換也就是以棋子自身中心點(diǎn)為縮放原點(diǎn)。先將棋子“平移”到世界原點(diǎn)減去其單元格中心位置。在世界原點(diǎn)進(jìn)行縮放。再“平移”回原來的位置。這個過程用矩陣乘法表示就是T * S * T_inv。在Unity中我們可以通過Matrix4x4.TRS方法一次性創(chuàng)建這個復(fù)合矩陣。TRS代表Translation平移、Rotation旋轉(zhuǎn)、Scale縮放。// 假設(shè)cellPosition是世界空間中某個單元格的中心點(diǎn)坐標(biāo) Vector3 cellCenterWorldPos tilemap.GetCellCenterWorld(cellPosition); float scaleFactor 2.0f; Matrix4x4 customMatrix Matrix4x4.TRS( cellCenterWorldPos, // 平移位置縮放后的位置其實最終位置沒變但TRS內(nèi)部會處理 Quaternion.identity, // 旋轉(zhuǎn)無 new Vector3(scaleFactor, scaleFactor, 1f) // 縮放 ); // 這里需要理解TRS中的平移參數(shù)是指執(zhí)行完縮放和旋轉(zhuǎn)后物體最終的原點(diǎn)位置。 // 對于以自身中心縮放位置參數(shù)就是cellCenterWorldPos縮放中心自然就是該位置。3. 實戰(zhàn)架構(gòu)自定義Tile與渲染器拓展理解了原理我們來搭建實現(xiàn)框架。我們不會直接修改Unity內(nèi)置的Tilemap渲染流程而是通過創(chuàng)建一個自定義的Tile類和一個配套的Tilemap渲染器拓展腳本來協(xié)作完成。3.1 創(chuàng)建可縮放瓦片ScalableTile首先我們需要一種特殊的Tile它能夠攜帶一個“縮放系數(shù)”的信息。Unity允許我們創(chuàng)建繼承自TileBase的自定義Tile類。using UnityEngine; using UnityEngine.Tilemaps; [CreateAssetMenu(fileName New Scalable Tile, menuName 2D/Tiles/Scalable Tile)] public class ScalableTile : TileBase { public Sprite sprite; // 瓦片顯示的精靈 public Color color Color.white; // 顏色 [Range(0.1f, 5f)] public float baseScale 1.0f; // 基礎(chǔ)縮放用于在編輯器中調(diào)整大小 // 注意這個baseScale是編輯器用的運(yùn)行時動態(tài)縮放由另一個系統(tǒng)控制。 public override void GetTileData(Vector3Int position, ITilemap tilemap, ref TileData tileData) { // 這是TileBase的核心方法用于向Tilemap提供渲染數(shù)據(jù)。 tileData.sprite sprite; tileData.color color; tileData.flags TileFlags.LockColor; // 鎖定顏色避免被Tilemap覆蓋 tileData.colliderType Tile.ColliderType.Sprite; // 設(shè)置碰撞體類型 // 這里不直接設(shè)置transform因為我們需要每幀動態(tài)計算。 } }這個ScalableTile和普通Tile幾乎一樣只是多了一個baseScale用于在Unity編輯器里預(yù)設(shè)一個大小。真正的動態(tài)縮放系數(shù)不會存儲在這里因為Tile是ScriptableObject資產(chǎn)同一資產(chǎn)被多個格子使用時修改其字段會影響所有實例。動態(tài)數(shù)據(jù)應(yīng)該存儲在運(yùn)行時腳本中。3.2 核心控制器TileScaleController我們將創(chuàng)建一個名為TileScaleController的MonoBehaviour腳本把它掛載到你的Tilemap GameObject上。它是整個縮放系統(tǒng)的大腦負(fù)責(zé)管理哪些格子上的棋子需要縮放以及縮放倍數(shù)。在每幀渲染前將計算好的變換矩陣設(shè)置給Tilemap。using System.Collections.Generic; using UnityEngine; using UnityEngine.Tilemaps; public class TileScaleController : MonoBehaviour { private Tilemap _targetTilemap; private DictionaryVector3Int, float _scaleData new DictionaryVector3Int, float(); private DictionaryVector3Int, Matrix4x4 _matrixCache new DictionaryVector3Int, Matrix4x4(); private bool _isDirty false; // 標(biāo)記數(shù)據(jù)是否變化用于優(yōu)化 void Start() { _targetTilemap GetComponentTilemap(); if (_targetTilemap null) { Debug.LogError(TileScaleController must be attached to a GameObject with a Tilemap component.); enabled false; return; } // 關(guān)鍵訂閱Tilemap在發(fā)送給渲染器之前的事件 _targetTilemap.GetComponentTilemapRenderer().RegisterSpriteBatchCallback(UpdateTileMatrices); } void OnDestroy() { if (_targetTilemap ! null) { var renderer _targetTilemap.GetComponentTilemapRenderer(); if (renderer ! null) { renderer.UnregisterSpriteBatchCallback(UpdateTileMatrices); } } } // 公共方法設(shè)置或更新某個格子的縮放 public void SetTileScale(Vector3Int cellPosition, float scale) { if (_targetTilemap null) return; // 檢查該位置是否是我們定義的可縮放Tile TileBase tile _targetTilemap.GetTile(cellPosition); if (!(tile is ScalableTile)) return; scale Mathf.Max(0.1f, scale); // 防止縮放過小 if (_scaleData.ContainsKey(cellPosition)) { if (Mathf.Approximately(_scaleData[cellPosition], scale)) return; _scaleData[cellPosition] scale; } else { _scaleData.Add(cellPosition, scale); } _isDirty true; // 標(biāo)記數(shù)據(jù)已更新 _matrixCache.Remove(cellPosition); // 清除該位置的緩存矩陣下次重新計算 } // 公共方法獲取某個格子的縮放 public float GetTileScale(Vector3Int cellPosition) { return _scaleData.TryGetValue(cellPosition, out float scale) ? scale : 1.0f; } // 公共方法清除某個格子的縮放恢復(fù)為1 public void ClearTileScale(Vector3Int cellPosition) { if (_scaleData.Remove(cellPosition)) { _isDirty true; _matrixCache.Remove(cellPosition); } } // 核心回調(diào)在Tilemap渲染前被調(diào)用用于注入自定義矩陣 private void UpdateTileMatrices(SpriteBatch spriteBatch) { if (!_isDirty _matrixCache.Count 0) return; // 數(shù)據(jù)無變化且已有緩存跳過 // 獲取Tilemap內(nèi)部用于渲染的“區(qū)塊”數(shù)據(jù) var chunkData spriteBatch.GetChunkData(); // 這里是一個簡化說明。實際我們需要遍歷所有受影響的格子。 // 更高效的實現(xiàn)是只更新_isDirty為true時涉及的格子。 // 以下為概念性循環(huán) foreach (var kvp in _scaleData) { Vector3Int cell kvp.Key; float scale kvp.Value; if (scale 1.0f) continue; // 縮放為1無需特殊處理 // 計算世界空間中心點(diǎn) Vector3 worldPos _targetTilemap.GetCellCenterWorld(cell); // 創(chuàng)建以自身為中心縮放的變換矩陣 Matrix4x4 customMatrix Matrix4x4.TRS( worldPos, Quaternion.identity, new Vector3(scale, scale, 1f) ); // 關(guān)鍵步驟將這個自定義矩陣設(shè)置給這個格子對應(yīng)的渲染數(shù)據(jù)。 // 我們需要找到spriteBatch中對應(yīng)這個cell的渲染項。 // 此處涉及對SpriteBatch內(nèi)部數(shù)據(jù)的查找和修改需要用到更底層的方法。 _matrixCache[cell] customMatrix; // 緩存起來 // 實際設(shè)置矩陣的代碼需要在SpriteBatch的API中操作見下一節(jié) } _isDirty false; } }上面的代碼勾勒出了框架但最關(guān)鍵的一步——UpdateTileMatrices中如何將矩陣設(shè)置給渲染器——我們用了注釋。因為直接操作SpriteBatch是相對底層的操作Unity的公開API沒有直接提供這個方法。我們需要用到反射或者自定義Shader來實現(xiàn)。這里提供兩種主流且更實用的實現(xiàn)路徑。4. 完整代碼實現(xiàn)兩種實戰(zhàn)方案由于直接通過C#代碼注入矩陣到內(nèi)置渲染流程比較晦澀我提供兩種經(jīng)過實踐驗證、更清晰的方案。方案一利用MaterialPropertyBlock方案二使用自定義渲染通道。4.1 方案一使用MaterialPropertyBlock傳遞縮放數(shù)據(jù)推薦這個方案的核心思想是不直接修改每個瓦片的變換矩陣而是通過Shader根據(jù)瓦片的世界位置動態(tài)計算縮放。我們在控制器里計算好每個需要縮放的格子的“縮放值”和“位置”然后通過MaterialPropertyBlock以數(shù)組形式傳遞給Tilemap的材質(zhì)。Shader根據(jù)當(dāng)前渲染的像素是否在目標(biāo)格子范圍內(nèi)來決定是否應(yīng)用縮放。步驟1修改TileScaleControllerusing System.Collections.Generic; using UnityEngine; using UnityEngine.Tilemaps; public class TileScaleController : MonoBehaviour { public Tilemap targetTilemap; private MaterialPropertyBlock _propertyBlock; private static readonly int ScaleDataArrayID Shader.PropertyToID(_ScaleData); private static readonly int ScaleDataLengthID Shader.PropertyToID(_ScaleDataLength); private static readonly int CellSizeID Shader.PropertyToID(_CellSize); [System.Serializable] public struct TileScaleInfo { public Vector3 worldPosition; // 格子中心世界坐標(biāo) public float scale; } public ListTileScaleInfo activeScaledTiles new ListTileScaleInfo(); private DictionaryVector3Int, int _tileIndexMap new DictionaryVector3Int, int(); void Start() { if (targetTilemap null) targetTilemap GetComponentTilemap(); _propertyBlock new MaterialPropertyBlock(); targetTilemap.GetPropertyBlock(_propertyBlock); // 獲取現(xiàn)有的 UpdateShaderData(); } void Update() { // 每幀更新MaterialPropertyBlock確保數(shù)據(jù)同步 if (targetTilemap.HasPropertyBlock()) { targetTilemap.GetPropertyBlock(_propertyBlock); } UpdateShaderData(); targetTilemap.SetPropertyBlock(_propertyBlock); } public void SetTileScale(Vector3Int cellPosition, float scale) { Vector3 worldPos targetTilemap.GetCellCenterWorld(cellPosition); if (_tileIndexMap.TryGetValue(cellPosition, out int index)) { // 更新已有項 var info activeScaledTiles[index]; info.scale scale; activeScaledTiles[index] info; } else { // 新增項 activeScaledTiles.Add(new TileScaleInfo { worldPosition worldPos, scale scale }); _tileIndexMap[cellPosition] activeScaledTiles.Count - 1; } } public void ClearTileScale(Vector3Int cellPosition) { if (_tileIndexMap.TryGetValue(cellPosition, out int index)) { // 簡單做法將縮放設(shè)為1而不是移除避免數(shù)組索引錯亂。 // 更健壯的做法是使用List并管理索引這里為簡化用前者。 var info activeScaledTiles[index]; info.scale 1.0f; activeScaledTiles[index] info; _tileIndexMap.Remove(cellPosition); } } private void UpdateShaderData() { if (_propertyBlock null) return; // 將List數(shù)據(jù)轉(zhuǎn)換為Shader能接受的數(shù)組 Vector4[] scaleDataArray new Vector4[activeScaledTiles.Count]; for (int i 0; i activeScaledTiles.Count; i) { var info activeScaledTiles[i]; // Vector4的xyzw存儲: (世界位置.x, 世界位置.y, 縮放, 0) scaleDataArray[i] new Vector4(info.worldPosition.x, info.worldPosition.y, info.scale, 0); } _propertyBlock.SetVectorArray(ScaleDataArrayID, scaleDataArray); _propertyBlock.SetInt(ScaleDataLengthID, scaleDataArray.Length); // 傳遞格子大小用于在Shader中判斷像素屬于哪個格子 Vector3 cellSize targetTilemap.cellSize; _propertyBlock.SetVector(CellSizeID, new Vector4(cellSize.x, cellSize.y, 0, 0)); } }步驟2編寫自定義ShaderUnlit Shader Graph 或 Surface Shader這里以Shader Graph為例說明原理。你需要創(chuàng)建一個Unlit Shader Graph。暴露參數(shù)在Graph的Blackboard中創(chuàng)建三個屬性_ScaleData(類型Vector4 Array)_ScaleDataLength(類型Integer)_CellSize(類型Vector2)流程設(shè)計獲取像素世界位置使用Position節(jié)點(diǎn)空間選擇World。循環(huán)判斷使用For Loop節(jié)點(diǎn)循環(huán)次數(shù)為_ScaleDataLength。在循環(huán)體內(nèi)通過Array Element節(jié)點(diǎn)用循環(huán)的Index獲取_ScaleData數(shù)組中的一項一個Vector4。從該項中提取.xy作為目標(biāo)格子中心世界坐標(biāo)提取.z作為縮放系數(shù)。計算當(dāng)前像素世界位置與目標(biāo)格子中心的絕對距離Absolute(Distance)。判斷這個距離是否小于半個格子大小_CellSize * 0.5。這里可以稍微加點(diǎn)容差。如果判斷為真則說明當(dāng)前像素位于需要縮放的格子內(nèi)。我們可以計算一個基于距離的平滑權(quán)重可選然后利用這個權(quán)重對UV坐標(biāo)進(jìn)行反向縮放因為放大圖像實際是縮小UV采樣范圍或者更直接地計算一個偏移向量。應(yīng)用UV變換將計算出的UV偏移或縮放因子應(yīng)用到Texture Sample節(jié)點(diǎn)的UV輸入上。實操心得在Shader中精確匹配格子邊界可能因為浮點(diǎn)數(shù)精度產(chǎn)生接縫。一個常見的技巧是在判斷時使用step或smoothstep函數(shù)并給予一個很小的容差值如0.01或者直接基于像素世界位置對齊到網(wǎng)格坐標(biāo)再進(jìn)行判斷這樣更精確。方案一優(yōu)缺點(diǎn)優(yōu)點(diǎn)邏輯清晰與Tilemap標(biāo)準(zhǔn)渲染流程兼容性好不需要深入底層渲染API。缺點(diǎn)需要在Shader中做每像素的距離判斷如果需要縮放的格子很多可能會增加Shader計算復(fù)雜度。傳遞數(shù)組有長度限制具體取決于平臺和Unity版本。4.2 方案二使用CommandBuffer進(jìn)行后期縮放更靈活方案二思路完全不同我們不在Tilemap渲染時修改每個瓦片而是在整個Tilemap渲染到一張中間紋理后再通過一個后期處理對紋理上特定的區(qū)域?qū)?yīng)棋盤格子進(jìn)行縮放。這更像一個全屏后處理效果但只針對特定坐標(biāo)。步驟1創(chuàng)建縮放后期處理腳本using UnityEngine; using UnityEngine.Rendering; public class TileScalePostProcessing : MonoBehaviour { public TileScaleController scaleController; // 關(guān)聯(lián)之前的控制器 public Material scaleMaterial; // 一個特殊的材質(zhì)用于屏幕局部縮放 private CommandBuffer _commandBuffer; private Camera _mainCamera; void OnEnable() { _mainCamera Camera.main; if (_mainCamera null) return; _commandBuffer new CommandBuffer { name Tile Scale Overlay }; // 假設(shè)scaleMaterial有一個Pass它能讀取_ScaledTiles等紋理并做處理 // 這里需要scaleController把縮放格子信息渲染到一張RenderTexture上 _commandBuffer.Blit(null, BuiltinRenderTextureType.CameraTarget, scaleMaterial); _mainCamera.AddCommandBuffer(CameraEvent.AfterForwardOpaque, _commandBuffer); } void OnDisable() { if (_mainCamera ! null _commandBuffer ! null) { _mainCamera.RemoveCommandBuffer(CameraEvent.AfterForwardOpaque, _commandBuffer); } _commandBuffer?.Release(); } void Update() { // 每幀更新scaleMaterial所需的參數(shù)例如傳遞scaleController.activeScaledTiles數(shù)組 if (scaleMaterial ! null scaleController ! null) { // 將縮放信息位置、縮放值打包到一個Texture2D或ComputeBuffer傳遞給Shader // 這部分是數(shù)據(jù)傳輸?shù)木唧w實現(xiàn)略復(fù)雜 } } }步驟2編寫后期處理Shader這個Shader是一個全屏Shader。它接收一張由Tilemap渲染的_MainTex即Camera的源紋理。一個包含了所有縮放格子信息位置、半徑、縮放強(qiáng)度的緩沖區(qū)。在Fragment Shader中對于每一個屏幕像素將其UV轉(zhuǎn)換為世界坐標(biāo)。遍歷所有縮放格子信息。如果該像素在世界坐標(biāo)上位于某個縮放格子的影響范圍內(nèi)則計算一個新的UV坐標(biāo)。這個新UV是相對于該格子中心進(jìn)行縮放的(originalUV - centerUV) / scale centerUV。用新的UV去采樣_MainTex得到縮放后的顏色。方案二優(yōu)缺點(diǎn)優(yōu)點(diǎn)極其靈活可以實現(xiàn)各種復(fù)雜的屏幕空間變形效果不局限于Tilemap任何SpriteRenderer都能生效。性能開銷相對恒定與屏幕分辨率相關(guān)與縮放格子數(shù)量關(guān)系不大。缺點(diǎn)實現(xiàn)更復(fù)雜涉及CommandBuffer、RenderTexture管理需要處理渲染順序和透明混合問題。如果多個物體疊加后期處理可能難以區(qū)分層級。4.3 方案選擇與代碼整合建議對于大多數(shù)2D棋盤游戲方案一MaterialPropertyBlock Shader是更推薦的選擇。它更貼近Tilemap的渲染本質(zhì)性能可預(yù)測且不會引入后期處理可能帶來的渲染順序問題。方案二更適合需要全局、非線性變形特效的場景。這里給出方案一的簡化版整合示例假設(shè)我們使用一個預(yù)設(shè)好的Shader它已經(jīng)實現(xiàn)了根據(jù)_ScaleDataArray進(jìn)行格子內(nèi)縮放的功能。// 附加到Tilemap上的完整控制器簡化版 using System.Collections.Generic; using UnityEngine; using UnityEngine.Tilemaps; [RequireComponent(typeof(Tilemap))] public class SimpleTileScaleController : MonoBehaviour { public Material scaledTileMaterial; // 使用了我們自定義Shader的材質(zhì)球 private Tilemap _tilemap; private MaterialPropertyBlock _mpb; private ListVector4 _scaleDataList new ListVector4(); private int _scaleDataID; private int _dataLengthID; void Awake() { _tilemap GetComponentTilemap(); _mpb new MaterialPropertyBlock(); _scaleDataID Shader.PropertyToID(_ScaleData); _dataLengthID Shader.PropertyToID(_DataLength); // 確保Tilemap使用我們的特殊材質(zhì) var renderer _tilemap.GetComponentTilemapRenderer(); if (scaledTileMaterial ! null) { renderer.material scaledTileMaterial; } } void LateUpdate() { UpdatePropertyBlock(); } public void AddOrUpdateScale(Vector3Int cell, float scale) { Vector3 worldPos _tilemap.GetCellCenterWorld(cell); // 查找是否已存在 for(int i 0; i _scaleDataList.Count; i) { Vector4 data _scaleDataList[i]; if (Vector2.Distance(new Vector2(data.x, data.y), new Vector2(worldPos.x, worldPos.y)) 0.1f) { data.z scale; _scaleDataList[i] data; return; } } // 新增 _scaleDataList.Add(new Vector4(worldPos.x, worldPos.y, scale, 0)); } public void RemoveScale(Vector3Int cell) { Vector3 worldPos _tilemap.GetCellCenterWorld(cell); for (int i _scaleDataList.Count - 1; i 0; i--) { Vector4 data _scaleDataList[i]; if (Vector2.Distance(new Vector2(data.x, data.y), new Vector2(worldPos.x, worldPos.y)) 0.1f) { _scaleDataList.RemoveAt(i); break; } } } private void UpdatePropertyBlock() { if (_tilemap null) return; _tilemap.GetPropertyBlock(_mpb); _mpb.SetInt(_dataLengthID, _scaleDataList.Count); if (_scaleDataList.Count 0) { _mpb.SetVectorArray(_scaleDataID, _scaleDataList.ToArray()); } _tilemap.SetPropertyBlock(_mpb); } }這個簡化版在LateUpdate中持續(xù)更新屬性塊。在實際項目中你應(yīng)該在縮放值發(fā)生變化時才調(diào)用UpdatePropertyBlock()以避免不必要的每幀更新。5. 應(yīng)用場景與效果擴(kuò)展實現(xiàn)了基礎(chǔ)縮放后你可以輕松地將它融入到游戲邏輯中創(chuàng)造出豐富的交互效果。5.1 動態(tài)交互效果棋子選中高亮當(dāng)玩家點(diǎn)擊或鼠標(biāo)懸停在一個單位上時調(diào)用SetTileScale(cell, 1.2f)使其微微放大配合顏色變化提示選中狀態(tài)。取消選中時調(diào)用ClearTileScale。// 在玩家的輸入控制腳本中 void HandleClick(Vector3 worldPos) { Vector3Int cell _gameGridTilemap.WorldToCell(worldPos); if (IsValidUnitCell(cell)) { // 先清除上一個選中的 if (_lastSelectedCell ! null) _scaleController.ClearTileScale(_lastSelectedCell.Value); // 放大當(dāng)前選中的 _scaleController.SetTileScale(cell, 1.2f); _lastSelectedCell cell; } }技能范圍指示器當(dāng)玩家選擇一個技能時計算出技能影響的范圍格子列表然后遍歷這些格子將其中的棋子瓦片放大并改變顏色通過修改Tilemap的SetColor或Shader中的顏色參數(shù)清晰展示作用目標(biāo)。public void HighlightArea(ListVector3Int areaCells, float scale, Color tintColor) { foreach (var cell in areaCells) { _scaleController.SetTileScale(cell, scale); _tilemap.SetColor(cell, tintColor); // 同時修改顏色 } }狀態(tài)變化反饋當(dāng)單位獲得“巨大化”Buff時持續(xù)將其縮放設(shè)為1.5f當(dāng)處于“縮小”Debuff時設(shè)為0.8f。Buff結(jié)束時恢復(fù)為1.0f。5.2 結(jié)合動畫系統(tǒng)單純的跳變縮放會很生硬。我們可以結(jié)合Mathf.Lerp或DOTween等動畫插件實現(xiàn)平滑的縮放動畫。using DG.Tweening; // 使用DOTween插件 public void AnimateTileScale(Vector3Int cell, float targetScale, float duration) { float currentScale _scaleController.GetTileScale(cell); DOTween.To(() currentScale, x _scaleController.SetTileScale(cell, x), targetScale, duration) .SetEase(Ease.OutBack); // 添加一個回彈效果 }這樣棋子的放大縮小就會帶有平滑的動畫視覺體驗大幅提升。5.3 視覺與邏輯的同步問題正如之前提到的這只是視覺縮放。棋子的邏輯位置cell和碰撞體如果Tilemap Collider 2D使用了此瓦片并沒有改變。這通常是我們期望的——棋子邏輯上還在那個格子里只是看起來大了。但有些情況下你需要同步自定義碰撞檢測如果你需要根據(jù)放大后的視覺大小進(jìn)行更精確的碰撞如鼠標(biāo)點(diǎn)選你不能再依賴格子坐標(biāo)。你需要根據(jù)縮放后的瓦片世界邊界單元格中心 ± (單元格大小 * 縮放系數(shù) / 2)來進(jìn)行自定義的物理檢測如Physics2D.OverlapPoint。UI附著如果棋子頭頂有血條、名字等UI你需要讓UI跟隨棋子視覺中心移動。這時需要計算縮放后瓦片的視覺中心世界坐標(biāo)它其實和邏輯中心GetCellCenterWorld是一樣的因為我們是均勻縮放。但如果你未來實現(xiàn)了非均勻縮放或旋轉(zhuǎn)就需要用矩陣變換去計算頂點(diǎn)的世界位置了。6. 性能優(yōu)化與常見問題排查6.1 性能優(yōu)化要點(diǎn)減少每幀更新只在縮放數(shù)據(jù)真正發(fā)生變化時更新MaterialPropertyBlock或CommandBuffer。使用_isDirty這樣的標(biāo)志位來控制?？刂茢?shù)據(jù)量方案一中傳遞給Shader的數(shù)組不宜過大。如果一屏內(nèi)需要動態(tài)縮放的棋子很多比如超過50個需要考慮分幀更新或使用更高效的數(shù)據(jù)結(jié)構(gòu)如ComputeBuffer。Shader優(yōu)化在Shader的循環(huán)中盡早使用break一旦找到匹配的格子就跳出循環(huán)?？紤]將格子信息按照空間分區(qū)如網(wǎng)格傳遞給Shader減少每個像素需要遍歷的數(shù)量。對于移動設(shè)備復(fù)雜的逐像素判斷可能會成為瓶頸需進(jìn)行性能測試。批處理破壞使用MaterialPropertyBlock本身不會破壞Tilemap的靜態(tài)合批但如果你為Tilemap設(shè)置了不同的材質(zhì)實例material instance則可能會造成批處理中斷。確保所有使用此縮放系統(tǒng)的Tilemap盡量共享材質(zhì)實例。6.2 常見問題與解決方案問題1縮放后瓦片邊緣出現(xiàn)接縫或閃爍。原因Shader中判斷像素是否屬于某個格子的邏輯不精確存在浮點(diǎn)數(shù)誤差導(dǎo)致邊緣像素在“屬于”和“不屬于”之間搖擺。解決在距離判斷時增加一個小的容差epsilon例如0.005?；蛘吒€(wěn)健的方法是將像素的世界坐標(biāo)反向轉(zhuǎn)換為單元格坐標(biāo)WorldToCell然后判斷該單元格坐標(biāo)是否在需要縮放的列表中這樣判斷是離散且精確的。但這需要在Shader中訪問Tilemap的變換信息實現(xiàn)稍復(fù)雜。問題2縮放時瓦片看起來被“拉伸”了而不是以中心點(diǎn)放大。原因縮放矩陣的原點(diǎn)不對。確保你使用的是Matrix4x4.TRS并且平移參數(shù)位置是該格子中心的世界坐標(biāo)。如果你錯誤地使用了格子左下角或其他點(diǎn)作為原點(diǎn)就會出現(xiàn)拉伸。解決再次確認(rèn)worldPos的計算是tilemap.GetCellCenterWorld(cellPosition)。問題3在移動設(shè)備上幀率明顯下降。原因每幀更新的格子太多或Shader計算過于復(fù)雜。解決進(jìn)行性能剖析Profiler查看是CPU端更新數(shù)據(jù)還是GPU端Shader的瓶頸。限制同時具有動態(tài)縮放效果的棋子數(shù)量。簡化Shader減少循環(huán)次數(shù)和復(fù)雜運(yùn)算。可以考慮將縮放效果“烘焙”成簡單的Sprite動畫對于固定模式的縮放如選中態(tài)用Animation Tile替代動態(tài)計算。問題4縮放效果對某些自定義的Tile如Rule Tile、Animated Tile不生效。原因自定義Tile可能重寫了GetTileData方法返回了不同的Sprite或數(shù)據(jù)。我們的縮放系統(tǒng)依賴于特定的Tile類型如ScalableTile或通過位置信息判斷。解決在SetTileScale方法中不要檢查Tile類型或者擴(kuò)展檢查邏輯將你需要支持的所有Tile類型都加入白名單。更好的設(shè)計是不依賴Tile類型而是維護(hù)一個獨(dú)立于Tile數(shù)據(jù)的“格子狀態(tài)字典”只關(guān)心位置。問題5如何實現(xiàn)非均勻縮放只拉寬或拉高解決非常簡單。在創(chuàng)建縮放矩陣或傳遞縮放數(shù)據(jù)時將Vector3的x和y分量設(shè)置為不同的值即可。例如new Vector3(1.5f, 1.0f, 1f)表示只橫向放大1.5倍。在Shader中處理時也需要分別對UV的x和y分量進(jìn)行不同的縮放計算。