Giter Club home page Giter Club logo

pixi-display's Introduction

pixi-display

Allows to change rendering order of pixi-v4 containers without changing the scene graph

Compiled files of all gameofbombs plugins are located in pixi-bin

Please look at example

Some explanations

  1. create some DisplayGroup , each has a z-index
  2. assign them to some of displayObjects (as shared component)
  3. assign displayList to root container (as a component)
  4. Displaylist looks inside subtree and sorts all the displaygroups that appear there, also calculated the list of elements that appear inside every DisplayGroup
  5. all objects that don't have displayGroup are added in "displayChildren" list of first parent that has it a displayGroup.
  6. inside each DisplayGroup you can specify sorting algorithm, if it is needed. (sort by y-coord or something like that)
  7. DisplayList -> DisplayGroups -> containers -> DisplayChildrens

As a result, every object will have a DisplayFlag:

  1. AUTO_CHILDREN - its children can appear in other display groups, so we render only self _renderWebGL
  2. AUTO_CONTAINER - have mask or filters, renders whole subtree renderWebGL
  3. AUTO_OBJECT - no children. thus, renderWebGL will be called
  4. MANUAL_CONTAINER - Specified by user. Its a particle container. Call renderWebGL and dont even try to check childrens, for performance.

Pros

  1. compatible with other implementations: just assign each element its own DisplayGroup. All elements will be sorted
  2. optimized for cases when you already know that 1000 elements have the same z-index: just assign them the same DisplayGroup
  3. optimized for cases when you know that some displayObjects follow natural order of things (rendered just after parent)
  4. optimized for cases like "ParticleContainer", you can set special DisplayFlag to container that way displayList will consider it a "leaf" and dont check its children at all.

Cons

  1. Interaction is different, there might be bugs. Performance of processInteractive() can drop a bit.
  2. Non-renderable elements are not interactable. Elements with alpha=0 are interactable but their children are not.

pixi-display's People

Contributors

ivanpopelyshev avatar staff0rd avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.