Cocos Creator引擎开发：Cocos Creator基础入门_（8）.UI系统

最新推荐文章于 2026-06-16 18:52:28 发布
原创 最新推荐文章于 2026-06-16 18:52:28 发布 · 986 阅读 · 26 GEO检测
标签
#ui #数据库 #性能优化 #交互 #uv
#javascript

UI系统

在虚拟现实游戏中，用户界面（UI）是玩家与游戏互动的重要途径。Cocos Creator 提供了强大的 UI 系统，可以帮助开发者创建丰富多样的界面元素。本节将详细介绍 Cocos Creator 的 UI 系统，包括常见的 UI 组件、布局方式、交互事件处理以及如何创建自定义 UI 组件。

常见的 UI 组件

Cocos Creator 中提供了多种常见的 UI 组件，这些组件可以满足大多数游戏界面的需求。以下是一些常用的 UI 组件及其基本用法：

Label

Label 组件用于显示文本。它支持多种文本样式，如字体、颜色、对齐方式等。

创建和使用 Label

  1. 在场景中创建一个 Node，然后添加 Label 组件。

  2. 设置 Label 组件的属性，如字体、颜色、对齐方式等。


// 创建一个 Label 节点

const labelNode = new Node();

labelNode.addComponent(Label);

labelNode.setPosition(0, 0);



// 获取 Label 组件并设置属性

const labelComponent = labelNode.getComponent(Label);

labelComponent.string = "Hello, Cocos Creator!";

labelComponent.fontSize = 50;

labelComponent.color = new Color(255, 0, 0, 255); // 红色



// 将节点添加到场景中

this.node.addChild(labelNode);

Button

Button 组件用于创建按钮，支持按下、抬起、点击等交互事件。

创建和使用 Button

  1. 在场景中创建一个 Node，然后添加 Button 组件。

  2. 设置 Button 组件的属性，如点击时的响应、按下时的动画等。

  3. 为按钮添加点击事件处理函数。


// 创建一个 Button 节点

const buttonNode = new Node();

buttonNode.addComponent(Button);

buttonNode.addComponent(Sprite); // 添加 Sprite 组件用于显示按钮图像

buttonNode.setPosition(0, 100);



// 获取 Button 组件并设置属性

const buttonComponent = buttonNode.getComponent(Button);

buttonComponent.transition = Button.Transition.SCALE; // 设置按钮按下时的动画效果

buttonComponent.zoomScale = 1.2; // 设置缩放比例



// 为按钮添加点击事件

buttonComponent.clickEvents.push({

    target: this.node,

    component: "HelloWorld",

    handler: "onButtonClick",

    customEventData: "Button 1"

});



// 将节点添加到场景中

this.node.addChild(buttonNode);



// 定义点击事件处理函数

@ccclass("HelloWorld")

export class HelloWorld extends Component {

    @cctype(Button)

    @ccproperty

    public button: Button = null;



    public onButtonClick(event: Event, customEventData: string) {

        console.log("Button clicked: " + customEventData);

    }

}

Image

Image 组件用于在界面上显示图像。它可以用于显示静态图像或动态图像（如精灵图集）。

创建和使用 Image

  1. 在场景中创建一个 Node，然后添加 Image 组件。

  2. 设置 Image 组件的属性，如图像资源、类型等。


// 创建一个 Image 节点

const imageNode = new Node();

imageNode.addComponent(Image);

imageNode.setPosition(0, -100);



// 获取 Image 组件并设置属性

const imageComponent = imageNode.getComponent(Image);

imageComponent.spriteFrame = this.getSpriteFrameByName("exampleImage"); // 设置图像资源



// 将节点添加到场景中

this.node.addChild(imageNode);



// 获取 SpriteFrame 的方法

private getSpriteFrameByName(name: string): SpriteFrame {

    const asset = resources.get(name, SpriteFrame);

    return asset;

}

Scroll View

Scroll View 组件用于创建可滚动的界面，如滚动列表、滚动文本等。

创建和使用 Scroll View

  1. 在场景中创建一个 Node，然后添加 Scroll View 组件。

  2. 设置 Scroll View 组件的属性，如滚动方向、滚动速度等。

  3. 为 Scroll View 添加内容节点，并设置内容的布局方式。


// 创建一个 Scroll View 节点

const scrollViewNode = new Node();

scrollViewNode.addComponent(ScrollView);

scrollViewNode.setPosition(0, 0);



// 获取 Scroll View 组件并设置属性

const scrollViewComponent = scrollViewNode.getComponent(ScrollView);

scrollViewComponent.direction = ScrollView.Direction.VERTICAL; // 设置滚动方向为垂直

