Selectable Paintingsのテクスチャにも使える半透明な画像の作成。

最近、自分が公開しているMOD「Selectable Paintings」が結構な勢いでダウンロードされています。
MOD作者としては嬉しい限りです('-'*)

Selectable Paintingsは他のMODのように導入してゲームを起動してゲーム内で遊ぶだけじゃないんですよね。
自分で絵画に使うテクスチャを作成する必要があるんです。

で、特に質問が多いのがアルファチャンネルを使用した半透明化に関するもの。
フォーラムにも数件ありましたが、返答は全て「ご自身で調べてください。」としました。
何故かというと、ペイントソフトは無数にあり1人1人の環境に合わせて検証し指導するのが面倒くさいからですw

これでフォーラムの方への質問はなくなったのですが、最近は何故かブログのメールフォームから質問する方が増えてきました。
これはメールフォームを設置した時からの傾向で、このブログを見てくれる方はコメントではなくメールフォームをよく使用してくれますw

なんなんでしょうね・・・?

まあ、メールはメールで嬉しいんですが、メールは見ない時が結構あるので早い反応が欲しいときはコメントで。

そして・・昨日もアルファチャンネルに関してメールが来ていて、それには「ソフトは違ってもいいから作成する手順を書いてほしい」とありました。
ブログのネタもないし、それぐらいならいいか・・と言うことで、
Photoshopの便利な機能を使ったマスク(アルファチャンネル)作成方法を書いておきます。

続きを読む

opacityを使わない半透明な背景の作成。

最近ブログのテーマやらプラグインを弄るのが楽しいw
 
今日はテーマの一部背景を半透明化してみることにしました。
なぜかって・・?背景の狼さんに塗り潰された背景が被って見えなくなるから!! (ノ∀`*)
 
簡単なのはCSSのopacityプロパティを指定すれば半透明になるのだけど、これだと全て半透明になって逆に悪化させてしまう・・・
なので、アルファチャンネルを含むPNGを作成して、半透明PNGを背景に指定し半透明に見せる方法を使用してみました。
 
結構かわったかなー
と言っても記事の見出し等の部分は弄ってないので、あんまりわからないかもですね。
 
今回は動的に色や透明度を調整したかったので、PHPで半透明PNGを作成するコードを書いてみました。

<?php
 
// ==================================================
//  http://example.jp/mask.php?colorcode-alpha
//  ex: R(0), G(0), B(255), A(63) = mask.php?0000ff-63
// ==================================================
 
// Use Cache?
$useCache    = true;
 
// Cache directory
$cacheDir    = "./cache";
 
// Default color
$defaultColor    = "000000";
 
// Default alpha
$defaultAlpha    = 64;
 
// ==================================================
 
$query = preg_split("/\-/", htmlspecialchars(getenv("QUERY_STRING")));
$userColor = strtolower($query[0]);
$userAlpha = $query[1];
$pngFile = null;
 
if ($userColor == null || !preg_match("/^[0-9, a-f]+$/", $userColor)) {
    $userColor = $defaultColor;
}
if ($userAlpha == null || !preg_match("/^[0-9]+$/", $userAlpha)) {
    $userAlpha = $defaultAlpha;
}
if ($userAlpha > 127) {
    $userAlpha = 127;
}
 
if ($useCache) {
    $pngFile = $cacheDir."/".$userColor."-".$userAlpha.".png";
    if (file_exists($pngFile)) {
        $data = file_get_contents($pngFile);
        header("Content-Type: image/png");
        header("Content-Length: ".strlen($data));
        echo $data;
        exit;
    }
}
 
$rgb = array();
for ($i=0;$i<6;$i+=2) {
    $rgb[] = hexdec(substr($userColor, $i, 2));
}
 
$image = imagecreatetruecolor(1, 1);
imagesavealpha($image, true);
imagefill($image, 0, 0, imagecolorallocatealpha($image, $rgb[0], $rgb[1], $rgb[2], $userAlpha));
 
header("Content-Type: image/png");
if ($useCache) {
    if (!is_dir($cacheDir)) {
        @mkdir($cacheDir, 755);
    }
    imagepng($image, $pngFile);
}
imagepng($image);
imagedestroy($image);
exit;
 
?>

あとはこれをCSSのbackground-imageに指定すれば動的に半透明な背景を作成する事ができます。
 
mod_rewriteなんかが使えるサーバーならphpなURLむき出しにならなようにできるのでCSSを見たときスッキリしますww
ちなみに、うちはrewriteを使っています(`・ω・)b

IE9以下でもある程度見えるように・・・

今日たまたま出先のPCで自分のブログを見る機会があったので見てみたら・・・酷いことw

以前にも書いたけれど、今のデザインはCSS3をかなり使用しているので、IEユーザーの方はバージョン9でないと正常に表示できないのです。
あれからIE用に多少修正したとは言えすごく見にくいww
 
