Cut out and connect images with ImageMagick

What I wanted to do

Roguelike monster images lined up like this

↓↓↓ I wanted to change this order ...

It's quite difficult to manually process all the images of such characters ...

So, when I investigated whether it could be automated with a script, it was a good idea to use ImageMagick.

Install ImageMagick

Since it is a Mac environment, I installed it via MacPorts.

• Install ImageMagick on mac!

If you are in a Windows environment, you can easily install it by using the installer referring to here.

• ImageMagick installation

manner

procedure

I decided to process the image according to the following procedure

1. Cut out the image and divide it into one character image
2. Concatenate the cropped character images

Image crop

Use the -crop option to crop the image.

bash

  convert [Input file] -crop '[width]x[height]+[Upper left X coordinate]+[Upper left Y coordinate]' [Output file]

For example, to crop the input.png image with a size of 32x32 with (x, y) = (10,20) as the upper left coordinate, use the following command.

bash

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

Based on this, a Python script that cuts out a zombie image for each part

crop.py

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

import os

#■ First, crop the image
#Cutout size
SIZE = 16
#Input file
INPUT = "all.png "

#Zombie start coordinates
x = 80
y = 80
for i in range(0, 15):
	#Lined up in 5x3
	ox = (i / 3) * SIZE
	oy = (i % 3) * SIZE
	ox += x
	oy += y

	#Output file(Output to tmp folder)
	out = "tmp/%d.png "%i

	#Command string creation
	cmd = "/opt/local/bin/convert %s -crop '%dx%d+%d+%d' %s"%(INPUT, SIZE, SIZE, ox, oy, out)
	print cmd
	#Run
	os.system(cmd);

This is a script that cuts out the character from all.png and outputs it as 0 to 14.png in the tmp folder. Now you can cut it out individually.

Concatenate images

Next, connect the cut out images. Use the + append option to crop.

bash

  convert +append [Input file 1] [Input file 2] [...] [Output file]

For example, the command to concatenate 1.png 2.png 3.png and output to out.png is as follows.

bash

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

Here is a Python script that concatenates the images cut out based on this.

append.py

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

import os

#■ Combine images
#Connect to the side
cmd = "/opt/local/bin/convert +append "
for i in range(0, 15):
	#Input file
	inFile = "tmp/%d.png "%i
	#Concatenate to command string
	cmd += inFile + " "

#Set output file name
cmd += "zombie.png "
print cmd

#Run
os.system(cmd)

It is a script that outputs 0 to 14.png in the tmp folder to "zombie.png ". As a result, the images can be connected as shown below.

After that, if you modify this script, it seems that you can easily get through all the characters.

bonus

Enlarge the pixel art so that it is not blurred

In the case of a pixel art game, data may be prepared in low resolution to give a sense of dots, and then enlarged and used in the actual game. In that case, if you zoom in normally, it will look blurry.

For example, this is a 32x32 pixel art,

If you enlarge this to 96x96 as it is, it will look blurry.

Therefore, it is necessary to enlarge the pixel ratio while keeping it fixed.

Specify the -filter box option to do this conversion in ImageMagick.

bash

  convert -filter box -resize [magnification]% [Input file] [Output file]

The magnification is 100% standard value. For example, if you want to double the size of the image input.png, run the following command:

bash

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

The following is a method to output an image with a fixed pixel ratio and double the image using a Python script.

scale.py

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

import os

#Input file
INPUT = "zombie.png "
#Output file
OUTPUT = "zombie_2x.png "
#Double
SCALE = 2

#Command string creation
cmd = "/opt/local/bin/convert -filter box -resize %d%% %s %s"%(SCALE*100, INPUT, OUTPUT)
print cmd

#Run
os.system(cmd)

This is a script that doubles zombie.png and outputs it as zombie_2x.png.

Monster image

I borrowed the monster image cut out this time from here.

• DENZI room (free material storage)

There are a lot of nice images that can be used for roguelikes, which is very good.

Create a transparent image by specifying a transparent color

If you specify the -transparent option, you can specify the transparent color and output.

bash

  convert -transparent '#RRGGBB' [Input file] [Output file]

For example, the background color of the monster image used this time is # 476c6c, so

bash

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

Then you can create a transparent image zombie_alpha.png.