phaser学习总结之Text对象详解
2024-08-24 08:16:22
前言
在phaser学习总结之phaser入门教程中,我们已经入门了phaser,对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解,本章将对phaser中的Text文本对象进行详细介绍。
参数详解
参考资料:https://photonstorm.github.io/phaser-ce/Phaser.Text.html#height
语法:game.add.text(x,y,text,style)
Name | Type | Description |
x | number | 新文本对象的X位置 |
y | number | 新文本对象的Y位置 |
text | String | 将要写入的实际文本 |
style | object | 要在文本上设置的样式属性 |
样式style可选
Name | Type | argument | Default | Description |
font | string | 可选 | 'bold 20pt Arial' | 文本字体 |
fontStyle | string | 可选 | 继承字体 | 字体样式 |
fontVariant | string | 可选 | 继承字体 | 字体变体 |
fontWeight | string | 可选 | 继承字体 | 字体粗细 |
fontSize | string|number | 可选 | 继承字体 | 字体大小 |
backgroundColor | string | 可选 | null | 背景颜色 |
fill | string | 可选 | black | 字体颜色 |
align | string | 可选 | left | 对齐方式 |
boundsAlignH | string | 可选 | left | 文本在内的水平对齐 |
boundsAlignV | string | 可选 | top | 文本在内的垂直对齐 |
wordWrap | boolean | 可选 | false | 指示是否应使用自动换行 |
wordWrapWidth | number | 可选 | 100 | 文本将要换行的宽度(以像素为单位) |
maxLines | number | 可选 | 0 | 换行显示的最大行数 |
(1):font
设置字体,也可以是字体的属性集合
(2):fontStyle
设置字体样式,默认继承自字体,可选normal, italic, oblique
(3):fontVariant
设置字体变体,默认继承自字体,可选normal,small-caps
(4):fontWeight
设置字体粗细,默认继承自字体
(5):fontSize
设置字体大小,默认继承自字体
(6):backgroundColor
设置背景颜色,默认为null
(7):fill
设置字体的颜色,默认black
(8):align
设置字体的对齐方式,默认left(左对齐),可选left,right,center
(9):boundsAlignH
设置文本在内的水平对齐,默认值left,可选left,center,right
(10):boundsAlignV
设置文本在内的垂直对齐,默认值top,可选top,millde,bottom
(11):wordWrap
设置指示是否应使用自动换行,默认值false
(12):wordWrapWidth
文本将要换行的宽度(以像素为单位),默认值100
(13):maxLines
换行显示的最大行数,默认值0
案例解析
(1):简单的文本案例入门
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本基础例子</title>
</head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){}
function create(){
var style={font:'65px Arial',fill:'#ff0044',align:'center',backgroundColor:'#fff'} //设置显示文本的样式
var text=game.add.text(game.world.centerX,game.world.centerX,'你好',style);
text.anchor.set(0.5);
}
function update(){}
</script>
</body>
</html>
(2):设置文本居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文本居中</title>
</head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){}
function create(){
var text;
var style={font:'bold 32px Arial',fill:'#fff',boundsAlignH:'center',boundsAlignV:'middle'}
text=game.add.text(0,0,'你好',style);
text.setShadow(3, 3, '#f40', 2);//设置文字阴影
text.setTextBounds(0,0,800,600);
}
function update(){}
</script>
</body>
</html>
(3):改变文本的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变文本的例子</title>
</head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){ }
var text;
var count=0;
function create(){
text=game.add.text(game.world.centerX,game.world.centerY,'你好',{fill:'#fff',align:'center'});
text.anchor.setTo(0.5,0.5);
}
function update(){
game.input.onDown.addOnce(updateText, this);
}
function updateText() {
count++;
text.setText("你点击了"+count+"次");
}
</script>
</body>
</html>
总结
本章主要讲解了phaser中文本对象的相关属性,文本对象的属性远远不止这些,参考文档我已经给出,有需要的可以根据参考文档来学习,当然Text文本对象也有方法,只是我没有写出来而已。
资源下载:https://coding.net/u/kk_1/p/phaser_group/git
最新文章
- ASP.NET路由模型解析
- iOS之 PJSIP静态库编译(二)
- CentOS下Web服务器环境搭建LNMP一键安装包
- 如何实现XA式、非XA式Spring分布式事务
- scala中的view bound与context bound
- oracle中execute immediate的使用(select/insert/update/delete)(转)
- haproxy安装配置for mysql负载均衡(ubantu)
- AngularJS 最常用的几种功能
- 图像检索(4):IF-IDF,RootSift,VLAD
- JS判断类型
- 解决国内NPM安装依赖速度慢问题
- SHA256withRSA证书签名,私钥签名/公钥验签
- 使用ghost装完系统后出现“引用了一个不可用的位置”
- JavaScript学习:取数组中最大值和最小值
- 写了一个Hy的vscode语法高亮插件
- spring mvc 使用kaptcha配置生成验证码实例
- Datetimepicker配置参数
- selenium webdriver窗口切换(上)
- canvas+js实现荧光字符效果
- js for form
热门文章
- javaScript 基础知识汇总(六)
- Mysql高手系列 - 第4天:DDL常见操作汇总
- python控制窗口缩放
- codeforces 876 D. Sorting the Coins(线段树(不用线段树写也行线段树写比较装逼))
- lightoj 1046 - Rider(bfs)
- Python起源发展与学(ru)习(keng)的开篇
- Leetcode:合并两个有序链表
- 详细的漏洞复现:Shellshock CVE-2014-6271 CVE-2014-7169
- 【LeetCode】34-在排序数组中查找元素的第一个和最后一个位置
- 【LeetCode】103# 二叉树的锯齿形层次遍历