完結(jié)撒花。因?yàn)橛眠^WCR2對(duì)up感興趣所以看完了。在此記錄下通過教學(xué)了解到的東西，和日后復(fù)習(xí)指南。

簡(jiǎn)介：這一些列視頻是講解了mxd地圖如何被繪制出來(lái)的，具體點(diǎn)是提取mxd資源并在網(wǎng)頁(yè)上繪制。

一共五期視頻。

前三期視頻主要講解：

1. 2d圖形學(xué)基礎(chǔ)，以mxd的2D橫版卷軸游戲做講解。類似渲染管線這一套，從模型到視口的坐標(biāo)轉(zhuǎn)換到分層繪制渲染的概念。

2.?冒險(xiǎn)島地圖.wz文件的構(gòu)成和存儲(chǔ)方式。這是由up用科學(xué)精神推導(dǎo)出來(lái)的，如其中的圖層順序。講解了地圖文件中每個(gè)節(jié)點(diǎn)具體的定義。

3.?游戲中的繪圖元素：精靈圖節(jié)點(diǎn)。介紹包含圖片在精靈圖中存儲(chǔ)的信息。

?

在介紹完這些知識(shí)后，后兩期視頻實(shí)際上手開始制作地圖繪制系統(tǒng)。

1.?設(shè)計(jì)完整個(gè)系統(tǒng)，使用C#編寫客戶端導(dǎo)出地圖的信息和資源。推薦使用LINQPad編輯器。

開發(fā)流程：定義地圖和節(jié)點(diǎn)數(shù)據(jù)結(jié)構(gòu)->好像使用了WZ的api加載文件->圖片資源保存為png->地圖描述導(dǎo)出為json。

2.?前端工程，使用ts，webpack作為編譯工具鏈開發(fā)。

開發(fā)流程：定義C#中的數(shù)據(jù)結(jié)構(gòu)->解析json文件用對(duì)象緩存->引入2D渲染框架pixi.js，可以相機(jī)移動(dòng)功能->了解pixi中場(chǎng)景樹概念和級(jí)聯(lián)變換行為

3.?核心內(nèi)容，將前端加載好的mapInfo轉(zhuǎn)換為pixi繪制對(duì)象在網(wǎng)頁(yè)中繪制出來(lái)。轉(zhuǎn)換諸如tile、obj、back等

4.?繪制back時(shí)，出現(xiàn)了bug，補(bǔ)充了關(guān)于背景中type對(duì)于背景行為的影響，如移動(dòng)和平鋪。主要介紹了通過復(fù)制背景計(jì)算坐標(biāo)的方式平鋪，和平鋪范圍的算法。

?

其中C#編程，ts編程還有pixi庫(kù)和wz庫(kù)的使用可能需要自行掌握或照著up主敲一遍代碼了。