Javascript中pixi框架初探

来源：动视网责编：小采时间：2020-11-27 20:11:52

Javascript中pixi框架初探

Javascript中pixi框架初探:pixi.js创建渲染器（renderer）创建一个可以播放动画的区域，相当于(canvas).//v4.4.2之前的旧写法 //创建 var renderer = PIXI.autoDetectRenderer(w, h, { backgroundColor: 0x1099bb, transparent: true //背景

推荐度：

点击下载本文 文档为doc格式

导读Javascript中pixi框架初探:pixi.js创建渲染器（renderer）创建一个可以播放动画的区域，相当于(canvas).//v4.4.2之前的旧写法 //创建 var renderer = PIXI.autoDetectRenderer(w, h, { backgroundColor: 0x1099bb, transparent: true //背景

根据材质集加载图片

在 pixi 中有一个 loader 类来管理图片的加载，并且在加载完成后调用回调函数处理。

PIXI.loader
 .add("images/treasureHunter.json")
 .load(setup);

treasureHunter.json 是材质集的配置文件，setup 是在完成图片加载后调用的回调函数。
PIXI.loader 在加载完成后可以通过 PIXI.loader.resources 来获取加载的图片。

回调函数

在完成图片加载后，PIXI.loader 会自动调用 setup 函数来进行下一步的处理。我们先定义
一个测试方法，看看是否跟预期一样。

function setup() {
 console.log("加载完成.");
}
// 测试可以的话就可以，删除setup里面的东西，然后完善舞台。

创建场景(gameScene)

游戏一般要创建两个场景，一个是用来显示正常游戏画面(gameScene)，一个是用来显示游戏结果(gameOverScene)。

var gameScene;

function setup() {
 gameScene = new PIXI.Container();
}

在容器中要添加所有的材质并创建对应的sprite，如何添加?通过PIXI.loader.resources 可以访问加载的素材。

var gameScene;

function setup() {
 gameScene = new PIXI.Container();
}

注意：pixi需要在一个服务器上运行，推荐调试的时候使用 http-server 本地服务器，

游戏开始界面场景

游戏结束界面场景（一个显示一个消失）

利用pixi绘制图形

绘制线条图形

首先需要创建图形类var graphics = new PIXI.Graphics();

graphics.beginFill(0xFF3300); //图形填充颜色

graphics.lineStyle(4, 0xffd900,1); //图形边框宽度，颜色，透明度

按线条点位坐标绘图

graphics.moveTo(50,50); //图形绘制起点
graphics.lineTo(250, 50); //连线到下一个点
graphics.lineTo(100, 100);
graphics.lineTo(50, 50);
graphics.endFill(); // 图形结束标志

绘制方块及圆形

绘制方块
graphics.drawRect(50, 250, 120, 120);
//参数分别为x点，y点坐标。方块长、方块宽

绘制圆角方块
graphics.drawRoundedRect(150, 450, 300, 100, 15);
// 前四个参数与绘制方块相同，最后一个圆角半径

绘制圆形
graphics.drawCircle(470, 90,60);
//参数为x点坐标、y点坐标、圆形半径 60

pixi中的文字应用（初）

首先需要创建一个文字类 var basicText = new PIXI.Text('Basic text in pixi');

随后可以设值x,y坐标 basicText.x = 30;

复杂的带style类

var style = new PIXI.TextStyle({
 fontFamily: 'Arial', //字体
 fontSize: 36, //字体大小
 fontStyle: 'italic', //字体类型（斜体）
 fontWeight: 'bold', //加粗
 fill: ['#ffffff', '#00ff99'], //由上到下的过渡颜色
 stroke: '#4a1850', //文字边框颜色
 strokeThickness: 5, //文字边框粗细
 dropShadow: true, //阴影
 dropShadowColor: '#000000', //阴影颜色
 dropShadowBlur: 4, //阴影模糊程度
 dropShadowAngle: Math.PI / 6, //阴影角度
 dropShadowDistance: 6, //阴影距离
 wordWrap: true, //自动换行
 wordWrapWidth: 440 
});

var richText = new PIXI.Text('Rich text with a lot of options', style);
richText.x = 30;
richText.y = 180;