IE9以下でCSS3を表示させる方法がないか調べてみたところ、CSS3 PIEという物をみつけました。
JavaScript版とhtc(HTMLコンポーネント)版があって、htc版は既存のCSSにIE用プロパティbehaviorを追加する必要がある。
 
CSSに手を加えるのは面倒くさかったのですが、JavaScript版はScriptエラーを連発するのでCSSにbehaviorを追加する方向にしました。
どちらのバージョンも、対象のエレメントにposition:relative;かz-indexプロパティがないと正常に表示されないとのこと。
 
動作結果のスクリーンショット↓

左:Firefox 中央:Internet Explorer 8 右:Internet Explorer 8+CSS3 PIE
 
標準でCSS3をサポートしているFirefoxは綺麗に表示できますw
それに比べてIE単体だと結構見にくい・・・
PIEを使用したIEでは一部の角が取れて影がついて見やすくなりました。
 
PIEも完全ではないのでFirefoxのようにはなりませんが、全くCSS3コンテンツが見えないよりはましでしょう・・・

絵画のアニメーション

前の記事では狼の目をアニメーションさせました。
 が
それでは物足りない・・もっと色々アニメーションさせたい!って事で、仕様をみてみるとterrain.pngや各種mobだけじゃなくGUIやチェストのモデルなど殆どのテクスチャに上書きできるみたい。
 
なので、絵画のアニメーションはできるかょっと実験。
[jwplayer width="512" height="290" mediaid="2294"]

うん、かわいい(*´¬`)
絵画に使った画像は あやかさんの助け屋SHIBETAのシベ太くん。
(使用の許可をいただきありがとうございます。)

このアニメーションの元画像はGIFなんですが、GIFと同じ速度でフレームを送るともの凄くトゲがでてしまう・・・
fpsが高いと中間フレームを補間しないとダメですね。
それをやらないとなるとスピードを落とすぐらいかなー

ちなみに、1つのテクスチャファイルに対して幾つでもアニメーションさせる部分を追加できます。
動画にはありませんが、同じ絵画のテクスチャに3カ所アニメーションを設定してテストしましたがコマ落ちなどはありませんでした。
絵画の幅がもっと広がるー

Minecraftのカスタムアニメーションを使用してみる。

MinecraftのMOD、MCPatcher HD fixOptiFineを導入する事で使用できるカスタムアニメーションと言う物を使ってみる事にしました。
よくテクスチャパックにcustom_terrain_???.pngやcustom_fire_......pngファイルがあるのはこの機能を使ってるんです。
 
今回やるのはアニメーションテクスチャの他に.propertiesファイルでアニメーションする順番や時間を定義する方法。
とりあえずどんな物か、狼の目に注目して動画を見てくださいねー(`・ω・)b
[jwplayer width="512" height="290" mediaid="2292"]

そう、瞬きするんですw
 
今回使った.propertiesとかテクスチャのサンプル ⇒ ダウンロード
ちなみにx32サイズのテクスチャです

from=/anim/mob_wolf_tame_eye.png
to=/mob/wolf_tame.png
x=8
y=10
w=12
h=4

tile.0=0
duration.0=85
tile.1=1
tile.2=2
tile.3=1

tile.4=0
duration.4=36
tile.5=1
tile.6=2
tile.7=1

tile.8=0
duration.8=62
tile.9=1
tile.10=2
tile.11=1

tile.12=0
duration.12=77
tile.13=1
tile.14=2
tile.15=1

tile.16=0
duration.16=17
tile.17=1
tile.18=2
tile.19=1

tile.20=0
duration.20=28
tile.21=1
tile.22=2
tile.23=1

tile.24=0
duration.24=88
tile.25=1
tile.26=2
tile.27=1

from: 追加テクスチャ。
to: 対象のテクスチャ。(今回の場合手懐けた狼のテクスチャ。)
x: toテクスチャへ上書きする為のx座標。
y: toテクスチャへ上書きする為のy座標。
w: 追加テクスチャの1コマあたりの横のサイズ。
h: 追加テクスチャの1コマあたりの縦のサイズ。
tile: 指定コマに何枚目のテクスチャを使用するか。
duration: どれだけの時間表示させておくか。
 
tileは値によって表示させるテクスチャを指定する事ができます。
0ならfromで指定したテクスチャのh=0からh=4まで、1ならh=4からh=8まで、2ならh=8からh=12まで。
これは最初に指定したhの値から自動計算されます。

tileとdurationはドット(.)の後に数字の連番が入ります。
例えばtile.0=なら0コマ目
0コマ目の表示時間を変更するならduration.0=となります。

行頭にシャープ(#)を記入するとその行はコメントとして扱われます。
日本語でコメントを書くと正常に動かないようです(´・ω・`)