如何让文本从右向左竖直布局？Cocos Creator 3.0

于 2021-03-02 08:45:00 发布
阅读量939 收藏 1
点赞数
文章标签： html css flex qml 分布式存储
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45686592/article/details/114297990
版权
本文介绍了如何在Cocos Creator 3.0中创建一个类似圣旨布局的文本组件，支持系统字体、空格、斜体和粗体。通过翻阅源码和修改现有组件，实现竖直文本排列，同时提供了实现方法和参考资料。

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

前言

最近韭菜长的不错，公众号也有点长草了，出来割一波。

割草

逛论坛看到这么一个需求，有人想要圣旨一样布局的文本。

问题

于是白玉无冰梭哈一下，写了一个简易的组件供在座的各位参考。

本字体组件支持(就是原本系统字组件Label的阉割版本) ：

  • 系统字体

  • 空格，斜体，粗体

  • 字体大小、行高

但暂未支持字体资源，对齐模式，缓存模式，排版模式，下划线。（不过相信你看了这篇文章你自己也会扩展这些功能，不是白玉无冰懒????）

使用方法和效果预览如下：

使用方法和效果预览
最低0.47元/天 解锁文章
cocos-2dx 随记 通过锚点从右向左输出
懿云丶
05-21 293
代码纯属工作中遇到问题，回家解析，次日在运用到工作中，算是人生记录，有无帮助希望大家勿喷。local size = cc.Director:getInstance():getWinSize()local GameScene = class("GameScene",function() return cc.Scene:create()end)function GameScene:create() l...
一.COCOSCREATOR3D 左右抛物线和垂直抛物线
u014774743的博客
09-27 1240
一.COCOSCREATOR3D 左右抛物线和垂直抛物线 缺点 因为是根据2点之间的距离去计算时间的，所有飞行速度都是恒定的，等有空再去改改吧，或者有大佬去帮忙改一下。 第一次用C3D写3D项目，还有许多写的不好的地方，请大家多多包涵。 /** 重力加速度 */ private _gAcc:number = -10; /** 抛出去的速度，值越大顶点位置越高 */ private _shotSpeed:number = 15; /** 初速度向量 */
creator Label竖行显示
qq_38026437的博客
10-27 3719
用cocos creator 经常会用到label组件，官方并没有说明文字可以竖行显示。 其实很简单 将label的 overflow 设置为shrink 或者resize_height 如果fontsize 是30 就将label的width设置为30 如果设置shrink 就会在限定区域 自动缩放文字 如果是resize_height 高度就会自适应 设置成 shrink 文字过多 所以自动缩小到 13像素 设置成resize_height 高度会随文字变多而升高 文字大小..
cocos2dx中设置横竖版
weixin_30614109的博客
05-25 110
IOS目录中RootViewController.mm//显示竖屏- (BOOL) shouldAutorotate { return NO;} //显示横屏- (BOOL) shouldAutorotate { return YES;} 还有一个屏目适配: AppDelegate 中: CCDirector* pDirector = CCDirector::sharedDirect...
大话cocos2d中的文字显示（CCLabelTTF、CCLabelBMFont和CCLabelAtlas）
Han的小站
01-03 2033
cocos2d中的文字显示
cocos2dx3.0 TextField 设置文字垂直居中
better的博客
11-07 1708
TextField 设置垂直方向对齐方式： mTextField->setTextVerticalAlignment() 参数：TextVAlignment::BOTTOM TextVAlignment::TOP TextVAlignment::CENTER 设置水平方向对齐方式： mTextField->setTextHorizontalAlignment() ...
云浮消消乐creator3.0.zip源码cocos creator项目源码下载
03-18
云浮消消乐creator3.0.zip源码cocos creator项目源码下载云浮消消乐creator3.0.zip源码cocos creator项目源码下载 1.上线产品适合个人学习技术做项目参考 2.开发脚本为javsScropt或者typeScript 3.上线产品适合小...
Cocos Creator引擎开发：粒子特效开发
09-03
Cocos Creator引擎开发：粒子特效开发_（10）.粒子特效的性能优化.docx Cocos Creator引擎开发：粒子特效开发_（11）.粒子特效在场景中的应用.docx Cocos Creator引擎开发：粒子特效开发_（12）.粒子特效的动画和...
CocosCreator搓牌特效，可上下左右搓牌
08-28
基于CocosCreator2.4.10(CocosCreator 2.x版本可用)
CocosCreator-Build-Encrypt.zip
03-27
1.加密图片资源 2.加密配置文件 3.自定义加解密方式
ttf 字的水平距与垂直距
客亦知夫水与月乎？
03-10 1748
原文：http://blog.csdn.net/song_hui_xiang/article/details/18002261  在项目中对于文字的显示要求会有很多种，比如加描边、加阴影、个别文字加颜色、字的行间距与列间距等等一些。。最近在看cocos2d-x源码时发现引擎确实很强大里面有对文字的加描边与阴影的创建方法，但我在写实际运用时发现对文字加描边的效果不是很好，而且也没有找到可以
cocos =》 creator 引擎各组件面板属性解释 (来自引擎源码中)
z1067832450_的专栏
08-04 2279
'animation': { 'default_clip': '在勾选自动播放或调用 play() 时默认播放的动画 clip。', 'clips': '通过脚本可以访问并播放的 AnimationClip 列表', 'play_on_load': '是否在运行游戏后自动播放默认动画 clip。' }, ...
纯UILabel实现文字的竖排显示
birthmarkqiqi的专栏
07-03 1890
做iOS开发要经常用到UILabel。UILabel一般只适用一些简单的文字显示。当需要复杂的图文混排的时候，可以用CoreText来做。但是CoreText用法复杂，当我们遇到一些不是很复杂的交互需求时，用CoreText就有点杀鸡用牛刀的意思。这里介绍一下我在项目里遇到的一个案例。 先来看看效果： 这里要求文字都是竖排显示，并且当文字是非汉字的时候又要把文字侧过来以方便阅读
CocosCreator 基于Assembler实现的图片切割破碎效果及自定义遮罩
Valiancer
01-06 5360
更多笔记，请关注公众号： Cocos引擎源码位于CocosCreator.app/Contents/Resources/engine/cocos2d/(Mac版本), 以下使用CocosEngine代替路径 效果展示 1, 自定义渲染组件—TexturePlus 2, 实现自定义多边形渲染范围 =========== 3, 图片切割效果 =========== 4, 图片破碎效果 =========== 5, 碎片掉落效果 =========== 浅析Assember 源码路径位于 Coco
【cocos】文本自动右对齐
weixin_33836874的博客
06-05 641
把x锚点设为1 转载于:https://www.cnblogs.com/Faiz-room/p/6946994.html
ttf字库
sup_xiaok的专栏
05-05 2366
<br />FreeType 2 教程<br />第二步 管理字型<br />@ 2009 David Turner (david@freetype.org)<br />@ 2009 The FreeType Development Team (http://www.freetype.org/) <br />翻译:liaoying<br />简介<br />这是FreeType2教程的第二部分,它包括以下内容:<br />获取字型数据<br />简单管理字型图像<br />获取全局数据(包括字距kernin
[CocosCreator]-07-对齐策略
06-21 1051
https://docs.cocos.com/creator/manual/zh/ui/widget-align.html
Cocos Creator开发环境的配置
baidu_37132424的博客
05-22 4978
参考官方配置文档http://docs.cocos.com/creator/manual/zh/publish/setup-native-development.htmlhttp://docs.cocos.com/creator/manual/zh/publish/publish-native.htmlNDKSDK如果遇到api level的问题，主要是我下载的sdk里面platforms目录中什...
Cocos Creator _RichText组件
热门推荐
wy小骑士
10-18 1万+
RichText 组件用来显示一段带有不同样式效果的文字，你可以通过一些简单的 BBCode 标签来设置文字的样式。 目前支持的样式有：颜色(color)，字体大小(size)，字体描边(outline)，加粗(b)，斜体(i)，下划线(u)，换行(br)，图片(img)和点击事件(on)，并且不同的 BBCode 标签是可以支持相互嵌套的。 RichText属性 属性 功能说明 ...
cocos creator 3.0描边
最新发布
12-30
### 在 Cocos Creator 3.0 中实现文本或精灵的描边效果 #### 使用自定义 Shader 实现描边效果 对于希望在 Cocos Creator 3.0 中为文本或精灵添加描边效果的需求，可以利用自定义Shader来达成这一目标。通过编写特定的着色器代码，能够有效地控制渲染过程中的颜色混合方式，从而创建出理想的描边视觉效果[^3]。 下面是一个简单的例子展示如何构建一个具有描边特性的文字组件： ```glsl // 描边材质脚本 (stroke-material.glsl) precision mediump float; uniform vec4 u_color; uniform sampler2D u_mainTex; varying vec2 v_uv; void main() { // 原始纹理采样 vec4 originalColor = texture2D(u_mainTex, v_uv); // 计算边缘检测因子 float edgeFactor = step(0.5, length(vec2(dFdx(v_uv.x), dFdy(v_uv.y)))); // 应用描边逻辑：当像素位于边界时应用不同的颜色 gl_FragColor = mix(originalColor * u_color, vec4(1., 0., 0., 1.), edgeFactor); } ``` 此片段展示了基本原理，在实际项目中可能还需要调整参数以适应不同场景下的需求。为了使上述代码生效，需将其关联至相应的UI元素上作为其使用的材质资源之一。 另外一种更灵活的方法是借助第三方插件如 Spine 来间接完成类似的任务。虽然 Spine 主要用于骨骼动画制作，但它所提供的挂点机制允许开发者向现有角色模型附加额外的对象，这同样适用于创造独特的装饰性特征，例如围绕对象周围的轮廓线[^2]。 然而值得注意的是，由于版本差异的存在，某些特性可能会有所变化；因此建议查阅官方文档确认最新API接口以及最佳实践指南[^1]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值