空想曲線

吉里吉里2/KAG3でのゲーム制作に使える小ネタ置き場。ゲーム用素材も置いてます。

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

2014-05-15
2017-06-14
cm0
tb0

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

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

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

1.クリック待ちグリフの元画像
2.クリック待ちグリフのアニメーション画像
3.クリック待ちグリフのアニメーション定義ファイル

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



1.クリック待ちグリフの元画像を作る


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

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



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


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


PageBreak_a.png


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

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


pb_sample.png


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

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

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



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


最後にアニメーション定義ファイルを作ります。
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ミリ秒ごとに1コマずつ動かすように設定します。


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


2014_0514.png


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



4.3つのファイルを上書きする


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

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


2014_0514_2.png


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

では、今回はこれにて (´∀`*)ノシ


関連記事

コメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://kopacurve.blog33.fc2.com/tb.php/349-bf3c7a5a
この記事にトラックバックする(FC2ブログユーザー)

Author

Recent

Category

Link

Comment

Mailform

Twitter