Crea un Pixel Art Animator con React

Introducción

En este proyecto, lo guiaremos a través de la creación de un simple Animador de Arte Pixelado utilizando React. Al final de esta guía, tendrá un editor básico de arte pixelado donde puede dibujar su arte pixelado y ver la animación resultante. Este proyecto es amigable para principiantes y ofrece una forma divertida de sumergirse en el mundo de React y el arte pixelado.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderá:

• Cómo inicializar un proyecto de React e instalar las dependencias necesarias.
• Cómo crear un componente de paleta de colores para que los usuarios elijan colores.
• Cómo construir una cuadrícula de dibujo para permitir que los usuarios dibujen arte pixelado.
• Cómo implementar un componente de vista previa de arte para mostrar el arte pixelado en progreso.
• Cómo combinar todos los componentes en la aplicación principal.
• Cómo dar estilo a la aplicación para mejorar la experiencia del usuario.

🏆 Logros

Después de completar este proyecto, podrá:

• Configurar un proyecto de React e instalar dependencias.
• Crear componentes funcionales en React.
• Utilizar el estado y las propiedades de React para administrar los datos de la aplicación.
• Manejar eventos en React.
• Dar estilo a una aplicación de React utilizando CSS.

Configuración del proyecto

Requisitos:

• Instalar dependencias en el nuevo proyecto de React.

Funcionalidad:

• Inicializar el proyecto con las dependencias necesarias y una estructura básica de proyecto.

Pasos:

1. Abra una terminal y vaya al directorio del proyecto:

   cd react-pixel-art-animator

   Debe ejecutar este comando en el directorio project.

2. Instalar dependencias en el proyecto:

   npm install

Diseña el componente de paleta de colores

Requisitos:

• Crea una paleta de colores de la cual los usuarios puedan elegir colores.

Funcionalidad:

• Muestra un conjunto de opciones de color.
• Permite a los usuarios seleccionar un color.

Pasos:

// src/Palette.js
import React from "react";

const colors = [
  "#FFFFFF",
  "#000000",
  "#F78CA2",
  "#4caf50",
  "#5CD2E6",
  "#FFD700",
  "#FF69B4",
  "#8bc34a",
  "#8A2BE2",
  "#5F9EA0"
];

function Palette({ selectedColor, setSelectedColor }) {
  return (
    <div className="palette">
      {colors.map((color) => (
        <div
          key={color}
          className={`color-box ${color === selectedColor ? "selected" : ""}`}
          style={{ backgroundColor: color }}
          onClick={() => setSelectedColor(color)}
        ></div>
      ))}
    </div>
  );
}

export default Palette;

Este componente muestra una fila de cajas de color y el usuario puede hacer clic en ellas para seleccionar un color.

Construyendo la cuadrícula de dibujo

Requisitos:

• Construir una cuadrícula donde los usuarios puedan dibujar arte pixelado.

Funcionalidad:

• Renderizar un diseño de cuadrícula.
• Permitir a los usuarios llenar los cuadrados de la cuadrícula con el color seleccionado.

Pasos:

// src/Grid.js
import React from "react";

function Grid({ grid, setGrid, selectedColor }) {
  const updatePixel = (rowIndex, colIndex) => {
    const newGrid = [...grid];
    newGrid[rowIndex][colIndex] = selectedColor;
    setGrid(newGrid);
  };

  return (
    <div className="grid">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="grid-row">
          {row.map((color, colIndex) => (
            <div
              key={colIndex}
              className="grid-pixel"
              style={{ backgroundColor: color }}
              onClick={() => updatePixel(rowIndex, colIndex)}
            ></div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default Grid;

El componente de cuadrícula permitirá a los usuarios dibujar arte pixelado haciendo clic en cada cuadrado.

Implementando la vista previa del arte

Requisitos:

• Mostrar una vista previa del arte pixelado que crea el usuario.

Funcionalidad:

• Renderizar el arte pixelado del usuario a medida que se está creando.

Pasos:

// SpriteDisplay.js;
import React from "react";

function SpriteDisplay({ grid }) {
  return (
    <div className="sprite-display">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="sprite-row">
          {row.map((color, colIndex) => (
            <div
              key={colIndex}
              className="sprite-pixel"
              style={{ backgroundColor: color }}
            ></div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default SpriteDisplay;

Integrando componentes en la aplicación principal

Requisitos:

• Combinar los componentes Palette, Grid y SpriteDisplay.

Funcionalidad:

• Mostrar la aplicación principal con componentes integrados.

Pasos:

// App.js
import React, { useState } from "react";
import Palette from "./Palette";
import Grid from "./Grid";
import SpriteDisplay from "./SpriteDisplay";
import "./App.css";

const initialCatSprite = [
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#8bc34a",
    "#000000",
    "#8bc34a"
  ],
  [
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a"
  ],
  [
    "#8bc34a",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#8bc34a",
    "#8bc34a",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#ffffff",
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ]
];

function App() {
  const [selectedColor, setSelectedColor] = useState("#000000");
  const [grid, setGrid] = useState(initialCatSprite);

  return (
    <div className="App">
      <h1>Pixel Art Animator</h1>
      <Palette
        selectedColor={selectedColor}
        setSelectedColor={setSelectedColor}
      />
      <Grid grid={grid} setGrid={setGrid} selectedColor={selectedColor} />
      <SpriteDisplay grid={grid} />
    </div>
  );
}

export default App;

Estilando la aplicación

Requisitos:

• Hacer que la aplicación sea visualmente atractiva.

Funcionalidad:

• Dar estilo a los componentes de la app para mejorar la experiencia del usuario.

Pasos:

/*App.css*/
.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: "Arial", sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.palette {
  display: flex;
  margin-bottom: 20px;
}

.color-box {
  width: 30px;
  height: 30px;
  margin: 0 5px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
}

.color-box:hover,
.color-box.selected {
  border-color: #000;
}

.grid {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.grid-row {
  display: flex;
}

.grid-pixel {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.grid-pixel:hover {
  border-color: #888;
}

.sprite-display {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.sprite-row {
  display: flex;
}

.sprite-pixel {
  width: 30px;
  height: 30px;
}

/* Ajustando el tamaño y el espacio general para un aspecto moderno */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9ecef;
}

Ejecutando la app

Para ejecutar tu App:

1. Abre tu terminal o línea de comandos.

2. Asegúrate de estar en el directorio raíz del proyecto (donde se encuentra el archivo package.json).

3. Inicia el servidor de desarrollo:

   npm start

   Ahora deberías ver una app básica de React ejecutándose en tu navegador en el puerto 8080. A partir de esta base construiremos nuestra App.

4. El efecto de la página es el siguiente:

Resumen

¡Felicidades! Has construido con éxito un Pixel Art Animator básico utilizando React. Ahora puedes dibujar con píxeles, elegir colores de una paleta y visualizar una vista previa de tu arte pixelado. A medida que continúes tu viaje de aprendizaje, considera agregar más funciones como guardar tu arte pixelado en una base de datos, implementar una funcionalidad de deshacer-rehacer o incluso integrar animaciones.