Java 画像の分割、透過ができない

Question

Javaでシューティングゲームをつくっている者です。自機に敵の弾が触れると爆発するエフェクトを付けたいのですが分割、透過ができません。
これが重ねたい画像です↓

分割、透過するにはどのようにすればよいでしょうか？回答のほどよろしくお願いいたします。

Comments

[m.ts10806]

現状が再現できるコードや設定、環境情報がないと何とも。

[jimbe]

透過は、png 画像なのですからあらかじめ透過色で塗っておくことが出来ると思います。
分割は、画像の描画を Graphics.drawImage で行っているのでしたら、オーバーロードされたメソッドの中に、元画像の一部を書き込むものがありますので、それを使えば同じことになるかと思います。

[java_beginner1]

ごめんなさい。学校が忙しく、返信できませんでした。コードを載せていないのはその必要がないと判断したからです。以後気を付けます。
jimbeさんへ
プログラミング初心者なのでpng画像にそんな機能がもう備わっていたとは知らなかったです。アドバイスして頂きありがとうございます。
jimbeさんがおっしゃっているのはdrawImage(Image img,int x,int y,int width,int height,ImageObserver observer)のことであっていますでしょうか？

[m.ts10806]

必要はありますよ。
同じ結果となるコードは１つではないですし、やりたいのはあなたのコード上の話です。
https://teratail.com/help/question-tips#questionTips3-5
質問は編集できます。

[jimbe]

忙しいことを責める方はいらっしゃらないと思います^^
忙しいのか放置なのかが分からないのでどうしたものか…という場合はありますが。

> ～ であっていますでしょうか
ドキュメントを読む練習と思って、各メソッドの説明をよく読んでみてください。翻訳されていても結局カタカナばかりでよく分からないことも多くあるとは思いますが、そのキーワードをさらに検索する等を行っていくことで、少なくとも解決の糸口を探すスキル(?)の足しにはなるのではないでしょうか。
手掛かりとすれば、パラメータとして書き込むべきイメージ、書き込む先の位置等の情報の他に、書き込む元を示すための位置等の情報が増えるはずです。

[java_beginner1]

m.ts10806さんへ
そうですね。今回は解決できそうなので次回から気を付けます。
jimbeさんへ
drawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, ImageObserver observer)ですね！Javaって専門用語多くてデスティネーション矩形って何？って思ってたんですけど少し粘って検索してみるとよくわかりました。これでシューティングゲーム制作がはかどりそうです。ありがとうございました。
回答を書いておいてもらえますか？jimbeさんの回答をベストアンサーにしたいので。よろしくお願いします。

[m.ts10806]

質問は編集できますし、半永久的に残ります。
同じような問題をかかえた人が見る可能性も十二分にあるので、実際の現在のコードと解決するなら自身で理解した内容を回答として具体的に記載して「質問と解決策（自己解決）」とされたほうが良いと思います。
（自分だけ解決できればそれでいいってスタンスは回答者から避けられやすいです）

[java_beginner1]

まあ僕とjimbeさんの問題なんですがね。なぜあなたが間に入るのか分かりませんが。
僕の疑問を解決してくださったのはjimbeさんです。なのでjimbeさんがベストアンサーに選ばれるべきです。jimbeさんがそう言うなら別ですが。
理解もしています。自分でやって透過も分割も出来ました。
あと”次回から気を付けます。”と書きました。僕もいつも丸投げ（？）の質問をしているわけではありません。コードを書かない方が質問が伝わりやすいと判断したのでコードを書きませんでした。

[jimbe]

まぁまぁ。私はお手伝い出来ただけで、実際にメソッドを探したり理解する為に検索したりをされたのは java_beginner1 さんですし、 teratail はコードレベルで実際に書いて動いてこそ「解決」とするのが本来のような気が致します。
また、このご質問はシューティングで無くとも何かしらゲームを作っていらっしゃる方々(なぜか最近そのような方をよく見るような^^; )への一つの知識としては結構有用なのではないでしょうか。

ですので(ゲーム全体を載せるわけにはいかないでしょうから) 例えば、実行すると自機が真ん中に表示されて、特定のキーを押したら自爆するようなプログラムをお作り頂いて自己回答としてご提示頂ければ、ご自身の習作としても有用と思いますし、また、後に一つの画像からアニメーションさせる方法を探してこちらを御覧になる方々にもかなり役立つものとなると思います。
まだお忙しい中かも知れませんが、ご一考頂けますと幸いです。
(やはり「今はちょっと時間的に」等があれば、こちらで上記のようなコードで回答させて頂きます。)

[jimbe]

やはりお忙しそうですので、回答を書かせて頂きました。
余計なコードが多い気がしますが…スイマセン。

Answer 1

透過は、png 画像は透明成分を含んだ色が使えますので、あらかじめそれで塗っておくことが出来ます。
分割は、画像の描画を Graphics.drawImage で行っているのでしたら、オーバーロードされたメソッドの中に元画像の一部を書き込むものがありますので、それを使えば同じことになります。

コードは、java_beginner1 さんの以前のご質問から個人的に作っていたモノを、爆発対応にしたうえで抜き出したものです。ですので、タイマーによる定周期処理の中でキー入力や描画を行う等結構余計なコードが含まれています。
実行すると小さいウインドウが出て、ESC キーを押すと中央で爆発します。
ご提示頂いている画像を読み込む際に外周を透明色にしていますので、背景の水色に対して黒い枠は出ません。

package teratail_java.q358026;

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.*;

