吉里吉里/KAG：クリック待ちグリフを作ってみよう

2014-05-15

とても久しぶりな吉里吉里／KAGちょいネタシリーズ。

クリック待ちグリフってのはアレです。
テキストの文末でピコピコしてる青や緑の三角形です。
あれを自分で作ってみませんかというネタでございます。
アニメーションの練習にもなるので、ぜひお試しください。

クリック待ちグリフを作るのに必要なものは３つだけです。

１．クリック待ちグリフの元画像
２．クリック待ちグリフのアニメーション画像
３．クリック待ちグリフのアニメーション定義ファイル

それでは、「クリック待ちグリフ」という言葉が
ゲシュタルト崩壊する前に作っていきましょう ε≡≡ﾍ( ´Д`)ﾉ

１．クリック待ちグリフの元画像を作る

先にクリック待ちグリフの画像サイズを決めておきましょう。
デフォルトのクリック待ちグリフ画像は 24×24px となっていますが
これはデフォルトのフォントサイズ（24pt）に合わせているだけです。
自作するときは好きなサイズで構いませんし、正方形にする必要もありません。

サイズを決めたら画像編集ソフトで完全透明の画像を作って出力します。
ファイル名は「PageBreak.png」としておきます。

２．クリック待ちグリフのアニメーション画像を作る

次にアニメーション画像を作ります。
まずはデフォルトのアニメーション画像を見てみましょう。

画像の透明度を変えてヨコに16連結させたものになっています。
これを１つずつ読み込ませることで点滅しているように見せています。
パラパラ漫画をヨコに並べたようなものだと理解すればおっけいです。

自分で作る場合、16連結にする必要はまったくありません。
参考までに拙作「１／３６５」で使用したクリック待ちグリフをぺたり。

20×20pxの画像をヨコに４枚並べました。
左から右にかけて画像を１pxずつ下にずらしているだけですが
これで矢印が上下にピコピコしているアニメーションになります。
どんな動きか見たい人は「１／３６５」をダウンロードしてね（宣伝）

デフォルトのように不透明度を変化させる画像の場合は
中割りを減らしすぎると動きがぎこちなくなるので注意。

そんなこんなでアニメーション用の画像を作って出力。
ファイル名は「PageBreak_a.png」としておきます。
元画像のファイル名に「_a」をつけると、元画像を読み込んだとき
このアニメーション用画像もいっしょに読み込んでくれます。

３．クリック待ちグリフのアニメーション定義ファイルを作る

最後にアニメーション定義ファイルを作ります。
system フォルダの PageBreak.asd を編集するのが手っ取り早いです。
自分で作りたい方向けにテンプレ作ったんで良ければコピペしてってね (´∀｀*)ﾉ

*go
@loadcell
@loop
;
@macro name=copyone
@copy dx= dy= sx=%x sy=0 sw= sh=
@endmacro
;
*start
@copyone x=
@wait time=
;
@jump target=*start

では、このテンプレに沿ってスクリプトを書いていきます。
使うのはさっきの矢印。元画像は20×20px、アニメーション画像は80×20px。
50ミリ秒ごとに１コマずつ動かすように設定します。

*go
@loadcell
@loop
;
@macro name=copyone
@copy dx=0 dy=0 sx=%x sy=0 sw=20 sh=20
@endmacro
;
*start
@copyone x=0
@wait time=50
@copyone x=20
@wait time=50
@copyone x=40
@wait time=50
@copyone x=60
@wait time=50
;
@jump target=*start

dx,dy は元画像のどの位置にアニメーション画像を読み込むかという設定。
よほど特殊な画像でない限り両方とも０で問題ありません。
あとは図で見たほうが分かりやすいと思うので貼付けます。

矢印が一番下まで移動したら、ぴょこんと上に戻るように動きます。
ファイル名は「PageBreak.asd」にしておきましょう。

４．３つのファイルを上書きする

出来上がった「PageBreak.png」「PageBreak_a.png」「PageBreak.asd」を
system フォルダに上書きすれば完成です。あとは実際に動かして微調整します。

こんなカンジになりました。

クリック待ちグリフでアニメーションの基本的な作り方を覚えたら
目パチなどの演出にチャレンジしてみると良いかもしれません。

では、今回はこれにて (´∀｀*)ﾉｼ

関連記事

Comments 0

There are no comments yet.

１．クリック待ちグリフの元画像を作る

２．クリック待ちグリフのアニメーション画像を作る

３．クリック待ちグリフのアニメーション定義ファイルを作る

４．３つのファイルを上書きする

Comments 0

Leave a reply