scrollViewComponent.inertia = true; // 开启惯性滚动

scrollViewComponent.elastic = true; // 开启弹性效果



// 创建内容节点

const contentNode = new Node();

contentNode.addComponent(List); // 使用 List 组件来管理内容

contentNode.setPosition(0, 0);



// 为内容节点添加多个子节点

for (let i = 0; i < 10; i++) {

    const itemNode = new Node();

    itemNode.addComponent(Label);

    itemNode.setPosition(0, i * 100);

    const itemLabel = itemNode.getComponent(Label);

    itemLabel.string = "Item " + (i + 1);

    itemLabel.fontSize = 30;

    itemLabel.color = new Color(0, 0, 0, 255); // 黑色



    contentNode.addChild(itemNode);

}



// 将内容节点添加到 Scroll View 的视图区域

scrollViewComponent.content = contentNode;



// 将 Scroll View 节点添加到场景中

this.node.addChild(scrollViewNode);

ListView

ListView 组件用于创建列表视图，支持水平和垂直滚动。

创建和使用 ListView

  1. 在场景中创建一个 Node，然后添加 ListView 组件。

  2. 设置 ListView 组件的属性，如滚动方向、每个项目的大小等。

  3. 为 ListView 添加数据源，并设置数据项的模板。


// 创建一个 ListView 节点

const listViewNode = new Node();

listViewNode.addComponent(ListView);

listViewNode.setPosition(0, 0);



// 获取 ListView 组件并设置属性

const listViewComponent = listViewNode.getComponent(ListView);

listViewComponent.direction = ListView.Direction.VERTICAL; // 设置滚动方向为垂直

listViewComponent.itemSize = new Size(200, 100); // 设置每个项目的大小



// 创建数据源

const data = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"];



// 设置数据项的模板

listViewComponent.itemRenderer = (index: number, itemNode: Node) => {

    const labelComponent = itemNode.getComponent(Label);

    if (!labelComponent) {

        labelComponent = itemNode.addComponent(Label);

        labelComponent.fontSize = 30;

        labelComponent.color = new Color(0, 0, 0, 255); // 黑色

    }

    labelComponent.string = data[index];

};



// 设置数据源

listViewComponent.dataSource = data;



// 将 ListView 节点添加到场景中

this.node.addChild(listViewNode);

Slider

Slider 组件用于创建滑块，常用于设置游戏音量、进度条等。

创建和使用 Slider

  1. 在场景中创建一个 Node，然后添加 Slider 组件。

  2. 设置 Slider 组件的属性，如滑块的范围、当前值等。

  3. 为滑块添加事件处理函数。


// 创建一个 Slider 节点

const sliderNode = new Node();

sliderNode.addComponent(Slider);

sliderNode.setPosition(0, 0);



// 获取 Slider 组件并设置属性

const sliderComponent = sliderNode.getComponent(Slider);

sliderComponent.handle = this.createSliderHandle(); // 设置滑块的柄

sliderComponent.progress = 0.5; // 设置滑块的初始值



// 为滑块添加事件处理函数

sliderComponent.progressEvent = new CCComponent.EventHandler();

sliderComponent.progressEvent.target = this.node;

sliderComponent.progressEvent.component = "HelloWorld";

sliderComponent.progressEvent.handler = "onSliderProgress";

sliderComponent.progressEvent.customEventData = "Slider 1";



// 将 Slider 节点添加到场景中

this.node.addChild(sliderNode);



// 创建滑块的柄

private createSliderHandle(): Node {

    const handleNode = new Node();

    handleNode.addComponent(Image);

    const handleComponent = handleNode.getComponent(Image);

    handleComponent.spriteFrame = this.getSpriteFrameByName("handleImage"); // 设置柄的图像资源

    return handleNode;

}



// 定义滑块事件处理函数

@ccclass("HelloWorld")

export class HelloWorld extends Component {

    @cctype(Slider)

    @ccproperty

    public slider: Slider = null;



    public onSliderProgress(event: Event, customEventData: string) {

        console.log("Slider progress: " + this.slider.progress + " - " + customEventData);

    }

}

Toggle

Toggle 组件用于创建开关按钮，常用于设置游戏选项。

创建和使用 Toggle

  1. 在场景中创建一个 Node，然后添加 Toggle 组件。

  2. 设置 Toggle 组件的属性，如开关的图像、初始状态等。

  3. 为开关添加事件处理函数。


// 创建一个 Toggle 节点

const toggleNode = new Node();

toggleNode.addComponent(Toggle);

