用ClippingNode实现文字AVG游戏的对话字幕效果

本文链接：https://blog.youkuaiyun.com/mdifferent/article/details/40785917

本文介绍了如何使用Cocos2dx的ClippingNode实现文字AVG游戏的对话字幕效果，详细讨论了剪纸原理，涉及四个关键问题：剪哪张纸、剪什么形状、使用哪部分及贴到何处。通过动态调整LayerColor对象的Scale和DelayTime，逐字显示对话。解决ClippingNode位置问题时，发现需通过设置stencil子节点的setPosition来调整遮罩位置，因stencil的AnchorPoint无法影响显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

玩文字AVG游戏主要的行为就是阅读角色的对话（当然还包括欣赏立绘和CG音乐），然后在适时地做出选择。玩过的朋友都知道一般对话都是一个字一个字显示出来的，文字显示的速度可以调节，点击鼠标就把整句话显示出来。这个效果如何用Cocos2dx做出来呢？经过网上一番搜索，基本上用ClippingNode可以实现。主要参考的文章有这么几篇：

http://shahdza.blog.51cto.com/2410787/1561937

http://blog.youkuaiyun.com/ac_huang/article/details/39554967

可以先学习一下ClippingNode的基本原理。

其实有点像剪纸，主要需要考虑四个问题：

1. 剪哪张纸？

2. 剪什么形状的？

3. 使用剪下来的哪一部分？

4. 贴到什么上面？

第一个问题决定了ClippingNode对象的child都有谁，可以有多个Node，要通过addChild添加，多个Node结合成为要剪的纸。

第二个问题决定了stencil，stencil本身也是一个Node，所以也可以包含多个子Node，比如我们需要多个图形的时候就把各个sprite分别添加到Node中，多个Node组合出的图形就是要剪的形状。然后再把Node用setStencil把这个节点加到ClippingNode对象里，每个ClippingNode对象只能有一个stencil。需要注意的是该Node本身的texture并没有意义，需要的只是轮廓。

第三个问题决定是否reverse。ClippingNode有一个reverse属性，默认是false，也就是取剪下来的部分。比如在一张正方形的纸上剪一个圆下来，false的话就是把实心的圆形本身贴到背景上，如果是true的话就是把一个有圆形镂空的正方形贴上去。

第四个问题与clippingnode对象本身无关，你要考虑的是背景，就是你把clippingnode对象add到哪个layer。

然后回过头来考虑我们的需求，我们需要的是一段文字逐字显示，这里采用的方案是“剪一张写好整段文字的纸，一个字一个字的剪，把剪下来的的字贴到背景上”。

问题