JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.0/pixi.min.js"></script>
OPEN CONSOLE WITH F12 to see console logs
JavaScript
//
// OPEN THE CONSOLE WITH F12
//
// THIS code allows you to attach an oject function to the ticker whenever
// you add it to the PIXI tree structure with addChild and remove his events
// when you use removeChild
//
// create by: gerenteg
// forum thread: http://www.html5gamedevs.com/topic/35785-childs-ticker-listener/
//======================================================================================
PIXI.Container.prototype.onChildrenChange = function(childIndex){
let child = this.children[childIndex]
console.log(childIndex, this.children)
if(this.children.length > 0 && child.hasCustomEvents != true){
child.hasCustomEvents = true
//Define here any custom event
let customEvents = ['update','render']
for(let i=0;i<customEvents.length;i++){
let eventName = customEvents[i]
if(typeof child[eventName] == 'function'){
child.on('added',function(parent){
console.log('LISTENER ADDED',eventName, child[eventName])
PIXI.ticker.shared.add(child[eventName],child)
})
child.on('removed',function(parent){
console.log('LISTENER REMOVED',eventName, child[eventName])
PIXI.ticker.shared.remove(child[eventName],child)
})
}
}
}
}
//======================================================================================
// START APP EXAMPLE CODE
//======================================================================================
var renderer = PIXI.autoDetectRenderer(10, 10, {
backgroundColor: 0xAA7F39, antialias: true,
transparent: false, resolution: 1
});
document.body.appendChild(renderer.view);
renderer.stage = new PIXI.Container()
//Create Object and define his events
var monster1 = new PIXI.Graphics()
monster1.update = function(dt){
console.log('monster1update',dt)
}
monster1.render = function(dt){
console.log('monster1render',dt)
}
renderer.stage.addChild(monster1)
// REMOVE CHILD FROM PIXI TREE WILL REMOVE ALL ITS...