トップページへ戻る


メーターファイルと前景レイヤー
 
「んでもって、どーすんのかなー?」

「前回も少し話したけど、背景画像を使っているところでタイムアウトのメーターを出したければ、前景レイヤーを使うことになるが、今回はこの前景レイヤーについて細かい話をしていこう」

「メーターはいるわ作んないのー?」

「それは最後にやる。まずは前景レイヤーの特殊性から勉強する」

比較項目 前景レイヤー( 0,1,2 ) 背景レイヤー( base )
枚数 0〜3枚(論理上は∞) 1枚
初期状態 非表示 表示
裏画面 あり あり
トランジション baseと共に行うことを推奨 単独で行う場合は children=false
用途 キャラクター、シルエット、
その他の前景オブジェクトの表示
背景画像の表示

「大して違うとこがないねー」

「うん。ただ大切なことは、用途の所にも書いてあるけど、前景レイヤーは主として背景の上に乗せる小さな絵やキャラクターを置くために使うんだ」

「『かまいたちの夜』のシルエットみたいなやつだよねー!」

「そういうこと。W.Dee氏のお仲間のTam-K氏がお描きになった吉里吉里オリジナルキャラクターの吉里ちゃんの絵を拝借して説明すると……」

背景画像 前景キャラ画像
完成図

「こんな感じの画面を作れるわけだ」

「あー!」

「何だ?」

「前にもメーター画像のとこで思ったんだけど、あんで吉里ちゃんの白いバックが完成図のほーではいつのまにか勝手に見えなくなってんのよもー! ずるっちーぢゃんよもー! ほんとならこーぢゃないのかなー!?」

すきゃんてぃの想像図

「うん。お前の想像は正しい。正しいが、そんな画面を平気でゲームに使うようじゃ、ゲーム制作はおぼつかないぞ」

「あたりまえぢゃんよもー! そんなことわかってんに決まってんぢゃんよもー! なんで白い部分が見えなくなんのかをせつめーしなさいよねもー!」

「それじゃ、[image] タグの復習をしておこう。今まで覚えた属性は下のようになる」

storage読みこむ画像ファイル名を指定する。
ファイルの拡張子はあってもなくてもいい。
layerlayer=base で背景レイヤーに画像を読み込む。
layer=0、layer=1、layer=2 の場合は前景レイヤーに読みこむ。
pagepage=fore ですぐに見えるフォアグラウンド(表)に、
page=back でバックグラウンド(裏)に画像を読みこむ。
トランジション効果を用いる場合、page=back とする。
visiblelayer 属性で前景レイヤーを指定した場合のみ使用可。
visible=true で可視、visible=false で不可視。

「最後の visible は、ついさっき、タイムアウト選択肢の所で W.Dee 氏の見本の中で勉強したやつだ」

「そーだねー。全部で4このぞくせーを知ってんもん」

「それじゃ、前景レイヤーに画像を読み込む場合に必要な属性を教えておこう。上の表に追加して覚えておくといい」

key抜き色の指定を行う。key=0xRRGGBB で指定。
key=adapt と指定すると、画像の最上部のラインで
最も多く使われている色ピクセルの色が自動的に抜き色となる。

「あー! わかったもん! 透明にしたい色を key=0xRRGGBB で決めてあげれば、その色が透明になっちゃうんだねー!」

「その通り。一つ注意しなければいけないのは、アンチエイリアスが掛かっている画像の背景色を抜こうとすると縁が汚くなるってことだ。その場合は、上の吉里ちゃんの例にもあるけど、マスク画像を準備する方法をお勧めする」

「なんだー、あれわ透明色を使ったんぢゃないんだねー。どーりできれーだと思ったもん」

「うん。元々透明処理がしてあったんだ。だからあれは例外としても、256色以下の画像や、アンチエイリアスを使っていない画像の場合は、この key 属性を使えばいい。ちなみにマスク画像を使ったハイレベルな前景表示の方法は、本家 W.Dee 氏のホームページに載っているよ」

「すきゃんてぃ、はいれべるぢゃないから、早速抜き色を使ってやってみたいんだけど」

「それじゃ、タイムアウト用のメーターファイルを作ってみよう。まずは、同じ形のメーターを三つ用意して、一つはカラフルに、もう一つはグレースケールに変更し、最後の一つはトランジションのためのルールファイルにしてごらん」

「んーんーんー」

しばらくして……

「すきゃんてぃ、こーゆーのを作ってみたんだなーこれが」

「どれどれ?」

yajirusi01.png (フルカラー)