toggleNode.addComponent(Image); // 添加 Image 组件用于显示开关图像

toggleNode.setPosition(0, 0);



// 获取 Toggle 组件并设置属性

const toggleComponent = toggleNode.getComponent(Toggle);

toggleComponent.target = this.node; // 设置目标节点

toggleComponent.targetComponent = "HelloWorld"; // 设置目标组件

toggleComponent.targetHandler = "onToggleChange"; // 设置事件处理函数

toggleComponent.default = false; // 设置初始状态为关闭



// 为 Toggle 设置图像

const imageComponent = toggleNode.getComponent(Image);

imageComponent.spriteFrame = this.getSpriteFrameByName("toggleImage"); // 设置开关的图像资源



// 创建 Toggle 的选中标记

const checkMarkNode = new Node();

checkMarkNode.addComponent(Image);

checkMarkNode.setPosition(0, 0);

const checkMarkComponent = checkMarkNode.getComponent(Image);

checkMarkComponent.spriteFrame = this.getSpriteFrameByName("checkMarkImage"); // 设置选中标记的图像资源



// 将选中标记添加到 Toggle

toggleComponent.checkMark = checkMarkNode;



// 将 Toggle 节点添加到场景中

this.node.addChild(toggleNode);



// 定义开关事件处理函数

@ccclass("HelloWorld")

export class HelloWorld extends Component {

    @cctype(Toggle)

    @ccproperty

    public toggle: Toggle = null;



    public onToggleChange(event: Event, customEventData: string) {

        console.log("Toggle changed: " + this.toggle.isChecked + " - " + customEventData);

    }

}

ProgressBar

ProgressBar 组件用于显示进度条，常用于显示玩家的生命值、能量条等。

创建和使用 ProgressBar

  1. 在场景中创建一个 Node，然后添加 ProgressBar 组件。

  2. 设置 ProgressBar 组件的属性，如进度条的图像、当前进度等。


// 创建一个 ProgressBar 节点

const progressBarNode = new Node();

progressBarNode.addComponent(ProgressBar);

progressBarNode.setPosition(0, 0);



// 获取 ProgressBar 组件并设置属性

const progressBarComponent = progressBarNode.getComponent(ProgressBar);

progressBarComponent.totalLength = 200; // 设置进度条的总长度

progressBarComponent.progress = 0.5; // 设置进度条的初始进度



// 为 ProgressBar 设置图像

const barImageNode = new Node();

barImageNode.addComponent(Image);

barImageNode.setPosition(0, 0);

const barImageComponent = barImageNode.getComponent(Image);

barImageComponent.spriteFrame = this.getSpriteFrameByName("barImage"); // 设置进度条的图像资源



// 将图像节点添加到 ProgressBar

progressBarComponent.progressImage = barImageNode;



// 将 ProgressBar 节点添加到场景中

this.node.addChild(progressBarNode);

TextField

TextField 组件用于创建可编辑的文本框，常用于输入玩家名称、聊天内容等。

创建和使用 TextField

  1. 在场景中创建一个 Node，然后添加 TextField 组件。

  2. 设置 TextField 组件的属性，如字体、输入类型等。

  3. 为文本框添加输入事件处理函数。


// 创建一个 TextField 节点

const textFieldNode = new Node();

textFieldNode.addComponent(TextField);

textFieldNode.setPosition(0, 0);



// 获取 TextField 组件并设置属性

const textFieldComponent = textFieldNode.getComponent(TextField);

textFieldComponent.string = ""; // 初始为空

textFieldComponent.fontSize = 30;

textFieldComponent.inputMode = TextField.InputMode.SINGLE_LINE; // 设置输入模式为单行



// 为 TextField 添加输入事件处理函数

textFieldComponent.node.on(Node.EventType.INPUT, (event: Event) => {

    console.log("TextField input: " + textFieldComponent.string);

});



// 将 TextField 节点添加到场景中

this.node.addChild(textFieldNode);

布局方式

Cocos Creator 提供了多种布局方式，可以帮助开发者更方便地管理 UI 元素的位置和大小。以下是一些常用的布局方式及其用法：

Horizontal Layout

Horizontal Layout 组件用于水平排列 UI 元素。

创建和使用 Horizontal Layout

  1. 在场景中创建一个 Node，然后添加 Horizontal Layout 组件。

  2. 为布局节点添加多个子节点，并设置子节点的属性。


// 创建一个 Horizontal Layout 节点

const layoutNode = new Node();

layoutNode.addComponent(HorizontalLayout);

layoutNode.setPosition(0, 0);



// 获取 Horizontal Layout 组件并设置属性

