Files
esengine/packages/rendering/fairygui/src/widgets/GMovieClip.ts

262 lines
6.7 KiB
TypeScript
Raw Normal View History

feat(fairygui): FairyGUI 完整集成 (#314) * feat(fairygui): FairyGUI ECS 集成核心架构 实现 FairyGUI 的 ECS 原生集成,完全替代旧 UI 系统: 核心类: - GObject: UI 对象基类,支持变换、可见性、关联、齿轮 - GComponent: 容器组件,管理子对象和控制器 - GRoot: 根容器,管理焦点、弹窗、输入分发 - GGroup: 组容器,支持水平/垂直布局 抽象层: - DisplayObject: 显示对象基类 - EventDispatcher: 事件分发 - Timer: 计时器 - Stage: 舞台,管理输入和缩放 布局系统: - Relations: 约束关联管理 - RelationItem: 24 种关联类型 基础设施: - Controller: 状态控制器 - Transition: 过渡动画 - ScrollPane: 滚动面板 - UIPackage: 包管理 - ByteBuffer: 二进制解析 * refactor(ui): 删除旧 UI 系统,使用 FairyGUI 替代 * feat(fairygui): 实现 UI 控件 - 添加显示类:Image、TextField、Graph - 添加基础控件:GImage、GTextField、GGraph - 添加交互控件:GButton、GProgressBar、GSlider - 更新 IRenderCollector 支持 Graph 渲染 - 扩展 Controller 添加 selectedPageId - 添加 STATE_CHANGED 事件类型 * feat(fairygui): 现代化架构重构 - 增强 EventDispatcher 支持类型安全、优先级和传播控制 - 添加 PropertyBinding 响应式属性绑定系统 - 添加 ServiceContainer 依赖注入容器 - 添加 UIConfig 全局配置系统 - 添加 UIObjectFactory 对象工厂 - 实现 RenderBridge 渲染桥接层 - 实现 Canvas2DBackend 作为默认渲染后端 - 扩展 IRenderCollector 支持更多图元类型 * feat(fairygui): 九宫格渲染和资源加载修复 - 修复 FGUIUpdateSystem 支持路径和 GUID 两种加载方式 - 修复 GTextInput 同时设置 _displayObject 和 _textField - 实现九宫格渲染展开为 9 个子图元 - 添加 sourceWidth/sourceHeight 用于九宫格计算 - 添加 DOMTextRenderer 文本渲染层(临时方案) * fix(fairygui): 修复 GGraph 颜色读取 * feat(fairygui): 虚拟节点 Inspector 和文本渲染支持 * fix(fairygui): 编辑器状态刷新和遗留引用修复 - 修复切换 FGUI 包后组件列表未刷新问题 - 修复切换组件后 viewport 未清理旧内容问题 - 修复虚拟节点在包加载后未刷新问题 - 重构为事件驱动架构,移除轮询机制 - 修复 @esengine/ui 遗留引用,统一使用 @esengine/fairygui * fix: 移除 tsconfig 中的 @esengine/ui 引用
2025-12-22 10:52:54 +08:00
import { GObject } from '../core/GObject';
import { MovieClip, type IFrame } from '../display/MovieClip';
import { EFlipType, EObjectPropID } from '../core/FieldTypes';
import type { ByteBuffer } from '../utils/ByteBuffer';
import type { PackageItem } from '../package/PackageItem';
/**
* GMovieClip
*
* Movie clip display object for FairyGUI animations.
*
* FairyGUI
*/
export class GMovieClip extends GObject {
private _movieClip!: MovieClip;
private _flip: EFlipType = EFlipType.None;
private _contentItem: PackageItem | null = null;
constructor() {
super();
this.ensureMovieClip();
}
private ensureMovieClip(): void {
if (!this._movieClip) {
this.createDisplayObject();
}
}
/**
* Get the internal movie clip display object
*
*/
public get movieClip(): MovieClip {
return this._movieClip;
}
/**
* Get/set playing state
* /
*/
public get playing(): boolean {
return this._movieClip.playing;
}
public set playing(value: boolean) {
if (this._movieClip && this._movieClip.playing !== value) {
this._movieClip.playing = value;
this.updateGear(5);
}
}
/**
* Get/set current frame
* /
*/
public get frame(): number {
return this._movieClip.frame;
}
public set frame(value: number) {
if (this._movieClip && this._movieClip.frame !== value) {
this._movieClip.frame = value;
this.updateGear(5);
}
}
/**
* Get/set color tint
* /
*/
public get color(): string {
return this._movieClip.color;
}
public set color(value: string) {
if (this._movieClip) {
this._movieClip.color = value;
this.updateGear(4);
}
}
/**
* Get/set flip type
* /
*/
public get flip(): EFlipType {
return this._flip;
}
public set flip(value: EFlipType) {
if (this._flip !== value) {
this._flip = value;
let sx = 1;
let sy = 1;
if (this._flip === EFlipType.Horizontal || this._flip === EFlipType.Both) {
sx = -1;
}
if (this._flip === EFlipType.Vertical || this._flip === EFlipType.Both) {
sy = -1;
}
this.setScale(sx, sy);
this.handleXYChanged();
}
}
/**
* Get/set time scale
* /
*/
public get timeScale(): number {
return this._movieClip.timeScale;
}
public set timeScale(value: number) {
if (this._movieClip) {
this._movieClip.timeScale = value;
}
}
/**
* Rewind to beginning
*
*/
public rewind(): void {
this._movieClip.rewind();
}
/**
* Sync status with another movie clip
*
*/
public syncStatus(anotherMc: GMovieClip): void {
this._movieClip.syncStatus(anotherMc._movieClip);
}
/**
* Advance by time
*
*/
public advance(time: number): void {
this._movieClip.advance(time);
}
/**
* Set play settings
*
*/
public setPlaySettings(
start: number = 0,
end: number = -1,
times: number = 0,
endAt: number = -1,
endCallback?: () => void
): void {
this._movieClip.setPlaySettings(start, end, times, endAt, endCallback);
}
protected createDisplayObject(): void {
this._displayObject = this._movieClip = new MovieClip();
this._displayObject.gOwner = this;
}
/**
* Construct from package resource
*
*/
public constructFromResource(): void {
if (!this.packageItem) return;
this.ensureMovieClip();
this._contentItem = this.packageItem;
this.sourceWidth = this._contentItem.width;
this.sourceHeight = this._contentItem.height;
this.initWidth = this.sourceWidth;
this.initHeight = this.sourceHeight;
// Load frames from package
if (this._contentItem.owner) {
this._contentItem.owner.getItemAsset(this._contentItem);
}
if (this._contentItem.frames) {
this._movieClip.interval = this._contentItem.interval;
this._movieClip.swing = this._contentItem.swing;
this._movieClip.repeatDelay = this._contentItem.repeatDelay;
this._movieClip.frames = this._contentItem.frames as IFrame[];
}
this.setSize(this.sourceWidth, this.sourceHeight);
}
protected handleXYChanged(): void {
super.handleXYChanged();
if (this._flip !== EFlipType.None) {
if (this.scaleX === -1 && this._movieClip) {
this._movieClip.x += this.width;
}
if (this.scaleY === -1 && this._movieClip) {
this._movieClip.y += this.height;
}
}
}
public getProp(index: number): any {
switch (index) {
case EObjectPropID.Color:
return this.color;
case EObjectPropID.Playing:
return this.playing;
case EObjectPropID.Frame:
return this.frame;
case EObjectPropID.TimeScale:
return this.timeScale;
default:
return super.getProp(index);
}
}
public setProp(index: number, value: any): void {
switch (index) {
case EObjectPropID.Color:
this.color = value;
break;
case EObjectPropID.Playing:
this.playing = value;
break;
case EObjectPropID.Frame:
this.frame = value;
break;
case EObjectPropID.TimeScale:
this.timeScale = value;
break;
default:
super.setProp(index, value);
break;
}
}
public setup_beforeAdd(buffer: ByteBuffer, beginPos: number): void {
super.setup_beforeAdd(buffer, beginPos);
buffer.seek(beginPos, 5);
if (buffer.readBool()) {
this.color = buffer.readS();
}
this.flip = buffer.readByte();
const frameValue = buffer.getInt32();
const playingValue = buffer.readBool();
if (this._movieClip) {
this._movieClip.frame = frameValue;
this._movieClip.playing = playingValue;
}
}
}