欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Javascript中pixi框架初探

程序员文章站 2022-05-09 21:01:53
...

pixi.js

创建渲染器(renderer)

创建一个可以播放动画的区域,相当于(canvas).

//v4.4.2之前的旧写法
//创建  
var renderer = PIXI.autoDetectRenderer(w, h, {  
    backgroundColor: 0x1099bb,  
    transparent: true //背景是否设为透明   
});  

document.body.appendChild(renderer.view);  
//舞台添加显示对象sprite及每次渲染的监听函数  

var stage = new PIXI.Container();  
stage.addChild(sprite);  
animate();  
function animate() {  
    renderer.render(stage);  
    requestAnimationFrame(animate);  
}  

//v4.4.2之后的新写法
//创建  
var app = new PIXI.Application(w, h, {  
    backgroundColor: 0x1099bb,   
    transparent: false //背景是否设为透明   
});

//添加显示对象sprite及每次渲染的监听函数  

app.stage.addChild(sprite);  
app.ticker.add(function(delta) {});  
document.body.appendChild(app.view);

除了autoDetectRenderer接口,还有 CanvasRenderer 和 WebGLRenderer 接口,
autoDetectRenderer 可以根据客户端对 WebGL 的支持自动创建 WebGL 或 Canvas renderer。

创建舞台(stage)

舞台相当于一个容器(Container),添加元素后由渲染器(renderer)渲染舞台。相当于一个*的容器。

pixi.js 中有个 Container() 类,这个类就是一个容器。

var stage = new PIXI.Container();

添加舞台之后可以由渲染器(renderer)渲染。
renderer.render(stage);
// 舞台(stage)搭建完成后渲染出来。。      ***最后

创建材质集

动画中最重要的元素是图片(材质),这一类特殊的图片对象在pixi.js中称为精灵(sprite),
通过控制sprite的大小,位置及一些其他的属性,可以达到动画的效果。

pixi中有一个sprite类,可以根据外部的图片(材质)来创建一个可以在pixi中使用的sprite对象。

有三种方式创建:

  • 从某个单独的图片创建

  • 从整个材质图片创建,根据材质上不同的位置和大小截取某部分来创建sprite

  • 从材质集中创建

    材质集是一个json文件,定义了某个材质图片里面图片的位置和大小等等,这样做的好处是不用
    每次创建sprite都要定义位置和大小,另外一方面修改了材质图片的时候不用修改代码.

根据材质集加载图片

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;

以上就是Javascript中pixi框架初探的详细内容,更多请关注其它相关文章!