You know what? Never seen a strong, with a simple past, can not solve the problem that time. Effort is a process of slow accumulation. If you are impatient and impatient, you will only get anxiety, not desired results. Calm, hide brightness, to plan for the future.
preface
What is PixiJS? What can be done? What can’t you do? 🔥🔥 We’ve already covered PixiJS in detail, so let’s get started with installing and using PixiJS.
Hello PixiJS
Here is the first to write a simple PixiJS small example 🌰, let’s first understand, otherwise all the second article, small partners do not know PixiJS example long what kind. So what are the steps involved in writing a PixiJS application?
Create an HTML file
PixiJS is a JavaScript library that runs on a Web page, so you first need an HTML file. PixiJS can render to very complex applications, but here we are just writing a simple example, so another blank HTML file will do
<! DOCTYPEhtml>
<html lang="en">
<head>
<title>PixiJs</title>
</head>
<body>
<h1> Hello PixiJS</h1>
</body>
</html>
Copy the codeLoading PixiJS library
After we have a blank page and we need to create a PixiJs application, we need to load the PixiJs library first. Let’s first introduce a CDN on the official website.
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<h1> Hello PixiJS</h1>
</body>
</html>
Copy the codeCreating an application
The next step is to launch PixiJS, first replacing the line < h1 > Hello PixiJS with a script tag
<! DOCTYPEhtml>
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<h1> Hello PixiJS</h1>
<script>
// Create a new pixi.application instance
let app = new PIXI.Application({ width: 640.height: 360.backgroundColor: 0x1099bb });
</script>
</body>
</html>
Copy the codeThe JavaScript tag creates a new pixi. Application instance. What is pixi. Application? Pixi’s introduction is:
Easy to create a new Pixi. Application class that automatically creates renderer, Ticker, and root containers
PIXI.Application
Add the generated view to the DOM
Once the pixi. Application class is created, it will be presented as a canvas element. Next you need to add this Canvas element to the DOM of your Web page.
<! DOCTYPEhtml>
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<h1> Hello PixiJS</h1>
<script>
// Create a new pixi.application instance
let app = new PIXI.Application({ width: 640.height: 360.backgroundColor: 0x1099bb });
// Add the instance to the DOM
document.body.appendChild(app.view);
</script>
</body>
</html>
Copy the codeAdd text to the stage
Create “Hello PixiJS” with a PIXI text object, add the style and add it to the canvas.
<! DOCTYPEhtml>
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<! -- <h1> Hello PixiJS</h1> -->
<script>
// Create a new pixi.application instance
let app = new PIXI.Application({ width: 640.height: 360.backgroundColor: 0x1099bb });
// Add the instance to the DOM
document.body.appendChild(app.view);
// Create a text style
const skewStyle = new PIXI.TextStyle({
fontFamily: 'Arial'.dropShadow: true.dropShadowAlpha: 0.8.dropShadowAngle: 2.1.dropShadowBlur: 4.dropShadowColor: '0x111111'.dropShadowDistance: 10.fill: ['#ffffff'].stroke: '# 004620'.fontSize: 60.fontWeight: 'lighter'.lineJoin: 'round'.strokeThickness: 12});// Create a text type
const skewText = new PIXI.Text('Hello PixiJS', skewStyle);
// Tilt the text
skewText.skew.set(0.1, -0.1);
// Define the position of text in the stage (app)
skewText.x = 10;
skewText.y = 100;
// Add text to the stage (app)
app.stage.addChild(skewText);
</script>
</body>
</html>
Copy the codeText pixi.textStyle
Let’s just say Hello PixiJS is OK. Try adding the image 👇👇
Add the picture to the stage
Add the image to the canvas and rotate it.
<! DOCTYPEhtml>
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<! -- <h1> Hello PixiJS</h1> -->
<script>
// Create a new pixi.application instance
let app = new PIXI.Application({ width: 640.height: 360.backgroundColor: 0x1099bb });
// Add the instance to the DOM
document.body.appendChild(app.view);
// Create a text style
const skewStyle = new PIXI.TextStyle({
fontFamily: 'Arial'.dropShadow: true.dropShadowAlpha: 0.8.dropShadowAngle: 2.1.dropShadowBlur: 4.dropShadowColor: '0x111111'.dropShadowDistance: 10.fill: ['#ffffff'].stroke: '# 004620'.fontSize: 60.fontWeight: 'lighter'.lineJoin: 'round'.strokeThickness: 12});// Create a text type
const skewText = new PIXI.Text('Hello PixiJS', skewStyle);
// Tilt the text
skewText.skew.set(0.1, -0.1);
// Define the position of text in the stage (app)
skewText.x = 10;
skewText.y = 100;
// Add text to the stage (app)
app.stage.addChild(skewText);
// Create an image Sprite
const luFei = PIXI.Sprite.from('FM = https://img1.baidu.com/it/u=2082729884, 1583333066 & 253 & FMT = auto&app = 138 & f = JPEG? W = 400 & h = 711');
// Set the Sprite's origin to the center of the image
luFei.anchor.set(0.5);
// Shrink the Sprite by 0.5 times
luFei.scale.set(0.5);
// Position the Sprite in the center of the canvas
luFei.x = app.screen.width / 2;
luFei.y = app.screen.height / 2;
// Add the Sprite to the stage (app)
app.stage.addChild(luFei);
// Add an update loop to the stage
app.ticker.add(() = > {
// Rotate the image Sprite 0.01 degree per update
luFei.rotation += 0.01;
});
</script>
</body>
</html>
Copy the codeCheck out pixi.sprite pixi.ticker for details
Finish this chapter