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