[wm_tips]文本元素是用来在应用窗口中显示一段文字(字符 文本)[/wm_tips]
示例
1、创建文本元素
// new PIXI.Text(); :创建文本元素
// "得分:10000" : 文本元素中的内容(文字、字符)
// var score : 文本元素的别名
var score = new PIXI.Text("得分:10000");
2、在应用窗口中添加文本元素
//在名为app的应用窗口中(stage),添加一个元素(addChild),元素名为 score
app.stage.addChild( score );
[wm_notice]注意:文本元素中的默认字体颜色为黑色[/wm_notice]
二、设置文本元素属性
[wm_tips]属性:可以理解为配置,我们可以自定义属性的值来修改原有的配置[/wm_tips]
示例
//score : 文本元素的名称
//style : 风格
//fill : 填充颜色
// = "green" :绿色
//修改文本元素的属性,将颜色改为白色
score.style.fill = "green";
[wm_notice]我们可以将“ ”号中的颜色改为自己需要的颜色[/wm_notice]
颜色可以使用十六进制颜色编码表示
[wm_tips]十六进制颜色编码:为每种颜色匹配的一个编号,不需要背,当需要使用某种颜色时,可以从百 度中直接输入十六进制颜色编码表,找到自己需要 的颜色 编码[/wm_tips]
使用十六进制 颜色编码设置文本颜色
// "#cff060" :就表示了一种颜色
score.style.fill = "#cff060"
三、定位元素
[wm_notice]在应用窗口中元素默认的位置实在左上角(原点),可以通过修改定位点来改变元素的位置 定位点由两部分构成,分别是x坐标点与y坐标点[/wm_notice]
例如:
[wm_red]
1.应用窗口的宽度为500px,高度为400px,以左上角为原点向下延伸属于y轴,向右延伸属于x轴,
2.元素越靠右x的值越大,元素越靠下y的值越大
3.设置元素的x坐标与y坐标来定义元素在窗口中的位置
[/wm_red]
调整元素位置代码
//设置文本元素位置
元素别名.x = 340;//设置x坐标为340
元素别名.y = 20;// 设置y坐标为20
调整后效果
四、练习赛课游戏界面
1.示例代码
<!-- 引入外部的pixi.min.js -->
<script src="../js/pixi.min.js"></script>
<script>
//1、创建应用窗口(宽 480 ,高 700)
var app = new PIXI.Application(480,700);
//2、在页面中添加应用窗口
document.body.appendChild( app.view );
//3、创建图片元素(背景图片)路径:img/bg.jpg
var bg = new PIXI.Sprite.fromImage("img/bg.jpg");
//4、在应用窗口中添加图片
app.stage.addChild( bg );
//5、创建图片元素(赛车1图片)路径:img/saiche-2_03.png
var c1 = new PIXI.Sprite.fromImage("img/saiche-2_03.png");
//6、设置图片元素位置:x = 165 , y = 275
c1.x = 165;
c1.y = 275;
//7、在应用窗口中添加图片
app.stage.addChild( c1 );
//8、创建图片元素(赛车2图片)路径:img/saiche-3_03.png
var c2 = new PIXI.Sprite.fromImage("img/saiche-3_03.png");
//9、设置图片元素位置:x = 255 , y = 575
c2.x = 255;
c2.y = 575;
//10、在应用窗口中添加图片
app.stage.addChild(c2);“
</script>
2.运行效果
3.编程套路
1、引用pixi.min.js
<script src="路径"></script>
2、加入script标签(将来在script标签中编码)
<script> </script>
3、创建应用窗口元素
var app = new PIXI.Application(宽,高);
4、在页面中添加应用窗口元素
document.body.appendChild( app.view );
5、根据需要创建元素(文本、图片)设置元素属性(颜色、位置)
6、在应用窗口中添加元素
app.stage.addChild( 元素名 );
[wm_warn]如果页面中由多个元素构成 5/6步,反复编写[/wm_warn]