[入门]GML常用UI之按钮的制作1

---

摘要

---

本章涉及主要内容：父对象和子对象、序列帧图的使用、计时器
本章节实现内容：按钮的基础功能：移入、点击状态、自动弹起

---

思路分析

---

我们的需求:制作2个不同的按钮，鼠标移入和点击都会改变状态(暂不制作点击后产生的效果)

由此我们得出以下需要解决的问题：
1.鼠标移入后按钮状态改变
2.鼠标移出后状态按钮恢复
3.鼠标按下后状态按钮改变
4.鼠标释放后状态会自动恢复
5.制作2个(N个)按钮需要写2次(N次)代码？
br
br
br

---

实现过程

---

新建工程

这里直接跳过，若还不会新建工程建议先学习官方教程。(新工程采用GML方式)
br
br

加载精灵

1.资源准备
　　这里我们需要准备2个按钮的精灵资源，资源需要3个状态分别为：常规时的样子、鼠标移入时的样子，点击（选中）时的样子，依次以序列帧方式排列并且取名为study_button_strip3 和study_button1_strip3，以下是本章中使用的两个素材(右键另存为即可).

study_button_strip3

study_button1_strip3

br
br
2.资源导入
　　直接把[步骤1]中所准备的两个按钮资源拖入到工程内(记住：不是文件夹内，要拖入到软件已经打开的工程里。)，由于我们命名是以strip3，所以GMS2软件会自动把资源切割为3等分。导入资源后把精灵名字后的_strip3都删掉，变成study_button和study_button1

• 名词解释:stripX
• 当图片命名以时为_stripX（X代表一个数字），GMS2软件会默认该图片为序列帧并且把软件等分成X份，以X帧的形式放入同一个精灵内。注意：只支持横向，如果是两排则不行。

br
br

创建对象

这里直接跳过，若还不会新建对象建议先学习官方教程。(新对象命名为obj_button_father)

br
br

变量申明

1.因为需要申明一些不需要重置的变量，在对象中添加事件：创建
　　2.申明变量，这里我们暂时只需要用到一个判断按钮状态的变量，所以在【创建】中建立一个状态变量，如下在创建中添加：

btn_state = 0;  //按钮状态 0、正常 1、移入 2、点击（选中）

br
br

移入与移出

移入移出

　　1.因为需要判断移入和移出当前对象，所以在对象中添加两个事件：鼠标移入、鼠标移出事件。
　　2.在鼠标移入对象时我们需要改变按钮的状态为移入状态，如下在【鼠标移入】中添加：

btn_state = 1;  //切换移入状态

3.在鼠标移出对象时我们需要改变按钮的状态为移出状态，如下在【鼠标移出】中添加：

btn_state = 0;  //切换移入状态

br
br

点击效果

1.在对象中添加事件：步。
　　2.在步事件中判断鼠标点击后的状态切换（也可以不用步事件，直接用鼠标点击事件，这里为了多写一些方法就用【步】了）,如下在【步】中添加：

if btn_state == 1 && mouse_check_button(mb_left)    //当鼠标移入且被点击时
{
    btn_state = 2;  //切换到点击状态
}

• 说明：mouse_check_button();
• 这个语句是说当鼠标在点下后只要不松开就会一直执行，若想只响应鼠标点击那一瞬间的效果的话则需要用到mouse_check_button_pressed()语句；

br
br

自动弹起效果

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】，如图所示：

计时器

br
br
　　3.在【计时器0】中写的代码会在之前设置的倒计时结束时激活其中的代码，这里我们需要的是他在倒计时结束后就使按钮回复初始状态，那么就在【计时器0】事件中添加：

btn_state = 0;  //转换为常规状态

br
br

绘制图像

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.设置新对象的精灵和父对象如下图：

br
br

• 说明：如此设置后所有子对象都会继承父对象的所有特点，包括事件、物理等一些你没有针对子对象专门修改过的属性。若要针对部分事件进行添加的同时引用父对象事件则需要用到event_inherited()函数来引用父对象当前事件的代码，在本章中没必要针对子对象些专门的代码，所以就不做示范了，未来肯定会使用此方法的教程。
  br
  br
  br

---

额外思考

---

现在情况是会自动弹起，但是当鼠标在按钮上的时候自动弹起也会回归到常规状态(正确的应该是移入状态)，有没有一个方法在鼠标在按钮上时按钮自动弹起的时候它是处于移入状态的呢？

提示函数：instance_position(mouse_x, mouse_y, obj_button_father)

br
br
br

本次教程到此结束，有任何疑问和意见可以留言或者Q群询问

下一章内容：按钮的选中状态，再次点击取消状态以及相同父对象情况下多个按钮选中状态互斥

br
br
教程中源文件 本次教程暂不提供源文件等本系列课程结束后统一提供下载
提取密码：