STEP+1 顔グラフィックの表示 の変更点


 ----
 &size(14){&color(#cc5500){この''「STEP+」''は本編の''「STEP1~STEP20」''とは独立した単体の機能説明や制作手順説明になります。};};
 &size(14){&color(#cc5500){本編の''「STEP1~STEP20」''での学習後、より多くの機能等を学びたい際に御覧ください。};};
 ----
 #br
 キャラクターの台詞などを表示する際にキャラクターの''顔グラフィック''を表示したい場合があります。
 もちろん''「イベントコマンド ピクチャ」''を使用すれば、画像を表示できるので、こちらを使用するのもいいのですが、''「イベントコマンド 文章の表示」''の機能として''顔グラフィック''を表示するものがありますので、今回はこちらを使用して''顔グラフィック''を表示してみます。
 #br
 ----
 &color(green){&size(12){''【INDEX】''};};
 #contents
 ----
 #br
 *&size(16){顔グラフィック画像の準備}; [#q0f1d2a0]
 まずは、''顔グラフィック''の画像を用意する必要があります。
 ''「基本システム」''を使用した場合は表示位置や表示の仕方が固定なので、ある程度の規格が考えられます。
 -''「ゲーム画面サイズ320×240」''の場合:画像サイズが80×80程度
 -''「ゲーム画面サイズ640×480」''の場合:画像サイズが160×160程度
 
 この規格はあくまでも平均的な目安で、''顔グラフィック''が表示される''「メッセージウィンドウ」''に収まりのいいサイズとなります。このサイズより大きくても小さくても、表示自体には問題ありません。
 #br
 さて、今回使用する''顔グラフィック''の画像は、[[''「画像素材まとめ - WOLF RPGエディターWiki」'':http://www.silversecond.com/WolfEditorWiki/?%B2%E8%C1%FC%C1%C7%BA%E0%A4%DE%A4%C8%A4%E1]]より''「たぴす さん」''が公開されている素材を使用させていただきます。
 さて、今回使用する''顔グラフィック''の画像は、[[''「画像素材まとめ - WOLF RPGエディターWiki」'':http://silsec.sakura.ne.jp/WolfRPGEditor/WolfEditorWiki/?%B2%E8%C1%FC%C1%C7%BA%E0%A4%DE%A4%C8%A4%E1#s444fc1f]]より''「たぴす さん」''が公開されている素材を使用させていただきます。
 #br
 さっそく素材をダウンロードして、使いたい画像3枚を選んでみました。ステップアップの本編(STEP1~20)で制作したゲームに登場する「娘」、「父」、「ニワトリ」の''顔グラフィック''の画像になります。
 |&attachref(./musume.png,nolink);|&attachref(./titi.png,nolink);|&attachref(./niwatori.png,nolink);|
 #br
 これを自分が分かりやすいファイル名に変更し、''「Dataフォルダ」''内の''「Pictureフォルダ」''にコピーします。
 ''「Dataフォルダ」''内に、新たに''顔グラフィック''用のフォルダを作成して、そこにコピーしても構いません。
 |&attachref(stepp1-001.jpg,nolink);|
 *&size(16){顔グラフィック画像の登録}; [#s543beee]
 つづいて、''「Dataフォルダ」''内のフォルダに格納した''顔グラフィック''画像を''「イベントコマンド 文章表示」''で扱うために、''顔グラフィック''画像を''「システムデータベース」''に登録しておく必要があります。
 #br
 ツールバーから''「システムデータベース」''を開きます。
 |&attachref(stepp1-002.jpg,nolink);|
 #br
 ''「システムデータベース 24:顔グラフィック名」''を選択します。
 ''データ''の0番,1番は予約されいるものですので、変更しないように注意し、空白となっている2番以降を選択し、''顔グラフィック''画像を登録していきます。
 |&attachref(stepp1-003.jpg,nolink);|
 #br
 ''ID''に''顔グラフィック''の分かりやすい名前を入力し、''顔画像ファイル''の''「File」ボタン''を押します。
 まずは「娘」の''顔グラフィック''から登録していきます。
 |&attachref(stepp1-004.jpg,nolink);|
 #br
 目的の''顔グラフィック''画像を選び、''「OK」ボタン''を押します。
 |&attachref(stepp1-005.jpg,nolink);|
 #br
 同じように「父」、「ニワトリ」も登録しました。
 登録が終わったら、''「OK」ボタン''を押して、''「システムデータベース」''を閉じます。
 |&attachref(stepp1-006.jpg,nolink);|
 *&size(16){顔グラフィックの表示}; [#o716ada2]
 ''顔グラフィック''を''「システムデータベース」''に登録し、準備ができましたので、いよいよ''「イベントコマンド 文章の表示」''を使って''顔グラフィック''を表示されます。
 #br
 キャタクターの台詞があるような適当なイベントを選びます。
 ちょうど、「娘」と「父」が会話をするイベント内容のものです。
 |&attachref(stepp1-007.jpg,nolink);|
 #br
 最初の「父」の台詞を表示する''「イベントコマンド 文章の表示」''を修正していきます。
 ''「文章の表示」''の下部に''「顔番号確認」''があります。
 これは、数値を変えることで、''「システムデータベース」''に登録した''顔グラフィック''の''「番号」''と''「名前」''を確認することができます。
 「父」の''顔グラフィック''は3番と確認できました。
 |&attachref(stepp1-008.jpg,nolink);|
 #br
 台詞が入力されている部分の一番上に''「 @3 」(半角文字)''と入力します。
 これだけで''メッセージウィンドウ''が表示されると同時に「父」の''顔グラフィック''が表示されます。
 ''「OK」ボタン''を押して、''「文章の表示」''の修正を完了させます。
 |&attachref(stepp1-009.jpg,nolink);|
 #br
 同じように「娘」の台詞部分でも「娘」の''顔グラフィック''が表示されるようにします。
 「娘」の''顔グラフィック''は2番ですので、''「 @2 」(半角文字)''と入力します。
 |&attachref(stepp1-010.jpg,nolink);|
 #br
 上のイベントには「ニワトリ」がいませんでしたので、別のイベントを選択して、「ニワトリ」の''顔グラフィック''が表示されるようにしていきます。
 |&attachref(stepp1-011.jpg,nolink);|
 #br
 「ニワトリ」の''顔グラフィック''は4番ですので、''「 @4 」(半角文字)''と入力します。
 番号が分かっていれば、いちいち''「顔番号確認」''を使って番号を確認する必要はありません。
 |&attachref(stepp1-012.jpg,nolink);|
 #br
 イベントの編集が終わったら、テストプレイで動作を確認してみましょう。
 このように''メッセージウィンドウ''の右に''顔グラフィック''が表示されました。
 |&attachref(stepp1-013.gif,nolink);|
 #br
 一つ注意としては、''「イベントコマンド 文章の表示」''を使って、''顔グラフィック''を表示することで、長い文章を表示すると文字と''顔グラフィック''が重なってしまいます。
 見やすくするためには''メッセージウィンドウ''に表示できる文字数が少なくなってしまいますので、''顔グラフィック''を表示する場合はそれを考慮して、文章を入力する必要があります。
 #br
 ちなみに''顔グラフィック''を表示するのと同じように、''「 @0 」(半角文字)''と入力すると、''メッセージウィンドウ''が表示されない状態で文章を表示することができます。
 ''「 @1 」(半角文字)''はデフォルトの表示で、''メッセージウィンドウ''が表示された状態で文章が表示されるものです。
 #br
 ----
 ----
 &color(red){''※TOPページでの説明どおり、コメント受付を停止させていただきました。''};
 ----
 - 初めまして。100×100(80×80)の画像を顔グラに設定すると何故か拡大されてボヤけてしまいます。元の100×100のまま表示するにはどうしたらいいのでしょうか(´・ω・`) -- [[Zさん]] &new{2011-04-19 (火) 21:55:04};
 - すみません、解決しました…!(´・ω・`) -- [[Zさん]] &new{2011-04-19 (火) 22:09:38};
 - はじめまして、いつもこのサイトを参考にさせていただいています。このページで例として表示させた「娘」や「父」の顔グラのように、顔の部分だけを表示するにはどうすればいいのでしょう?文章コマンドの青い枠に、素材サイトからダウンロードした顔グラがとけこまなくて困っています…。 -- [[ゆり]] &new{2011-04-30 (土) 15:57:20};
 - ゆりさん お使いの画像素材がどういう状態かわかりませんが、単純に画像の大きさを[[こちら>>#q0f1d2a0]]で示している最適な画像サイズに合わせればいいのではないかと思います。画像全体の大きさを変えたり、顔の部分だけを切り抜いたりですね。&br;画像のサイズを変更するには下記が参考になると思います。&br; [[最低限の画像講座 「画像の一部を切り抜く」>最低限の画像講座#e0af8de0]]&br; [[最低限の画像講座 「画像の大きさを変える2」>最低限の画像講座#ld7bb493]]&br;また、画像の加工については画像素材を配布しているサイトの利用規約をご確認の上作業してください。 -- [[管理人]] &new{2011-04-30 (土) 18:27:56};
 - 解決しました、ありがとうございました! -- [[ゆり]] &new{2011-05-01 (日) 18:30:42};
 - 顔グラを文章左に配置できないでしょうか?わかる方、お願いします!おしえてください!!>< -- [[村雨]] &new{2011-05-02 (月) 00:13:50};
 - [[ぴぽ>管理人]]さんに代わって、説明いたします&br;コモンイベント44の99行目を80x座標倍率にする。&br;115行目も80x座標倍率にする。これでできると思います -- [[のと]] &new{2011-05-02 (月) 16:55:31};
 - のとさん 代わりに回答していただきありがとうございます! -- [[管理人]] &new{2011-05-02 (月) 19:11:15};
 - ああありがとうございますううう!!解決しました☆ -- [[村雨]] &new{2011-05-02 (月) 19:38:04};