GameMaker|程式碼講解|滑鼠點方塊|幼幼班10

更新於 發佈於 閱讀時間約 11 分鐘

這篇內容,我將會用適合初學者的詞語,來解釋實戰範例中的程式碼。我會將心力,著重於解釋「背後的邏輯原理」,而不是那些深奧的專有名詞。

至於程式語言中的專有名詞,未來如果有機會,會再另外製作相關的教學。如果我在幼幼班講這些,只會讓各位失去學習的樂趣而已。

本篇教學所使用的系統是Windows 10,如果有按鍵相關的說明,會用Windows的系統來解釋。如果你用的是Mac系統,再麻煩自行換成相對應的按鍵。

raw-image


前置知識


在學習本篇內容之前,最好具備以下的前置知識,以免看不懂這篇教學的內容。


實戰範例:滑鼠點方塊


從幼幼班05開始,我會一邊講解GameMaker的基礎功能,一邊加入實戰的操作,讓各位能完成這個,看起來蠻無聊的「滑鼠點方塊」遊戲。

實戰範例:滑鼠點方塊

實戰範例:滑鼠點方塊


如何測試遊戲


當我們輸入完程式碼,想要測試運行結果時,可以尋找畫面左上角,一個播放形狀的按鈕,點擊之後,就會運行整個專案的結果。快捷鍵的話,是鍵盤上的「F5」。

Run的位置

Run的位置


座標系統


在GameMaker的座標系統中,原點的位置是在「左上角」,而非我們常見的左下角。換句話說,X軸向右為正,Y軸則是向下為正。

如果你要讓遊戲中的角色往上跳,記得,Y軸的座標是「減少」,這樣才會讓角色往畫面「上方」移動。

GameMaker的座標系統

GameMaker的座標系統


自訂參數 & 內建參數


首先,我們看看下面的這段程式碼。

//設定兩個自訂參數,分別表示block的xy座標
block_x = 10 ;
block_y = 10 ;
//實際去改變block的座標位置
obj_block.x = block_x ;
obj_block.y = block_y ;


所謂的自訂參數,就是由我們自己,所「虛構」出來的參數。如果我們只是改變這些數值,遊戲中的畫面是不會變化的。

而內建參數,則是GameMaker這套遊戲引擎,所提供給我們的參數。我們從幼幼班05的教學開始,所碰到的XY座標、寬高數值,這些其實都是在設定內建參數。


我們回到展示的那段程式碼,在這段程式碼當中,我們設定了兩個「自訂參數」,分別是:block_xblock_y,並把他們的數值設定成10。

但是這樣做,並不會實際讓block的座標改變,我們還需要使用「內建參數」,才能真的去改變block的座標。


在GameMaker當中,obj_block.xobj_block.y,他們所代表的參數意義是「物件obj_block的XY座標位置」。

因此,我們只要把block_xblock_y,放到obj_block.xobj_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 ;
}
}


以下是實戰範例的「邏輯設計」:

  1. 初始化,將方塊的座標,設置為(10, 10)。
  2. 初始化,隨機改變方塊的位置,但不會超出畫面。
  3. 檢查滑鼠的左鍵,是否有被按下。
  4. 如果滑鼠的左鍵被按下,接著檢查滑鼠的座標,是否有在方塊的範圍內。
  5. 如果滑鼠的座標在方塊內,就隨機改變方塊的位置,但不會超出畫面。


🔸邏輯設計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的圖解

n1和n2的圖解


由於我們將方塊的原點,設置在左上角,因此,如果不要讓方塊超出畫面,那X座標的最大值(也就是n2),就會是「房間的寬度減掉方塊的寬度」。

至於X的最小值(n1),就會是房間的原點座標,因此會等於0。

Y座標的原理,跟X座標是一樣的,只是使用的參數改成了「高度」而已。


🔸邏輯設計03


文字版的第17行,為第三項的程式設計。這裡要講解的程式碼,如下:

mouse_check_button_pressed( mb ) ;

if mouse_check_button_pressed( mb_left )
{
1926行的程式碼」
}


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)
{
2226行的程式碼」
}