const layoutComponent = layoutNode.getComponent(HorizontalLayout);

layoutComponent.spacing = 10; // 设置子节点之间的间距



// 为布局节点添加多个子节点

const labels = ["Label 1", "Label 2", "Label 3"];

labels.forEach((labelText, index) => {

    const labelNode = new Node();

    labelNode.addComponent(Label);

    labelNode.setPosition(0, 0);

    const labelComponent = labelNode.getComponent(Label);

    labelComponent.string = labelText;

    labelComponent.fontSize = 30;

    labelComponent.color = new Color(0, 0, 0, 255); // 黑色



    layoutNode.addChild(labelNode);

});



// 将布局节点添加到场景中

this.node.addChild(layoutNode);

Vertical Layout

Vertical Layout 组件用于垂直排列 UI 元素。

创建和使用 Vertical Layout

  1. 在场景中创建一个 Node，然后添加 Vertical Layout 组件。

  2. 为布局节点添加多个子节点，并设置子节点的属性。


// 创建一个 Vertical Layout 节点

const layoutNode = new Node();

layoutNode.addComponent(VerticalLayout);

layoutNode.setPosition(0, 0);



// 获取 Vertical Layout 组件并设置属性

const layoutComponent = layoutNode.getComponent(VerticalLayout);

layoutComponent.spacing = 10; // 设置子节点之间的间距



// 为布局节点添加多个子节点

const labels = ["Label 1", "Label 2", "Label 3"];

labels.forEach((labelText, index) => {

    const labelNode = new Node();

    labelNode.addComponent(Label);

    labelNode.setPosition(0, 0);

    const labelComponent = labelNode.getComponent(Label);

    labelComponent.string = labelText;

    labelComponent.fontSize = 30;

    labelComponent.color = new Color(0, 0, 0, 255); // 黑色



    layoutNode.addChild(labelNode);

});



// 将布局节点添加到场景中

this.node.addChild(layoutNode);

Grid Layout

Grid Layout 组件用于以网格形式排列 UI 元素。

创建和使用 Grid Layout

  1. 在场景中创建一个 Node，然后添加 Grid Layout 组件。

  2. 为布局节点添加多个子节点，并设置子节点的属性。


// 创建一个 Grid Layout 节点

const layoutNode = new Node();

layoutNode.addComponent(GridLayout);

layoutNode.setPosition(0, 0);



// 获取 Grid Layout 组件并设置属性

const layoutComponent = layoutNode.getComponent(GridLayout);

layoutComponent.cellSize = new Size(100, 100); // 设置每个单元格的大小

layoutComponent.spacingX = 10; // 设置横向间距

layoutComponent.spacingY = 10; // 设置纵向间距



// 为布局节点添加多个子节点

const labels = ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6"];

labels.forEach((labelText, index) => {

    const labelNode = new Node();

    labelNode.addComponent(Label);

    labelNode.setPosition(0, 0);

    const labelComponent = labelNode.getComponent(Label);

    labelComponent.string = labelText;

    labelComponent.fontSize = 30;

    labelComponent.color = new Color(0, 0, 0, 255); // 黑色



    layoutNode.addChild(labelNode);

});



// 将布局节点添加到场景中

this.node.addChild(layoutNode);

Content Size Fitter

Content Size Fitter 组件用于自动调整布局节点的大小，使其适应子节点的内容。这对于动态生成的 UI 元素非常有用，可以确保布局节点始终能够正确地显示所有内容。

创建和使用 Content Size Fitter

  1. 在场景中创建一个 Node，然后添加 Content Size Fitter 组件。

  2. 为布局节点添加多个子节点，并设置子节点的属性。


// 创建一个 Content Size Fitter 节点

const layoutNode = new Node();

layoutNode.addComponent(ContentSizeFitter);

layoutNode.addComponent(VerticalLayout);

layoutNode.setPosition(0, 0);



// 获取 Content Size Fitter 组件并设置属性

const fitterComponent = layoutNode.getComponent(ContentSizeFitter);

fitterComponent.verticalFit = true; // 垂直方向上适应内容大小



// 为布局节点添加多个子节点

const labels = ["Label 1", "Label 2", "Label 3"];

labels.forEach((labelText, index) => {

    const labelNode = new Node();

    labelNode.addComponent(Label);

    labelNode.setPosition(0, 0);

    const labelComponent = labelNode.getComponent(Label);

    labelComponent.string = labelText;

    labelComponent.fontSize = 30;

    labelComponent.color = new Color(0, 0, 0, 255); // 黑色



    layoutNode.addChild(labelNode);

});



// 将布局节点添加到场景中

