はじめに

tsParticlesは、JavaScriptで作成された高度なパーティクルエフェクトライブラリです。その多様な設定や効果により、Webサイトやアプリケーションに魅力的な背景を簡単に追加することができます。この記事では、tsParticlesを使用してAmong Us風の背景を作成する方法を紹介します。

tsParticlesとは

tsParticlesは、パーティクルエフェクトを作成するためのオープンソースライブラリです。JavaScriptで書かれており、Webサイトやアプリケーションに簡単に追加できます。tsParticlesには、多様な設定や効果があり、背景やアニメーションの作成に役立ちます。

公式サイト

https://particles.js.org/

Github

https://github.com/matteobruni/tsparticles

Among Us風の背景を作成する方法

Among Usは、多くの人に愛される人気のあるゲームです。その特徴的な背景は、宇宙船内部のテーマを持っています。以下の手順に従って、tsParticlesを使用してAmong Us風の背景を作成しましょう。

デモページ(Among Us）

1. tsParticlesをダウンロードし、プロジェクトに追加する

まず最初に、tsParticlesをダウンロードし、プロジェクトに追加する必要があります。以下のコマンドを使用して、npmパッケージをインストールできます。

npm install tsparticles

または、以下のタグを使用して、CDNからtsParticlesを読み込むこともできます。

<script src="<https://cdn.jsdelivr.net/npm/tsparticles@1.22.1/dist/tsparticles.min.js>"></script>

2. HTMLファイルにcanvas要素を追加する

tsParticlesを使用するには、HTMLファイルにcanvas要素を追加する必要があります。以下のように、id属性を"tsparticles"に設定したcanvas要素を追加します。

<canvas id="tsparticles"></canvas>

3. JavaScriptファイルに設定を追加する

次に、JavaScriptファイルに以下のようなtsParticlesの設定を追加します。

tsParticles.load("tsparticles", {
  "background": {
    "color": {
      "value": "#292f3d"
    }
  },
  "fpsLimit": 60,
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "retina_detect": true
});

4. CSSファイルにスタイルを追加する

最後に、CSSファイルに以下のようなスタイルを追加して、Among Us風の背景を反映させます。

#tsparticles {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

これでAmong Us風の背景が完成しました。

まとめ

この記事では、tsParticlesを使ってAmong Us風の背景を作成する方法を紹介しました。tsParticlesは、多様な設定や効果を持っており、Webサイトやアプリケーションの背景やアニメーションの作成に役立ちます。是非、あなたもtsParticlesを使用して、創造性豊かな背景を作成してみてください。