iwmlib/lib/pixi/app.html

<!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>
Initial commit. 2019-03-21 09:57:27 +01:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`

			`<title>PIXI Application Doctest</title>`

repair doctests - not yet finished 2019-05-22 16:03:19 +02:00			`<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">`
Initial commit. 2019-03-21 09:57:27 +01:00			`<link rel="stylesheet" href="../../css/doctest.css">`

repair doctests - not yet finished 2019-05-22 16:03:19 +02:00			`<script src=".././3rdparty/highlight/highlight.pack.js"></script>`
			`<script src="../../dist/iwmlib.3rdparty.js"></script>`
Initial commit. 2019-03-21 09:57:27 +01:00
repair doctests - not yet finished 2019-05-22 16:03:19 +02:00			`<script src="../../dist/iwmlib.js"></script>`
			`<script src="../../dist/iwmlib.pixi.js"></script>`
Initial commit. 2019-03-21 09:57:27 +01:00			`</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>`