其實這段程式的邏輯,在「顯示出評價B」的例子中,就已經解釋過,只是「範圍」變得比較複雜而已。

由於方塊的座標是由兩個參數(X和Y)所組成,所以條件就要變成,同時滿足X的區間範圍,和Y的區間範圍。最終,就變成了要同時滿足,四個數值的條件狀況。

用下面這張圖,各位應該就能了解,X座標的數值範圍(Y座標的部分,只要把參數換成「高度」即可):

X座標範圍的圖解

X座標範圍的圖解


🔸邏輯設計05


文字版的第22行~第26行,為第五項的程式設計。這部分的內容與「邏輯設計02」相同,所以就不再贅述。


結語


這邊我想聲明一件事情,在這篇教學當中,有些用來解釋的名詞,是我自己發明的,例如:自訂參數和內建參數。

因為我認為使用這種名詞,能讓初學者們,更快的認識GameMaker。如果你去翻官方說明書,只會看到變數、賦值、內建變數、資料型態,這些很深奧的名詞。

如果你沒有任何程式背景,在看完這些名詞解釋之後,相信你就會放棄寫程式了,但這不是我想要的結果。


雖然我的解釋,會比傳統的說明書簡單,但這也會衍生出另一個問題:

如果你拿我的這些詞彙,去跟「傳統的」工程師溝通,他們可能會聽不懂。

解決這個問題方法,也就只有把那些,很複雜的專有名詞,塞進自己的腦袋瓜裡面。

之後,我也會考慮,去解釋那些麻煩的專有名詞,但那可能會是蠻後面的事情了。有興趣的話,各位可以等等看。


另外,自訂參數在這個範例中,似乎沒什麼用處,但實際上,他們的用途非常廣。

例如:玩家的速度、玩家的血量、怪物的血量,這些都會使用到自訂參數。

如果要製作出好的遊戲,自訂參數的設計,絕對是不能忽視的重要因素之一。




🔔如果內容對你有幫助,可以按個喜歡,這樣就能讓更多人,接觸到這些棒棒的內容🔔


✨祝各位也能開心的做出好遊戲✨