(KAGで使う上記の画像は本来は枠がありませんが、
 ここでは黒地なので便宜上1ピクセルの白い枠をつけてあります)

yajirusi02.png (グレースケール)

(これも同様、1ピクセルの白い枠をつけてあります)

yajirusi.png (グレースケール)

「はぢめてだから、あんまり凝ったことはしないんだもん」

「お前にしちゃ上出来だ。さて、それじゃ、これをスクリプトに使ってみよう。実際にダウンロードして試してみたい人はここからどうぞ。サイズはわずか3KBです」

「んーと……」


(前略)

男の左腕に装備された金属製の弓矢。

あれは確か、アーバレストと呼ばれる強力な機械弓だ。

洋弓の中でも速射能力と命中精度がズバ抜けて高く、
近距離なら鋼鉄の板を撃ち抜くことも可能な
拳銃やライフルよりも恐ろしい武器。

唖然としているぼく達にも介せず、
男はこちらにむかって左手を伸ばした。

く、来る!

[image storage="yajirusi01" layer=1 page=fore visible=true]\
[delay speed=nowait]\
[locate y=365]\
[link target=*chapter3_scene01]A.[emb exp="f.name2"]を突き飛ばして自分も飛ぶ[endlink]
[link target=*chapter3_scene02]B.荷物を目の前に掲げる[endlink]
[link target=*chapter3_scene03]C.床に伏せる[endlink]\
[backlay]\
[delay speed=user]\
[image layer=1 page=back storage="yajirusi02"]\
[trans rule="yajirusi.png" time=10000 vague=8]\
[wt]\
[jump target=*刺さった!]\

(以下略)

「前のスクリプトを、すきゃんてぃの矢印に置き換えてみたよ」

「うん。でもそれだけじゃだめだ。お前の矢印画像の場合は、抜き色を指定しないと」

「えーと、key だったっけかなー?」

「そう。上の二枚については、黒を抜けばいいから、key=0x000000 と書けばいい」

「んー」


(前略)

男の左腕に装備された金属製の弓矢。

あれは確か、アーバレストと呼ばれる強力な機械弓だ。

洋弓の中でも速射能力と命中精度がズバ抜けて高く、
近距離なら鋼鉄の板を撃ち抜くことも可能な
拳銃やライフルよりも恐ろしい武器。

唖然としているぼく達にも介せず、
男はこちらにむかって左手を伸ばした。

く、来る!

[image storage="yajirusi01" layer=1 page=fore visible=true key=0x000000]\
[delay speed=nowait]\
[locate y=365]\
[link target=*chapter3_scene01]A.[emb exp="f.name2"]を突き飛ばして自分も飛ぶ[endlink]
[link target=*chapter3_scene02]B.荷物を目の前に掲げる[endlink]
[link target=*chapter3_scene03]C.床に伏せる[endlink]\
[backlay]\
[delay speed=user]\
[image layer=1 page=back storage="yajirusi02" key=0x000000]\
[trans rule="yajirusi.png" time=10000 vague=8]\
[wt]\
[jump target=*刺さった!]\

(以下略)

「実行していーかなー?」

「うん。やってごらん」

「すごーい! 簡単にできちゃったぢゃんよもー!」

「そう。それでOKだ。ここで抜き色を指定しないで動かすと、下のように背景画像が隠れてしまうから注意だ」

「すごいねー! タイムアウトすんのに前景レイヤーのトランジションを使えば、いろんな種類のメーターが簡単にできちゃうんだねー! 細かいとこにも手が届くんだねー! 自分で部品を作ると、それが簡単にゲームに使えちゃうんだねー!」

「おいらが言うべきことを全部言ってくれてありがとう」

「すきゃんてぃ、またまた閃いたもん!」

「何だ?」

「たとえばー、前景レイヤーとトランジションの組み合わせで、大魔人が怒る顔のメーターなんかもできるんぢゃないかなー?」

「うん。工夫すればできるだろうな。そういえばおいらも、前景レイヤーをフルに活用したタイムアウト選択肢を一つ閃いたぞ」

「どんなのかなー?」

「一枚絵なんだけど、ホームから見送る恋人に、主人公が列車の窓から最後の別れの言葉を言うシーンだ。選択肢を選ぶのに手間取ると、やがてスクロールトランジションで列車が動き出してしまい、恋人の顔がどんどん後方へと消えて行ってしまうような……」

「うわーうわー! あんたってば、せんちめーとるだもん!」

「は?」

「違ったー! めんそれーたむだもん!」

「センチメンタル、って言いたいのか?」

「んきゃー!」

練習日記 5日目 まとめへ


トップページへ戻る