画像を配列に格納し、インデックス番号のような形で呼び出す方法

Question

このような形でそれぞれ画像を追加し、条件分岐によってそれぞれの画像を表示させるようとしています。

// PIXI.js
// 画像をcontainerに追加

const bg = PIXI.Sprite.from("img1.jpg");
    const bg2 = PIXI.Sprite.from("2.jpg");
    const bg3 = PIXI.Sprite.from("3.jpg");

    bg.width = app.renderer.width / 2;
    bg.height = app.renderer.height / 2;

    bg.alpha = 1;

    bg2.width = app.renderer.width / 2;
    bg2.height = app.renderer.height / 2;

    bg2.alpha = 1;

    bg3.width = app.renderer.width / 2;
    bg3.height = app.renderer.height / 2;

    bg3.alpha = 1;

    container.addChild(bg);
    container.addChild(bg2);
    container.addChild(bg3);

条件分岐はこのような感じであるとします。

switch (key) {
  case "1":
    //bg1がアニメーション
　　gsap.to(bg, {
      opacity:1
    });
    break;

  case "2":
    //bg2がアニメーション
    break;

  case "3":
    //bg3がアニメーション
    break;

  default:
    break;
}

コードは簡単な例にすぎませんが、このように表示されるセクションによってそれぞれの画像に処理を行いたい場合、もっと簡潔に書くことはできないでしょうか？

画像が何十枚もあった場合いちいち書いていると大変なので、配列のような形でまとめて書きたいのですが浅学のため上手いやり方が分かりません……（pixi.js独自のやり方があるならすみません…がjavascriptでの一般的なやり方があるなら教えていただきたいです…）

配列で書く場合、それぞれの画像を格納し、格納したそれぞれのをインデックス番号のような形で呼び出すことは可能でしょうか？

アドバイスいただければ幸いです。

Answer 1

配列にファイル名を入れておき、そこから選択して、そこから画像データを読み込めばどうでしょうか