React でピクセルアートアニメーターを作成する | 初心者にやさしいプロジェクト

はじめに

このプロジェクトでは、React を使って簡単なピクセルアートアニメータを作成する方法を学びます。このガイドを終えると、ピクセルアートを描き、その結果のアニメーションを見ることができる基本的なピクセルアートエディタができ上がります。このプロジェクトは初心者にも親切で、React とピクセルアートの世界に入り込む楽しい方法を提供します！

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

React プロジェクトを初期化し、必要な依存関係をインストールする方法。
ユーザーが色を選べるように色パレットコンポーネントを作成する方法。
ユーザーがピクセルアートを描けるように描画グリッドを作成する方法。
進行中のピクセルアートを表示するためのアートプレビューコンポーネントを実装する方法。
メインアプリですべてのコンポーネントを結合する方法。
ユーザー体験を向上させるためにアプリケーションをスタイリッシュにする方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

React プロジェクトをセットアップし、依存関係をインストールする。
React で機能コンポーネントを作成する。
React の状態と props を使ってアプリケーションデータを管理する。
React でイベントを処理する。
CSS を使って React アプリケーションをスタイリッシュにする。

プロジェクトのセットアップ

要件：

新しい React プロジェクトに依存関係をインストールすること。

機能：

必要な依存関係と基本的なプロジェクト構造でプロジェクトを初期化する。

手順：

ターミナルを開き、プロジェクトフォルダに移動する：
```
cd react-pixel-art-animator
```
このコマンドは project ディレクトリの下で実行する必要があります。
プロジェクトに依存関係をインストールする：
```
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;

メインアプリにコンポーネントを統合する

要件：

パレット、グリッド、およびスプライトディスプレイコンポーネントを結合する。

機能：

統合されたコンポーネントを備えたメインアプリケーションを表示する。

手順：

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

アプリを実行する

あなたのアプリケーションを実行するには：

ターミナルまたはコマンドプロンプトを開きます。
プロジェクトのルートディレクトリ（package.jsonファイルがある場所）にいることを確認します。
開発サーバーを起動します：
```
npm start
```
これで、ブラウザの 8080 ポートで基本的な React アプリケーションが実行されているはずです。このベースを使って、私たちのアプリケーションを作成します。
ページの表示は以下の通りです：

まとめ

おめでとうございます！あなたは React を使って基本的なピクセルアートアニメーターを成功裏に作成しました。これで、ピクセルで描き、パレットから色を選択し、ピクセルアートのプレビューを表示することができます。学習の旅を続けるにあたり、ピクセルアートをデータベースに保存する機能やアンドゥ・リドゥ機能の実装、さらにはアニメーションの統合など、さらに多くの機能を追加することを検討してみてください。

React を使ってピクセルアートアニメーターを作成する