How is the following code made in PixiJS? I have tried to see documentation and several things, but there is not much in Spanish.
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.font = "20px Ubuntu";
ctx.fillStyle = "green";
ctx.fillText("Pixi",10,30,200);
ctx.fill();<canvas width="50%;" height="50%;" id="canvas"></canvas>On this page of the PixiJS documentation you can see how you work with the text and They have a small interactive snippet that allows you to play with the values and see how they would work with different formats.
The idea is that you can create text like the one you have in canvas using the Text method, which takes as the first parameter the string you want to write, and as a second parameter you can optionally pass styles for that text. In this other page you can see the parameters, what you will need are these:
fontFamily : the source you want to use (in your case "Ubuntu"). fontSize : the size of the font in pixels (in your case 20). fill : the color of the text ("green") Then the equivalent to what you have in canvas would be something like this:
// aquí inicializamos una app de Pixi (y se creará un canvas)
var app = new PIXI.Application(400, 200, {backgroundColor: 0xffffff});
document.body.appendChild(app.view);
// definimos los estilos que tendrá el texto: color, fuente, tamaño, etc.
var estilos = new PIXI.TextStyle({
fontFamily: 'Ubuntu',
fontSize: 20,
fill: 'green',
wordWrapWidth: 200
});
// creamos el texto en sí con los estilos, y después lo posicionamos
var texto = new PIXI.Text('Pixi', estilos);
texto.x = 10;
texto.y = 30;
// con el texto creado, lo agregamos a la aplicación que inicializamos al principio
app.stage.addChild(texto);<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.3/pixi.min.js"></script>