1.创建游戏应用窗口,宽度为:500,高度为:700

  1. var app = new PIXI.Sprite.fromImage(500,700);

2.将应用显示到浏览器页面

  1. document.body.appendChild(app.view);

3.创建图片显示元素(图片路径省略),并添加到应用程序舞台

  1. var bg = new PIXI.Sprite.fromImage("图片路径");
  2. app.stage.addChild(bg);

4.创建文本显示元素(文本内容可省略),并添加到应用程序舞台

  1. var txt = new PIXI.Text("文本内容");
  2. app.stage.addChild(txt);

5.请列出10个显示元素的常用属性,并说明属性的作用

属性级别 属性名称 属性值 作用
公共属性 x 数字 设置元素的x坐标位置
公共属性 y 数字 设置元素的y坐标位置
公共属性 width 数字 设置元素的宽度
公共属性 height 数字 设置元素的高度
公共属性 rotation 数字 设置元素旋转的弧度
公共属性 scale 数字 设置元素的缩放比例(当数值为 -1 时,可实现水平或垂直翻转)
公共属性 visible 布尔值 设置元素是否可见
公共属性 alpha 数字 设置元素的透明度
文本属性 text 文本内容 设置文本显示内容
文本属性 style 文本样式 设置文本显示样式

6.文本style样式

  1. var score = new PIXI.Text("得分:10000");
  2. score.style.fill = 0xffffff;//设置字体颜色
  3. score.style.fontSize = 50;//设置字体大小
  4. score.style.fontWeight = "bold";//加粗
  5. score.style.fontStyle = "italic";//斜体
  6. score.style.fontFamily = "隶书";//设置字体
  7. app.stage.addChild(score);