| +++ グラフィカルボタン活用法 +++ |
| ▼ 内容の一括ダウンロード (準備中) | 2004/11/29 |
| ※ KAG3.22 Rev.5 のチュートリアルをベースとして解説しています | |
もしかしたらクリッカブルマップに次いで初心者が理解しにくいかもしれないグラフィカルボタンの 作り方や使い方についてあれこれ。 ■ グラフィカルボタン TIPS ― 作成編 グラフィカルボタンは、リンク関連のひとつです。 通常、文字リンクだけでもゲームは作れますが、文字だけでは画面が寂しい、と思うときに活躍します。 代表的な用途としては ・タイトル画面 ・アイテムやキャラクターなどの選択画面 ・ CG モード などでしょうか。 ほかにも、アイディア次第でさまざまな用途に使えると思います。 さて、グラフィカルボタンを使うには、まずボタン用の画像を用意する必要があります。 これについては 「 タグリファレンス 」 の button タグの項に簡単な説明が書かれています。 それによると、 ・通常の状態 ・ボタンが押された状態 ・ボタンの上にマウスカーソルがある状態 という、3つの状態をひとつにまとめた画像を用意しなければならないようです。 このあたりは、ウェブサイトでマウスが乗ると変化する画像ボタンを使ったことのある方なら、イメージが しやすいかもしれませんね。 これら3つの状態をもうちょっとわかりやすく説明すると、 通常の状態 ... マウスやキーで何も操作されないときに画面に表示しておく画像です。 画面上に最初に表示されるのがこれですね。 ボタンが押された状態 ... クリックされたり、決定キーが押されたときに、この画像が表示されます。 ボタンの上にマウスカーソルがある状態 ... マウスやキー操作でカーソルがボタンの上に乗ったときに表示されます。 ということです。 グラフィカルボタンとして用意する画像は、これら3つの画像が 左から順に 並んだものになります。 基本的にグラフィカルボタンは、吉里吉里上で実行されたとき、画像が三等分されます。 つまり、これら3つの画像を 全て同じ大きさ にしないと、意図した表示がされないわけです。 ※ボタンひとつひとつの表示範囲は違っても構いません。 他のボタンより小さいものは周りに透過部分を作って長さを揃えます。 図解するとこうですね。 ※ NN4.x 以下 や IE などのブラウザでは透過画像がうまく表示されないと思いますが、吉里吉里で読み 込めば、ちゃんと透過される、はず。 ![]() ![]() これで、たとえば以下のようなボタン画像を用意してみます。 まず、これが通常の画像。縦 42 × 横 130 のボタンです。 次は、ボタンが押された状態の画像。 わかりやすいように、文字の背景色を変えてみることにしました。 残るはボタンの上にマウスカーソルがある状態ですが、これも文字の背景色を変更。 通常の状態よりも少し明るい色にしてみます。 これら3つの状態の画像が用意できたら、この3つを連結してひとつの画像にします。 画像の連結は グラフィックソフト を使うか 画像連結ソフト を使いましょう。 ※一応、うちでも 一括画像連結プログラム を公開しているので、よければ使ってみてください。 上3つの画像をグラフィカルボタン用にした完成図はこうなります。 もう少し詳しい解説はまた改めて〜。 | |
質問やご意見は当サイトの掲示板かメールにてお受け致します。 混乱を避けるため、内容に関して らんか 以外へ質問することはご容赦ください(^^; また、これらの解説は全てらんかの知識によるもので、間違いがないとは限りません。 ツッコミどころがありましたら、ぜひご一報くださいませ m(_ _)m |
|