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.

Projektaufstellung

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
```

Designen der Farbpalettenkomponente

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.

✨ Lösung prüfen und üben

Erstellen des Zeichnetgitters

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.

✨ Lösung prüfen und üben

Implementieren der Kunstvorschau

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;

✨ Lösung prüfen und üben

Integration von Komponenten in die Hauptanwendung

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;

✨ Lösung prüfen und üben

Gestalten 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;
}

✨ Lösung prüfen und üben

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:

✨ Lösung prüfen und üben

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.