Construa um Pixel Art Animator com React | Projeto para Iniciantes

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:

Abra um terminal e navegue até a pasta do projeto:
```
cd react-pixel-art-animator
```
Você precisa executar este comando no diretório project.
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:

Abra seu terminal ou prompt de comando.
Certifique-se de que você está no diretório raiz do projeto (onde o arquivo package.json está localizado).
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.
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.

Crie um Pixel Art Animator com React

Introdução

👀 Pré-visualização

🎯 Tarefas

🏆 Conquistas

Configuração do Projeto

Design do Componente Paleta de Cores

Construindo a Grelha de Desenho

Implementando a Pré-visualização da Arte

Integrando Componentes no Aplicativo Principal

Estilizando a Aplicação

Executando o Aplicativo

Resumo