資訊內容
Scratch第61講:賽車2-CC哥版
想免費學編程,就請點擊上面的藍字:跟我學Scratch編程,關注CC哥。
今天是中秋節,祝所有關注CC哥的朋友們闔家歡樂,中秋團圓。?CC哥非常喜歡Scratch的原因就是大家可以忽略其他編程工具那么多編程的格式,和記住各種函數以及參數,而把注意力放在創造和思考,以及找出解決問題的方法上。即使CC哥,在用scratch編程的過程中,依然會有滿滿的快樂和成就感。
我們今天繼續賽車這個小程序,主要包括幾個方面的內容:
1:在賽道上加上其他車輛。
2:讓背景草地一起動起來。
3:賽車道可以左右轉向。
先讓我們看一下視頻的效果:
是不是比上一講的賽車程序更生動了,讓我們一個一個來看這三功能是怎么實現的。
背景滾動
之前我們有學過背景的滾動,但是這次不一樣,我們分析細節:
1:我們需要背景符合3D視覺效果,也就是綠色的背景條由上到下,依次變粗,這樣才符合視覺的深度效果。
2:賽車往前開,意味著綠色的背景條要向下滾動,而且還要符合第一條,越往下越粗。
如果單獨實現其中一條很容易,但是如果兩條都要同時實現該怎么做呢?
一般出現在我們腦子里的通常是兩種方法:
1:克隆體,在遠處生成淺色綠條或深色綠條的克隆體,然后生成后往下移動,移動的過程中,可以通過切換造型來實現綠條由細變粗的過程。
2:第二種方法就是用畫筆來畫,就跟動畫片一樣,把每一幀畫出來,也可以形成移動效果。
CC哥用的就是第二種方法,第一步就是先畫一個靜態的背景,然后再考慮怎么動起來。
大家看一下這個慢動作就知道怎么畫出來的吧
程序比較簡單,就是一道一道從左到右來畫,第一條只有1的寬度,第二條就換另一個顏色,同時增加寬度,再畫一條。(這種顏色切換可以用奇偶數來判斷)CC哥把每次寬度增加的值為3,那么判斷每個綠條寬度的奇偶性就可以實現顏色切換。
但是畫完之后如何讓背景動起來呢?這是個技巧,大家是否記得我們過節的時候看彩燈秀的時候,會感覺彩燈在在不斷的移動,其實不是彩燈真實在移動,而是通過彩燈的交替閃爍,讓你有了彩燈移動的視覺效果,那我們也可以這樣做。
這段程序就是不斷地畫背景的程序,每循環一次就是把整個背景重新畫一次,(用自制積木,運行時不刷新屏幕)而每次畫的時候確保與上一幀圖畫相比,把深淺綠條的顏色對調一下。
這個判斷條件就即實現了對每一幀里,每個綠條的顏色切換,同時也保證了下一幀里,每個綠條的顏色跟上一幀同樣位置的綠條的顏色對調。這樣就形成了背景的運動效果,是不是看上去很像綠條在往下移動?
是不是有點繞,再好好想想。
這個是每幀圖畫的時間間隔,我們用了1/speed來計算這個時間間隔,也就是當速度越快時,每幀圖畫切換的越快,也就是深淺綠條顏色切換的越快,那么在視覺上就造成了速度越快,背景滾動越快的效果。
如果想免費獲得CC哥的講座中的程序代碼以及游戲素材,可以通過掃描二維碼關注《跟我學Scratch編程》,然后點擊獲取代碼即可。
賽道的左右轉效果
我們怎么體現賽道視覺左右轉效果呢?
第一:下面不動,遠端會出現偏移,向右偏代表右轉,左偏代表左轉。
第二:路的左右邊要做出弧形效果。
做到了這兩點,是不是就完美的實現了轉向的視覺效果?
因為要做弧形的變化,大家就不要想別的招了,就只能用畫筆來做了。那怎么畫出來呢?
從A點到B點畫條直線很簡單,畫條弧線就不簡單了。
上一講CC哥講了如何畫路面,但是在上一講里面路邊的白線CC哥是單獨畫的就是直接在上下兩端直接畫斜線的方式。但是在這里因為白線就路邊線,也要隨著路面轉向。那么就不能用上一講的做法。而是在畫路面的時候,每畫一條水平路面,同時兩邊各自多畫一段白色的橫線來代表路邊。
另外路的寬度在上一講里我們是根據路的y坐標來計算,現在除了還是用y坐標來計算路的寬度,還要同時在計算出來路的左右兩邊的位置上加一個偏移值才能保證路的轉向效果。而且這個偏移值不是線性的變化,而是當路在最下面時候偏移值為零,而在越往上,偏移值不是線性增加,而是成指數增加,最后達到最大的偏移值,這才能體現出弧線效果。
路-x”這個變量就是算每個高度對應路的寬度(半邊路的寬度)
“路偏移”是在最上端的路偏移中心線的距離。
“路偏移y”是指在不同的y坐標下,路偏移中心線的距離。
這是個偏移系數,當y坐標等于-180的時候,沒有偏移,當坐標等于80的時候,偏移系數為1,用偏移系數的平方,就形成了弧線的偏移效果。
(這幾個變量名,CC哥也沒有特別花心思去定義,可能會讓大家看不懂,所以特意解釋了一下)
這一大段就是畫畫的過程,每一步都是中間花藍色路面,兩邊花白色路邊,路邊的寬度根據y坐標的升高,不斷變小。數學公式是CC哥自己推導的。技巧是只要當成小學數學應用題來解,你就能推導出你想要的公式。然后注意就是每一條線畫的時候,都要在路-x這里加上一個“路偏移y”進行弧線修正。
這一段是做轉向效果,比如我們想從偏移40轉到偏移-40,也就是從右轉轉向左轉,肯定是一步步轉的,而不是一步就轉過來的。所以CC哥用了這段程序來進行轉向操作,這才符合真實賽車轉向的實際效果。
如果想免費獲得CC哥的講座中的程序代碼以及游戲素材,可以通過掃描二維碼關注《跟我學Scratch編程》,然后點擊獲取代碼即可。
分道線的變化
既然轉向效果需要路偏移,那么分道線也要跟著路一起偏移才對。
CC哥把路偏移的值加入到了分道線的代碼里,偏移值乘以偏移系數的平臺就是分道線在每個高度應該偏移的距離。
讓我們看看效果:
哎呀,是不是怎么看怎么別扭,問題出哪了?既然路發生了偏移,那么分道線就不僅僅是位置的偏移,還應該有角度偏移才對。
CC哥把這一句加上,每一個克隆體隨著位置的變化,角度也應該隨著路的偏移進行調整。這個公式大家自己好好理解一下。
這樣感覺就好多了吧。?
如果想免費獲得CC哥的講座中的程序代碼以及游戲素材,可以通過掃描二維碼關注《跟我學Scratch編程》,然后點擊獲取代碼即可。
其他賽車引入
之所以上一講沒有講其他賽車的程序,主要是因為上一講里沒有考慮賽道的轉向效果。
這段代碼是表示每隔一個隨機的時間都會從下面沖出一輛其他賽車。出現的位置也是隨機的,車速也是有快有慢。
這段代碼比較復雜,不知道大家放大后看不看得清:
這里面有幾個關鍵因素:
1:方向校準,主要是不論車輛從下部什么位置出現,都應該在上部消失在路的盡頭。所以實際上車在向上移動的過程中,水平方向也會發生自然的位移。而一共移動的距離與265(路長)比值就是“方向校準”這個變量,起始位置離中心線的距離減去路偏移的距離。
2:車輛路偏移y,這個變量是車輛所在路的某個位置上,路偏移偏移中心線的距離。
車輛隨著y軸的變化,一方面要進行x軸的修正,同時也要進行車輛大小的修正。(空的地方原來CC哥還放了車輛“漂移”的變量,不過為了簡化就暫時拿掉了)
這個很長的判斷主要是一旦出現車輛要跑到賽道外部的時候,能被拉回來。(路邊界的計算要把路偏移算進去)
另外如果出現撞車,那么就通知爆炸角色,執行撞車效果。撞車的爆炸效果我這里就不講了,大家自己看代碼就可以。
另外主賽車也可以考慮路偏移的情況。這里CC哥就不講了。
這個程序看似不復雜,但是很多細節在我們編程的時候要處理,比如景深效果導致我們所有角色運動方式的變化,路的偏移對所有角色的影響等,都需要考慮如何用一些公式去計算。而這些公式的如何得出來,就需要我們自己去推導了,熟能生巧。
聲明:本文章由網友投稿作為教育分享用途,如有侵權原作者可通過郵件及時和我們聯系刪除