this.node.addChild(layoutNode);

Layout Group

Layout Group 组件用于管理多个子节点的布局，可以自动调整子节点的位置和大小。它包括 Horizontal Layout Group、Vertical Layout Group 和 Grid Layout Group。

创建和使用 Layout Group

  1. 在场景中创建一个 Node，然后添加 Layout Group 组件。

  2. 为布局节点添加多个子节点，并设置子节点的属性。


// 创建一个 Layout Group 节点

const layoutGroupNode = new Node();

layoutGroupNode.addComponent(VerticalLayoutGroup);

layoutGroupNode.setPosition(0, 0);



// 获取 Layout Group 组件并设置属性

const layoutGroupComponent = layoutGroupNode.getComponent(VerticalLayoutGroup);

layoutGroupComponent.spacing = 10; // 设置子节点之间的间距

layoutGroupComponent.padding = new Rect(10, 10, 10, 10); // 设置内边距



// 为布局节点添加多个子节点

const labels = ["Label 1", "Label 2", "Label 3"];

labels.forEach((labelText, index) => {

    const labelNode = new Node();

    labelNode.addComponent(Label);

    labelNode.setPosition(0, 0);

    const labelComponent = labelNode.getComponent(Label);

    labelComponent.string = labelText;

    labelComponent.fontSize = 30;

    labelComponent.color = new Color(0, 0, 0, 255); // 黑色



    layoutGroupNode.addChild(labelNode);

});



// 将布局节点添加到场景中

this.node.addChild(layoutGroupNode);

交互事件处理

在 Cocos Creator 中，交互事件处理是创建响应式 UI 的关键。常见的交互事件包括点击、拖动、滚动等。以下是一些处理交互事件的方法：

点击事件

  1. 为 Node 添加 Button 组件。

  2. 为 Button 组件添加点击事件。


// 创建一个 Button 节点

const buttonNode = new Node();

buttonNode.addComponent(Button);

buttonNode.addComponent(Sprite); // 添加 Sprite 组件用于显示按钮图像

buttonNode.setPosition(0, 100);



// 获取 Button 组件并设置属性

const buttonComponent = buttonNode.getComponent(Button);

buttonComponent.transition = Button.Transition.SCALE; // 设置按钮按下时的动画效果

buttonComponent.zoomScale = 1.2; // 设置缩放比例



// 为按钮添加点击事件

buttonComponent.clickEvents.push({

    target: this.node,

    component: "HelloWorld",

    handler: "onButtonClick",

    customEventData: "Button 1"

});



// 将节点添加到场景中

this.node.addChild(buttonNode);



// 定义点击事件处理函数

@ccclass("HelloWorld")

export class HelloWorld extends Component {

    public onButtonClick(event: Event, customEventData: string) {

        console.log("Button clicked: " + customEventData);

    }

}

滑动事件

  1. 为 Node 添加 Slider 组件。

  2. 为 Slider 组件添加进度变化事件。


// 创建一个 Slider 节点

const sliderNode = new Node();

sliderNode.addComponent(Slider);

sliderNode.setPosition(0, 0);



// 获取 Slider 组件并设置属性

const sliderComponent = sliderNode.getComponent(Slider);

sliderComponent.handle = this.createSliderHandle(); // 设置滑块的柄

sliderComponent.progress = 0.5; // 设置滑块的初始值



// 为滑块添加事件处理函数

sliderComponent.progressEvent = new CCComponent.EventHandler();

sliderComponent.progressEvent.target = this.node;

sliderComponent.progressEvent.component = "HelloWorld";

sliderComponent.progressEvent.handler = "onSliderProgress";

sliderComponent.progressEvent.customEventData = "Slider 1";



// 将 Slider 节点添加到场景中

this.node.addChild(sliderNode);



// 创建滑块的柄

private createSliderHandle(): Node {

    const handleNode = new Node();

    handleNode.addComponent(Image);

    const handleComponent = handleNode.getComponent(Image);

    handleComponent.spriteFrame = this.getSpriteFrameByName("handleImage"); // 设置柄的图像资源

    return handleNode;

}



// 定义滑块事件处理函数

@ccclass("HelloWorld")

export class HelloWorld extends Component {

    public onSliderProgress(event: Event, customEventData: string) {

        const slider = event.target as Slider;

        console.log("Slider progress: " + slider.progress + " - " + customEventData);

    }

}

滚动事件

  1. 为 Node 添加 Scroll View 组件。

  2. 为 Scroll View 组件添加滚动事件。


// 创建一个 Scroll View 节点

const scrollViewNode = new Node();

