日曜プログラミング

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

エオルゼア翻訳:TTFフォントをPNGに変換する

前回の記事でエオルゼア翻訳を作るのにやることを書きました。
今回はttfフォントをpngに変換してみます。


まず、参考記事を再掲
syake-labo.com

これを元にコードを書きます。

<?php
define('DEFAULT_SIZE',30);
define('DEFAULT_FONT','migmix-1p-regular.ttf');
define('DEFAULT_DIR','regular');
define('DEFAULT_VALUE','empty');
define('DEFAULT_COLOR','000000');

//フォントサイズ
$font_size = DEFAULT_SIZE;
if (isset($argv[1])) {
    $font_size = intval($argv[1]);
    if ($font_size < 8 ) $font_size = 8;
    else if ($font_size > 240) $font_size = 240;
}

//TTFフォントのパス
$font_face = DEFAULT_FONT;
if (isset($argv[2])) {
    $font_face = $argv[2];
}
$font_path = "./font/".$font_face;

//組み込みテキスト
$org_value = DEFAULT_VALUE;
if (isset($argv[3])) {
    $org_value = $argv[3];
    $org_value = rawurldecode($org_value);
    if (!isset($org_value)) $org_value = DEFAULT_VALUE;
}

//テキストカラー
$rgb_color = DEFAULT_COLOR;
if (isset($argv[4])) {
    $rgb_color = $argv[4];
}
$font_color = intval($rgb_color, 16);

//最初の文字のX座標のベースポイント
$tx = 2;

//フォントペースラインの位置
$ty = $font_size * 1.15;

// 大きさを測定
$bbox = imagettfbbox($font_size, 0, $font_path, $org_value);

//左上
$x0 = $bbox[6];
$y0 = $bbox[7];

//右下
$x1 = $bbox[2];
$y1 = $bbox[3];

//幅と高さを取得
$width = $x1 - $x0 + $font_size * 0.35 + 4;
//$height = $y1 - $y0 + $font_size * 0.3;
$height = $font_size * 1.5 + 2;

//イメージ描画枠作成
$im = imagecreatetruecolor($width, $height);

//背景色
$background_color = imagecolorallocatealpha($im, 255, 255, 255, 127);
imagealphablending($im, true); // ブレンドモードを設定する
imagesavealpha($im, true); // 完全なアルファチャネルを保存する
imagefill($im, 0, 0, $background_color);

//テキスト描画
imagefttext($im, $font_size, 0, $tx, $ty, $font_color, $font_path, $org_value);

//PNG形式で標準出力へ
header("Content-type: image/png");
imagepng($im);

//イメージ破棄(メモリ開放)
imagedestroy($im);

まずはテスト実行
EorzeaExtended.ttfを./font/ディレクトリに置き、実行

php font.php 30 EorzeaExtended.ttf a 000000

っとエラーが出ました

PHP Fatal error:  Call to undefined function imagettftext()

どうやらGD libraryとFreeType libraryが不足している様子です。

stackoverflow.com

インストールしてみましょう。この辺りを参考にしました。mac版です。

Compile PHP 7.0 (Release Candidate) on Mac OSX with homebrew https://wiki.php.net/phpng | https://www.jverdeyen.be/php/phpng-on-ubuntu-trusty/ | http://talks.php.net/froscon15#/phpconf1 · GitHub

諸々のコンフィグを入れてbrewでインストール

brew install autoconf automake gmp homebrew/versions/bison27 gd freetype t1lib gettext zlib mcrypt
env YACC=`brew --prefix bison27`/bin/bison brew reinstall homebrew/php/php71     --with-config-file-path="/usr/local/etc/php7"     --enable-mbstring     --enable-zip     --enable-bcmath     --enable-ftp     --enable-exif     --enable-calendar     --enable-sysvmsg     --enable-sysvsem     --enable-sysvshm     --enable-wddx     --with-curl     --without-iconv     --with-gd     --with-jpeg-dir=`brew --prefix gd`     --with-png-dir=`brew --prefix gd`     --with-freetype-dir=`brew --prefix freetype`     --with-t1lib=`brew --prefix t1lib`     --enable-gd-native-ttf     --enable-gd-jis-conv     --with-openssl=$(brew --prefix openssl)     --enable-mysqlnd     --with-mysqli=mysqlnd     --with-pdo-mysql=mysqlnd     --with-mysql-sock=/tmp/mysql.sock     --with-gettext=`brew --prefix gettext`     --with-zlib=`brew --prefix zlib`     --with-bz2     --with-mcrypt=`brew --prefix mcrypt` --enable-opcache=no


テスト。。。成功
では、ぐるぐる回すスクリプトを書いて、pngを吐き出してみましょう

#!/bin/bash

fonts=('EorzeaExtended' 'EorzeanCompact' 'EorzeanCursive' 'EorzeanElegant' 'EorzeanFraktur' 'EorzeanGraphite' 'EorzeanScript' 'EorzeanUncial')
lower=('a' 'b' 'c' 'd' 'e' 'f' 'g' 'h' 'i' 'j' 'k' 'l' 'm' 'n' 'o' 'p' 'q' 'r' 'x' 'y' 'z')
upper=('A' 'B' 'C' 'D' 'E' 'F' 'G' 'H' 'I' 'J' 'K' 'L' 'M' 'N' 'O' 'P' 'Q' 'R' 'X' 'Y' 'Z')
num=('0' '1' '2' '3' '4' '5' '6' '7' '8' '9')

for f in ${fonts[@]}
do
	echo $f
	if [ ! -e png/$f ]; then mkdir png/$f ; fi
	if [ ! -e png/$f/lower ]; then mkdir png/$f/lower ; fi
	if [ ! -e png/$f/upper ]; then mkdir png/$f/upper ; fi
	if [ ! -e png/$f/num ]; then mkdir png/$f/num ; fi
	for w in ${lower[@]}
	do
		/usr/local/bin/php font.php 30 $f.ttf $w 000000	> png/$f/lower/$w.png
	done
	for w in ${upper[@]}
	do
		/usr/local/bin/php font.php 30 $f.ttf $w 000000	> png/$f/upper/$w.png
	done
	for w in ${num[@]}
	do
		/usr/local/bin/php font.php 30 $f.ttf $w 000000	> png/$f/num/$w.png
	done
done

png画像が出力されました。

こんな感じです。
f:id:gelehrtecrest:20170420174755p:plain

Copyright (C) 2010 - 2017 SQUARE ENIX CO., LTD. All Rights Reserved.


スポンサーリンク