pixi.js 总结

我的博客简单简洁 可能表达不清. 如有想法, 敬请留言.谢谢！ 群:881784250

https://github.com/ccaleb/endless-runner/tree/master/javascript-pixi/pixi.js-master

1:pixi.js的优点

代码简单,性能高效,扩展性强

PixiJS的性能优势, pixi.js专注于渲染,在js2d游戏引擎中，其性能是相当彪悍的。（官网上说最强） 见测试 https://www.goodboydigital.com/pixijs/bunnymark/?base=pixijs&category=bunnymark

PixiJS有着"简单"的代码, 友好的API，loader.add().add().load(),    label.centerXY()

PixiJS易扩展,能发挥你无穷的想象力通过装一些插件,可以更方便的实现一些功能.龙骨功能,透视功能,都过插件都可以实现

PIXIJS一直在维护,一直在更新, 其模块化的思想相当先进.

2 核心是Sprite. PIXI.Sprite->PIXI.Container->PIXI.DisplayObject

Sprite对象是渲染到屏幕的所有纹理对象的基础,能轻轻松松改变纹理,只要.sprite.texture = ...

Sprite默认是不响应点击等事件的，必须 Interactive

怎样创建srptie呢?

new Sprite(texture?)         常用方式

Sprite.from(source);         快捷方式. @param source, 可以是url地址,canvas,纹理

Sprite.fromFrame(key);    快捷方式 @param key 为json中的key,或加载时定义的key

Sprite.fromImage(url, crossorigin?:, scaleMode?:);  快捷方式  @param url，不解释

常用属性pivot, anchor, position, scale,texture 是不是一看就知道是干嘛的.

3 Pixi只做三件事  Pixi helped me with 3 main things:

• loading and displaying of assets
• interactivity
• game loop

4 一些有用的东西

可用命令行编译spritesheet  npm install sprietsheet -g

app.ticker()             loop及time

处理九宫格    Pixi.mesh.NineSlicePlane(texture, x, y, width, height)

pointer事件(鼠标和touch)   mouse事件(鼠标) tap事件(touch),  比较好的是, sprite.on('pointerdown', fun), fun中this会是sprite

获取全局坐标         app.renderer.plugins.interaction.mouse.global

PIXI inspector      An extension to the Chrome DevTools for inspecting Pixi.js games/applications.

loader.add(..........).on('progress", loadProgress).load(complete)  加载完成后的资源是保存在PIXI.loader.resources中,键值就是url或设置的key

PIXI.util里面包含了一些很有用东西. 比如isMobile,EventEmitter,TextureCache......

PIXI.extras需面也包含了一些有用的东西 例如 AnimatedSprite, BitmapText, Tiling等等，例如Tiling处理一些滚动效果是很高效的

5 pixi中常见的问题:

spriteA可以添加spriteB,spriteA宽高为1,这时需要用Container, sprite的宽高取决于sprite中纹理的宽高.

dis.stage为空, 需要注意.应用 app.stage

graphics 是继承容器的, 添加graphic有效没？

ui的问题,纯粹的用sprite,txt处理不复杂的界面搓搓有余.但是处理scroller和list是有点困难的.   用第三方ui框架 spown,ezgui都是有点问题的，通过egret编辑界面.然后导成pixi.js代码...

6 其他资料

多纹理渲染   http://phaser.io/tutorials/advanced-rendering-tutorial/part2

下面是老外的演讲的一些how

Things Audience Members Will Learn   观众会学到的东西

• How to set up and get Pixi.js app running    怎样让pixi运行
• How to use its basic features                        怎样用它的基本功能 
  • Sprites
  • Graphics
  • Interaction
• How to use the more advanced features     怎样用它的先进功能
  • Filters
  • Custom Filters
  • Particles
  • Meshes
  • Ropes
  • RenderTextures
  • Exporting Data
• How to optimise your scene for Pixi.js      怎样优化

性能测试:   multi texture batching         https://phaser.io/tutorials/advanced-rendering-tutorial/part2

pixi.js > phaser3 > phaser2  https://github.com/themoonrat/webgl-benchmark

线上例子   欢乐球球 是pixi.js和three.js开发的~

 var e = canvas.getContext("webgl", {
                alpha: !1,
                antialias: !1,
                preserveDrawingBuffer: !1,
                premultipliedAlpha: !1
            });
            e.colorMask(!0, !0, !0, !0), this.renderer3D = new THREE.WebGLRenderer({
                context: e,
                canvas: canvas,
                premultipliedAlpha: !1,
                alpha: !1
            }), this.renderer3D.setPixelRatio(window.devicePixelRatio), this.renderer3D.setSize(window.innerWidth, window.innerHeight),
            this.renderer3D.shadowMap.enabled = a.default.enableShadow, this.renderer3D.autoClear = !1,
            this.state3D = this.renderer3D.state, a.default.stageWidth = canvas.width, a.default.stageHeight = canvas.height,
            SPE.valueOverLifetimeLength = 3, (0, s.setSharedCanvasSize)(canvas.width, canvas.height),
            PIXI.settings.isLittleGame = !0, PIXI.settings.MAX_TEXTURES = 4, PIXI.settings.MAX_VERTEX_ATTRIBS = 16,
            PIXI.settings.RESOLUTION = 1, PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR,
            PIXI.settings.CAN_UPLOAD_SAME_BUFFER = !0, PIXI.settings.SPRITE_BATCH_SIZE = 256,
            PIXI.settings.GC_MODE = PIXI.GC_MODES.MANUAL, PIXI.settings.MIPMAP_TEXTURES = !1,
            e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL, !1), this.pixiApp = new PIXI.Application({
                view: canvas,
                context: e,
                width: window.innerWidth,
                height: window.innerHeight,
                resolution: window.devicePixelRatio,
                forceCanvas: !1,
                clearBeforeRender: !1,
                roundPixels: !1,
                transparent: !1,
                legacy: !0,
                sharedLoader: !0,
                autoStart: !1,
                sharedTicker: !0
            }), this.pixiApp.ticker.autoStart = !1, this.pixiApp.ticker.stop(), this.pixiApp.removeRenderTick(),