留言
avatar-img
留言分享你的想法!
avatar-img
開心做遊戲 Happy Making Game
11會員
68內容數
免費、開心、簡單,這是我做教學的理念,我希望透過我的行動,讓人們找回自我學習的快樂,讓那些資源稀少的自學者們,也能朝著自己的夢想來前進。讓我們一起開心的做出遊戲吧!
2024/07/23
這篇內容,將透過實戰教學,介紹GameMaker中的Event。包括Event的簡介、Create的講解、Step的講解、Events的基本操作。
Thumbnail
2024/07/23
這篇內容,將透過實戰教學,介紹GameMaker中的Event。包括Event的簡介、Create的講解、Step的講解、Events的基本操作。
Thumbnail
2024/07/22
這篇內容,將透過實戰教學,介紹GameMaker中的Camera。包括Camera的簡介、設定Camera的方法、Viewport的介紹。
Thumbnail
2024/07/22
這篇內容,將透過實戰教學,介紹GameMaker中的Camera。包括Camera的簡介、設定Camera的方法、Viewport的介紹。
Thumbnail
2024/07/21
這篇內容,將透過實戰教學,介紹GameMaker中的Room。包括Room的簡介、調整寬高、圖層功能的概述、用Object來建立實體。
Thumbnail
2024/07/21
這篇內容,將透過實戰教學,介紹GameMaker中的Room。包括Room的簡介、調整寬高、圖層功能的概述、用Object來建立實體。
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
這篇內容,簡單介紹了GameMaker的遊戲製作原理。包括Object、參數、程式碼等概念。同時也簡單介紹了GameMaker的適用範圍和特色。
Thumbnail
這篇內容,簡單介紹了GameMaker的遊戲製作原理。包括Object、參數、程式碼等概念。同時也簡單介紹了GameMaker的適用範圍和特色。
Thumbnail
一、了解思維 二、大量體驗 三、拆解架構 四、找出樂趣
Thumbnail
一、了解思維 二、大量體驗 三、拆解架構 四、找出樂趣
Thumbnail
《UX in the Jungle》是一款廣受使用者經驗(UX, User eXperience)設計及軟體開發從業人員好評的教育遊戲。玩佳就算沒有相關背景知識,也能在遊戲中體會到產品開發過程的酸甜苦辣。這篇文章將介紹這款桌遊教具的開發歷程。
Thumbnail
《UX in the Jungle》是一款廣受使用者經驗(UX, User eXperience)設計及軟體開發從業人員好評的教育遊戲。玩佳就算沒有相關背景知識,也能在遊戲中體會到產品開發過程的酸甜苦辣。這篇文章將介紹這款桌遊教具的開發歷程。
Thumbnail
2019年五月,我邀請了知名桌遊粉絲團「桌遊菜鳥」的團長 Peter Liao 試玩我設計的《UX in the Jungle》。沒想到幾個禮拜之後,我就在他的粉絲頁裡看到這篇貼文 — 《教育與桌遊的距離,是什麼?》,意外發現他給了我們這套教育遊戲及設計團隊相當不錯的評價...
Thumbnail
2019年五月,我邀請了知名桌遊粉絲團「桌遊菜鳥」的團長 Peter Liao 試玩我設計的《UX in the Jungle》。沒想到幾個禮拜之後,我就在他的粉絲頁裡看到這篇貼文 — 《教育與桌遊的距離,是什麼?》,意外發現他給了我們這套教育遊戲及設計團隊相當不錯的評價...
Thumbnail
你買了一款酷炫的新遊戲,你很想趕快開始玩,於是用一目十行的速度看完規則書,你終於理解這遊戲的規則了!但是,在開始玩遊戲之前,你還得經過一道關卡——遊戲教學。 無論你喜不喜歡,每個桌遊人都有成為教學者的時刻,有幾個小技巧,我認為對教學是有幫助的,今天來拋磚引玉,也歡迎大家在留言區分享你的教學經驗喔!
Thumbnail
你買了一款酷炫的新遊戲,你很想趕快開始玩,於是用一目十行的速度看完規則書,你終於理解這遊戲的規則了!但是,在開始玩遊戲之前,你還得經過一道關卡——遊戲教學。 無論你喜不喜歡,每個桌遊人都有成為教學者的時刻,有幾個小技巧,我認為對教學是有幫助的,今天來拋磚引玉,也歡迎大家在留言區分享你的教學經驗喔!
Thumbnail
前一篇我們介紹了遊戲模板的基本架構,在這篇文章中會記錄目前的開發進度,主要先把遊戲核心邏輯寫完,再慢慢完成其他功能,在這系列的文章中,我不會太聚焦於寫程式的部分,如果想看程式內容的話,可以到我的 github 上看喔,讓我們開始吧!
Thumbnail
前一篇我們介紹了遊戲模板的基本架構,在這篇文章中會記錄目前的開發進度,主要先把遊戲核心邏輯寫完,再慢慢完成其他功能,在這系列的文章中,我不會太聚焦於寫程式的部分,如果想看程式內容的話,可以到我的 github 上看喔,讓我們開始吧!
Thumbnail
有些風景需要親自經歷後才能了解箇中滋味,這初衷,也可能讓您在20幾年後的今天,被現實打擊到身心疲憊時為了鼓舞自己大聲吶喊莫忘初衷後可以立即回憶起的經歷。 以上故事純屬虛構,如有雷同實屬巧合,以下開始本次教學。 依照慣例我們一樣先來看看完成後的的遊玩影片: A、提案企劃 一句話形容這個遊戲 遊戲類型
Thumbnail
有些風景需要親自經歷後才能了解箇中滋味,這初衷,也可能讓您在20幾年後的今天,被現實打擊到身心疲憊時為了鼓舞自己大聲吶喊莫忘初衷後可以立即回憶起的經歷。 以上故事純屬虛構,如有雷同實屬巧合,以下開始本次教學。 依照慣例我們一樣先來看看完成後的的遊玩影片: A、提案企劃 一句話形容這個遊戲 遊戲類型
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News