v0.1.2 fix PIXI.js 8+

README.md

@@ -55,7 +55,7 @@ const ticker = new InterpolationTicker({
 })
 
 // set the target frequency of the update loop
-ticker.updateIntervalMs = 1000 / 45
+ticker.updateIntervalMs = 8.3334
 
 // modify the frequency of the update loop (relative to updateIntervalMs)
 ticker.speed = 1.5
@@ -66,13 +66,13 @@ ticker.onRender = ( deltaTimeMs ) => {
 }
 
 // limit the render frequency (default: -1)
-ticker.renderIntervalMs = 1000 / 60
+ticker.maxRenderFPS = 60
 
-// set the maximum number of times the update loop will be triggered
-// if rendering is interrupted
-ticker.maxUpdateDesync = 4;
+// limit the maximum number of times the update loop can be triggered
+// if rendering is interrupted or slow for any reason
+ticker.maxUpdatesPerRender = 4;
 
-// set the default opt-in/opt-out logic for containers
+// set the default logic for opt-in/opt-out containers
 ticker.getDefaultInterpolation = ( container ): boolean => {
   return container instanceof MyClass;
 }

dist/index.cjs

@@ -350,5 +350,5 @@ var extendStatics=function(t,e){return extendStatics=Object.setPrototypeOf||{__p
  *
  * pixi.js is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- */mi.registerPlugin("accessibility",Ee),mi.registerPlugin("extract",Ni),mi.registerPlugin("interaction",Ne),mi.registerPlugin("particle",Gn),mi.registerPlugin("prepare",vo),mi.registerPlugin("batch",Ii),mi.registerPlugin("tilingSprite",Ro),Xi.registerPlugin(Xo),Xi.registerPlugin(Zi),Xi.registerPlugin(yn),Xi.registerPlugin(Cn),Xi.registerPlugin(To),Oi.registerPlugin(Re),Oi.registerPlugin(ji);exports.InterpolatedTicker=class InterpolatedTicker{constructor({app:t,updateIntervalMs:e=1e3/60,initialCapacity:r=500}){this.maxUpdateDesync=3,this._previousTime=0,this._accumulator=0,this._isRunning=!1,this._speed=1,this._targetRenderFPS=-1,this._targetRenderIntervalMs=-1,this._idxContainersCount=0,this._prevIdxContainersCount=0,this._maxIdx=0,this._releasedIdx=[],this._app=t,this._targetUpdateIntervalMs=e,this._updateIntervalMs=e;const i=r;this._capacity=i,this._idxContainers=new Array(this._capacity);const n=Float32Array.BYTES_PER_ELEMENT*i,o=12*n;this._buffer=new ArrayBuffer(o);let s=0;const allocate=()=>new Float32Array(this._buffer,n*s++,i);this._prevX=allocate(),this._prevY=allocate(),this._prevRotation=allocate(),this._prevScaleX=allocate(),this._prevScaleY=allocate(),this._prevAlpha=allocate(),this._shadowX=allocate(),this._shadowY=allocate(),this._shadowRotation=allocate(),this._shadowScaleX=allocate(),this._shadowScaleY=allocate(),this._shadowAlpha=allocate()}set speed(t){this._speed=t,this._updateIntervalMs=this._targetUpdateIntervalMs/t}get speed(){return this._speed}get updateIntervalMs(){return this._targetUpdateIntervalMs}set updateIntervalMs(t){this._targetUpdateIntervalMs=t,this._updateIntervalMs=t/this._speed}get targetRenderFPS(){return this._targetRenderFPS}set targetRenderFPS(t){this._targetRenderFPS=t<=0?-1:t,this._targetRenderIntervalMs=t<=0?-1:1e3/t}start(){if(this._isRunning)return;const loop=()=>{var t,e;const r=performance.now(),i=r-this._previousTime;if(i<this._targetRenderIntervalMs)this._isRunning&&requestAnimationFrame(loop);else{for(this._previousTime=r,this._accumulator=Math.min(this._accumulator+i,this._updateIntervalMs*this.maxUpdateDesync);this._accumulator>=this._updateIntervalMs;)this._captureContainers(),null===(t=this.update)||void 0===t||t.call(this,this._updateIntervalMs),this._accumulator-=this._updateIntervalMs;this._interpolateContainers(this._accumulator),null===(e=this.onRender)||void 0===e||e.call(this,i),this._app.renderer.render(this._app.stage),this._restoreContainers(),this._isRunning&&requestAnimationFrame(loop)}};this._isRunning=!0,this._previousTime=performance.now(),requestAnimationFrame(loop)}stop(){this._isRunning=!1}getDefaultInterpolation(t){return!(t instanceof ws||t instanceof oo||t instanceof Fn||t instanceof Oo)}_resizeBuffer(t){const e=Float32Array.BYTES_PER_ELEMENT*t,r=new ArrayBuffer(12*e);let i=0;const allocateAndCopy=n=>{const o=new Float32Array(r,e*i++,t);return o.set(n),o};this._prevX=allocateAndCopy(this._prevX),this._prevY=allocateAndCopy(this._prevY),this._prevRotation=allocateAndCopy(this._prevRotation),this._prevScaleX=allocateAndCopy(this._prevScaleX),this._prevScaleY=allocateAndCopy(this._prevScaleY),this._prevAlpha=allocateAndCopy(this._prevAlpha),this._shadowX=allocateAndCopy(this._shadowX),this._shadowY=allocateAndCopy(this._shadowY),this._shadowRotation=allocateAndCopy(this._shadowRotation),this._shadowScaleX=allocateAndCopy(this._shadowScaleX),this._shadowScaleY=allocateAndCopy(this._shadowScaleY),this._shadowAlpha=allocateAndCopy(this._shadowAlpha),this._buffer=r,this._capacity=t}_captureContainers(){this._idxContainersCount=0,this._captureContainersTraverseSubtree(this._app.stage);for(let t=this._maxIdx;t<this._prevIdxContainersCount;t++)this._markReleased(this._idxContainers[t]),this._idxContainers[t]=void 0;this._prevIdxContainersCount=this._maxIdx}_captureContainersTraverseSubtree(t){var e,r,i;if(t.destroyed)return;if(!1===t.interpolation)return;if(void 0===t.interpolation){if(!this.getDefaultInterpolation(t))return void(t.interpolation=!1);t.interpolation=!0}this._maxIdx+1>=this._capacity&&this._resizeBuffer(2*this._capacity);const n=null!==(r=null!==(e=t._interpIdx)&&void 0!==e?e:this._releasedIdx.pop())&&void 0!==r?r:this._maxIdx++;void 0===t._interpIdx&&(t._interpIdx=n),this._prevX[n]=t.transform.position._x,this._prevY[n]=t.transform.position._y,this._prevScaleX[n]=t.transform.scale._x,this._prevScaleY[n]=t.transform.scale._y,this._prevRotation[n]=t.transform.rotation,this._prevAlpha[n]=t.alpha,this._idxContainers[this._idxContainersCount++]=t;const o=null!==(i=t.interpolatedChildren)&&void 0!==i?i:t.children;for(let t=0;t<o.length;t++)this._captureContainersTraverseSubtree(o[t])}_interpolateContainers(t){const e=t/this._updateIntervalMs,r=e>1?1:e<0?0:e;for(let t=0;t<this._idxContainersCount;t++){if(void 0===this._idxContainers[t])continue;if(this._idxContainers[t].destroyed){this._markReleased(this._idxContainers[t]);continue}const e=this._idxContainers[t],i=e._interpIdx,n=e.interpolationWraparound;let o=(this._shadowX[i]=e.transform.position._x)-this._prevX[i],s=(this._shadowY[i]=e.transform.position._y)-this._prevY[i];if(void 0!==n){const t=n.xRange,e=n.yRange;o=((o+t/2)%t+t)%t-t/2,s=((s+e/2)%e+e)%e-e/2}e.transform.position.set(this._prevX[i]+r*o,this._prevY[i]+r*s),e.transform.scale.set(this._prevScaleX[i]+r*((this._shadowScaleX[i]=e.transform.scale._x)-this._prevScaleX[i]),this._prevScaleY[i]+r*((this._shadowScaleY[i]=e.transform.scale._y)-this._prevScaleY[i]));let a=(this._shadowRotation[i]=e.transform.rotation)-this._prevRotation[i];a>Math.PI?a-=2*Math.PI:a<-Math.PI&&(a+=2*Math.PI),e.transform.rotation=this._prevRotation[i]+r*a,e.alpha=this._prevAlpha[i]+r*((this._shadowAlpha[i]=e.alpha)-this._prevAlpha[i])}}_restoreContainers(){for(let t=0;t<this._idxContainersCount;t++){if(void 0===this._idxContainers[t])continue;if(this._idxContainers[t].destroyed){this._markReleased(this._idxContainers[t]);continue}const e=this._idxContainers[t],r=e._interpIdx;e.transform.position.set(this._shadowX[r],this._shadowY[r]),e.transform.scale.set(this._shadowScaleX[r],this._shadowScaleY[r]),e.transform.rotation=this._shadowRotation[r],e.alpha=this._shadowAlpha[r]}}_markReleased(t){void 0!==(null==t?void 0:t._interpIdx)&&(this._releasedIdx.push(t._interpIdx),t._interpIdx=void 0)}};
+ */mi.registerPlugin("accessibility",Ee),mi.registerPlugin("extract",Ni),mi.registerPlugin("interaction",Ne),mi.registerPlugin("particle",Gn),mi.registerPlugin("prepare",vo),mi.registerPlugin("batch",Ii),mi.registerPlugin("tilingSprite",Ro),Xi.registerPlugin(Xo),Xi.registerPlugin(Zi),Xi.registerPlugin(yn),Xi.registerPlugin(Cn),Xi.registerPlugin(To),Oi.registerPlugin(Re),Oi.registerPlugin(ji);exports.InterpolatedTicker=class InterpolatedTicker{constructor({app:t,updateIntervalMs:e=1e3/60,initialCapacity:r=500}){this.maxUpdatesPerRender=3,this._previousTime=0,this._accumulator=0,this._isRunning=!1,this._speed=1,this._maxRenderFPS=-1,this._maxRenderIntervalMs=-1,this._idxContainersCount=0,this._prevIdxContainersCount=0,this._maxIdx=0,this._releasedIdx=[],this._app=t,this._targetUpdateIntervalMs=e,this._updateIntervalMs=e;const i=r;this._capacity=i,this._idxContainers=new Array(this._capacity);const n=Float32Array.BYTES_PER_ELEMENT*i,o=12*n;this._buffer=new ArrayBuffer(o);let s=0;const allocate=()=>new Float32Array(this._buffer,n*s++,i);this._prevX=allocate(),this._prevY=allocate(),this._prevRotation=allocate(),this._prevScaleX=allocate(),this._prevScaleY=allocate(),this._prevAlpha=allocate(),this._shadowX=allocate(),this._shadowY=allocate(),this._shadowRotation=allocate(),this._shadowScaleX=allocate(),this._shadowScaleY=allocate(),this._shadowAlpha=allocate()}set speed(t){this._speed=t,this._updateIntervalMs=this._targetUpdateIntervalMs/t}get speed(){return this._speed}get updateIntervalMs(){return this._targetUpdateIntervalMs}set updateIntervalMs(t){this._targetUpdateIntervalMs=t,this._updateIntervalMs=t/this._speed}get maxRenderFPS(){return this._maxRenderFPS}set maxRenderFPS(t){this._maxRenderFPS=t<=0?-1:t,this._maxRenderIntervalMs=t<=0?-1:1e3/t}start(){if(this._isRunning)return;const loop=()=>{var t,e;const r=performance.now(),i=r-this._previousTime;if(i<this._maxRenderIntervalMs)this._isRunning&&requestAnimationFrame(loop);else{for(this._previousTime=r,this._accumulator=Math.min(this._accumulator+i,this._updateIntervalMs*this.maxUpdatesPerRender);this._accumulator>=this._updateIntervalMs;)this._captureContainers(),null===(t=this.update)||void 0===t||t.call(this,this._updateIntervalMs),this._accumulator-=this._updateIntervalMs;this._interpolateContainers(this._accumulator),null===(e=this.onRender)||void 0===e||e.call(this,i),this._app.renderer.render(this._app.stage),this._restoreContainers(),this._isRunning&&requestAnimationFrame(loop)}};this._isRunning=!0,this._previousTime=performance.now(),requestAnimationFrame(loop)}stop(){this._isRunning=!1}getDefaultInterpolation(t){return!(t instanceof ws||t instanceof oo||t instanceof Fn||t instanceof Oo)}_resizeBuffer(t){const e=Float32Array.BYTES_PER_ELEMENT*t,r=new ArrayBuffer(12*e);let i=0;const allocateAndCopy=n=>{const o=new Float32Array(r,e*i++,t);return o.set(n),o};this._prevX=allocateAndCopy(this._prevX),this._prevY=allocateAndCopy(this._prevY),this._prevRotation=allocateAndCopy(this._prevRotation),this._prevScaleX=allocateAndCopy(this._prevScaleX),this._prevScaleY=allocateAndCopy(this._prevScaleY),this._prevAlpha=allocateAndCopy(this._prevAlpha),this._shadowX=allocateAndCopy(this._shadowX),this._shadowY=allocateAndCopy(this._shadowY),this._shadowRotation=allocateAndCopy(this._shadowRotation),this._shadowScaleX=allocateAndCopy(this._shadowScaleX),this._shadowScaleY=allocateAndCopy(this._shadowScaleY),this._shadowAlpha=allocateAndCopy(this._shadowAlpha),this._buffer=r,this._capacity=t}_captureContainers(){this._idxContainersCount=0,this._captureContainersTraverseSubtree(this._app.stage);for(let t=this._maxIdx;t<this._prevIdxContainersCount;t++)this._markReleased(this._idxContainers[t]),this._idxContainers[t]=void 0;this._prevIdxContainersCount=this._maxIdx}_captureContainersTraverseSubtree(t){var e,r,i;if(t.destroyed)return;if(!1===t.interpolation)return;if(void 0===t.interpolation){if(!this.getDefaultInterpolation(t))return void(t.interpolation=!1);t.interpolation=!0}this._maxIdx+1>=this._capacity&&this._resizeBuffer(2*this._capacity);const n=null!==(r=null!==(e=t._interpIdx)&&void 0!==e?e:this._releasedIdx.pop())&&void 0!==r?r:this._maxIdx++;void 0===t._interpIdx&&(t._interpIdx=n),this._prevX[n]=t.position._x,this._prevY[n]=t.position._y,this._prevScaleX[n]=t.scale._x,this._prevScaleY[n]=t.scale._y,this._prevRotation[n]=t.rotation,this._prevAlpha[n]=t.alpha,this._idxContainers[this._idxContainersCount++]=t;const o=null!==(i=t.interpolatedChildren)&&void 0!==i?i:t.children;for(let t=0;t<o.length;t++)this._captureContainersTraverseSubtree(o[t])}_interpolateContainers(t){const e=t/this._updateIntervalMs,r=e>1?1:e<0?0:e;for(let t=0;t<this._idxContainersCount;t++){if(void 0===this._idxContainers[t])continue;if(this._idxContainers[t].destroyed){this._markReleased(this._idxContainers[t]);continue}const e=this._idxContainers[t],i=e._interpIdx,n=e.interpolationWraparound;let o=(this._shadowX[i]=e.position._x)-this._prevX[i],s=(this._shadowY[i]=e.position._y)-this._prevY[i];if(void 0!==n){const t=n.xRange,e=n.yRange;o=((o+t/2)%t+t)%t-t/2,s=((s+e/2)%e+e)%e-e/2}e.position.set(this._prevX[i]+r*o,this._prevY[i]+r*s),e.scale.set(this._prevScaleX[i]+r*((this._shadowScaleX[i]=e.scale._x)-this._prevScaleX[i]),this._prevScaleY[i]+r*((this._shadowScaleY[i]=e.scale._y)-this._prevScaleY[i]));let a=(this._shadowRotation[i]=e.rotation)-this._prevRotation[i];a>Math.PI?a-=2*Math.PI:a<-Math.PI&&(a+=2*Math.PI),e.rotation=this._prevRotation[i]+r*a,e.alpha=this._prevAlpha[i]+r*((this._shadowAlpha[i]=e.alpha)-this._prevAlpha[i])}}_restoreContainers(){for(let t=0;t<this._idxContainersCount;t++){if(void 0===this._idxContainers[t])continue;if(this._idxContainers[t].destroyed){this._markReleased(this._idxContainers[t]);continue}const e=this._idxContainers[t],r=e._interpIdx;e.position.set(this._shadowX[r],this._shadowY[r]),e.scale.set(this._shadowScaleX[r],this._shadowScaleY[r]),e.rotation=this._shadowRotation[r],e.alpha=this._shadowAlpha[r]}}_markReleased(t){void 0!==(null==t?void 0:t._interpIdx)&&(this._releasedIdx.push(t._interpIdx),t._interpIdx=void 0)}};
 //# sourceMappingURL=index.cjs.map

dist/index.d.ts

@@ -59,17 +59,17 @@ export declare class InterpolatedTicker {
 	 * Container values will be their temporary interpolated values.
 	 */
 	onRender?: (dt: number) => void;
-	/** Limit maximum number of update() per render. */
-	maxUpdateDesync: number;
+	/** Limit maximum number of update() per render (i.e. rendering is slow). */
+	maxUpdatesPerRender: number;
 	protected _app: Application;
 	protected _targetUpdateIntervalMs: number;
 	protected _updateIntervalMs: number;
 	protected _previousTime: number;
 	protected _accumulator: number;
 	protected _isRunning: boolean;
 	protected _speed: number;
-	protected _targetRenderFPS: number;
-	protected _targetRenderIntervalMs: number;
+	protected _maxRenderFPS: number;
+	protected _maxRenderIntervalMs: number;
 	protected _capacity: number;
 	protected _idxContainers: Array<InterpolatedContainer | undefined>;
 	protected _idxContainersCount: number;
@@ -98,8 +98,8 @@ export declare class InterpolatedTicker {
 	get speed(): number;
 	get updateIntervalMs(): number;
 	set updateIntervalMs(value: number);
-	get targetRenderFPS(): number;
-	set targetRenderFPS(value: number);
+	get maxRenderFPS(): number;
+	set maxRenderFPS(value: number);
 	start(): void;
 	stop(): void;
 	/**