Scratch劇場(chǎng)式動(dòng)畫(huà)效果

對(duì)于《電腦報(bào)》的忠實(shí)讀者來(lái)說(shuō)，小陳老師之前帶著大家做了很多Scratch小游戲，像貪吃蛇、貓抓老鼠、火箭降落等等，這些游戲作品都有一個(gè)共同點(diǎn)，背景基本上是不動(dòng)的，運(yùn)動(dòng)的只是角色本身而已，如果只通過(guò)簡(jiǎn)單的積木代碼只能實(shí)現(xiàn)簡(jiǎn)單的切換背景圖片效果。但是在現(xiàn)實(shí)的游戲和案例中，不少游戲背景地圖都非常龐大。而且背景是變化多樣的，需要在背景圖切換的過(guò)程中做到無(wú)縫銜接，有時(shí)還需要把背景圖進(jìn)行翻轉(zhuǎn)對(duì)接等。

不要覺(jué)得這些效果非常簡(jiǎn)單，無(wú)非就是改變坐標(biāo)加上旋轉(zhuǎn)角度參數(shù)產(chǎn)生變化，其實(shí)里面有著大學(xué)問(wèn)呢，今天就和大家一起完成劇場(chǎng)式逼真的動(dòng)畫(huà)效果。這次我們要完成小貓奔跑的動(dòng)畫(huà)場(chǎng)景，隨著小貓的奔跑我們主要目標(biāo)是實(shí)現(xiàn)背景圖片的無(wú)縫切換。

1. 高精度小貓

首先我們需要一個(gè)高精度版的小貓?zhí)鎿Q原版小貓。這個(gè)小貓角色“Scratch Cat”已上傳至百度云，請(qǐng)關(guān)注“壹零社”，點(diǎn)擊編程相關(guān)獲取網(wǎng)盤(pán)地址，你可以在2021-39文件夾中找到它。這個(gè)小貓角色中包含了更多造型比如奔跑、旋轉(zhuǎn)跳街舞等，大家可以復(fù)用在各種程序中（圖1）。

在程序中，我們只要把小貓放入指定的位置，切換成跑步的初始造型，重復(fù)循環(huán)執(zhí)行切換下一個(gè)造型，當(dāng)超出跑步編號(hào)（編號(hào)小于7）的數(shù)值范圍后，換回到初始的造型（run-01），周而復(fù)始，重復(fù)跑步的造型，效果還是非常逼真的（圖2）。

2. 山岳背景動(dòng)畫(huà)

完成角色的運(yùn)動(dòng)動(dòng)畫(huà)之后，我們把編程重點(diǎn)轉(zhuǎn)向背景。背景分成三個(gè)部分，陸地和山丘還有天空。

最簡(jiǎn)單的天空背景就是在舞臺(tái)背景中填充藍(lán)色，加上一個(gè)小太陽(yáng)就完成了。

重點(diǎn)在陸地和山丘，這兩個(gè)背景圖都是我們手工繪制完成的，大家也可以發(fā)揮自己的繪畫(huà)能力去美化一下。

圖3是山丘的背景圖，注意用紅色數(shù)字標(biāo)記的四個(gè)區(qū)域，我們?cè)谥谱鞅尘暗臅r(shí)候需要做出重合堆疊拼接的效果，所以要注意紅框區(qū)域左右兩邊高度盡量保持一致。我在左右兩邊點(diǎn)上一個(gè)不起眼的小點(diǎn)（這樣在移動(dòng)的過(guò)程中可以保持比較好的美感）。完成好一幅背景后，可以通過(guò)復(fù)制后修改顏色的方法做出有區(qū)別的造型。

代碼方面我們需要增加三個(gè)新的變量：變量“scroll speed”表示背景運(yùn)動(dòng)速度，用來(lái)控制背景移動(dòng)的快慢。我將scroll speed值設(shè)置為0.25，可自行調(diào)整（值越大速度越快）。

變量“CAMERA X”表示運(yùn)動(dòng)的距離，該變量?jī)H適用于當(dāng)前角色，并且設(shè)置為滑桿動(dòng)態(tài)效果，修改成滑桿效果，我們只需要拖動(dòng)滑桿就可以看到類(lèi)似回播視頻的效果。

變量“X”代表X軸長(zhǎng)度，我們已知舞臺(tái)寬度480所以X每次需增加480。

當(dāng)程序運(yùn)行后，設(shè)置默認(rèn)背景運(yùn)動(dòng)速度0.25，切換到背景造型1，克隆自己，并且切換下一個(gè)造型，將X增加480（把克隆體平移一個(gè)舞臺(tái)的距離），執(zhí)行廣播begin（圖4）。

在廣播中用變量控制背景的移動(dòng)，當(dāng)背景循環(huán)拼接結(jié)束后又可以重新恢復(fù)到初始的位置繼續(xù)進(jìn)行循環(huán)移動(dòng)。這里要求大家有空間思維能力和數(shù)學(xué)計(jì)算能力設(shè)計(jì)出合適的計(jì)算公式，背景的移動(dòng)等于舞臺(tái)寬度減去背景移動(dòng)速度乘目前已經(jīng)移動(dòng)的距離（CAMERA X）除以960（造型有兩個(gè)背景寬度480×2）減去480（圖5）。

3. 地面背景動(dòng)畫(huà)

山丘背景完成后，我們新建一個(gè)角色用來(lái)表示近處地面的場(chǎng)景，這里大家可以發(fā)揮自己的創(chuàng)意多繪制一些小石頭、花花草草等，放在不同的造型中。小陳老師只隨便動(dòng)手繪制了三幅不同的背景，有石頭有蘋(píng)果樹(shù)等，目的是背景移動(dòng)的過(guò)程中可以看到更多不同的場(chǎng)景實(shí)現(xiàn)切換效果，僅供參考。

代碼和山丘部分的代碼類(lèi)似，因?yàn)樵黾恿艘粋€(gè)造型，所以相應(yīng)克隆代碼也多了一份，480的寬度也需要乘以3了（圖6）。

另外還增加了變量“CAMERA Y”，可以控制地面部分在背景中上下移動(dòng)，代碼編寫(xiě)成功后運(yùn)行程序可以看到一只歡快的小貓?jiān)谏种斜寂艿膱?chǎng)景，細(xì)節(jié)滿滿（圖7）。

通過(guò)本次實(shí)驗(yàn)我們又學(xué)會(huì)了新的知識(shí)，大家在空余時(shí)間可以研究一下是否可以將背景也制作融入進(jìn)去，變成一幅白天到黑夜的漸變過(guò)程，期待你們帶來(lái)驚喜哦（圖8）。