Como Crear Un Juego con PixiJS (Primeros Pasos)

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.

Programador creando un juego con PixiJS — Con PixiJS y JavaScript podemos crear increíbles juegos en el navegador.

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:

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:

 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:

 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:

# 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:

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

PixiJS también puede ser usado con la librería Spine.

Abrimos el archivo App.jsx que se encuentra en el proyecto.

Borramos todo el contenido que hay en él y le agregamos lo siguiente:

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:

# 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: