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