iiiypuk/pixi-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add container mask example

Browse Source
This commit is contained in:
Alexander Popov 2022-08-11 00:32:25 +03:00
parent 398caf28b4
commit f0721a0d18
Signed by: iiiypuk
GPG Key ID: D8C9B59A9F04A70C
2 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/02-containers/app.js Normal file
View File

@ -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;
});
}

15
src/02-containers/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pixi - test</title>
<script type="text/javascript" src="/pixi.js"></script>
</head>
<body>
<div class="container">
<!-- -->
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>