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,
                 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(),