Crie um Pixel Art Animator com React

Introdução

Neste projeto, vamos guiá-lo na construção de um simples Pixel Art Animator usando React. Ao final deste guia, você terá um editor básico de pixel art onde poderá desenhar sua pixel art e ver a animação resultante. Este projeto é amigável para iniciantes e oferece uma maneira divertida de mergulhar no mundo do React e da pixel art!

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como inicializar um projeto React e instalar as dependências necessárias.
• Como criar um componente de paleta de cores para os usuários escolherem as cores.
• Como construir uma grade de desenho para permitir que os usuários desenhem pixel art.
• Como implementar um componente de pré-visualização da arte para exibir a pixel art em andamento.
• Como combinar todos os componentes no aplicativo principal.
• Como estilizar a aplicação para melhorar a experiência do usuário.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Configurar um projeto React e instalar dependências.
• Criar componentes funcionais em React.
• Usar o estado (state) e as propriedades (props) do React para gerenciar os dados da aplicação.
• Lidar com eventos em React.
• Estilizar uma aplicação React usando CSS.

Configuração do Projeto

Requisitos:

• Instalação de Dependências no novo projeto React.

Funcionalidade:

• Inicializar o projeto com as dependências necessárias e uma estrutura básica do projeto.

Passos:

1. Abra um terminal e navegue até a pasta do projeto:

   cd react-pixel-art-animator

   Você precisa executar este comando no diretório project.

2. Instalação de Dependências no Projeto:

   npm install

Design do Componente Paleta de Cores

Requisitos:

• Criar uma paleta de cores da qual os usuários podem escolher cores.

Funcionalidade:

• Exibir um conjunto de opções de cores.
• Permitir que os usuários selecionem uma cor.

Passos:

// 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 exibe uma linha de caixas de cores, e o usuário pode clicar nelas para selecionar uma cor.

Construindo a Grelha de Desenho

Requisitos:

• Construir uma grelha onde os usuários podem desenhar pixel art.

Funcionalidade:

• Renderizar um layout de grelha.
• Permitir que os usuários preencham os quadrados da grelha com a cor selecionada.

Passos:

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

O componente de grelha permitirá que os usuários desenhem pixel art clicando em cada quadrado.

Implementando a Pré-visualização da Arte

Requisitos:

• Exibir uma pré-visualização da pixel art que o usuário cria.

Funcionalidade:

• Renderizar a pixel art do usuário à medida que ela está sendo criada.

Passos:

// 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 no Aplicativo Principal

Requisitos:

• Combinar os componentes Palette, Grid e SpriteDisplay.

Funcionalidade:

• Exibir a aplicação principal com componentes integrados.

Passos:

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

Estilizando a Aplicação

Requisitos:

• Tornar a aplicação visualmente atraente.

Funcionalidade:

• Estilizar os componentes da aplicação para uma melhor experiência do usuário.

Passos:

/*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 o tamanho geral e o espaço para um visual moderno */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9ecef;
}

Executando o Aplicativo

Para executar sua Aplicação:

1. Abra seu terminal ou prompt de comando.

2. Certifique-se de que você está no diretório raiz do projeto (onde o arquivo package.json está localizado).

3. Inicie o servidor de desenvolvimento:

   npm start

   Você deve agora ver uma aplicação React básica rodando em seu navegador na porta 8080. Vamos construir sobre essa base para criar nossa Aplicação.

4. O efeito da página é o seguinte:

   

Resumo

Parabéns! Você construiu com sucesso um Pixel Art Animator básico usando React. Agora você pode desenhar com pixels, escolher cores de uma paleta e visualizar sua pixel art. À medida que você continua sua jornada de aprendizado, considere adicionar mais recursos, como salvar sua pixel art em um banco de dados, implementar uma funcionalidade de desfazer-refazer ou até mesmo integrar animações.