scrollViewNode.addComponent(ScrollView);

scrollViewNode.setPosition(0, 0);



// 获取 Scroll View 组件并设置属性

const scrollViewComponent = scrollViewNode.getComponent(ScrollView);

scrollViewComponent.direction = ScrollView.Direction.VERTICAL; // 设置滚动方向为垂直

scrollViewComponent.inertia = true; // 开启惯性滚动

scrollViewComponent.elastic = true; // 开启弹性效果



// 创建内容节点

const contentNode = new Node();

contentNode.addComponent(List); // 使用 List 组件来管理内容

contentNode.setPosition(0, 0);



// 为内容节点添加多个子节点

for (let i = 0; i < 10; i++) {

    const itemNode = new Node();

    itemNode.addComponent(Label);

    itemNode.setPosition(0, i * 100);

    const itemLabel = itemNode.getComponent(Label);

    itemLabel.string = "Item " + (i + 1);

    itemLabel.fontSize = 30;

    itemLabel.color = new Color(0, 0, 0, 255); // 黑色



    contentNode.addChild(itemNode);

}



// 将内容节点添加到 Scroll View 的视图区域

scrollViewComponent.content = contentNode;



// 为 Scroll View 添加滚动事件处理函数

scrollViewNode.on(Node.EventType.TOUCH_MOVE, (event: Event) => {

    console.log("ScrollView scrolling");

});



// 将 Scroll View 节点添加到场景中

this.node.addChild(scrollViewNode);

创建自定义 UI 组件

Cocos Creator 允许开发者创建自定义 UI 组件，以满足特定的游戏需求。自定义组件可以通过继承 Component 类并添加自定义属性和方法来实现。

创建自定义 UI 组件

  1. 创建一个新的 TypeScript 文件，定义自定义组件类。

  2. 在类中添加自定义属性和方法。

  3. 在场景中使用自定义组件。

示例：创建一个自定义进度条组件

// CustomProgressBar.ts

@ccclass("CustomProgressBar")

export class CustomProgressBar extends Component {

    @property({ type: ProgressBar })

    progressBar: ProgressBar = null;



    @property({ type: Label })

    label: Label = null;



    @property({ type: float, min: 0, max: 1 })

    progress: number = 0;



    onLoad() {

        this.updateProgress(this.progress);

    }



    public updateProgress(value: number) {

        this.progress = value;

        this.progressBar.progress = value;

        this.label.string = (value * 100).toFixed(2) + "%";

    }

}
在场景中使用自定义组件

  1. 创建一个 Node，并添加 CustomProgressBar 组件。

  2. 设置自定义组件的属性。


// 创建一个 CustomProgressBar 节点

const customProgressBarNode = new Node();

customProgressBarNode.addComponent(CustomProgressBar);

customProgressBarNode.addComponent(ProgressBar);

customProgressBarNode.addComponent(Label);

customProgressBarNode.setPosition(0, 0);



// 获取 CustomProgressBar 组件并设置属性

const customProgressBarComponent = customProgressBarNode.getComponent(CustomProgressBar);

customProgressBarComponent.progressBar = customProgressBarNode.getComponent(ProgressBar);

customProgressBarComponent.label = customProgressBarNode.getComponent(Label);



// 设置进度条的图像

const barImageNode = new Node();

barImageNode.addComponent(Image);

barImageNode.setPosition(0, 0);

const barImageComponent = barImageNode.getComponent(Image);

barImageComponent.spriteFrame = this.getSpriteFrameByName("barImage"); // 设置进度条的图像资源



// 将图像节点添加到 ProgressBar

customProgressBarComponent.progressBar.progressImage = barImageNode;



// 设置 Label 的属性

customProgressBarComponent.label.fontSize = 30;

customProgressBarComponent.label.color = new Color(0, 0, 0, 255); // 黑色



// 更新进度条

customProgressBarComponent.updateProgress(0.7);



// 将节点添加到场景中

this.node.addChild(customProgressBarNode);

总结

通过以上介绍，我们可以看到 Cocos Creator 的 UI 系统非常强大和灵活。开发者可以利用这些组件和布局方式创建丰富多样的用户界面，并通过事件处理函数实现交互功能。此外，自定义组件的创建也为开发者提供了更多的可能性，可以针对特定需求进行扩展和优化。

希望本节内容能够帮助你更好地理解和使用 Cocos Creator 的 UI 系统，为你的虚拟现实游戏项目增添更多的互动性和视觉效果。
在这里插入图片描述

