Phaser UI

Author：github.com/surfsky Last Update：2025-05 Version: 0.8.1

Features

1. common

   • [x] support theme/style
   • [x] support animation
   • [x] support data binding
   • [x] depart event from ui
   • [x] nested ui expression

2. basic

   • [x] Control: theme, draw, bounds
   • [x] Panel: scroll panel
   • [x] Rect
   • [x] Label
   • [x] Img
   • [x] Tag
   • [x] ProgressBar

3. button

   • [x] Button
   • [x] GameButton
   • [x] GroupButton
   • [x] FileButton
   • [x] ImageButton

4. form

   • [x] Link
   • [x] Switcher
   • [x] CheckBox
   • [x] RadioBox
   • [x] Textbox
   • [ ] Calendar
   • [ ] DatePicker
   • [ ] TimePicker

5. data

   • [x] DropdownList
   • [x] ListBox
   • [x] Combobox = textbox + listbox
   • [x] Table
   • [x] Tree
   • [ ] SliderView
   • [ ] ListView
   • [ ] Pager

6. overlay

   • [x] mask
   • [x] popup: modal, closebutton, closeWhenClickOutside
   • [x] dialog
   • [x] messagebox
   • [x] toast
   • [x] tooltip

7. layout：

   • [x] Row
   • [x] Column
   • [x] Grid

8. app

   • [ ] View
   • [ ] TitleBar
   • [ ] TabBar
   • [ ] IconBar
   • [ ] ActionSheet(Popup anchor=button)
   • [ ] DatePickerSheet

Examples

see /tests/index.ts

npm install
npm run build
npm run test

example:

// button
new Button(this, 0, 40, '确定', {
    width: 100,
    fontSize: '20px',
    bgColor: 0x4CAF50,
    padding: 20
}).setOrigin(0.5, 0.5).onClick(() => popup.hide());

// label
new Label(this, 0, 0, '这是一个标签示例').setStyle(LabelStyle.H1);

// nested ui expression
const popup = new Popup(this, this.cameras.main.centerX, this.cameras.main.centerY, {
    width: 500,
    height: 200,
    animation: AnimationType.fade, // 'fade',
    closeOnClickOutside: false
}).addChild(
    this.add.text(0, -30, '这是一个消息框示例', {
        fontSize: '24px',
        color: '#000000',
        align: 'center'
    }).setOrigin(0.5),
    new Button(this, 0, 40, '确定', {
        width: 100,
        fontSize: '20px',
        bgColor: 0x4CAF50,
        padding: 20
    }).setOrigin(0.5, 0.5).onClick(() => popup.hide())
).show();

Deployment

# 安装和编译
npm install
npm run build


# 发布
npm publish  # 发布到 npmjs.com
--------------------------------------
npm install phaserux  # 主项目调用


# 本地发布
sudo npm link  # 发布到本地全局npm环境
sudo npm unlink phaserux  # 取消本地发布
--------------------------------------
npm link phaserux  # 主项目调用： 

Task

实现popup的resize功能 校对和统一 popup的初始定位（popup现在默认是居中对齐） 创建基于 popup 的各类对话框 废除dialog，统一使用popup

fixbug: panel wheel 时，若鼠标在内部某个控件上，则事件不会传递给panel 优化Panel的滚动，不会因为位于子控件上方而无法滚动。

优化image resize、drag，增加一个MoveRegion参数，限制拖动范围 通用控件开发 创建游戏方向控制器（大圆、小圆） JoyStick 修正按钮按下后的scale，不能根据中心点缩放的问题

修正 ListBox 背景色 fixbug: panel resize 时mask失效了 用 Popup、Dialog 来重构 MessageBox 实现 video 测试用例，可设置大小位置 实现设计器做准备，显示外框、禁止所有事件，可拖拽放置

实现组合控件 实现listview，可用于替代 Dropdownlist 的下拉面板部分。 实现树控件treeview 实现下拉控件，可下拉任何东西 实现日历控件

实现移动版试图管理 View/ViewManager

做一个隔离层: 将Phaser GameObject创建相关的逻辑放到里面，这样可以方便的替换成其他的UI库。 有点困难，需要隔离的东西有点多：container, text, rectangle, graphices, resize, drag...

实现界面设计器 Control 必须实现： designMode dragable resizable

Done

/修正textbox的box模式 /PopopOptions.animation 从字符串类型改为枚举 /修正TextBox的定位问题 /修正Grid、rolumn、row的子控件布局及layout事件 /优化control.onresize()，输入的参数为父控件的大小 /Control.onTheme(...) /Control.onSize(...) /实现 TestTheme 测试用例 /优化测试首页 index.ts，根据页面宽度自动设置列数 /优化 panel，支持双指滚动 /优化control，支持响应式布局如: onsize => this.grid.setcolumns()