Создайте Pixel Art Animator с использованием React

Введение

В этом проекте мы проведем вас по созданию простого Pixel Art Animator с использованием React. В конце этого руководства у вас будет базовый редактор пиксельного искусства, где вы сможете нарисовать свое пиксельное искусство и увидеть результирующую анимацию. Этот проект прост в освоении и представляет собой веселый способ окунуться в мир React и пиксельного искусства!

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как инициализировать проект React и установить необходимые зависимости.
• Как создать компонент палитры цветов для выбора цветов пользователями.
• Как построить сетку для рисования, чтобы пользователи могли рисовать пиксельное искусство.
• Как реализовать компонент предварительного просмотра для отображения в процессе создания пиксельного искусства.
• Как объединить все компоненты в главном приложении.
• Как стилизовать приложение для улучшения пользовательского опыта.

🏆 Достижения

После завершения этого проекта вы сможете:

• Установить проект React и установить зависимости.
• Создавать функциональные компоненты в React.
• Использовать состояние и свойства React для управления данными приложения.
• Обрабатывать события в React.
• Стилизовать приложение React с использованием CSS.

Настройка проекта

Требования:

• Установка зависимостей в новом проекте React.

Функциональность:

• Инициализация проекта с необходимыми зависимостями и базовой структурой проекта.

Шаги:

1. Откройте терминал и перейдите в папку проекта:

   cd react-pixel-art-animator

   Вы должны выполнить эту команду в каталоге project.

2. Установка зависимостей в проекте:

   npm install

Создайте компонент палитры цветов

Требования:

• Создайте палитру цветов, из которой пользователи могут выбирать цвета.

Функциональность:

• Отобразите набор вариантов цветов.
• Позвольте пользователям выбрать цвет.

Шаги:

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

Этот компонент отображает ряд цветовых квадратиков, и пользователь может нажать на них, чтобы выбрать цвет.

Создание сетки для рисования

Требования:

• Создать сетку, где пользователи могут рисовать пиксельное искусство.

Функциональность:

• Отобразить сеточное расположение.
• Позволить пользователям заполнять квадраты сетки выбранным цветом.

Шаги:

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

Компонент сетки позволит пользователям рисовать пиксельное искусство, нажимая на каждый квадрат.

Реализация предварительного просмотра рисунка

Требования:

• Отображать предварительный просмотр пиксельного рисунка, которое создает пользователь.

Функциональность:

• Отображать пиксельное искусство пользователя в процессе его создания.

Шаги:

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

Интеграция компонентов в основное приложение

Требования:

• Объединить компоненты Palette, Grid и SpriteDisplay.

Функциональность:

• Отображать основное приложение с интегрированными компонентами.

Шаги:

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

Стилизация приложения

Требования:

• Дать приложению привлекательный внешний вид.

Функциональность:

• Стилизовать компоненты приложения для улучшения пользовательского опыта.

Шаги:

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

Запуск приложения

Для запуска вашего приложения:

1. Откройте терминал или командную строку.

2. Убедитесь, что вы находитесь в корневой директории проекта (где расположен файл package.json).

3. Запустите сервер разработки:

   npm start

   Теперь вы должны увидеть базовое React-приложение, запускающееся в вашем браузере на порту 8080. Мы будем использовать это в качестве основы для создания нашего приложения.

4. Эффект страницы выглядит так:

Резюме

Поздравляем! Вы успешно построили базовый Pixel Art Animator с использованием React. Теперь вы можете рисовать пикселями, выбирать цвета из палитры и просматривать предварительный просмотр вашего пиксельного рисунка. При продолжении вашего обучения рассмотрите добавление таких функций, как сохранение вашего пиксельного рисунка в базу данных, реализация функции отмены и повторения или даже интеграция анимаций.