Erstelle einen Pixel Art Animator mit React | Einsteigerfreundliches Projekt

Einführung

In diesem Projekt führen wir Sie Schritt für Schritt durch den Aufbau eines einfachen Pixel Art Animators mit React. Am Ende dieser Anleitung haben Sie einen grundlegenden Pixel Art Editor, in dem Sie Ihr Pixel Art zeichnen und die resultierende Animation anzeigen können. Dieses Projekt ist für Einsteiger gut geeignet und bietet eine spannende Möglichkeit, die Welt von React und Pixel Art zu erkunden!

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

Wie Sie ein React-Projekt initialisieren und die erforderlichen Abhängigkeiten installieren.
Wie Sie eine Farbpalettekomponente erstellen, um den Benutzern die Auswahl von Farben zu ermöglichen.
Wie Sie ein Zeichnetgitter erstellen, um den Benutzern das Zeichnen von Pixel Art zu ermöglichen.
Wie Sie eine Kunstvorschaukomponente implementieren, um die in Bearbeitung befindliche Pixel Art anzuzeigen.
Wie Sie alle Komponenten in der Hauptanwendung kombinieren.
Wie Sie die Anwendung stylen, um die Benutzererfahrung zu verbessern.

🏆 Errungenschaften

Nach Abschluss dieses Projekts können Sie:

Ein React-Projekt einrichten und die Abhängigkeiten installieren.
Funktionskomponenten in React erstellen.
React-State und -Props verwenden, um die Anwendungsdaten zu verwalten.
Ereignisse in React verarbeiten.
Eine React-Anwendung mit CSS stylen.

Projekt-Einrichtung

Anforderungen:

Installation von Abhängigkeiten im neuen React-Projekt.

Funktionalität:

Initialisierung des Projekts mit den erforderlichen Abhängigkeiten und einer grundlegenden Projektstruktur.

Schritte:

Öffnen Sie ein Terminal und navigieren Sie zum Projektordner:
```
cd react-pixel-art-animator
```
Sie müssen diesen Befehl im project-Verzeichnis ausführen.
Installation von Abhängigkeiten im Projekt:
```
npm install
```

Entwerfe die Komponente für die Farbpalette

Anforderungen:

Erstellen einer Farbpalette, aus der Benutzer Farben auswählen können.

Funktionalität:

Anzeigen einer Reihe von Farboptionen.
Erlauben, dass Benutzer eine Farbe auswählen.

Schritte:

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

Diese Komponente zeigt eine Reihe von Farbboxen an, und der Benutzer kann auf sie klicken, um eine Farbe auszuwählen.

Das Zeichnungsgitter erstellen

Anforderungen:

Erstellen eines Gitters, in dem Benutzer Pixel Art zeichnen können.

Funktionalität:

Rendern eines Gitterslayouts.
Erlauben, dass Benutzer die gewählten Farben in die Gitterschachbretter einfüllen.

Schritte:

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

Die Gitterkomponente wird Benutzern ermöglichen, Pixel Art zu zeichnen, indem sie auf jedes Quadrat klicken.

Die Kunstvorschau implementieren

Anforderungen:

Anzeigen einer Vorschau der Pixel Art, die der Benutzer erstellt.

Funktionalität:

Rendern der Pixel Art des Benutzers, während sie erstellt wird.

Schritte:

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

Komponenten in die Hauptanwendung integrieren

Anforderungen:

Kombinieren Sie die Palette-, Grid- und SpriteDisplay-Komponenten.

Funktionalität:

Zeigen Sie die Hauptanwendung mit integrierten Komponenten an.

Schritte:

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

Das Styling der Anwendung

Anforderungen:

Die Anwendung optisch ansprechend gestalten.

Funktionalität:

Die App-Komponenten stylen, um die Benutzererfahrung zu verbessern.

Schritte:

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

Das Ausführen der App

Um Ihre App auszuführen:

Öffnen Sie Ihren Terminal oder die Befehlszeile.
Stellen Sie sicher, dass Sie sich im Stammverzeichnis des Projekts befinden (wo die package.json-Datei gespeichert ist).
Starten Sie den Entwicklungsserver:
```
npm start
```
Sie sollten jetzt eine einfache React-App im Browser auf Port 8080 sehen. Wir werden auf dieser Grundlage aufbauen, um unsere App zu erstellen.
Der Effekt der Seite ist wie folgt:

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich eine einfache Pixel Art Animator mit React gebaut. Sie können jetzt mit Pixeln zeichnen, Farben aus einer Palette auswählen und Ihre Pixel Kunst vorab anzeigen. Wenn Sie Ihre Lernreise fortsetzen, können Sie überlegen, weitere Funktionen hinzuzufügen, wie das Speichern Ihrer Pixel Kunst in einer Datenbank, die Implementierung einer Undo-Redo-Funktionalität oder sogar die Integration von Animationen.