![Cocos Creator 3.x 游戏开发入门与实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/869/47379869/b_47379869.jpg)
1.4.2 向场景中添加文字
在向场景中添加【Hello World】文本之前,还需要在场景中添加一个Canvas节点。在Cocos Creator中,文本是作为2D元素存在的,在Cocos Creator 3.x中,所有的2D元素都必须作为RenderRoot2D的子节点才能被渲染,即需要显示的2D元素只有挂载在RenderRoot2D节点上,才能被正常显示。而Canvas承自RenderRoot2D,因此我们可以把所有需要显示的2D元素都挂载在Canvas节点上,从而让引擎渲染对应的元素。
在层级管理器中右击并在弹出的快捷菜单中选择【创建】→【UI组件】→【Canvas(画布)】命令,即可在场景中创建一个Canvas节点,如图1-20所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_31_1.jpg?sign=1739541921-5o27iS2ii96BtmTNKN2yxUKY14Kw7ZKi-0-b70b3f6d82daa324147d228128275c4d)
图1-20 创建Canvas(画布)节点
在创建Canvas节点后,右击层级管理器中的【Canvas】节点,在弹出的快捷菜单中选择【创建】→【2D对象】→【Label(文本)】命令,即可在Canvas节点下创建一个文本节点,如图1-21所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_31_2.jpg?sign=1739541921-6UuxN1a0jL4UMxqK1XaLeonr9vvREWAg-0-f32b6a1194fb332efb039c42d2af326b)
图1-21 创建Label(文本)节点
这里需要注意的是,Label是2D组件,如果创建的是3D空项目,当添加了文本节点后,由于场景默认是3D的,所以可能并没有在场景编辑器中看到相应的文本。此时需要点击编辑器顶部工具栏中的【3D】按钮,将场景从默认的3D视图切换为2D视图,也可以使用快捷键F2来实现场景的切换,如图1-22所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_32_1.jpg?sign=1739541921-CSvB57f8iwcLzwNZKZDacIYItZf4ysM1-0-e7c22d2af3244258c7891bf5c09a0b48)
图1-22 切换2D/3D编辑模式
当看到编辑模式按钮的字样显示为【2D】时,表明我们处于2D编辑模式中,此时场景编辑器会以2D视图的方式进行呈现,场景中的文本就可以被看到了,如图1-23所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_32_2.jpg?sign=1739541921-NRzLfaoZAFvmgDIOxrILGiLhm7ot8cMr-0-fa0e881bf07a42dcca61b5a301eaf298)
图1-23 2D编辑模式
在层级管理器中选中【Label】节点,可以在属性检查器中对Label的文本内容进行修改,此时我们尝试把【String】文本框中的内容修改为【Hello World】,如图1-24所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_33_1.jpg?sign=1739541921-uR9vI50V4ETE5CVXgRI2EgeYYTOKS1sg-0-f0ff9b6154682b6846e9b41179d50d5b)
图1-24 属性检查器
修改完成后,我们可以看到场景中的文字已经同步变成了【Hello World】,如图1-25所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_33_2.jpg?sign=1739541921-uEYLZEBKC2TQBxGbmKpJBfMS7AvqBoP9-0-19d25d8e7b989ed983b643963c10df8c)
图1-25 显示【Hello World】