CocosCreator开源游戏开发框架
01-30
CocosCreator开源游戏开发框架，附文档说明。包含GameMain、AudioManager、ConfigManager、GameController、GameDataManager、ListenerManager、TimeManager、UIManager、ShaderManager、MathExtension、StringExtension、UIHelp、LogWrap、gulpfile自动化处理等。
CocosCreator UI组件
脱碳甲醛
03-30 1379
Canvas 在 Canvas 中，可以设置分辨率和对齐方案，当手机屏幕发生变化时，会自动适配手机，有根据宽适配和根据长适配两种策略。 Widget 能使当前节点自动对齐到父物体的任意位置，或者约束尺寸，让你的游戏可以方便地适配不同的分辨率。 如图，为UI界面设置，其中，值可以是%为单位，也可以是 px 为单位，当左右两侧都有数据时，图片将会被拉伸。 Layout Layout 是一种容器...
四 cocos create UI系统
cl66666666的博客
10-27 358
customEventData 传参。Overflow文字排版。脚本代码click.js。
5分钟上手！CocosCreator轻量UI框架：让单场景游戏开发效率飙升
gitblog_00789的博客
11-01 618
在游戏开发领域，高效的UI管理往往是提升开发速度的关键。今天我们要介绍的**CocosCreator_UIFrameWork**，正是一款专为单场景游戏设计的轻量级界面管理框架。它通过预制体化界面设计，提供了界面显示、隐藏、释放等一站式功能，让游戏管理变得前所未有的简单！无论是新手还是资深开发者，都能快速掌握并应用到实际项目中。 ## ???? 核心功能：单场景游戏的界面管理利器 该框架采用**单...
Cocos学习之UI系统基础
tipsyes的博客
04-17 1227
本文系统解析Cocos Creator UI开发体系，从Canvas多分辨率适配原理到Widget对齐机制，详解Label/Button/Sprite等五大基础组件特性。通过三个典型案例实战：①交互按钮实现背景变色与点击计数，演示组件通信与事件监听；②Layout组件构建自适应技能栏，展现动态排列技巧；③EditBox输入实时反馈，剖析事件驱动开发模式。附常见问题解决方案，总结画布适配、组件化开发、自动布局三大核心要素，为开发者提供从基础到进阶的UI开发实践指南，助力构建高效美观的游戏界面。
Cocos Studio游戏开发实用示例教程
weixin_42527589的博客
03-20 1465
Cocos Studio是Cocos2d-x家族的一款跨平台的游戏开发工具，旨在简化游戏的开发流程，提高开发效率。它提供了一整套游戏开发所需的功能，包括场景编辑、动画制作、UI设计和资源管理等。
Cocos Creator引擎开发：Cocos Creator基础入门_UI系统
chenlz2007的博客
10-24 1160
Cocos Creator提供了多种UI组件，这些组件可以帮助开发者快速构建用户界面。Label：用于显示文本。Button：用于触发事件的按钮。Image：用于显示图片。Sprite：用于显示精灵图。：用于显示进度条。Slider：用于滑动选择值。Toggle：用于开关选择。ScrollView：用于滚动显示内容。Canvas：用于管理UI节点的根节点。除了内置的事件类型，Cocos Creator还支持自定义事件。可以通过类来创建自定义事件，并通过方法来派发事件。// 创建自定义事件。
Cocos Creator引擎开发：Cocos Creator基础入门_CocosCreator引擎概述
chenlz2007的博客
10-24 2537
/ 自定义组件脚本 cc . Class({label : {type : cc . Label , default : null , tooltip : "标签组件" } } , // 使用生命周期方法 initialize onLoad : function() {// 设置标签内容 if(this . label) {} } });在这个例子中，我们创建了一个自定义组件，该组件包含一个label属性，用于获取标签组件。onLoad。
Cocos Creator入门实战：桌球小游戏
BigBear的博客
05-09 5998
Cocos Creator入门实战：桌球小游戏 转载请保留原文链接： 本篇主要是希望能够通过Cocos Creator实现一个桌球小游戏，从而能够让大家更好的了解以及运用Creator的物理系统 由于游戏比较简单，同时代码量也极少，因此就集中在一篇文章里面了。因此会长一些，有兴趣的同学麻烦耐心食用 开始之前 在开始桌球小游戏之前，我们需要对creator有一定了解以及熟悉，对js语法有一定的了...
Cocos Creator引擎开发：Cocos Creator基础入门_CocosCreator实战项目案例
chenlz2007的博客
10-24 1593
我们将开发一个简单的2D动作游戏，玩家需要控制一个角色躲避从屏幕顶部掉落的障碍物。游戏目标是尽可能长时间地存活并获得高分。我们将使用Cocos Creator 3.x版本进行开发，确保你能够跟上最新的技术趋势。通过本项目的开发，你已经掌握了Cocos Creator引擎的基本开发流程和核心功能。从项目创建到发布，我们覆盖了场景设计、角色控制、动画制作、碰撞检测、UI设计等各个方面。希望这个项目能够帮助你更好地理解Cocos Creator的开发技巧，并为你的游戏开发之路提供坚实的基础。
Cocos Creator引擎开发：VR UI组件开发_（5）.常用的VRUI组件介绍
chenlz2007的博客
04-26 863
在虚拟现实（VR）游戏中，用户界面（UI）的设计和实现是非常关键的一部分。Cocos Creator引擎提供了丰富的UI组件，这些组件在VR开发中同样适用，但需要根据VR的特点进行一些调整和优化。通过调整字体大小、颜色、阴影效果、图像大小、分辨率和材质属性，以及添加相应的交互逻辑，可以确保UI组件在不同的视角和距离下都能保持良好的可读性和交互性。希望本节内容能够帮助你更好地理解和使用Cocos Creator中的VR UI组件，提升你的VR游戏开发体验。
cocos入门7：cocos creator 中的ui系统
weixin_36020178的博客
10-29 2411
cocos creator中的label、sprite、button
Cocos CreatorUI系统上
chixi9603的博客
08-25 368
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ 欢迎关注达叔小生的简书！ 这是一个有质量，有态度的博客 ...
cocos creator 资源库（library）
我的博客
05-13 2517
资源库（library） library 是将 assets 中的资源导入后生成的，在这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。如果您使用版本控制系统管理您的项目，这个文件夹是不需要进入版本控制的。 当 library 丢失或损坏的时候，只要删除整个 library 文件夹再打开项目，就会重新生成资源库。 ...
cocos 动态生成Label并设置样式等
Milan_KunderLa的博客
06-26 5409
需求：根据json文件中数据动态生成label并展示 实现：首先生成node,在node的基础上添加组件addComponent(cc.Label) 然后可以为label设置基本的样式比如fontSize、string等，以及为了在规定宽度中展示，需要为node设置宽度，在设置label的overflow值（注意大小写！） ...
Cocos2d 控件:创建一个label
潜心修炼2016
04-12 778
//    // 创建开始游戏文字，并为其绑定触摸实践auto label = Label::createWithTTF("Start Game", "fonts/Marker Felt.ttf", 24);abel->setPosition( Point(visibleSize.width/2,visibleSize.height/2));this->addChild(label);
CocosCreator3D插件教程(10)：使用UI框架快速编写UI
插件小王子(xu_yanfeng)的博客
11-14 1163
在任何技术领域，编写UI界面，始终是一件比较繁琐的事情，不过creator3d插件也内置了大量内部UI组件，可以方便我们快速编写UI。 使用插件内置UI组件 我们可以在菜单开发者/UI组件中，查看现有的内置组件： 面板中展示了很多已有的UI组件，我们都可以在插件面板中直接使用，无需引入，示例中也给出了使用代码，非常方便，具体的UI组件细节，可以在文档中查阅。 使用插件内置UI组件： 优点： UI风格和整个编辑器非常协调。 ui-asset， ui-node，ui-component 等组件，和编辑器器
Cocos Creator Ui系统
weixin_33754913的博客
01-25 591
为什么80%的码农都做不了架构师？>>> ...
cocos creator中使用UI框架(一)
kirikayakazu的博客
05-03 8951
cocos creator中使用UI框架SUIFW 已上传到githubhttps://github.com/kirikayakazuto/UIFrameWorld 满意请点个星星 谢谢 简单的UI框架 1, Step1 首先进入我的github中, 下载项目https://github.com/kirikayakazuto/UIFrameWorld 将其中的UIFra...
HarmonyOS应用＜节气通＞开发第32篇:ArkTS语法快速入门——从TypeScript到声明式UI的完整指南
最新发布
2301_79280419的博客
06-16 387
本文系统介绍了ArkTS语言的核心语法与特性，作为HarmonyOS应用开发的官方语言，ArkTS在TypeScript基础上扩展了装饰器系统、声明式UI描述和状态管理机制。主要内容包括： ArkTS与TypeScript的关系：ArkTS是TS的扩展，强化了装饰器、声明式UI和自动状态响应式能力，限制了一些动态特性。 类型系统详解：包括基础类型、接口与类型别名、泛型等，特别强调了ArkTS对类型安全的严格要求。 核心特性：装饰器体系、状态管理、布局容器、控制流等HarmonyOS特有的开发范式。 实际应用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值