![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=1738929895-s5bDIwJmttfA6Yxa959HV4kdrtyWBiSp-0-9471bb4f4bcd5f3d5dc4dfa04e24ff26)
图1-20 创建Canvas(画布)节点
在创建Canvas节点后,右击层级管理器中的【Canvas】节点,在弹出的快捷菜单中选择【创建】→【2D对象】→【Label(文本)】命令,即可在Canvas节点下创建一个文本节点,如图1-21所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_31_2.jpg?sign=1738929895-RhTJe9S3siJclauk2yqzzdqV6vrGTgvf-0-09231993720b75eeb8b6f1b756e2d577)
图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=1738929895-yGMLcNJf0yFjpJPKh8dvf19dZqFQ0PzK-0-15aa7f087da03abc2b199590dd0dd6f9)
图1-22 切换2D/3D编辑模式
当看到编辑模式按钮的字样显示为【2D】时,表明我们处于2D编辑模式中,此时场景编辑器会以2D视图的方式进行呈现,场景中的文本就可以被看到了,如图1-23所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_32_2.jpg?sign=1738929895-GkARgVBTyesV4NRVkY9l0X7D4KScKyEX-0-aa118592b804e2172ab41673431ab4ce)
图1-23 2D编辑模式
在层级管理器中选中【Label】节点,可以在属性检查器中对Label的文本内容进行修改,此时我们尝试把【String】文本框中的内容修改为【Hello World】,如图1-24所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_33_1.jpg?sign=1738929895-uMRY2iHMokzHu1QNHytlhyXmMmCLhtut-0-ecfacea26e01251af309d490cac25e76)
图1-24 属性检查器
修改完成后,我们可以看到场景中的文字已经同步变成了【Hello World】,如图1-25所示。
![](https://epubservercos.yuewen.com/843505/26764096601609406/epubprivate/OEBPS/Images/44088_33_2.jpg?sign=1738929895-1dfOsNdzJGItFn2nro330o7RnTq5OPx1-0-98c4fed7b9b19f609d9318eba17fe776)
图1-25 显示【Hello World】