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

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

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

要件：

• 新しい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;

メインアプリケーションへのコンポーネントの統合

要件：

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

機能：

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

手順：

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

   これで、ブラウザの8080ポートで基本的なReactアプリケーションが実行されているはずです。このベースを使って、私たちのアプリケーションを作成します。

4. ページの表示は以下の通りです：

まとめ

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