chap2_文本元素与元素属性

 一、创建文本元素

[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]

chap1_编程入门及游戏显示效果制作

[wm_tips]我会把整理出来的笔记发到文章里面,如果对javascript感兴趣的朋友可以跟着我一起来学习javascript哦,我们一起进步。[/wm_tips]

准备步骤

1.了解HBuilder X-点击跳转到HBuilder X搭建环境和基本使用操作

2.下载对应素材,我每天会把素材会放到底部百度网盘里

一、新建HTML并引入js文件

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="../js/pixi.min.js"></script>
    <script type="text/javascript">
      //该位置书写代码
    </script>
  </body> 
</html>

二、创建应用

创建应用窗口是指在网页中规划一个固定大小的区域用来展示某个应用

var app = new PIXI.Application(500,700); //创建一个游戏窗口
document.body.appendChild (app.view); //在网页内添加游戏窗口

代码解释

1.创建一个应用窗口元素

//new PIXI.Application(); 表示创建一个应用窗口
//500 : 窗口宽度(单位:px)
//700 : 窗口高度(单位:px)
//var app :为应用窗口元素在程序中的别名
var app = new PIXI.Application(500,700);

2.将应用窗口元素添加到网页中

//document :表示整张页面
//body  :网页体部分(可以显示在页面的部分)
//appendChild(); :向body中添加一个元素
//app.view : 应用窗口的视图
document.body.appendChild( app.view );

三、创建图片元素

创建图片,就是指创建图片,并将图片显示显示在游戏窗口内

//创建图片,该参数为图片路径,可以是网络路径,也可以是本地路径
var plane = new
PIXI.Sprite.fromImage("http://www.yyfun001.com/lesson/res/plane_blue_01.png");
或 
 var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");
//将图片添加到游戏窗体内部(右键检查元素可以看到窗体的大小)
app.stage.addChild(plane);

代码解释

1.创建图片元素

//new PIXI.Sprite.fromImage(); : 创建一个图片元素
//"img/plane_blue_01.png": 图片路径(img目录中的plane_blue_01.png文件)
//var plane  :图片元素在程序中的别名
var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");

2.将图片添加到游戏窗口内

//app :之前为应用窗口元素设置的别名
//stage :应用窗口的内部
//addChild(); :添加一个元素
//plane :图片元素在程序中的别名
app.stage.addChild( plane );

[wm_notice]注意:单词是否有错误、大小写是否规范,语句结尾是否有英文 ;[/wm_notice]

四、最终代码

<script src="../js/pixi.min.js"> </script>
<script>
var app = new PIXI.Application(500,700);
document.body.appendChild( app.view );
var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");
app.stage.addChild( plane );
</script>

五、最后效果图

素材下载

[wm_gzh keyword="chap1笔记" key="biji1"]百度云盘:https://pan.baidu.com/s/1o4GUj5LHPhkmui7tUhhwKg  提取码:ely5 [/wm_gzh]

HBuilder X如何搭建环境和基本使用操作

搭建环境

1.工具下载:Hbuilder X

2.工具包下载

3.项目名称:AirplaneGame

一、新建项目

1.直接点击新建项目

2.输入项目名称并制定项目存放目录

二、导入资源

1.右键项目名称,新建目录

2.输入目录名称js,然后把工具包里面的pixi.im.js拖动或者复制到js目录里

3.在AirplaneGame项目中新建第二个目录

4.然后把工具包里面的img图片文件拖动到,游戏显示目录里面,以后笔记都会在AirplaneGame里创建一个目录来完成案例的。

视频创建方法


工具包下载