Scratch第五十講:超級瑪麗(一)

admin 發表于 2019-06-02 09:48

首先感謝一下這么多人對CC哥的支持和鼓勵,實話說CC哥并不是編程的專家,我也是一個跟著大家一起學習的編程愛好者。CC哥希望通過這個公眾號,把自己學習Scratch過程中的一些體會和經驗免費的分享給大家,讓所有愛好編程的朋友們能夠通過CC哥的分享共同來體會編程的樂趣。平常CC哥也很忙,但是不管再忙,為了支持CC哥的朋友們,CC哥也盡量做到每周一更,只要能幫到大家,CC哥就會覺得很開心。https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png,而支持CC哥的朋友們只要把這些學習內容,分享給更多的朋友,那就會享受跟CC哥一樣的開心。

今天跟大家一起交流一個超級瑪麗的例子,這個程序是CC哥在官網上看的,通過認真分析了編程者的代碼,CC哥也學到了一些挺有意思的技巧,在這里分享給大家。

CC哥今天只是把程序中的一部分摘取出來跟大家分享,這樣讓大家更容易理解和學習。先看看運行效果。

看到沒,今天分享的很簡單,就是馬里奧在奔跑和跳躍。其他的內容以后CC哥再慢慢分享。

做程序首先要構思,你想做成什么效果,然后這些效果你實現的方法是什么,有哪些難點,你有什么解決方案?所以做程序,不是上來就做,認真思考是第一步。

思考程序的關鍵點

那這個超級瑪麗奧的關鍵點在哪里?

1:首先是奔跑的效果。大家簡單一想就知道,奔跑肯定不是馬里奧在往前跑,而是路在向后跑,實際上馬里奧在屏幕上的位置是不變的。很多跑酷游戲都是這樣的,通常是背景在動,而不是人物在動。那這個路往后跑怎么實現?

2:這個路是高高低低不斷變化的,你用什么辦法能實現這種效果呢?

3:這個路是高高低低不斷變化的,那你怎么保證馬里奧是隨著路升高而升高,隨著路降低而降低呢?

4:另外游戲要做得精細,那么馬里奧奔跑的動作效果就特別重要,用什么方法來實現這個動畫效果呢?

馬里奧奔跑動作的效果

讓我們先從最簡單的開始,馬里奧奔跑動作的效果很簡單,就是用無數個造型循環播放就行了,這個大家應該都知道了。這個游戲里面馬里奧一個簡單的奔跑用了24個造型,其中每兩個連續的造型都是重復的。

http://www.oeerar.tw/Uploads/timg/190602/094Q62136-1.jpg

通常我們做動畫效果都會強調放等待命令,否則程序執行的太快,那么角色的動作可能就變成了快鏡頭。而這個編者就沒有放等待命令。

奔跑的效果的關鍵是角色的步子的頻率要跟路移動的速度一致,這樣才能體現出來在路上跑,而不是在路上滑著跑。(好的編程就是對細節的處理)大家可以自己試一下,比如把等待命令放進去,看看這兩者的差別。

另外如果大家覺得這個角色很好,特別是這幾十個造型,也是不容易找到的,想把這個角色拿到自己的程序里用,要怎么做呢?CC哥在這里教初學者一下,很簡單,你只要把這個角色導出來,再導入到你自己的游戲里即可。

http://www.oeerar.tw/Uploads/timg/190602/094QB061-2.jpg

在角色上點右鍵,選擇導出。然后保存在某個目錄里,那么就會有一個后綴為sprite3的文件。然后打開你自己的程序。在角色的圖標上選擇上傳角色就可以了。

http://www.oeerar.tw/Uploads/timg/190602/094Q64460-3.jpg

