Pixi’VNText
The Text component extends the PixiJS.Text component, so you can use all the methods and properties of PixiJS.Text. It is used to display a text on the canvas.
To initialize this component, you must pass the following parameters:
options: The options for the component, thetextproperty is required.
import { canvas, Text } from "@drincs/pixi-vn";
const basicText = new Text({ text: "Basic text in pixi", align: 0.5 });
canvas.add("text", basicText);Compared to the PixiJS.Text component, Text adds the following features:
- Additional positioning: align and position with percentage.
Show
The simplest way to show an text on the canvas is to use the showText function.
This function returns an Text that you can use to manipulate the component. This function has the following parameters:
alias: The alias to identify the component.text: The text to display.options(Optional): The options for the component.
import { newLabel, showText } from "@drincs/pixi-vn";
export const startLabel = newLabel("start_label", [
async () => {
let text = await showText("text", "Hello World!", {
xAlign: 0.5,
yAlign: 0.5,
});
text.style.fontSize = 30;
},
]);Remove
As with other canvas components, you can remove this component using the canvas.remove function.
Style
To style the text, you can use the TextStyle. This class allows you to customize various aspects of the text appearance, such as font family, size, color, stroke, shadow, and more.
import { canvas, newLabel, Text, TextStyle } from "@drincs/pixi-vn";
export const startLabel = newLabel("start_label", [
() => {
const skewStyle = new TextStyle({
fontFamily: "Arial",
dropShadow: {
alpha: 0.8,
angle: 2.1,
blur: 4,
color: "0x111111",
distance: 10,
},
fill: "#ffffff",
stroke: { color: "#004620", width: 12, join: "round" },
fontSize: 60,
fontWeight: "lighter",
});
const skewText = new Text({
text: "SKEW IS COOL",
style: skewStyle,
align: 0.5,
skew: { x: 0.65, y: -0.3 },
});
canvas.add("text", skewText);
},
]);