iwmlib/lib/pixi/app.html

71 lines
2.5 KiB
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>