From f0721a0d188f20aa161856d606c75c63ea0471eb Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Thu, 11 Aug 2022 00:32:25 +0300 Subject: [PATCH] add container mask example --- src/02-containers/app.js | 46 ++++++++++++++++++++++++++++++++++++ src/02-containers/index.html | 15 ++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 src/02-containers/app.js create mode 100644 src/02-containers/index.html diff --git a/src/02-containers/app.js b/src/02-containers/app.js new file mode 100644 index 0000000..5090e12 --- /dev/null +++ b/src/02-containers/app.js @@ -0,0 +1,46 @@ +window.onload = function() { + let app = new PIXI.Application({ width: 640, height: 360 }); + document.body.appendChild(app.view); + + // Create window frame + let frame = new PIXI.Graphics(); + frame.beginFill(0x666666); + frame.lineStyle({ color: 0xffffff, width: 4, alignment: 0 }); + frame.drawRect(0, 0, 208, 208); + frame.position.set(320 - 100, 180 - 100); + app.stage.addChild(frame); + + // Create a graphics object to define our mask + let mask = new PIXI.Graphics(); + // Add the rectangular area to show + mask.beginFill(0xffffff); + mask.drawRect(0,0,200,200); + mask.endFill(); + + let maskContainer = new PIXI.Container(); + maskContainer.mask = mask; + maskContainer.addChild(mask); + maskContainer.position.set(4,4); + frame.addChild(maskContainer); + + // Create contents for the masked container + let text = new PIXI.Text( + 'This text will scroll up and be masked, so you can see how masking works. Lorem ipsum and all that.\n\n' + + 'You can put anything in the container and it will be masked!', + { + fontSize: 24, + fill: 0x1010ff, + wordWrap: true, + wordWrapWidth: 180 + } + ); + text.x = 10; + maskContainer.addChild(text); + + // Add a ticker callback to scroll the text up and down + let elapsed = 0.0; + app.ticker.add((delta) => { + elapsed += delta; + text.y = 10 + -100.0 + Math.cos(elapsed/50.0) * 100.0; + }); +} diff --git a/src/02-containers/index.html b/src/02-containers/index.html new file mode 100644 index 0000000..1b262e9 --- /dev/null +++ b/src/02-containers/index.html @@ -0,0 +1,15 @@ + + + + + + pixi - test + + + +
+ +
+ + +