摘要
本章涉及主要內容:父對象和子對象、序列幀圖的使用、計時器
本章節實現內容:按鈕的基礎功能:移入、點擊狀態、自動彈起
思路分析
我們的需求:<span style="color: #ff0000">制作2個不同的按鈕,鼠標移入和點擊都會改變狀態</span>(暫不制作點擊后產生的效果)
由此我們得出以下需要解決的問題:
1.鼠標移入后按鈕狀態改變
2.鼠標移出后狀態按鈕恢復
3.鼠標按下后狀態按鈕改變
4.鼠標釋放后狀態會自動恢復
5.制作2個(N個)按鈕需要寫2次(N次)代碼?
<span style="color: white">br
br
br</span>
實現過程
新建工程
這里直接跳過,若還不會新建工程建議先學習官方教程。(新工程采用GML方式)
<span style="color: white">br
br</span>
加載精靈
1.資源準備
這里我們需要準備2個按鈕的精靈資源,資源需要3個狀態分別為:常規時的樣子、鼠標移入時的樣子,點擊(選中)時的樣子,依次以序列幀方式排列并且取名為<span style="color: #ff0000">study_button_strip3</span> 和<span style="color: #ff0000">study_button1_strip3</span>,以下是本章中使用的兩個素材(右鍵另存為即可).
<span style="color: white">br
br</span>
2.資源導入
直接把[步驟1]中所準備的兩個按鈕資源拖入到工程內(記住:不是文件夾內,要拖入到軟件已經打開的工程里。),由于我們命名是以strip3,所以GMS2軟件會自動把資源切割為3等分。導入資源后把精靈名字后的_strip3都刪掉,變成study_button和study_button1
- 名詞解釋:stripX
- 當圖片命名以時為_stripX(X代表一個數字),GMS2軟件會默認該圖片為序列幀并且把軟件等分成X份,以X幀的形式放入同一個精靈內。注意:只支持橫向,如果是兩排則不行。
<span style="color: white">br
br</span>
創建對象
這里直接跳過,若還不會新建對象建議先學習官方教程。(新對象命名為obj_button_father)
<span style="color: white">br
br</span>
變量申明
1.因為需要申明一些不需要重置的變量,在對象中添加事件:創建
2.申明變量,這里我們暫時只需要用到一個判斷按鈕狀態的變量,所以在【創建】中建立一個狀態變量,如下在創建中添加:
btn_state = 0; //按鈕狀態 0、正常 1、移入 2、點擊(選中)
<span style="color: white">br
br</span>
移入與移出
1.因為需要判斷移入和移出當前對象,所以在對象中添加兩個事件:鼠標移入、鼠標移出事件。
2.在鼠標移入對象時我們需要改變按鈕的狀態為移入狀態,如下在【鼠標移入】中添加:
btn_state = 1; //切換移入狀態
3.在鼠標移出對象時我們需要改變按鈕的狀態為移出狀態,如下在【鼠標移出】中添加:
btn_state = 0; //切換移入狀態
<span style="color: white">br
br</span>
點擊效果
1.在對象中添加事件:步。
2.在步事件中判斷鼠標點擊后的狀態切換(也可以不用步事件,直接用鼠標點擊事件,這里為了多寫一些方法就用【步】了),如下在【步】中添加:
if btn_state == 1 && mouse_check_button(mb_left) //當鼠標移入且被點擊時
{
btn_state = 2; //切換到點擊狀態
}
- 說明:mouse_check_button();
- 這個語句是說當鼠標在點下后只要不松開就會一直執行,若想只響應鼠標點擊那一瞬間的效果的話則需要用到mouse_check_button_pressed()語句;
<span style="color: white">br
br</span>
自動彈起效果
1.自動彈起這里就需要用到計時器,首先在點擊改變點擊狀態時設置計時器(如果每一幀都設置一次計時器的倒計時的話,這計時器將永不執行,在這里使用mouse_check_button的方式就是為了一直設置計時器的方式來防止在鼠標按下時執行計時器而回到常規狀態),之前步事件中的代碼修改為:
if btn_state == 1 && mouse_check_button(mb_left) //當鼠標移入且被點擊時
{
btn_state = 2; //切換到點擊狀態
alarm_set(0, 3); //設置計時器0的計時時間為3幀
}
2.計時器倒計時設置完畢后,就需要設置響應事件了,由于之前【步】中設置的是0號計時器的倒計時所以需要添加一個【計時器0】,如圖所示:
<span style="color: white">br
br</span>
3.在【計時器0】中寫的代碼會在之前設置的倒計時結束時激活其中的代碼,這里我們需要的是他在倒計時結束后就使按鈕回復初始狀態,那么就在【計時器0】事件中添加:
btn_state = 0; //轉換為常規狀態
<span style="color: white">br
br</span>
繪制圖像
1.之前的狀態已經處理完畢,現在需要根據狀態來顯示出不同的狀態,首先創建【繪制】事件(就是繪制的第一個事件,不選后面的GUI之類)。
2.這里有個小技巧就是,之前狀態變量【state】是以0、1、2分別代替普通、移入、點擊狀態的,而我們的精靈的順序正好也是0、1、2代表的普通、移入、點擊狀態,由此我們可以直接在【繪制】中添加如下代碼:
draw_self(); //繪制圖像本身
image_index = btn_state; //根據狀態繪制當前精靈的第幾幀
子對象添加
以上所有基本功能已經實現,下面需要添加子對象以引用之前所有的代碼
1.新建2個對象:obj_button_child、obj_button_child1
2.設置新對象的精靈和父對象如下圖:
<span style="color: white">br
br</span>
- 說明:如此設置后所有子對象都會繼承父對象的所有特點,包括事件、物理等一些你沒有針對子對象專門修改過的屬性。若要針對部分事件進行添加的同時引用父對象事件則需要用到event_inherited()函數來引用父對象當前事件的代碼,在本章中沒必要針對子對象些專門的代碼,所以就不做示范了,未來肯定會使用此方法的教程。
<span style="color: white">br
br
br</span>
額外思考
現在情況是會自動彈起,但是當鼠標在按鈕上的時候自動彈起也會回歸到常規狀態(正確的應該是移入狀態),有沒有一個方法在鼠標在按鈕上時按鈕自動彈起的時候它是處于移入狀態的呢?
提示函數:instance_position(mouse_x, mouse_y, obj_button_father)
<span style="color: white">br
br
br</span>
本次教程到此結束,有任何疑問和意見可以留言或者Q群詢問
下一章內容:按鈕的選中狀態,再次點擊取消狀態以及相同父對象情況下多個按鈕選中狀態互斥
<span style="color: white">br
br</span>
教程中源文件 本次教程暫不提供源文件等本系列課程結束后統一提供下載
提取密碼: