Créer un Pixel Art Animator avec React

Introduction

Dans ce projet, nous allons vous guider dans la construction d'un simple animateur d'art pixelisé avec React. À la fin de ce guide, vous aurez un éditeur d'art pixelisé de base où vous pourrez dessiner votre art pixelisé et voir l'animation résultante. Ce projet est accessible aux débutants et offre un moyen amusant d'immerger vous dans le monde de React et de l'art pixelisé!

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment initialiser un projet React et installer les dépendances nécessaires.
• Comment créer un composant de palette de couleurs pour que les utilisateurs puissent choisir des couleurs.
• Comment construire une grille de dessin pour permettre aux utilisateurs de dessiner de l'art pixelisé.
• Comment implémenter un composant d'aperçu d'art pour afficher l'art pixelisé en cours de construction.
• Comment combiner tous les composants dans l'application principale.
• Comment styliser l'application pour améliorer l'expérience utilisateur.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Configurer un projet React et installer les dépendances.
• Créer des composants fonctionnels dans React.
• Utiliser l'état et les props de React pour gérer les données de l'application.
• Gérer les événements dans React.
• Styliser une application React à l'aide de CSS.

Configuration du projet

Exigences :

• Installation des dépendances dans le nouveau projet React.

Fonctionnalité :

• Initialiser le projet avec les dépendances nécessaires et une structure de projet de base.

Étapes :

1. Ouvrez un terminal et accédez au dossier du projet :

   cd react-pixel-art-animator

   Vous devez exécuter cette commande dans le répertoire projet.

2. Installation des dépendances dans le projet :

   npm install

Concevoir le composant Palette de couleurs

Exigences :

• Créer une palette de couleurs à partir de laquelle les utilisateurs peuvent choisir des couleurs.

Fonctionnalité :

• Afficher un ensemble d'options de couleurs.
• Permettre aux utilisateurs de sélectionner une couleur.

Étapes :

// 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;

Ce composant affiche une rangée de cases de couleur, et l'utilisateur peut cliquer sur elles pour sélectionner une couleur.

Construction de la grille de dessin

Exigences :

• Construire une grille où les utilisateurs peuvent dessiner de l'art pixelisé.

Fonctionnalité :

• Afficher une disposition en grille.
• Autoriser les utilisateurs à remplir les carrés de la grille avec la couleur sélectionnée.

Étapes :

// 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;

Le composant de grille permettra aux utilisateurs de dessiner de l'art pixelisé en cliquant sur chaque carré.

Implémentation de l'affichage de l'art

Exigences :

• Afficher un aperçu de l'art pixelisé que l'utilisateur crée.

Fonctionnalité :

• Afficher l'art pixelisé de l'utilisateur au fur et à mesure qu'il est créé.

Étapes :

// 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;

Intégration des composants dans l'application principale

Exigences :

• Combiner les composants Palette, Grid et SpriteDisplay.

Fonctionnalité :

• Afficher l'application principale avec les composants intégrés.

Étapes :

// 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;

Mise en forme de l'application

Exigences :

• Rendre l'application visuellement attrayante.

Fonctionnalité :

• Styliser les composants de l'application pour améliorer l'expérience utilisateur.

Étapes :

/*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;
}

/* Adjusting the overall size and space for a modern look */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9ecef;
}

Exécution de l'application

Pour exécuter votre application :

1. Ouvrez votre terminal ou invite de commandes.

2. Vérifiez que vous êtes dans le répertoire racine du projet (où se trouve le fichier package.json).

3. Démarrez le serveur de développement :

   npm start

   Vous devriez maintenant voir une application React de base s'exécuter dans votre navigateur sur le port 8080. Nous allons construire sur cette base pour créer notre application.

4. L'effet de la page est le suivant :

Résumé

Félicitations ! Vous avez réussi à construire un Pixel Art Animator de base avec React. Vous pouvez désormais dessiner avec des pixels, choisir des couleurs dans une palette et prévisualiser votre art pixelisé. Au fur et à mesure que vous poursuivez votre parcours d'apprentissage, envisagez d'ajouter des fonctionnalités supplémentaires telles que la sauvegarde de votre art pixelisé dans une base de données, la mise en œuvre d'une fonctionnalité d'annulation-rétablissement ou même l'intégration d'animation.