使用pixi.js初体验

序言

这次完成的活动H5有点类似一下个小游戏,效果链接:新年壁纸, 主要使用的技术是: pixi.js

第一次做这个的时候充满焦虑,焦虑的点有两个:1.时间比较赶,给的开发时间是一个周。2.这次活动H5和平时的H5不一样,我算是第一次接触这样类型的H5,脑袋充满空白。面对这个问题,考虑用户交互较多,就必须考虑性能问题等等一系列的问题。当时做的时候是参考了网易的睡姿大比拼,当时看到这个效果的时候,真的是开启我新世界的大门,好牛逼呀!是怎么做到了,我才知道原来H5也可以做的这个棒,然后我就做了调研,发现主要使用的是pixi.js

pixi.js是一个超快的2D引擎,这会意味着它会帮助你用JavaScript或者其他HTML5技术来显示媒体,创建动画或管理交互式图像,从而制作一个游戏或应用。根据这些,看到了pixi.js的很多优点,show time!

开发过程

开发的时候,大致浏览了一下pixi.js的api,然后着重研究开发中需要使用的api,这里介绍一下我在开发中使用到了api


//1.PIXI.CanvasRenderer 创建一个canvas应用 puzzle.js
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;

const application = new PIXI.CanvasRenderer(clientWidth, clientHeight, {
    backgroundColor: 0xffffff,
    autoResize: true,
    preserveDrawingBuffer: true,
    antialias: true, //防止图像移动时出现锯齿
    resolution: 2 //在不同分辨率下图片保持清晰
  });

//Puzzle.vue
mounted() {
    //显示应用
    const content = this.$refs.content;
    content.appendChild(puzzle.application.view);
}

//2.绘制图片,图形相关api
const C = PIXI.Container; //创建一个容器
const L = (PIXI.Rectangle, PIXI.Graphics); //创建图标
const J = (PIXI.autoDetectRenderer, PIXI.loader);
const A = (new PIXI.ticker.Ticker(), PIXI.Sprite);

var bgC = new C();
var bgL = new L();

//Puzzle.vue中使用的相关片断
mounted() {
     puzzle.J
      .add(imgBaseUrl + "/rotate.png")
      .add(imgBaseUrl + "/close.png")
      .add(imgBaseUrl + "/logo.png")
      .add(imgBaseUrl + "/top_title.png")
      .add(imgBaseUrl + "/qrcode3.png")
      .add(imgBaseUrl + "/bg/bg1.png")
      .load(puzzle.setUp);
}

//puzzle.js 默认的背景颜色
bgL.beginFill(0xf64232);
bgL.drawRect(0, 0, 2e3, 2e3);
bgL.endFill();

bgC.index = 0;
bgC.addChild(bgL);

var logo = new A(J.resources[imgBaseUrl + "/logo.png"].texture);

文档的api写的很清楚,需要自己多花点时间研究,如果自己使用的使用。

总结

初次接触,有很多自己不知道的,需要自己花更多的时间进行摸索,并且在实现一个效果时,要有自己的思维模式,把一些细节考虑进去,后期修bug的时候会更容易。当然,面对未知,也需要有相应的心里准备,不要出现一些情况,一脸懵逼。

此处评论已关闭