import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class ExplosionTest extends JFrame {
  public static void main(String[] args) throws IOException {
    new ExplosionTest().setVisible(true);
  }

  ExplosionTest() throws IOException {
    super("ExplosionTest");
    setDefaultCloseOperation(EXIT_ON_CLOSE);

    add(new MainPanel());

    pack();
    setResizable(false);
    setLocationRelativeTo(null);
  }

  private static class MainPanel extends JPanel implements FocusListener, Runnable {
    private static final String EXPLOSION_FILENANE = "Q358026_explosion.png";  //爆発画像
    private ImageManager imageManager;
    private KeyManager keyManager;
    private Explosion explosion = null;

    MainPanel() throws IOException {
      super(null);
      setPreferredSize(new Dimension(100, 100));
      setBackground(Color.CYAN);

      setFocusable(true);
      addFocusListener(this);

      imageManager = new ImageManager();
      imageManager.readImage(EXPLOSION_FILENANE);

      keyManager = new KeyManager();
      addKeyListener(keyManager);
    }

    //各キーの押下状態を管理.
    private class KeyManager implements KeyListener {
      private int keyBits = 0;

      boolean pressedEscape() { return (keyBits & 32) != 0; } //ESC が押されていたら true

      @Override
      public void keyTyped(KeyEvent e) { } //ignore
      @Override
      public void keyPressed(KeyEvent e) {
        //System.out.println("keyPressed: "+e.getKeyCode());
        switch(e.getKeyCode()) {
          case KeyEvent.VK_ESCAPE:  keyBits |= 32; return;
        }
      }
      @Override
      public void keyReleased(KeyEvent e) {
        //System.out.println("keyReleased: "+e.getKeyCode());
        switch(e.getKeyCode()) {
          case KeyEvent.VK_ESCAPE: keyBits &= ~32; return;
        }
      }
    }

    //画像ロード担当
    private class ImageManager {
      private Map<String,BufferedImage> imageMap = new HashMap<>();

      void readImage(String filename) throws IOException {
        BufferedImage image = ImageIO.read(new File(filename));
        tranparent(image);
        imageMap.put(filename, image);
      }
      BufferedImage getImage(String filename) {
        return imageMap.get(filename);
      }
      //左上角の色と同じ色を透明にする
      protected void tranparent(BufferedImage image) {
        int w = image.getWidth();
        int h = image.getHeight();
        int target = image.getRGB(0,0);
        for(int y=0; y<h; y++) {
          for(int x=0; x<w; x++) {
            if(image.getRGB(x,y) == target) image.setRGB(x,y,0);
          }
        }
      }
    }

    //背景(当たり判定無し)
    abstract class Background {
      protected int count, max;
      protected int x, y, w, h;
      protected BufferedImage image;
      Background(String filename) {
        image = imageManager.getImage(filename);
        w = image.getWidth();
        h = image.getHeight();
      }
      //false ならまだ必要
      abstract public boolean draw(Graphics g);
    }

    //爆発(背景)
    private class Explosion extends Background {
      static final int N = 4; // N回 draw 毎に絵が変わる
      Explosion(int cx, int cy, int cw, int ch) {
        super(EXPLOSION_FILENANE);
        max = h / w * N;
        //中心位置を合わせる
        this.x = cx + (cw - w) / 2;
        this.y = cy + (ch - w) / 2;
      }
      public boolean draw(Graphics g) {
        int dy = count / N * w;
        g.drawImage(image, x, y, x+w, y+w, 0, dy, w, dy+w, null);
        return (++count < max);
      }
    }

    @Override
    public void paintComponent(Graphics g) {
      super.paintComponent(g);
      if(explosion != null && !explosion.draw(g)) explosion = null;
    }

    //メインループ
    @Override
    public void run() {
      if(explosion == null && keyManager.pressedEscape()) { //ESC が押されたら爆発
        explosion = new Explosion(50, 50, 20, 20);
      }
      repaint(); //再描画依頼
    }

    private boolean stop = false;
    private ScheduledExecutorService scheduler = Executors.newSingleThreadScheduledExecutor();
    private ScheduledFuture<?> future;
    @Override
    public void focusGained(FocusEvent e) {
      if(!stop) future = scheduler.scheduleAtFixedRate(this, 0, 20, TimeUnit.MILLISECONDS); //20ms毎に run()を呼ぶ
    }

    @Override
    public void focusLost(FocusEvent e) {
      if(future != null) {
        future.cancel(false);
        future = null;
      }
    }
  }
}

Comments

[java_beginner1]

ありがとうございます泣　学校忙しくて。。。
ベストアンサーにさせて頂きます。
あと覚えて下さってたんですね！嬉しかったです！

[jimbe]

がむしゃらに何かを出来ることは、それが(したくても)出来なくなってから思い出すと懐かしくなるものです。
季節の変わり目でもありますのでお体だけはご注意して、堪能(?)なさってください ^^;;;

最近現在進行形でシューティング作成とご質問をされているのは、私の見ているタグではお一人だけです^^
まぁ、ご質問本文に書かれていないことを過去の関係情報で勝手に補完してしまうのは質問の独立性に関わりますので、あまり「誰々さんだから…」という前提は入れないようにしようとは思っています。

コードに付きましてちょっと補足です。
Explosion クラスのコンストラクタのパラメータ cx, cy, cw, ch は爆発する対象の矩形、つまり自機の爆発であれば自機の左上座標(cx,cy) とその幅(cw)・高さ(ch)を指定すると想定しています。
そこから計算される中心が爆発の中心となるように「中心位置を合わせる」で爆発の左上座標を求めています。
また、爆発画像の一枚々々の大きさは、幅は画像の幅、高さは幅と同じとしています。