NGUI-制作位图字体以及图文混排

制作字体过程

首先得下载一个位图制作工具Bitmap font generator,可以点击这里下载

1、新建txt文件,输入字体里面包含的文字

2、保存为utf-8格式:点击文件另存为,选择编码格式为UTF-8

3、打开下载的bitmap font软件,选择options->font settings,设置字体等选项

4.选择Edit->select chars from file,然后选择我们刚刚建好的文件

5、选择options->save bitmapfont as .然后就会生成两个文件,位图字体就算做完了。

二、在unity3d中使用位图字体,并作图文混排。

1、将上面生成的两个文件导入unity3d项目中,并且导入NGUI资源包。

2、导入准备好的表情图片。(可以从QQ里面选择表情,另存为。。)

3、制作图集。选中字体图片和表情图片,然后选择atlas maker

4、如果Atlas不是None,请点击右侧的new,这是为了新建一个干净的图集,然后选择create按钮,我们将生成的文件起名为EmotionsAtlas

5、选择NGUI->OPEN-Font Maker制作NGUI字体,然后选择Type为Imported Bitmap.把我们刚做好的字体和图集(注意图集是刚刚生成的表情+字体图集的集合)拖到箭头指定的地方.

6、这步非常重要,一定要把下面的图集给X掉,这个坑货,害得我搞了好几次。不清掉的后果是你的字体将会叠加,打一个字,显示很大的两个字。。。

然后点击下面的create按钮,我们起名为LouisFont

7、选中建好的字体预制,然后点击Atlas按钮,选择我们刚刚建好的EmotionsAtlas图集

8、点击Symbols and Emoticons,在前边文字框里输表情表示的字符,右边选择表情,然后点击add,

我这里建好了3个表情

他们看起来是这样:

最后一步,新建个NGUI,Label组件,输入文字,就可以看到结果了。文本OverFlow建议选择ResizeFreely,为了显示全文本。

这几种属性的区别,可以点击移步看我这篇笔记

最终显示结果:

不同NGUI版本,可能制作过程有点小差异,大致上就是这个过程。

终于写完博客了,又十一点多了,身体是革命的本钱啊,睡觉去了!

NGUI-制作位图字体以及图文混排

时间: 2024-11-07 08:42:14

NGUI-制作位图字体以及图文混排的相关文章

NGUI研究之有点坑爹的图文混排

 最近研究了了一下NGUI的图文混排工具,得出的结论是有点坑爹..大家看看我的测试步骤,我用的是目前NGUI的版本3.6.6 . 当我在 Open BitMapFont Marker 的时候界面上出现Assets/NGUI/Editor/FreeType.dylib is missing 的字样.于是查了一下,大概意思是必须要把FreeType.dylib 文件拷贝在/usr/local/lib/FreeType.dylib路径下面.FreeType.dylib 文件在NGUI/Editor

Unity插件之NGUI学习(5)—— 创建Label图文混排及文字点击

创建一个新的Scene,并按 Unity插件之NGUI学习(2)创建UI Root. 准备工作,制作Font,现在Project窗口创建一个Font文件夹,然后从系统自带字体文件夹中选择自己需要的字体,我选择了黑体,然后拖到Font文件夹中去.选择刚导入的字体. Font Size默认是16,不过网上看到过size16在IOS上显示太小,所以设置为30. 在菜单中选择NGUI->Open->Font Maker Type默认是Generated Bitmap--会生成材质文件,Dynamic-

Laya的位图文字,高亮文字,图文混排

测试版本:Laya 2.1.1.1 位图文字 白鹭的位图文字是由TextureMerger制作,然后在exml里使用. Laya的则直接使用FontClip组件. 在编辑模式,层级窗口中右键,选择创建组件UI,选择FontClip 将美术提供的位图文字赋值给FontClip的属性面板的skin属性,这样就是个位图文字了.比白鹭要方便些. 高亮文字 白鹭的高亮文字有文本样式 tx.textFlow = <Array<egret.ITextElement>>[ {text: "

静态页面制作:8HTML浮动腾挪概念(铺垫二:图文混排)

.paragraph { width: 80%; margin: 50px auto; color: #666; font-size: 20px; text-align: left; line-height: 200%; padding: 30px } 现在那我们来说说第二个铺垫. 第二个铺垫叫做图文混排.什么是图文混排呢,这个东西我们还需要花些时间来分析一下的.首先看下图: 其实上图就是一个例子,然而这个例子其实在我们浏览网页,或者看一些微博.博客等文章时,我们发现这种格式很常见.这种有内容.

[Swift通天遁地]八、媒体与动画-(15)使用TextKit实现精美的图文混排效果

本文将演示制作一款更加精美的图文的图文混排效果:将文字紧贴图片边缘的图文混排效果. 往项目中导入一份文本文件. 在左侧的项目导航区,打开视图控制器的代码文件[ViewController.swift] 1 import UIKit 2 3 class ViewController: UIViewController { 4 5 override func viewDidLoad() { 6 super.viewDidLoad() 7 // Do any additional setup afte

(一一一)图文混排基础 -利用正则分割和拼接属性字符串

很多时候需要用到图文混排,例如聊天气泡中的表情,空间.微博中的表情,例如下图: 红心和文字在一起. 比较复杂的情况是表情夹杂在文字之间. 要实现这种功能,首先要介绍iOS中用于显示属性文字的类. 用于文字显示的类除了text属性之外,还有attributedText属性,这个属性是NSAttributedString类型,通过这个属性可以实现不同文字的不同字体.颜色甚至把图片作为文字显示的功能. 下面介绍这个字符串的使用. 以一条微博内容为应用场景,介绍如何从中找出表情.话题等内容,其中表情替换

TextKit实现图文混排

//    NSAttributedString   这个类可以设置文本属性:加粗.斜体.删除线.下划线... //    NSMutableAttributedString  可变属性文本:可以动态添加文本的属性 NSString *text = @"iOS实现图文混排的方式:1.WebView     html+javascript 2.CoreText   (C语言实现的框架) "; UITextView *textview = [[UITextView alloc] initW

iOS实现简单图文混排效果

在很多新闻类或有文字展示的应用中现在都会出现图文混排的界面例如网易新闻等,乍一看去相似一个网页,其实这样效果并非由UIWebView 加载网页实现.现在分享一种比较简单的实现方式 iOS sdk中为我们提供了一套完善的文字排版开发组件:CoreText.CoreText库中提供了很多的工具来对文本进行操作,例如CTFont.CTLine.CTFrame等.利用这些工具可以对文字字体每一行每一段落进行操作. 此例中默认图片都在右上方,且为了美观和开发简便设定所占宽度都相同. 首先,需要引入Core

简单的Coretext 图文混排

在很多新闻类或有文字展示的应用中现在都会出现图文混排的界面例如网易新闻等,乍一看去相似一个网页,其实这样效果并非由UIWebView 加载网页实现.现在分享一种比较简单的实现方式 iOS sdk中为我们提供了一套完善的文字排版开发组件:CoreText.CoreText库中提供了很多的工具来对文本进行操作,例如CTFont.CTLine.CTFrame等.利用这些工具可以对文字字体每一行每一段落进行操作. 此例中默认图片都在右上方,且为了美观和开发简便设定所占宽度都相同. 1.