◎汎用プロジェクト２・簡易ＣＧ集◎ 2004.9.19更新
今回はPreviewNemuを使ったＣＧ集アプリケーションです。
かなり簡易版なので、画像を選択して表示、クリックされるとまた選択画面に戻るといった動作しかしません。
まずはダウンロードしてみてください。
なお、動作テスト用に登録されている４枚の画像データの無断使用・転載などは禁止いたします。
レイアウトスキン（枠）やボタン、効果音、プロジェクトについては、ご自由にお使いください。
いるとは思えませんが、もしレイアウト等をそのまま商用としてご使用になる場合はご一報くださると嬉しいです（義務ではありません）。
LiveMaker用プロジェクトファイル
簡易ＣＧ集プロジェクト（lzh圧縮） 2.51MB
※ＣＧ集実行画面
☆「簡易ＣＧ集アプリケーションver1.00」概要
○画像サイズは640×480ドットです。
○１画面に20枚のサムネイル（縮小画面）を登録できます。
○このプロジェクトでは３ページ（60枚分）まで扱えます。
○サムネイルをクリックすると100％画像が表示され、もう一度クリックすると選択画面に戻ります。
○下部にあるアイコンをクリックすることで、ページをかえられます。
○「終了」は画面上部のメニューで行います。
背景画面に意味はありません。
たんにセンスがないだけです……。
それはさておき、まずはいつもどおり、プロジェクトの説明からはじめます。
○チャート内容
○変数リスト
今回の変数は、上記のチャート内のみで使われるため、全体のリストには登録しておりません。
登録している変数は、整数変数「画像番号」と文字列変数「ファイル名」のみです。
次の計算ノード内に「選択番号」という変数がありますが、これはシステム変数（？）です。
○画面Ａ：「計算ノード-ファイル名作成」の中身
○グラフィックフォルダ内
チャート内容をご覧いただければわかるとおり、かなりシンプルです。
ページごとに＜画像選択＞を用意し、選択された内容によって画像を表示したり、ページをかえています。
1ページ20枚の画像を選択するには、判定矢印が少なすぎると感じる方もいらっしゃると思います。
これは「ぱねうが」でも説明いたしました、「選択番号」をそのまま「画像番号」として取り込んでいるためです。
上記の「画面Ａ：計算ノード」をご覧ください。
整数変数「画像番号」に「選択番号」が代入されていますね？
＜画像選択＞または＜文字列選択＞で得られる「選択番号」は、半角数字（というか数値そのもの）です。
これを文字列としてファイル名にくっつけ、画像名を作成しているのです。
ちなみに、「画像番号 = 選択番号 + 0」というけったいな式の理由は、ページ数分の加算を行っているのを表しています。
1ページ目の画像番号は0-19の20枚、2ページ目は20-39の20枚、3ページ目は40-59の20枚です。
ページにあわせて20枚単位で加算をして、画像の番号を求めているわけです。
もっとわかりやすく、PreviewNemuで、画像の名前をじかにファイル名にするということもできますが、めんどくさいのでやりませんでした(^^;
☆改造のしかた
ＣＧの枚数やレイアウトの変更などをしたい方がおられると思います。
プロジェクトの内容が理解できれば簡単なのですが、他人の作ったものほどわかりにくい構造はありません。
なので注意点などを書いておこうと思います。
まず、表示する画像についてです。
○画像はgal形式で、原版の大きさは640×480、サムネイル用画像の大きさは1/8の80×60（12.5%）です。
○原版画像の保管場所は、「グラフィックフォルダ内画像フォルダ」です。
○原版のファイル名は「画像**.gal」として、「**」は「0」からの半角数字です。
画像が用意できましたら、サムネイル（縮小画像）をレイアウト上に貼り付けます。
縮小画面を貼り付ける順番は、原版のファイル名にあわせてください。
わたしのつくった例をご覧になればわかるとおり、今回は、ページごとに縮小画像を貼り付けた画像を用意しました。
このほうが手間が少なくてすむので楽です。
ノベルゲームのおまけモードのように、「見ていない画像を表示しない」という制約がＣＧ集にはありませんので、このような方法をとりました。
いちおうPreviewMenuと変数を組み合わせれば、特定条件でしか見られない画像なども設定できますが、今回はパスです。
なので、原版の12.5％縮小をした画像を、レイヤー機能つきペイントソフトなどで貼っていき、「グラフィックフォルダ内cg集枠」にお好きなファイル名で保存しておいてください。
今回、おまけとして「グラフィックフォルダ内cg集枠」に、サンプルのレイアウト用ファイル（galとpsd形式）を入れておきましたので、ご利用ください。
完成したサムネイル画像は、チャートの＜ページn表示＞で設定すれば表示されます。
サムネイル画像もできましたら、PreviewMenuの修正です。
画像枚数によって、使用するPreviewMenu（lpmファイル）が異なります。
20枚を越えてるようならば、1ページ目は2ページに進むためのボタンが、最終ページは前に戻るためのボタンだけがいることになります。
下記のPreviewMenuの画面は、3ページあるうちの2ページ目のものです。
下のアイコンが、二つ（1ページと2ページに進むためのもの）あるのがわかると思います。
CG枚数が20以下ならばページ切り替えは必要ないので、移動用ボタンは削除してかまいません。
また、最終ページが20枚に満たない場合は、画像のない部分のボタン設定を削除しておきましょう。
わたしの作った例では、画像がない部分がほとんどですが、わざと削除しておりません。
なので何もないところをクリックしたら、「何もない画像」が表示され、クリック待ちをします。
実際ではかなりみっともないので、使っていない部分は削除しておくことをお勧めします。
☆おまけ「PreviewMenuの簡単な使い方」
はじめてPreviewMenuを開いたとき、「こんなのわかるかい！」と独りでツッコんだのを覚えています。
今でもワケのわからないパラメータがあったりして、奥の深さにガックリきたりもしています。
というわけで、最低限の設定方法を解説してみようと思います。
お役に立つか怪しいものですが、参考にでもなれば幸いです。
なお、完全初心者コースなので、使い方を知っている方は飛ばしてください。
○PreviewMenu
PreviewMenuを立ち上げましたら、まずボタンを設置する場所を把握するために「背景画像」を呼び出しましょう。
上記の画面、青字の「1」のところで設定できます。
この背景画像は、あくまで画面の雰囲気をつかむものですから、lpmファイルにしても実際は表示されません。
次にボタンを作ります。
左上のほうに、「追加」と「削除」がありますので、「追加」を押してください。
すると画像を選択するダイアログがでますので、マウスのイン-アウトに関わらず「常に表示される画像」を選んでください。
わたしのやり方ですと、マウスインしたときの画像と同じ大きさの「透明画像」を作っておき、それを選択しています。
上記の画面で言うと、青字で「2」と書かれた場所の画像になります。
画像を決めると、プレビューの左上に枠が表示されます。
これをドラッグして、ボタンを置きたい場所でドロップしましょう。
上記画面では、ページを進めるための「右ボタン」を設定しているところなので、アイコンの上に置いてあります。
最後に、マウスがボタンに触れたときの画像を設定します。
青字の「3」番にあたるパラメータです。
これでボタンの設定は終わりです。
あとは選択肢の数だけ「追加」作業を繰り返せば終了です。
追記しておきますと、わたしは「マウスインのときだけ、専用画像を表示させる」という方法を使っています。
逆にいうと、マウスインしたとき以外は透明画像を表示させ、背景を透かしています。
こうすると、マウスアウト時の画像などを設定しなくてすむので、今回のようにボタンを多くつける場合はちょっとだけ楽になります。
と、やはりなんとなくわかりづらい解説をしたような気もしますが、みなさん、プロジェクトファイルを開いていろいろいじくってみてください。
実際に触ってみることが何より上達への早道だと思いますので、がんばってみてください。
それでは今回も長々とありがとうございました！
ホームへ戻る