空想曲線

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

吉里吉里/KAG:画像表示・消去の関数を作る  

2013-11-22[Fri]
cm4
tb0

吉里吉里/KAGちょいネタシリーズ。今回のネタはこちら。

「テキストリンクにマウスカーソルが乗ったら画像を表示したい
 で、マウスカーソルが外れたら画像を消去したい」


以前にも似たような記事をいくつか書いていますが
もう少し手軽に使えるように改良してみました。

使用するのはリンクタグ[ link ]の属性、onenter, onleave と画像表示・消去用に使う関数だけです。
グラフィカルボタンやクリッカブルマップでも使えるのでコピペしてお試しください。



1.グラフィック表示の関数を作る

まずはグラフィックを表示する関数を作っていきます。

// グラフィック表示用の関数
function CutImg( lay, sto, x, y )
 {
  with( kag.fore.layers[ lay ] )
  {
   .setPos( x, y );
   .loadImages(%[ storage:sto ]);
   .visible = true;
  }
 }

引数の中身は次のようになっています。
lay……前景レイヤ番号
sto……読み込みたいグラフィックのファイル名
……グラフィックの表示位置X座標
……グラフィックの表示位置Y座標

with の部分は

 kag.fore.layers[ lay ].setPos( x, y );
 kag.fore.layers[ lay ].loadImages(%[ storage:sto ]);
 kag.fore.layers[ lay ].visible = true;

と同じことです。with を使うとスクリプト量が減ってラクです。

setPos( x, y )の部分は、画像を表示する位置を指定しています。
タグ[ image ]の属性 left,top と同じです。

loadImage(%[ storage:引数sto ])でグラフィックを読み込みます。
タグ[ image ]の属性 storage と同じです。

最後の visible は画像を読み込んだ前景レイヤを可視にするという処理です。
タグ[ layopt ]の属性 visible と同じです。



2.グラフィック消去の関数を作る

カーソルが外れたときに画像を消去する関数を作ります。
(´ω`)< 画像が出っぱなしだと色々困るべ

// グラフィックを非表示にする関数
function CutImgErase( lay )
 {
  kag.fore.layers[ lay ].visible = false;
 }

引数 lay には任意の前景レイヤ番号が入ります。
この関数では、引数で指定した前景レイヤを不可視にする処理を行っています。

kag.fore.layers[ lay ].freeImage();

に書き換えると、引数で指定した前景レイヤを解放します。
タグ[ freeimage ]と同じです。

どちらを使うかはお好みで。



3.KAGでスクリプトを記述する

KAGシナリオに戻ってスクリプトを書いていきましょう。

*001
;カーソルが乗ったらhogeという画像を前景レイヤ0に表示する
;カーソルが離れたら前景レイヤの画像を不可視にする

;ひとつめの画像はX座標100、Y座標100の位置に表示

[link target=*002 onenter="CutImg(0,'hoge',100,100)" onleave="CutImgErase(0)"]

ひとつめの選択肢
[ endlink ][ r ]

;ふたつめの画像はX座標200、Y座標200の位置に表示

[link target=*002 onenter="CutImg(0,'hoge',200,200)" onleave="CutImgErase(0)"]

ふたつめの選択肢
[ endlink ]

;シナリオの停止

[ s ]


*002
[ cm ]
;カーソルを動かさないうちは画像が残っているのでここで解放しておく

[ freeimage layer=0 ]

どっちを選んでもここに来るけど気にすんな。
[ s ]



4.クリッカブルマップで使用する場合

マップアクション定義ファイルを次のように記述します。
値をダブルクォーテーションでくくらないとエラーが出るので注意。

// マップアクション定義ファイル

1: target="*002"; onenter="CutImg(0,'hoge',100,100)"; onleave="CutImgErase(0)";
2: target="*002"; onenter="CutImg(0,'hoge',200,200)"; onleave="CutImgErase(0)";

...(以下省略)


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


関連記事

コメント

> うに様

良かった良かった (´∀`*)
ゲーム制作がんばってください♪

URL | こ・ぱんだ #-
2013/12/26 22:52 | edit

できました。ご親切に教えて下さりありがとうございます(^O^)

URL | うに #-
2013/12/24 11:16 | edit

> うに様

関数の中に全角スペースが入っていませんでしょうか?

function CutImg(lay,x,y,sto){
with(kag.fore.layers[lay]){
.setPos(x,y);
.loadImages(%[storage:sto]);
.visible=true;
}
}

↑こんなカンジで行頭のスペースを詰めていただければいけると思います。
お手数をおかけしますが何卒よろしくお願いいたします (´∀`*)ノシ

URL | こ・ぱんだ #-
2013/12/21 23:09 | edit

こんにちは。この関数を使わせていただこうと思ったのですが、投入してみると文法エラーが出てしまいます。何か原因とかあるんでしょうか?よろしくお願いしますヽ(´▽`)/

URL | うに #-
2013/12/21 19:11 | edit

コメントの投稿

Secret

トラックバック

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

現在のページ

Category

Link

Comment

Mailform

Author

Twitter