ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

FariyGUI × Cocos Creator 3.x 弹窗制作

2026/9/25 1:00:42 拓冰建站 浏览量
FariyGUI × Cocos Creator 3.x 弹窗制作

在fgui里制作一个弹窗

  1. 新建一个按钮,作为返回按钮
    在这里插入图片描述

  2. 新建一个标签
    在这里插入图片描述
    在这里插入图片描述
    做成这个样子在这里插入图片描述
    其中包含两个节点,名称分别为titlecloseButton
    可以阅读fgui的源码window.js得到,closeButton按钮只需要输入名称即可在contentPane设置时自动绑定。
    在这里插入图片描述
    且会自动绑定上关闭事件
    在这里插入图片描述

  3. 新建一个组件,做成这个样子
    在这里插入图片描述
    在这里写上标题,就会自动显示。
    在这里插入图片描述

  4. 给这个弹窗编写一个脚本

import * as cc from 'cc';
import * as fgui from "fairygui-cc";
const { ccclass, property } = cc._decorator;@ccclass('Setting')
export class Setting extends fgui.Window {public constructor() {super();}protected onInit(): void {this.contentPane = fgui.UIPackage.createObject("GamePkg", "Setting").asCom;this.center();}}
  1. 弹出时的函数调用:
private _onClicSettingBtn(evt: Event): void {this.SettingWindow = new Setting();this.SettingWindow.show();
}
  1. 运行
    请添加图片描述