GameMaker｜程式碼講解｜滑鼠點方塊｜幼幼班10
這篇內容，我將會用適合初學者的詞語，來解釋實戰範例中的程式碼。我會將心力，著重於解釋「背後的邏輯原理」，而不是那些深奧的專有名詞。
至於程式語言中的專有名詞，未來如果有機會，會再另外製作相關的教學。如果我在幼幼班講這些，只會讓各位失去學習的樂趣而已。
本篇教學所使用的系統是Windows 10，如果有按鍵相關的說明，會用Windows的系統來解釋。如果你用的是Mac系統，再麻煩自行換成相對應的按鍵。
前置知識
在學習本篇內容之前，最好具備以下的前置知識，以免看不懂這篇教學的內容。
- GameMaker｜教學分類指南
- GameMaker｜遊戲製作原理｜簡易介紹｜幼幼班01
- GameMaker｜安裝教學｜更改語系｜幼幼班02
- GameMaker｜開啟Project｜調整Layout｜幼幼班03
- GameMaker｜介面導覽｜幼幼班04
- GameMaker｜Sprite｜滑鼠點方塊｜幼幼班05
- GameMaker｜Object｜滑鼠點方塊｜幼幼班06
- GameMaker｜Room｜滑鼠點方塊｜幼幼班07
- GameMaker｜Camera｜滑鼠點方塊｜幼幼班08
- GameMaker｜Events｜滑鼠點方塊｜幼幼班09
實戰範例：滑鼠點方塊
從幼幼班05開始，我會一邊講解GameMaker的基礎功能，一邊加入實戰的操作，讓各位能完成這個，看起來蠻無聊的「滑鼠點方塊」遊戲。
實戰範例：滑鼠點方塊
如何測試遊戲
當我們輸入完程式碼，想要測試運行結果時，可以尋找畫面左上角，一個播放形狀的按鈕，點擊之後，就會運行整個專案的結果。快捷鍵的話，是鍵盤上的「F5」。
Run的位置
座標系統
在GameMaker的座標系統中，原點的位置是在「左上角」，而非我們常見的左下角。換句話說，X軸向右為正，Y軸則是向下為正。
如果你要讓遊戲中的角色往上跳，記得，Y軸的座標是「減少」，這樣才會讓角色往畫面「上方」移動。
GameMaker的座標系統
自訂參數 & 內建參數
首先，我們看看下面的這段程式碼。
//設定兩個自訂參數，分別表示block的xy座標
block_x = 10 ;
block_y = 10 ;
//實際去改變block的座標位置
obj_block.x = block_x ;
obj_block.y = block_y ;
所謂的自訂參數，就是由我們自己，所「虛構」出來的參數。如果我們只是改變這些數值，遊戲中的畫面是不會變化的。
而內建參數，則是GameMaker這套遊戲引擎，所提供給我們的參數。我們從幼幼班05的教學開始，所碰到的XY座標、寬高數值，這些其實都是在設定內建參數。
我們回到展示的那段程式碼，在這段程式碼當中，我們設定了兩個「自訂參數」，分別是：block_x和block_y，並把他們的數值設定成10。
但是這樣做，並不會實際讓block的座標改變，我們還需要使用「內建參數」，才能真的去改變block的座標。
在GameMaker當中，obj_block.x和obj_block.y，他們所代表的參數意義是「物件obj_block的XY座標位置」。
因此，我們只要把block_x和block_y，放到obj_block.x和obj_block.y裡面。最終，obj_block的座標位置，就會順利的變成(10, 10)。
邏輯判斷：if else
「如果發生什麼事情，就去做什麼事情」，這在程式設計當中，是個頻繁使用的「邏輯判斷」功能。
例如：當成績大於等於80分時，就顯示出評價A。如果用程式碼表示，大概會像下方的這個範例。
//當成績大於等於80分時，顯示出評價A
If (成績 >= 80)
{
顯示"評價A"
}
備註：上面的程式碼，是為了讓各位看懂，才用這些中文字，實際上這樣是不能運作的。
邏輯判斷：and
如果我們需要「同時」滿足多個條件時，可以使用「and」的功能，來完成這項工作。
例如：當成績介於70到79分之間，就顯示出評價B。
由於我們只能用「大於、小於、等於」，來當作條件限制，因此要做出「數值區間」的限制，就要用「大於等於70 and 小於 80」來當作條件。
//當成績介於70到79分之間，就顯示出評價B
If (成績 >= 70 && 成績 < 80)
{
顯示"評價B"
}
備註：在GameMaker中，and的功能是用&&來表示。
程式碼解析：滑鼠點方塊
這是Create和Step中的程式碼：
這是方便閱讀的文字版：
//這段程式碼，放在Create裡面
//設定兩個自訂參數，分別表示block的xy座標
block_x = 10 ;
block_y = 10 ;
//實際去改變block的座標位置
obj_block.x = block_x ;
obj_block.y = block_y ;
//隨機改變block的位置，但不會超出畫面
randomise() ;
block_x = irandom_range( 0 , room_width - sprite_get_width(0)) ;
block_y = irandom_range( 0 , room_height - sprite_get_height(0)) ;
obj_block.x = block_x ;
obj_block.y = block_y ;
//這段程式碼，放在Step裡面
if mouse_check_button_pressed( mb_left )
{
if mouse_x >= block_x && mouse_x <= block_x + sprite_get_width(0)
&& mouse_y >= block_y && mouse_y <= block_y + sprite_get_height(0)
{
randomise() ;
block_x = irandom_range( 0 , room_width - sprite_get_width(0)) ;
block_y = irandom_range( 0 , room_height - sprite_get_height(0)) ;
obj_block.x = block_x ;
obj_block.y = block_y ;
}
}
以下是實戰範例的「邏輯設計」：
- 初始化，將方塊的座標，設置為(10, 10)。
- 初始化，隨機改變方塊的位置，但不會超出畫面。
- 檢查滑鼠的左鍵，是否有被按下。
- 如果滑鼠的左鍵被按下，接著檢查滑鼠的座標，是否有在方塊的範圍內。
- 如果滑鼠的座標在方塊內，就隨機改變方塊的位置，但不會超出畫面。
🔸邏輯設計01
文字版的第2行～第7行，為第一項的程式設計。這部分的內容，已經在「自訂參數 & 內建參數」介紹過，所以就不再贅述。
🔸邏輯設計02
文字版的第9行～第14行，為第二項的程式設計。這裡要講解的程式碼，如下：
randomise() ;
irandom_range( n1 , n2 ) ;
block_x = irandom_range( 0 , room_width - sprite_get_width(0)) ;
block_y = irandom_range( 0 , room_height - sprite_get_height(0)) ;
randomise()的功能，是改變隨機種子。隨機種子的概念，不適合在幼幼班裡講解，各位只要知道，如果要達成「完全的隨機」，就需要加入這行程式碼。
irandom_range(n1,n2)的功能，是可以讓我們產生一個「隨機的整數」，而這個隨機的範圍，則是由括號裡面的n1和n2來決定。
在實戰範例裡，隨機出來的數，會成為方塊的「座標位置(分別是X和Y兩個參數)」。那n1和n2要怎麼設定，才能讓方塊的圖案，保持在畫面之間呢？
因為文字不好說明，所以我用以下這張圖，來向各位進行解釋：
n1和n2的圖解
由於我們將方塊的原點，設置在左上角，因此，如果不要讓方塊超出畫面，那X座標的最大值(也就是n2)，就會是「房間的寬度減掉方塊的寬度」。
至於X的最小值(n1)，就會是房間的原點座標，因此會等於0。
Y座標的原理，跟X座標是一樣的，只是使用的參數改成了「高度」而已。
🔸邏輯設計03
文字版的第17行，為第三項的程式設計。這裡要講解的程式碼，如下：
mouse_check_button_pressed( mb ) ;
if mouse_check_button_pressed( mb_left )
{
「19～26行的程式碼」
}
mouse_check_button_pressed(mb)的功能，是用來檢查，滑鼠的某個按鍵是否有按下。有的話，會回傳true，表示有按下；沒有的話，會回傳false，表示沒有按下。
至於要檢查哪個按鍵，則是由括弧裡的mb參數來決定。這裡我們使用mb_left，這表示檢查滑鼠的左鍵。
當if收到true的指令，那就表示左鍵有按下，那就會執行if裡面的程式碼，也就是「19～26行的程式碼」。
這邊要補充說明一下，這個檢查的功能，只有在「按下的瞬間」，才會觸發，當滑鼠「向上放開」時，並不會有效果。
當我們使用按鈕(不論是鍵盤或滑鼠)時，其實是會觸發「按下」和「放開」兩種狀態，因此在設計程式時，要注意遊戲要用哪個狀態，會比較適合。
備註：實際上除了上面兩種狀態之外，還有其他的檢查方式。通常都是我們有需求時，才會去官方的說明書裡，查看相關的使用方式。
🔸邏輯設計04
文字版的第19行～第20行，為第四項的程式設計。這裡要講解的程式碼，如下：
if mouse_x >= block_x && mouse_x <= block_x + sprite_get_width(0)
&& mouse_y >= block_y && mouse_y <= block_y + sprite_get_height(0)
{
「22～26行的程式碼」
}
其實這段程式的邏輯，在「顯示出評價B」的例子中，就已經解釋過，只是「範圍」變得比較複雜而已。
由於方塊的座標是由兩個參數(X和Y)所組成，所以條件就要變成，同時滿足X的區間範圍，和Y的區間範圍。最終，就變成了要同時滿足，四個數值的條件狀況。
用下面這張圖，各位應該就能了解，X座標的數值範圍(Y座標的部分，只要把參數換成「高度」即可)：
X座標範圍的圖解
🔸邏輯設計05
文字版的第22行～第26行，為第五項的程式設計。這部分的內容與「邏輯設計02」相同，所以就不再贅述。
結語
這邊我想聲明一件事情，在這篇教學當中，有些用來解釋的名詞，是我自己發明的，例如：自訂參數和內建參數。
因為我認為使用這種名詞，能讓初學者們，更快的認識GameMaker。如果你去翻官方說明書，只會看到變數、賦值、內建變數、資料型態，這些很深奧的名詞。
如果你沒有任何程式背景，在看完這些名詞解釋之後，相信你就會放棄寫程式了，但這不是我想要的結果。
雖然我的解釋，會比傳統的說明書簡單，但這也會衍生出另一個問題：
如果你拿我的這些詞彙，去跟「傳統的」工程師溝通，他們可能會聽不懂。
解決這個問題方法，也就只有把那些，很複雜的專有名詞，塞進自己的腦袋瓜裡面。
之後，我也會考慮，去解釋那些麻煩的專有名詞，但那可能會是蠻後面的事情了。有興趣的話，各位可以等等看。
另外，自訂參數在這個範例中，似乎沒什麼用處，但實際上，他們的用途非常廣。
例如：玩家的速度、玩家的血量、怪物的血量，這些都會使用到自訂參數。
如果要製作出好的遊戲，自訂參數的設計，絕對是不能忽視的重要因素之一。
🔔如果內容對你有幫助，可以按個喜歡，這樣就能讓更多人，接觸到這些棒棒的內容🔔
✨祝各位也能開心的做出好遊戲✨
你可能也想看
