pixi-cull

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>pixi-cull</title> <meta name="description" content="Documentation for pixi-cull"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/main.css"> <script async src="assets/js/search.js" id="search-script"></script> </head> <body> <header> <div class="tsd-page-toolbar"> <div class="container"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base="."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="index.html" class="title">pixi-cull</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> All <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> <input type="checkbox" id="tsd-filter-inherited" checked /> <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label> <input type="checkbox" id="tsd-filter-externals" checked /> <label class="tsd-widget" for="tsd-filter-externals">Externals</label> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container"> <h1>pixi-cull</h1> </div> </div> </header> <div class="container container-main"> <div class="row"> <div class="col-8 col-content"> <div class="tsd-panel tsd-typography"> <a href="#pixi-cull" id="pixi-cull" style="color: inherit; text-decoration: none;"> <h1>pixi-cull</h1> </a> A library to visibly cull objects designed to work with pixi.js (but not dependent on pixi.js). Includes two types of culling algorithms: simple and spatial hash. The spatial hash may be also be used for collision detection, AI, etc. Features include: <ul> <li>automatic calculate bounding boxes for pixi.js objects</li> <li>also allow manual calculation for objects</li> <li>bounds calculated from any viewport including pixi-viewport (pixi-viewport.getVisibleBounds())</li> </ul> <a href="#moving-from-v1-to-v2" id="moving-from-v1-to-v2" style="color: inherit; text-decoration: none;"> <h2>Moving from v1 to v2</h2> </a> pixi-cull has been reworked and ported to typescript. The following functionality was removed: <ul> <li>removed the options to change the object's parameter names for AABB, dirty, spatial, and visible (this greatly simplified) the code</li> <li>removed calculatePIXI as an option, since this library is now solely designed for pixi.js</li> </ul> <a href="#rationale" id="rationale" style="color: inherit; text-decoration: none;"> <h2>Rationale</h2> </a> Since I maintain pixi-viewport, I was asked a number of times for a culling library. Well here it is. Choose from two drop-in algorithms to cull your objects. <a href="#simple-example" id="simple-example" style="color: inherit; text-decoration: none;"> <h2>Simple Example</h2> </a> <pre><code class="language-js">import * as PIXI from "pixi.js" import { Viewport } from "pixi-viewport" import { Simple, SpatialHash } from "pixi-cull" const app = new PIXI.Application() document.body.appendChild(app.view) // create viewport const viewport = new Viewport({ screenWidth: app.view.offsetWidth, screenHeight: app.view.offsetHeight, worldWidth: 10000, worldHeight: 10000, }) app.stage.addChild(viewport) viewport.drag().pinch().wheel().decelerate().moveCenter(5000, 5000) // add red boxes for (let i = 0; i < 500; i++) { const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE)) sprite.tint = 0xff0000 sprite.width = sprite.height = 100 sprite.position.set(Math.random() * 10000, Math.random() * 10000) } const cull = new Simple() // new SpatialHash() cull.addList(viewport.children) cull.cull(viewport.getVisibleBounds()) // cull whenever the viewport moves PIXI.Ticker.shared.add(() => { if (viewport.dirty) { cull.cull(viewport.getVisibleBounds()) viewport.dirty = false } }) </code></pre> <a href="#live-example" id="live-example" style="color: inherit; text-decoration: none;"> <h2>Live Example</h2> </a> <a href="https://davidfig.github.io/pixi-cull/">https://davidfig.github.io/pixi-cull/</a> <a href="#api-documentation" id="api-documentation" style="color: inherit; text-decoration: none;"> <h2>API Documentation</h2> </a> <a href="https://davidfig.github.io/pixi-cull/jsdoc/">https://davidfig.github.io/pixi-cull/jsdoc/</a> <a href="#installation" id="installation" style="color: inherit; text-decoration: none;"> <h2>Installation</h2> </a> <pre><code>npm i pixi-cull </code></pre> or <a href="https://github.com/davidfig/pixi-viewport/releases/">grab the latest release</a> and use it: <pre><code class="language-html"><script src="/directory-to-file/pixi.js"></script> <script src="/directory-to-file/pixi-cull.min.js"></script> <script> const SimpleCull = new Cull.Simple() </script> </code></pre> <a href="#license" id="license" style="color: inherit; text-decoration: none;"> <h2>license</h2> </a> MIT License (c) 2021 <a href="https://yopeyopey.com/">YOPEY YOPEY LLC</a> by <a href="https://twitter.com/yopey_yopey/">David Figatner</a> </div> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class=" "> <a href="modules.html">Exports</a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> <li class=" tsd-kind-class"> <a href="classes/simple.html" class="tsd-kind-icon">Simple</a> </li> <li class=" tsd-kind-class"> <a href="classes/spatialhash.html" class="tsd-kind-icon">SpatialHash</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/aabb.html" class="tsd-kind-icon">AABB</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/containercullobject.html" class="tsd-kind-icon">ContainerCullObject</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/containerwithculling.html" class="tsd-kind-icon">ContainerWithCulling</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/displayobjectwithculling.html" class="tsd-kind-icon">DisplayObjectWithCulling</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/simpleoptions.html" class="tsd-kind-icon">SimpleOptions</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/simplestats.html" class="tsd-kind-icon">SimpleStats</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/spatialhashoptions.html" class="tsd-kind-icon">SpatialHashOptions</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/spatialhashstats.html" class="tsd-kind-icon">SpatialHashStats</a> </li> </ul> </nav> </div> </div> </div> <footer class="with-border-bottom"> <div class="container"> <h2>Legend</h2> <div class="tsd-legend-group"> <ul class="tsd-legend"> <li class="tsd-kind-constructor tsd-parent-kind-class">Constructor</li> <li class="tsd-kind-property tsd-parent-kind-class">Property</li> <li class="tsd-kind-method tsd-parent-kind-class">Method</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-interface">Property</li> </ul> </div> </div> </footer> <div class="container tsd-generator"> Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a> </div> <div class="overlay"></div> <script src="assets/js/main.js"></script> </body> </html>