project files added

2021-06-15 16:00:08 +02:00
parent e156e2f053
commit db46afa351
13928 changed files with 1569902 additions and 0 deletions
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <title>PIXI Scrollview</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>Scrollview</h1>
+    <p>A configurable scrollbox designed for pixi.js.</p>
+    <p><strong>Features:</strong></p>
+    <p>
+        <ul>
+            <li>Scrollview uses a mask to clip to desired boxWidth/boxHeight size</li>
+            <li>Scrollview scrolls with scrollbars (options.overflow=scroll)</li>
+            <li>Scrollview's scrollbars may be hidden when not needed (options.overflow=auto or hidden)</li>
+            <li>Scrollview may also be scrolled by dragging on the content window (options.dragScroll=true)</li>
+        </ul>
+    </p>
+    <p>See <a href="https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html">https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html</a> and <a href="https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html">https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html</a></p>
+    <p>Let's look at some switch examples:</p><br />
+    <canvas id="canvas" class="interactive"></canvas>
+    <p>
+        What you should see: Many switches with very different styling and behaviour.
+    </p>
+    <script class="doctest">
+const app = new PIXIApp({
+    view: canvas,
+    width: 900,
+    height: 400,
+    transparent: false
+}).setup().run()
+
+app.loader
+    .add('elephant1', './assets/elephant-1.jpg')
+    .add('elephant2', './assets/elephant-2.jpg')
+    .add('elephant3', './assets/elephant-3.jpg')
+    .load((loader, resources) => {
+        const sprite1 = new PIXI.Sprite(resources.elephant1.texture)
+        const sprite2 = new PIXI.Sprite(resources.elephant2.texture)
+        const sprite3 = new PIXI.Sprite(resources.elephant3.texture)
+
+        const scrollview1 = new Scrollview({boxWidth: 400, boxHeight: 180})
+        scrollview1.content.addChild(sprite1)
+        app.scene.addChild(scrollview1)
+
+        const scrollview2 = new Scrollview({boxWidth: 300, boxHeight: 300})
+        scrollview2.x = 500
+        scrollview2.y = 30
+        sprite2.x = 40
+        sprite2.y = 40
+        sprite2.scale.set(.3, .3)
+        sprite3.x = 60
+        sprite3.y = 100
+        sprite3.alpha = .6
+        sprite3.scale.set(.5, .5)
+        scrollview2.content.addChild(sprite2, sprite3)
+        app.scene.addChild(scrollview2)
+    })
+    </script>
+</body>