import * as PIXI from 'pixi.js' ; import { FpsMeter } from './fps-meter' ; interface EngineParams { containerId : string ; canvasW : number ; canvasH : number ; fpsMax : number ; } class Engine { public container : HTMLElement ; public loader : PIXI . Loader ; public renderer : PIXI . Renderer ; public stage : PIXI . Container ; public graphics : PIXI . Graphics ; public fpsMax : number ; constructor ( params ) { this . loader = PIXI . Loader . shared ; this . renderer = PIXI . autoDetectRenderer ( { width : params . canvasW , height : params . canvasH , antialias : true } ) ; this . stage = new PIXI . Container ( ) ; this . graphics = new PIXI . Graphics ( ) ; this . fpsMax = params . fpsMax ; this . container = params . containerId ? document . getElementById ( params . containerId ) || document . body : document . body ; this . container . appendChild ( this . renderer . view ) ; } } const engine = new Engine ( { containerId : 'game' , canvasW : 800 , canvasH : 450 , fpsMax : 60 } ) ; let fpsMeter ; const sprite = PIXI . Sprite . from ( 'images/logo.png' ) ; window . onload = load ; function load ( ) { create ( ) ; } function create ( ) { sprite . anchor . set ( 0.5 ) ; sprite . x = engine . renderer . width / 2 ; sprite . y = engine . renderer . height / 2 ; engine . stage . addChild ( sprite ) ; const fpsMeterItem = document . createElement ( 'div' ) ; fpsMeterItem . classList . add ( 'fps' ) ; engine . container . appendChild ( fpsMeterItem ) ; fpsMeter = new FpsMeter ( ( ) => { fpsMeterItem . innerHTML = 'FPS: ' + fpsMeter . getFrameRate ( ) . toFixed ( 2 ) . toString ( ) ; } ) ; setInterval ( update , 1000.0 / engine . fpsMax ) ; render ( ) ; } function update ( ) { fpsMeter . updateTime ( ) ; } function render ( ) { requestAnimationFrame ( render ) ; sprite . rotation += 0.01 ; engine . renderer . render ( engine . stage ) ; fpsMeter . tick ( ) ; }