Help us understand the problem. What is going on with this article?

ImageMagickで画像を切り抜いて連結する

More than 3 years have passed since last update.

やりたかったこと

こんな感じで並んでいるローグライク用のモンスター画像を
zombie_src_2x.png

↓↓↓
こういう並びに変えたかったのですが……

zombie_2x.png

これだけのキャラクターの画像をすべて手作業で処理するのはかなり大変……。
all_x2.png

なので、スクリプトで自動化できないかと調べたところ、ImageMagickを使うのがよさげでした。

ImageMagickのインストール

Mac環境なのでMacPorts経由でインストールしました。

Windows環境なら、こちらを参考にインストーラーを使うと簡単にインストールできそう。

やり方

手順

以下の手順で画像を加工することにしました

  1. 画像を切り抜いて、1つのキャラ画像に分ける
  2. 切り抜いたキャラ画像を連結する

画像の切り抜き

画像の切り抜きには -crop オプションを使います。

bash
  convert [入力ファイル] -crop '[幅]x[高さ]+[左上X座標]+[左上Y座標]' [出力ファイル]

たとえば、input.png 画像の(x,y)=(10,20)を左上座標として、32x32のサイズで切り抜く場合は、以下のコマンドとなります。

bash
  convert input.png -crop '32x32+10+20' output.png

これを踏まえてゾンビ画像を1パーツごとに切り出すPythonスクリプト
zombie_src_2x.png

crop.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import os

# ■まずは画像を切り抜く
# 切り抜きサイズ
SIZE = 16
# 入力ファイル
INPUT = "all.png"

# zombieの開始座標
x = 80
y = 80
for i in range(0, 15):
    # 5x3で並んでいる
    ox = (i / 3) * SIZE
    oy = (i % 3) * SIZE
    ox += x
    oy += y

    # 出力ファイル (tmpフォルダに出力)
    out = "tmp/%d.png"%i

    # コマンド文字列作成
    cmd = "/opt/local/bin/convert %s -crop '%dx%d+%d+%d' %s"%(INPUT, SIZE, SIZE, ox, oy, out)
    print cmd
    # 実行
    os.system(cmd);

これは、all.png からキャラを切り抜いて、tmpフォルダに 0〜14.png として出力するスクリプトとなります。これで個別に切り出すことができました。

crop.png

画像を連結する

次に切り出した画像を連結します。
切り出しには +append オプションを使用します。

bash
  convert +append [入力ファイル1] [入力ファイル2] [...] [出力ファイル]

たとえば、1.png 2.png 3.png を連結して、out.png に出力するコマンドは以下のようになります。

bash
  convert +append 1.png 2.png 3.png out.png

これを踏まえて切り出した画像を連結するPythonスクリプトがこちら。

append.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import os

# ■画像を結合
# 横につなげる
cmd = "/opt/local/bin/convert +append "
for i in range(0, 15):
    # 入力ファイル
    inFile = "tmp/%d.png"%i
    # コマンド文字列に連結
    cmd += inFile + " "

# 出力ファイル名を設定
cmd += "zombie.png"
print cmd

# 実行
os.system(cmd)

tmpフォルダ内にある 0〜14.png を「zombie.png」に出力するスクリプトです。これにより、以下のように画像が連結できました。

zombie_2x.png

あとはこのスクリプトを改造すれば、すべてのキャラを簡単に切り抜けそうです。

おまけ

ドット絵をぼやけないように拡大する

ドット絵のゲームの場合、ドット感を出すために低解像度でデータを用意して、実際のゲーム上では拡大して使うことがあります。その場合、普通に拡大するとぼやけた感じになってしまいます。

たとえば、これは32x32のドット絵ですが、
player32x32.png

これを96x96にそのまま拡大するとぼやけた感じになってしまいます。
player96x96.png

そこで、ピクセル比を固定したまま拡大にする必要があります。
player96x96point.png

ImageMagickでこの変換を行うには -filter box オプションを指定します。

bash
  convert -filter box -resize [倍率]% [入力ファイル] [出力ファイル]

倍率は100%基準値となります。たとえば、画像 input.png を2倍のサイズにしたい場合は、以下のコマンドを実行します。

bash
  convert -filter box -resize 200% input.png output.png

以下はPythonスクリプトを使って、ピクセル比固定で、画像を2倍にして出力する方法です。

scale.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import os

# 入力ファイル
INPUT = "zombie.png"
# 出力ファイル
OUTPUT = "zombie_2x.png"
# 2倍にする
SCALE = 2

# コマンド文字列作成
cmd = "/opt/local/bin/convert -filter box -resize %d%% %s %s"%(SCALE*100, INPUT, OUTPUT)
print cmd

# 実行
os.system(cmd)

zombie.png を 2倍に拡大し、 zombie_2x.png として出力するスクリプトとなります。

モンスター画像

今回切り出したモンスター画像はこちらからお借りしました。

ローグライクに使えるいい感じの画像がたくさんあって、とてもよいです。

透過色を指定して透過画像を作る

-transparent オプションを指定すると透過色を指定して出力できます。

bash
  convert -transparent '#RRGGBB' [入力ファイル] [出力ファイル]

たとえば今回使ったモンスター画像の背景色は #476c6c なので、

bash
  convert -transparent '#476c6c' zombie.png zombie_alpha.png

とすると、透過した画像 zombie_alpha.png を作ることができます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした