En esta página:
En la actualidad existen varios videojuegos que funcionan en el navegador.
Muchos han tomado tiempo en ser desarrollados y los resultados son increíbles y tu también puedes crear uno.
En este tutorial te enseñaré a Como Crear Un Juego con PixiJS (Primeros Pasos), vamos con ello.
Te daré una noción inicial para comenzar a crear juegos con PixiJS.
En otros tutoriales veremos cosas más avanzadas de esta genial librería.
Creación de Proyecto
Voy a usar la herramienta Vite JS para crear este proyecto.
Ejecutamos el siguiente comando para crear un nuevo proyecto con Vite JS:
|
1 2 3 4 5 6 7 8 9 |
npm create vite@latest > npx > create-vite ? Project name: » vite-project juego-pixi-js √ Project name: ... juego-pixi-jsjs |
Le pongo el nombre juego-pixi-js, tu le puedes poner el nombre que desees.
Usaré React para este proyecto, lo elijo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Select a framework: » - Use arrow-keys. Return to submit. Vanilla Vue > React Preact Lit Svelte Solid Qwik Others √ Select a framework: » React |
Elijo JavaScript + SWC, tu puedes elegir la variante que desees:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Select a variant: » - Use arrow-keys. Return to submit. TypeScript TypeScript + SWC JavaScript > JavaScript + SWC Remix ↗ √ Select a variant: » JavaScript + SWC Scaffolding project in C:\xampp\htdocs\xampp\nc\tutoriales\blog\juego-pixi-jsjs... Done. Now run: cd juego-pixi-jsjs npm install npm run dev |
Ingreso al directorio del proyecto que Vite JS me ha creado.
Instalo las dependencias necesarias.
Puedes iniciar el servidor de desarrollo para probar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
# Ingresamos al directorio del proyecto cd wordpress-jamstack # Instalamos sus dependencias que trae consigo npm install # Iniciamos el servidor de desarrollo de Vue npm run dev vue-proyecto@0.0.0 dev > vite Forced re-optimization of dependencies VITE v4.3.3 ready in 380 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose |
Instalación de PixiJS
Para instalarlo ejecutamos el siguiente comando:
|
1 2 3 4 5 6 7 8 9 10 11 |
npm install pixi.js @pixi/react -d added 41 packages, and audited 267 packages in 15s 102 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm info ok |
Abrimos el archivo App.jsx que se encuentra en el proyecto.
Borramos todo el contenido que hay en él y le agregamos lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import './App.css'; // Importamos nuestra imagen import cubo from './assets/cubo.png'; // Importamos pixi.js y sus módulos import { TextStyle } from 'pixi.js'; import { Stage, Container, Sprite, Text } from '@pixi/react'; export const App = () => { return ( // Creamos el Stage <Stage x={128} y={128} options={{ background: 0xc0def9 }}> // Creamos los sprites <Sprite image={cubo} x={135} y={150} /> <Sprite image={cubo} x={335} y={150} /> <Sprite image={cubo} x={535} y={150} /> // Creamos el texto <Container x={180} y={200}> <Text text="Nube Colectiva" anchor={0.5} x={220} y={150} style={ new TextStyle({ align: 'center', fill: '0xffffff', fontSize: 50, letterSpacing: 20, dropShadow: true, dropShadowColor: '0x45acff', dropShadowDistance: 4, }) } /> </Container> </Stage> ); }; export default App |
Ejecutamos el servidor de desarrollo de Vite JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# Comando para iniciar el servidor de desarrollo de Vite JS npm run dev > juego-pixi-js@0.0.0 dev > vite VITE v5.2.11 ready in 222 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose |
Vamos al navegador y abrimos la ruta local http://localhost:5173/
Y podemos ver nuestro primero proyecto creado con PixiJS:
Así es como puedes crear un juego con PixiJS.
Conclusión
En este tutorial has aprendido a Como Crear Un Juego con PixiJS.
Te servirá de guía para crear juegos más avanzados con la librería PixiJS.
En otros tutoriales haremos cosas más avanzadas con PixiJS.
Practica mucho, solo así serás un gran desarrollador de juegos.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.