關(guān)鍵字：paper2D，F(xiàn)lipbook，Sprite，Input
為什么有這篇文章？
這篇文章是筆者在學(xué)習(xí)了UE4官網(wǎng)Paper2D教程之后，以自己的意愿為主，結(jié)合學(xué)到的東西所弄出來的一個(gè)基礎(chǔ)項(xiàng)目。筆者在不斷的學(xué)習(xí)過程中，發(fā)現(xiàn)一個(gè)問題，那就是要鞏固自己學(xué)到的東西非常困難，即便是學(xué)會(huì)，弄懂，也很快會(huì)忘記。于是，筆者就想出了一個(gè)方法，那就是學(xué)完之后，寫一篇自己的文章，只有看的人都能看懂，那么這部分的知識(shí)才能算是掌握了。
要流暢的讀懂這篇文章，需要讀者對(duì)UE4編輯器有一個(gè)基本的認(rèn)知（至少得知道編輯器怎么操作，界面上有哪些功能吧）。如果你從未接觸過UE4，請(qǐng)先跟著官方視頻學(xué)習(xí)，相信我，官方視頻是最好的入門教材。
做哪些功能？
本文會(huì)創(chuàng)建一個(gè)基本的可運(yùn)行的Paper2D項(xiàng)目，你可以在這個(gè)項(xiàng)目的基礎(chǔ)上進(jìn)行迭代，開發(fā)出你自己的作品。具體的內(nèi)容是：
- 創(chuàng)建一個(gè)背景
- 創(chuàng)建一個(gè)可操作的長耳精靈角色
- 為長耳精靈添加待機(jī)和跑步動(dòng)畫
- 添加對(duì)長耳精靈的操作（向左和向右跑動(dòng)）
準(zhǔn)備工作
打開UE4（筆者用的是最新的4.20.1），創(chuàng)建一個(gè)空的藍(lán)圖項(xiàng)目（不包含初學(xué)者內(nèi)容）。
在正式開始前，我們先做一些準(zhǔn)備工作。首先，在內(nèi)容瀏覽器中創(chuàng)建5個(gè)文件夾，分別是：Blueprints，Data，F(xiàn)lipbooks，Sprite，Textures。所有的資源都會(huì)放到相應(yīng)的文件夾中去，創(chuàng)建完成之后，內(nèi)容瀏覽器是這個(gè)樣子的：
然后，準(zhǔn)備要用到的圖片資源。這次我們用到的資源不多，一張背景圖，一組待機(jī)幀圖片，一組跑動(dòng)幀圖片。下載圖片資源，請(qǐng)點(diǎn)擊這里。
接著，將圖片都導(dǎo)入到工程中，只要把所有的文件都拖到內(nèi)容瀏覽器的Textures文件夾里面就可以了。注意不能直接把文件復(fù)制到Textures目錄下面，編輯器需要對(duì)這些資源進(jìn)行一次轉(zhuǎn)換。因?yàn)槲覀兊膭?dòng)畫文件名有沖突的地方，所以要修改一下動(dòng)畫的文件名，比如把待機(jī)圖片文件名改成ElfIdle_1。導(dǎo)入成功后，我們的Textures文件夾就變成了這個(gè)樣子：
注意：導(dǎo)入背景圖的時(shí)候UE4可能會(huì)將它轉(zhuǎn)換成Normal Map，這時(shí)需要把它還原回來。至于為什么會(huì)是這樣子，大概是我們的背景圖太藍(lán)了......
添加背景
現(xiàn)在，我們要將背景圖添加進(jìn)去了。在此之前，我們先要修改一下場景的顯示方式：將視角切換成前端，渲染模式改成帶光照，然后點(diǎn)開顯示標(biāo)簽，去掉Grid標(biāo)記（這一步可以在加完背景之后再去掉，因?yàn)檎{(diào)整背景位置的時(shí)候需要用到Grid對(duì)其位置）：
在內(nèi)容瀏覽器里右擊Iceland，選擇Sprite操作->創(chuàng)建Sprite。將創(chuàng)建出來的Sprite移動(dòng)到Sprite文件夾里去。然后，把它拖到場景中。調(diào)整圖片的位置，使其位于x軸的上方（Z軸正半軸），然后在細(xì)節(jié)面板上修改其位置，將Y值改成-100，如圖所示：
（改完別忘了把Grid標(biāo)記去掉）
創(chuàng)建Flipbook
與Iceland類似，選中所有的待機(jī)和跑動(dòng)的幀圖片，右擊選擇Sprite操作->創(chuàng)建Sprite。將創(chuàng)建出來的Sprite全部移動(dòng)到Sprite文件夾中去。
選中所有Idle Sprite，右擊選擇“創(chuàng)建圖像序列視圖”，將新創(chuàng)建的序列視圖命名為ElfIdle，這就是我們要用到的Flipbook。把這個(gè)Flipbook移動(dòng)到Flipbooks文件夾下。
Flipbook這個(gè)單詞非常好的闡釋了它的意義，就是連續(xù)的幀動(dòng)畫。這是Paper2D中的動(dòng)畫工具。
然后，對(duì)Run Sprite做相同的操作，將Flipbook命名為ElfRun，并且將它也以移動(dòng)到Flipbooks文件夾下。
雙擊打開Flipbook，看看動(dòng)畫是快了還是慢了，調(diào)整到你覺得合適的速度：
添加角色
從這一步開始，就要進(jìn)入難啃的環(huán)節(jié)了。首先我們需要?jiǎng)?chuàng)建一個(gè)Blueprint，在Blueprints文件夾下右擊，選擇藍(lán)圖類，選擇PaperCharacter繼承，將藍(lán)圖類命名為MyCharacter。
雙擊打開MyCharacter，選中Sprite組件，在細(xì)節(jié)面板中將Source Flipbook改成之前我們創(chuàng)建的ElfIdle：
改完之后，在視口標(biāo)簽頁下，你應(yīng)該能看到有一個(gè)妹子在那里不停地抖來抖去。不過有點(diǎn)不協(xié)調(diào)的是，那個(gè)膠囊體太大了，不適合妹子的“身材”，需要調(diào)整。
選中上方的CapsuleComponent組件，在其細(xì)節(jié)面板里修改Shape下的Capsule Half Height屬性和Capsule Radius屬性，將其改的適合妹子的身材大小（比如改成60和24）：
角色弄好了，接下來就是視角的工作。我們需要一個(gè)以角色為中心的攝像機(jī)，能夠拍到當(dāng)前場景的那種。這就需要在角色上添加兩個(gè)組件：Spring Arm和Camera。Camera組件以Spring Arm為父組件，如圖所示（CameraBoom是組件名）：
CameraBoom的Z旋轉(zhuǎn)量需要設(shè)置成-90，因?yàn)橐龑?duì)著角色。去掉Do Collision Test和Inherit Yaw，因?yàn)槲覀兊臄z像機(jī)不需要碰撞和旋轉(zhuǎn)。
Camera組件也需要進(jìn)行設(shè)置。將Project Mode設(shè)置為正交（Orthographic），Ortho Width設(shè)置一個(gè)大一點(diǎn)的數(shù)，比如1600，這樣就能看到一個(gè)比較廣的場景。
好了，大功告成，下一步就是把它放到場景中去測試一下。把一個(gè)玩家起始節(jié)點(diǎn)拖入到背景圖上，放到合適位置。然后，新建一個(gè)Blueprint，繼承自GameModeBase，命名成PaperGameMode。雙擊打開PaperGameMode，將Default Pawn Class改成MyCharacter，然后編譯，保存：
回到編輯器主界面，選擇左上角的編輯->項(xiàng)目設(shè)置，打開項(xiàng)目設(shè)置對(duì)話框。在左側(cè)列表中點(diǎn)擊“地圖&模式”。將Default GameMode，Editor Startup Map，Game Default Map改的和下圖一致：
完成之后，運(yùn)行測試一下，嗯？妹子怎么掉下去了？這肯定不對(duì)啊，這場景中我們不需要重力。于是乎，在“世界大綱視圖”中雙擊關(guān)卡打開世界設(shè)置，在Physics一節(jié)中選上“Override World Gravity”，將“Global Gravity Z”設(shè)置成0.0：
再次運(yùn)行，我們可愛的妹子就在場景里啦：
操作響應(yīng)
最后一步，也是最繁瑣的一步。
要想讓關(guān)卡響應(yīng)操作，首先必須要設(shè)置工程的輸入狀態(tài)。這一步同樣是要到編輯->項(xiàng)目設(shè)置中去操作。選中引擎一節(jié)下的輸入標(biāo)簽，添加Axis Mappings，將其命名成MoveRight。
雙擊打開MyCharacter。我們要實(shí)現(xiàn)的功能很簡單，當(dāng)我們按下向右方向鍵時(shí)，角色向右跑動(dòng)；當(dāng)按下向左鍵時(shí)，角色向左跑動(dòng)。要做好這些功能，我們就要做到以下兩點(diǎn)：
- 1、角色的朝向必須正確，向左或者向右跑的時(shí)候其朝向必須一致。
- 2、按鍵按下的時(shí)候切換到移動(dòng)狀態(tài)，動(dòng)畫也必須切換到跑步動(dòng)畫。
移動(dòng)
移動(dòng)的功能比較容易，當(dāng)我們按下向左或者向右鍵的時(shí)候，記錄當(dāng)前的移動(dòng)方向，然后根據(jù)這個(gè)移動(dòng)方向，確定角色的位置是沿著X軸正半軸還是負(fù)半軸的方向增加。
這里我們要用到之前添加的MoveRight事件和藍(lán)圖自帶的MoveUpdatedComponent方法。下面是實(shí)現(xiàn)的原理：
對(duì)于每次的輸入事件，判斷當(dāng)前的移動(dòng)方向（MovingDirection），設(shè)置當(dāng)前的方向值（Direction）。然后更新Character的位置，使用的數(shù)據(jù)是一個(gè)已經(jīng)設(shè)置好的速度（Velocity）和方向的乘積。
移動(dòng)方向（MovingDirection）是一個(gè)枚舉類型，這個(gè)對(duì)象在Data文件夾中創(chuàng)建。里面包含了3個(gè)字段：Left、Right和Origin，用來表示三種不同的方向。
動(dòng)畫
動(dòng)畫的功能稍稍復(fù)雜一些。首先我們需要根據(jù)按鍵來設(shè)置移動(dòng)的方向，按下按鍵的時(shí)候設(shè)置成指定方向，釋放按鍵的時(shí)候?qū)⒎较驈?fù)原。
然后，當(dāng)按下按鍵的時(shí)候，我們也需要設(shè)置角色的朝向，這就需要用到Set Control Rotation函數(shù)。因?yàn)槲覀兘巧某跏紶顟B(tài)是朝右，所以當(dāng)我們按下左方向鍵的時(shí)候，角色就需要繞著Z軸轉(zhuǎn)180度。
最后，按下方向鍵也需要將Flipbook切換一下，這就要用到Set Flipbook函數(shù)，跑步的時(shí)候設(shè)置成Run，釋放的時(shí)候設(shè)置成Idle。
將這一切都綜合起來，我們的動(dòng)畫設(shè)置腳本就浮出水面了：
好，一切都準(zhǔn)備就緒，編譯運(yùn)行，你就擁有了一個(gè)可以操作的2D場景：
哈哈，很有成就感吧！當(dāng)然，如果你遇到了問題也不要緊，請(qǐng)隨意在下面留言提問。同時(shí)，筆者的項(xiàng)目地址也會(huì)給出，你可以到筆者的碼云上找到這個(gè)項(xiàng)目。
總結(jié)
本文的移動(dòng)實(shí)現(xiàn)和官方教程中的實(shí)現(xiàn)完全不一樣，其原因是在我們的場景中不需要重力。這樣，移動(dòng)的時(shí)候就沒有了阻力，即便是釋放了按鈕角色也會(huì)繼續(xù)移動(dòng)。所以，筆者就自己弄了一套邏輯。
不過，筆者真正想說的是：學(xué)習(xí)一定要做一些和教程中不一樣的東西，這樣，你就會(huì)發(fā)現(xiàn)有可能一個(gè)不起眼的小東西就會(huì)困擾你很久，當(dāng)你把它實(shí)現(xiàn)了的時(shí)候，你就能獲得巨大的進(jìn)步和成就感，這對(duì)我們來說是彌足珍貴的。