所以以后大家看到好的素材,只要有源代碼,都可以很簡單的導入到你自己的程序里面。(CC哥所有例子的源代碼,只要你懂得分享,都可以免費得到哦https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png

路的實現方法

跑酷的關鍵就是背景的移動,這里路就相當于背景。路的關鍵點是兩個,一個是不斷往后退,一個是出現高高低低的效果。這里面其實有兩種方法實現,一種是用屏幕滾動,之前的講座里面有講過,大家可以去復習一下第十八講:Scratch第十八講:如何正確實現背景的滾動。這是一種方法。但是缺點是路徑會是循環的,而不是隨機的。而且背景和角色的互動就只能通過顏色的碰撞來偵測了,編程難度增大。

今天介紹的是另一種方法,用角色來克隆實現。就是把路的一部分作為角色,然后不斷克隆來組成路,再通過移動來形成背景移動的效果。

http://www.oeerar.tw/Uploads/timg/190602/094QI232-5.jpg

這個路的角色有三個造型,一個是水平的路,一個是上升的路,一個是下降的路。這三種路的造型隨機組合起來,那么就形成了高高低低不斷變化的路。

http://www.oeerar.tw/Uploads/timg/190602/094QH4X-6.jpg

http://www.oeerar.tw/Uploads/timg/190602/094QJ0a-7.jpg

這段程序大家可以自己讀。這里面有兩個關鍵點:

1:第一個就是克隆的頻率要和路移動的速度一致,如果不一致,那就亂套了。如何保持一致是關鍵點。

http://www.oeerar.tw/Uploads/timg/190602/094QM193-8.jpg

這就是不同步的效果。

那如何做到呢?我們分析代碼,會發現這里面有一個狀態變量:LaunchObstacle。這個變量就是一個開關變量,來決定什么時候開始一個克隆。在主程序的循環里面有一個等待命令。這有等待到這個變量的值是YES的時候才會克隆下一個變量。而在克隆啟動的子程序里面,我們會看到有一段語句:

http://www.oeerar.tw/Uploads/timg/190602/094Q94P2-9.jpg

也就是克隆出來的變量要先向左邊移動15步之后,這個變量才會變成YES。也就是說克隆出來的變量移動開之后才會克隆一個新的克隆體。

通過這個變量和等待命令,就完美的讓一條路連貫起來。大家一定要記得這個編程方法哦。很實用的。

2:除了路的克隆頻率和運動速度的同步,還有一點很關鍵,如何讓三個造型能夠完美銜接,而不是會突然凸起一塊和凹陷一塊。也就是讓路平滑。所以每次克隆體的位置也是不一樣的,每次克隆的位置都要根據上一個克隆體的位置決定,如果前面一個克隆體是向上走的造型,那么下一個的起始位置就要向上一些。如果前面是向下走的造型,那么下一個克隆體的起始位置就要向下一些。

http://www.oeerar.tw/Uploads/timg/190602/094QI232-5.jpg

大家再看這三個造型的名字,看明白沒有?只要你讀取了每一個造型的名字,就知道下一個克隆體的起始位置了。是不是很有技巧。雖然不復雜,但是確實很有技巧https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png。所以編程并不是非要做得很復雜,關鍵還是思路和實用。

http://www.oeerar.tw/Uploads/timg/190602/094Q934F-12.jpg

好點子比技術更重要

3:另外路的高低要有限制,不能太高也不能太低,雖然用了隨機數,但是需要做控制。這個大家自己看程序吧。

馬里奧如何在路上跑

如何在路上跑,說的意思是如何保持在路上,而不是跑到空中和路的下面。做這個我們最常見的思路是檢測馬里奧角色和路之間的碰撞關系。但是之前很多例子我們有講過,當你做碰撞檢測時,如果角色的造型比較復雜,那么碰撞檢測往往會出現很多問題。所以對于復雜造型角色的碰撞檢測,往往引入形狀簡單造型的角色專門用來做碰撞檢測,然后只要保證讓復雜的角色來隨時跟隨這個簡單造型的角色即可。

http://www.oeerar.tw/Uploads/timg/190602/094Q95E3-13.jpg

看,這位編程者不但引入了一個,而是引入了三個。為什么要引入三個?且讓CC哥慢慢給你分解。https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4.pnghttps://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_4.png

馬里奧的第一個影子角色

這個程序真的是體現了:簡單的技巧,好的點子,達到完美效果的一個實例。所以說,以后大家不用太擔心自己的編程技巧,把更多的重心放在如何利用你掌握的技巧想出好的點子來實現完美的效果。大家一定要記住CC哥今天說的話。

馬里奧角色代碼

http://www.oeerar.tw/Uploads/timg/190602/094Q935E-16.jpg

這是馬里奧角色的代碼,非常簡單,就是跟緊controller這個角色。也就是說,controller這個角色是關鍵,用來跟路做互動的角色。而不是馬里奧這個角色。然后就是不斷切換造型來形成跑步的動畫效果。

controller角色代碼

http://www.oeerar.tw/Uploads/timg/190602/094R0Ia-17.jpg

這是controller的完整代碼,讓CC哥跟大家一起來分析一下。

http://www.oeerar.tw/Uploads/timg/190602/094R0O38-18.jpg

大家知道,這種影子角色都是來做偵測的,不能讓大家看到。但是又不能隱藏,因為角色隱藏之后就無法再做碰撞檢測了,那怎么辦?這里面有一個技巧就是把透明度設定成100!透明的角色,雖然你看不到,但是角色之間的碰撞檢測沒有任何問題。(這哥們為什么設成99?CC哥也沒搞明白,是不是有什么暗招CC哥沒看出來?不知道,大家如果知道了告訴我一聲。)

http://www.oeerar.tw/Uploads/timg/190602/094R06331-19.jpg

這一段代碼是指沒有跳躍動作的代碼,其中的主循環是一個下降動作的標準代碼。Obstacle是路的角色名字。這段代碼就是保證角色始終會落到路面上(下落過程是帶加速度的)。前面CC哥講下落講太多了,這里就不需要再講了。

http://www.oeerar.tw/Uploads/timg/190602/094R023S-20.jpg

這段代碼是處理收到起跳命令之后的跳躍處理過程。JumpStartPower這個變量是指起跳的初始動能。代碼先包括一個起跳過程,然后是一個下降過程。這段代碼如果大家學過上一講:Scratch第四十九講:完美的下落和反彈,就非常容易理解。(他這個是簡化的起跳和下落,不是完美的https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_12.pnghttps://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_12.png

大家需要學習的是他的流程控制。大家注意到,編程者非常習慣用消息這個模式,也就是很多進程的控制都是用消息來實現的。

程序開始就用了#NotJumping這個消息來啟動這個影子角色的關鍵任務,始終保持落在路面上。

然后用了#Jump這個消息來處理起跳和降落的過程。每個消息都有循環過程,那如何讓不同的消息導致角色控制不出現相互干擾呢?

http://www.oeerar.tw/Uploads/timg/190602/094R11B1-23.jpg

編程者用了這條命令,停止該角色的其他腳本,來確保該角色在起跳后不受其他部分代碼的干擾,也就是保證起跳部分代碼的獨立性。

http://www.oeerar.tw/Uploads/timg/190602/094R11K4-24.jpg

而在起跳這部分代碼完全結束后,再重新廣播#NotJumping,來保證原先進程的繼續執行。

所以大家可以學習這個技巧,當你一個角色里有多個行動進程的時候,可以用這組命令來進行控制,確保某部分動作或進程的獨立性。

大家注意到沒有,這個影子角色的代碼只做到了讓角色始終會落到路上,路水平和路下降都沒問題,但是如果當路向上升的時候,怎么讓角色也跟著向上升呢?這個影子角色里沒有這部分的代碼!那如何實現呢?

馬里奧的第二個影子角色

http://www.oeerar.tw/Uploads/timg/190602/094R161J-25.jpg

CC哥把這三個影子角色的顯示特性打開,這樣我們就看到了三個影子角色,其中最上面小的那個,就是Riser角色。

這個影子角色的目的是用來讓馬里奧能夠做到隨著上坡的路,一起上升的。


Riser的角色代碼

http://www.oeerar.tw/Uploads/timg/190602/094R11403-26.jpg

代碼很簡單,就是檢測Riser這個變量如果碰到了路的角色Obstacle,然后就發布消息Raiseshadow3。

http://www.oeerar.tw/Uploads/timg/190602/094R15539-27.jpg

在第一個影子角色Controller里有對應的接收消息的程序。如果接收到這個消息,就向上移動3步。

問題來了,為什么要增加一個單獨的影子角色來判斷呢?為什么不用之前那個影子角色來做判斷呢?

編者的思路還是很巧妙的,第一個影子角色的目的是為了讓馬里奧始終能落在路上。所以這個角色應該是盡量保持在跟路(Obstacle)接觸的狀態。路向下走,角色自然會落下來。但是如果往上走,那該怎么判斷路已經在向上的走呢?第一個影子角色顯然就判斷不了了。編者另外設計了一個影子角色Riser,然后讓這個角色的位置比Controller這個角色高一點,也就是正常來說,這個Riser的角色不會碰到路。會保持在比路高一點的位置。一旦路往上走,那么Riser繼續往前走就會碰到路,一旦Riser碰到路,那么馬上就知道路向上走了,就發布向上走的消息,通知Controller往上移動三步,如果繼續碰到路,說明還在向上走,那么就再移動三步。

是不是很有意思,雖然增加了一個角色,但是編碼簡單了很多,否則如果只用一個影子角色來做,豈不是要增加無數條代碼,和處理更復雜的判斷。

http://www.oeerar.tw/Uploads/timg/190602/094R2F33-28.jpg

CC哥把四個角色,一個馬里奧,三個影子角色全部都移動到中心位置。移到中心位置以后,大家就會看到這四個角色的位置關系。所以說,編者在布局時就讓馬里奧的腳底跟Controller的角色的平齊,然后Riser的角色高于Controller角色。(一個簡單技巧,當你想調整角色之間的位置關系的時候,就讓每個角色移動到正中心,然后再在造型里面把每個角色拖到你想要的位置。)

http://www.oeerar.tw/Uploads/timg/190602/094R25F0-29.jpg

馬里奧的第三個影子角色

最難理解的就是第三個影子角色。CC哥也是想了半天,為什么要用這個角色呢?

Controller2的角色代碼

http://www.oeerar.tw/Uploads/timg/190602/094R23333-30.jpg

從代碼里看,這段代碼就是一個功能,控制馬里奧起跳的,非常簡單,但是為什么單獨放一個角色呢?以我們做程序的經驗,完全可以把這個角色省略掉,直接把這段程序做到controller里面。

http://www.oeerar.tw/Uploads/timg/190602/094R25O6-31.jpg

就把這段程序放到controller的主循環里就好了。為什么單獨啟用這個角色呢?CC哥還特意測試了一下,放到controller完全沒有問題,代碼的邏輯也沒有毛病。這個角色完全可以刪掉。百思不得其解。然后CC哥就是反復比較這兩種模式游戲執行的情況。試驗了十幾分鐘后,突然領悟了!領悟完不得不點贊編程者思路的嚴謹。

http://www.oeerar.tw/Uploads/timg/190602/094R33620-32.jpg

大家仔細看這一段,CC哥把controller的角色顯示打開,這樣大家可以看得更清楚。大家發現一個問題沒有?

當controller往上走和水平走的時候,controller會始終貼在路上。而在往下走的時候,controller就不是一直貼在路上了,而是跳著往下落,并不是一直貼在路上往下走。這就是關鍵點!

這種情況對程序有什么影響呢?

我們看代碼就知道了,起跳的關鍵判斷就是確保controller在路上才行。如果controller不在路上,那么起跳動作就不會發生。而剛才大家看到了,controller在下降的時候并不是一直在路上。所以當controller正好不在路上的時候,馬里奧就無法起跳了。而超級瑪麗這個游戲大家都知道,需要隨時起跳,吃金幣,躲避怪物等等,如果在沿著路向下走的時候由于controller不能始終貼在路上,所以會造成沒法及時起跳。一個起跳不靈活的超級瑪麗是不是就沒法玩了。https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.pnghttps://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.pnghttps://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png

所以編程者特意做了一個新的角色,controller2,特意比controller低了一些,其目的就是為了確保在路下降的時候,controller2能盡量貼著路,避免掉controller隨著路向下走的時候不能及時貼到地的情況。

有意思吧,有時候分析一個游戲的代碼就像看一個藝術作品,慢慢體會編碼者在編程時候的思路和想法。好的程序都會有無數個思維巧妙的地方。不見得代碼有多復雜,邏輯判斷繞多少圈就顯得水平高。一個完全讓別人都看不懂的代碼也不是什么好代碼。

?

祝所有小朋友六一節快樂

今天是六一兒童節,如果有小朋友今天還跟著CC哥一起學編程,那你一定會成為一個很厲害的編程小神童的。https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.pnghttps://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.pnghttps://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png

如果覺得CC哥做的不錯,請點擊右下角的"好看",給CC哥一個鼓勵!

后記,小編朋友公司研發了一個游戲化的少兒編程在線課程(5-12歲),游戲化教學結合scratch(一款在線少兒編程工具,類似樂高的積木拼搭),我家娃娃學了幾次課,非常喜歡(超預期),16次課才200多塊錢,對鍛煉孩子的思維能力和動手動力很有幫助。

感興趣的朋友可以掃描二維碼,關注一下,或微信搜索“大耳猴少兒編程”

http://www.oeerar.tw/Uploads/Editor/2018-04-22/5adca08bdc212.jpg