Como Crear Un Juego con PixiJS (Primeros Pasos)

3 minuto(s)

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

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

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

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

# 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

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

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

// Creamos los sprites

// Creamos el texto

<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