<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PIXI Application Doctest</title> <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../../css/doctest.css"> <script src=".././3rdparty/highlight/highlight.pack.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.pixi.js"></script> </head> <body onload="Doctest.run()"> <h1>Application</h1> <p> The class PIXIApp is the main entry point to create a new PIXI Application. It inherits from PIXI.Application, set meaningfull defaults, creates a scene and a stage and provides some helper methods to load resources, get the size of the app... </p> <p> The pattern to create a new application is: <ol> <li>Create a new PIXIApp Object</li> <li>Call the setup() method</li> <li>Call the run() method</li> </ol> These three steps are required. The constructor has been split into these three parts in order to have the greatest possible flexibility in complex applications. The setup() method creates a default scene. This can be overwritten with a spezialized setup() method to create a scatter container, for example. </p> <p><a href="../../doc/out/PIXIApp.html">JavaScript API</a></p> <p>Let's look at an example of creating a new application:</p> <canvas id="canvas" class="interactive"></canvas> <p> What you should see: There should be a green circle on a dark background. In the upper left corner, the refresh rate should be approximately 60 fps. </p> <script class="doctest"> const app = new PIXIApp({ view: canvas, width: 450, height: 150, fpsLogging: true, transparent: false }) app.setup() app.run() let highlightBtn = new PIXI.Graphics(); highlightBtn.lineStyle(2, 0x033792); highlightBtn.drawRoundedRect(15, 40, 30, 30, 10); highlightBtn.endFill(); app.stage.addChild(highlightBtn); // app.loadSprites("assets/app-circle.png", sprites => { // let circle = sprites.get("assets/app-circle.png") // circle.anchor.set(0.5) // circle.x = app.screen.width / 2 // circle.y = app.screen.height / 2 // circle.width = 80 // circle.height = 80 // app.scene.addChild(circle) // app.run() // }) </script> </body>