このブログでは、個人が趣味で制作しているオリジナル乙女ゲームについて 制作日誌を綴っています!週1で更新中です。
公式サイト pixivはこちら! 自作乙女ゲーsearch様   Wing search様

プログラム制作

フェードインとアウトのステキな関係~4種の実例を添えて~

こんばんわ!
ngs_projectです。


恥ずかしながら、このブログではたまに
ゲームのシステム的な内容について真面目に語ってます。
ボタンだったり、カメラだったり…


久々の今回はイケメン千秋楽で用いている
フェード処理について説明したいと思います。
久々に真面目です!






さて、ゲームでのフェードといえば
こんな黒い板が画面を覆うことがほとんどです。


fade1_2

真っ黒



静止画だとびっくりするほどただの黒い板ですが
イケメン千秋楽では、この板で大きく2通りの使い方をしています。
※こういう話するとき、毎回2通りな気がする…




①シーンやゲームフロー等が切り替わるときの目隠し

例えばタイトル画面から、ノベルパートに遷移する際等で使います。

普段遊んでると、ほとんど意識しませんが、
遷移時のフェードがあるとないとでは、ゲームを遊んだときの印象は
全くの別物といって良いくらい違います。

【タイトル画面でのフェード例】
fade_t_1
fade_t_2
fade_t_3
fade1_2
よく見る割に意識しないやつ





②テキスト上の演出として

今回、ソルトメモリア編を作って感じたのは
この、演出としてのフェード処理が超超超重要だということです。

重要というよりも、めちゃくちゃ使いやすい?
といった表現のほうが適切かもしれませんが、
とにもかくにも、テキスト演出としてのフェード処理をかなり多用しました。



●フェード例1 背景だけのフェード
下の画像の用に、テキスト枠などのUIの表示は残しつつ
背景面だけをフェードさせた例です。

bg_black
視点キャラクターの心情が、自身の内面に向いていて、
どちらかというとネガティブな感情の時に使っています。

通常の実写加工背景から、急に黒背景に切り替えることで
「画面を見ただけで、キャラクターが内方向に考えを巡らせていること」
表現しようとしています。


bg_white
白背景の場合は、黒背景とは逆に
「どちらかというとポジティブな考えを巡らせているとき」
の演出として使っています。


たったこれだけのシンプルな演出ですが
ゲームとして遊んだときに、結構それっぽく感じられるのではないでしょうか。





●フェード例2 画面全体のフェード

UI面も含めて、画面のすべてをフェードで
覆い隠してしまうパターンです。

fade1_0
fade1_1
fade1_2

イケメン千秋楽では、回想シーンのような
「時系列を跨ぐ演出として」
この画面全体を覆うフェードを使っています。

これは感覚的なものなんですが
UI面までフェードで隠すことで
「今から別の場所にいきますよー」感
強く出る気がするんですよね。
※言葉にしづらい





 ●フェード例3 画面全体のスライドフェード

画面全体を覆うけど、
横からササッとスライドしてくるフェードです。

一つ前の例とパット見、非常に似てますが
用途はかなり違います。

fade2_1
fade2_2
fade2_3
fade2_4

イケメン千秋楽では
「場所移動や時間経過する演出」として
このスライドしてくるフェードを使っています。 

一つ前で説明している、画面全体を覆うフェードとは
黒い板がスライドしてくるかどうかの差しかありません。

それだけの差しか無いにもかかわらず、
 「場所や時間といった状況的な何かが動いた感」
全然違ってきます。

本当、人の感覚って不思議ですよね。




 ●フェード例4 アニメーションを使ったフェード


大きい軍配の絵が画面をさっと隠す、
ソルトメモリア編で新しく作成したフェード方法です。

fade3_1
fade3_2
fade3_3
fade3_4

このフェード方法を使うときは
「シナリオの流れが、ここで切り替わりましたよ!」
という非常に説明的な使い方をしています。

逆に、このフェード方法を使うと
強制的にシナリオの流れを遮ってしまうので、
シナリオに集中させたい状況では使っていません。

※ちなみにこのフェード処理ができたのは12/27です…。
いやぁーギリギリでしたねー。(C89ではイケセンは12/30に頒布)





さて、今回はフェードについての久々に真面目な記事でした。

フェードもまた、遊んでるとあまり意識しない部分ですが
「実はこういうルールで作っているんですよ。」
というのは、他にもちらほらあったりします。

こういうブログ等で時折、製作を振り返らないと
作っている側もルールを忘れてしまいそうになるので
これからも定期的にまとめていけたらなと思います。

それでは来週もよろしくお願いします!

半裸+温泉+湯気 = 全裸

こんばんは!
お久しぶりです、ngs_projectです。


最近、更新が滞っていて久々の更新になってしまいました。

便りが無いのは良い知らせと昔から言いますが
真面目にイケセンを作っていた事もあって、
ちょっとブログまで手が回っていなかったのが正直なところです。
楽しみにしてくれていた方々、お待たせしてしまい申し訳ありませんでした。


今日は久々なので色々とてんこ盛りの内容です。


yuge0


いきなりですが、まずはこの画像を見てください。
本編のとあるタイミングでお風呂場のシーンがあるんですよね。

一般的なゲームなら半裸なキャラクターが見れて
ちょっとキャッキャウフフできるポイントですが、
幸い(?)イケメン千秋楽では日常的に半裸なので、
何の違和感も無く、お風呂場のシーンが作成可能です。


ただ、いくら日常的に半裸とはいっても
流石にそのままの格好でお風呂に入るのはまずいです!
色んな所から怒りの連絡が飛んでくること間違いなしなので、
何とか誤魔化せないかなーと試行錯誤してみました。


yuge8

まず試してみたのは、単純にキャラの位置を下げるという方法です。

う・・・うーん、なんだろう・・・、これは・・・。
お風呂に入ってるというよりも「お風呂に入っていることにしておいてね」
という感覚がすごいですね。
とっても制作者都合を感じる手法なので、この方法は却下しました。





yuge1

色々と考えた結果、やっぱりこの画像の赤い線で囲った場所辺りに、
白いモヤがあるのが一番しっくりきそうです。

あれです、あれ。深夜アニメでブルーレイになった途端に消える白いモヤです。


というわけで試しに作ってもらったのが
下の画像です。


yuge2

モヤ多すぎぃっ!

イケメン千秋楽ではUnityというエンジンでゲームを作っていますが、
グラフィッカーが日常的に使っているフォトショップ等のソフトとでは
色々と差異があるため、一発目ではちょっとモヤが強すぎました。

これではもはやドライアイス温泉です。

というわけで、調整してもらったのが下の画像です。


yuge3


完全に全裸

いつもの立ち絵と全く一緒ですが
非常に怪しげな白いモヤを足すことで、どうみても全裸に見えます。
すごい・・・すごいよ、白いモヤの力・・・。
深夜アニメでこの演出が多様されるのも納得です。
※モヤの有無で右端の結城君の表情が違った意味で受け取れそうなのが怖いところです。


yuge4

UIが付くとさらに自然に。
どうみてもコレはお風呂に入る全裸の若者達ですね。





画像だと分かりづらいので、動画にしてみました。
何気に湯気が立ち昇っているのがお分かりいただけるでしょうか?



湯気の立ち上りはUnityで以下の
プログラムを作って操作しています。


以下からいきなりめちゃくちゃ真面目な内容になるので
記事内での温度差が半端無いことになってますが
プログラムって何なの?って人がほとんどだと思うので
そういう人はササっとすっ飛ばしちゃってください。
using UnityEngine;
using System.Collections;

// 単方向のUVアニメーションをサポートする. // ChangeSpdSecMin~ChangeSpdSecMax秒につき、.
// UVアニメーションの速度をSpeedMin~SpeedMaxの範囲で変える. public class EffectSteam : MonoBehaviour { // 湯気の方向. public enum Direction { Up, Down, Left, Right, } // 方向 public Direction SteamDir = Direction.Up; // 最低UV速度. public float SpeedMin = 0.0001f; // 最高UV速度. public float SpeedMax = 0.0005f; // 速度切り替える最低秒数. public float ChangeSpdSecMin = 1.0f; // 速度切り替える最高秒数. public float ChangeSpdSecMax = 3.0f; // UV速度. private float mUVSpeed; // 速度切り替える用の秒数. private float mChangeSec; // タイマー. private float mTimer; // 操作対象のマテリアル. private Material mTargetMat; // ------------------------------------------------------- // Use this for initialization // ------------------------------------------------------- void Start () { mTargetMat = renderer.material; changeRandomSpeed(); } // ------------------------------------------------------- // Update is called once per frame // ------------------------------------------------------- void Update () { if( mTargetMat == null ) { return; } // 方向分ずらす. Vector2 ofs = mTargetMat.mainTextureOffset; switch( SteamDir ) { case Direction.Up: ofs.y -= mUVSpeed * Time.deltaTime; break; case Direction.Down: ofs.y += mUVSpeed * Time.deltaTime; break; case Direction.Left: ofs.x -= mUVSpeed * Time.deltaTime; break; case Direction.Right: ofs.x += mUVSpeed * Time.deltaTime; break; } // 念のため0.0f~1.0fの間に収める. if( ofs.x > 1.0f ) { ofs.x -= 1.0f; } else if( ofs.x < 0.0f ) { ofs.x += 1.0f; } if( ofs.y > 1.0f ) { ofs.y -= 1.0f; } else if( ofs.y < 0.0f ) { ofs.y += 1.0f; } mTargetMat.mainTextureOffset = ofs; // タイマー更新. mTimer += Time.deltaTime; if( mTimer > mChangeSec){ mTimer -= mChangeSec; changeRandomSpeed(); } }
private void changeRandomSpeed() { mUVSpeed = Random.Range( SpeedMin, SpeedMax ); mChangeSec = Random.Range( ChangeSpdSecMin, ChangeSpdSecMax ); } }


こんなプログラムを書くことで、立ち昇る湯気を表現することができました。
めでたしめでたし。



【おまけ】

yuge5
うっかりタイトル画面に湯気を出してしまいました。
いかがわしいゲームに早変わりです。



yuge6

どんな場面でも呼び出せるので、いつものあの場所がすぐに温泉地に。



yuge7

間違えて色のパラメータを触ると一瞬でホラーゲームに・・・。





というわけで、今日もイケメン千秋楽は冬コミに向けて絶賛制作中です。
それでは来週もよろしくお願いします!

選択の心構えをそれとなく教えてくれ

こんばんわ。
ngs_projectです!


今日はイケメン千秋楽の「選択肢」の話をします。




実は「選択肢」の仕組み自体は、体験版の段階で既に出来ていたんです。 
他の部分がいろいろと間に合わなくて、 実装は断念しましたが・・・。


で、その時の状態としては 



こんな画面が文字通り「パッ」と出てきて
select
 ※ネタバレ防止用にテキストの中身を変えています


どれかを選んだら、これまた「パッ」と消える
select1
 

シンプルな実装でした。




早速、この状態でゲームを作りながらも遊んでいたのですが・・・。 





ブログ担当は、ちょうど画面中央当たりをクリックして
テキストを送ることが多いのです。 


すると、どういうことでしょう?


恐ろしいほど誤爆します。




クリックを連打しているので、いきなり「パッ」とでてこられても
もう次の瞬間では、ちょうど押しちゃってるんですよね。 







作ってる張本人がこれでは、話にならん・・・。
ということで、そもそも何が問題なのかを一旦整理しました。







●問題その1 ~いきなり表示されても反応できない~

やっぱり、いきなり「パッ」とでてくるのがしんどいです。
不意打ち的なものなんで、対応できません。


この問題への対処には
横から、さっとでてくるアニメーションを入れて対応しました
select2
※ 超途中状態でキャプチャーしたので変な画像になってます







●問題その2 ~それでも連打してしまう人間の性~

「横からスライドインで表示しても、それでも連打しちゃいます」
やっぱり人間なんでしょうがないです。それでも連打しちゃうんです。不思議です。

この問題の対処として
「表示完了後、0.5秒ほどボタンの入力を無効に」してます。

連打しても、ボタンが無効扱いなんで、押したくても押せません。
0.5秒ぐらいなら、テンポも崩さないし許容範囲!

と思うことにしました。
これらで、ほぼほぼのうっかり誤操作は防止できるのでは?と思います。
 





 ●問題その3 ~あれ?何を選んだっけ?~

「ちゃんと自分で見て決めたはずなのに、何の選択肢を選んだか忘れてしまう」
数秒前の自分の行動すら、人間は忘れてしまうものです。本当です。
作ってる途中に何度もなりましたからね。

この問題の対処として
「決定した選択肢だけをちょっと残して、他のを非表示にする」アニメーションで対応してます。

select3
※選択肢1を選んだ場合。またしても、途中状態でキャプチャーしました。






画像だけでアニメーションを説明するのは無理があるので
ここまでのまとめを動画にしました。




まだまだ、改良はしていきますが
今日のところはこんな感じです。
少しでも遊びやすくなったら嬉しいです。


それではまた来週! 

それはキモチよくなるためのいくつかの方法の一つ

こんばんは。
ngs_projectです!


いつもご覧の皆様、初めて訪問してくださった皆様、 
各地でイケメン千秋楽を話題にしていただきありがとうございます。

このゲームは同人活動の一環で細々と作っているものなので、
いつも見ているサイト様で、「イケメン千秋楽」の単語を目にしたときは
心の底から驚きました。ご紹介していただき誠にありがとうございます。


同人活動ゆえ、本編のリリース時期についてお約束することはできませんが
今後も一層、気を引き締めて制作を続けていきます。



-------------------------------------------------------------


それでは、いつもの流れに戻らせていただきます。


最近は真面目にゲームの解説をしたい、
そんな気持ちが強まっているブログ担当です。

そこで今回は、
「ゲームを遊んだときにチョットだけキモチいい気がする!?」
方法について説明します。


その記念すべき第1回はカメラです。

まずはみなさん、
下の動画をご覧ください。



この動画の2秒付近
一瞬、画面が「ビクッ!」っとなっているのがお分かりでしょうか?

このような、勢いやインパクト的なものの表現手法として
良く使われるのがカメラです。


このカメラの動きは、高速にズームイン→ズームアウトをすることで
「ビクッ!」感を表しています。


それでは、実際にUnityの画面を使って見ていきます。

camSetting1
赤線が引いてあるSizeという項目を見てください。
この値がイケメン千秋楽でのカメラのズーム度合いを表しています。
※詳細を知りたい方は「透視投影 平行投影」などでGoogleで検索すると良いでしょう




このように、Size値を下げると、ズームインになります。
camSetting2

ズームインしたことにより、キャラクターが見切れていることが分かると思います。


逆にSize値を上げると?
camSetting3

ズームアウトになります。
背景がテキストウィンドウより内側にきてしまっていますね。



このSizeを時間軸に沿って高速に操作することで動画のような表現が可能です。
camScale
Size値(黄色い線)を0.03秒かけて操作する図



このように
「一瞬の勢いを表す」方法として使うのが
ズームイン、アウトを高速で行う方法です。









それでは別の例をみていきましょう。
またまた下の動画をご覧ください。



この動画の1秒付近、最初の動画よりも、
画面が動く幅と時間が長かったと思います。

カメラを使うことで、このような「グラグラ感」表現できます。


「グラグラ感」を出すにはカメラの位置を動かします。
非常にシンプルですね。

それでは、下の画像をご覧ください。
posDefault
赤枠内のyという項目、これがカメラの位置になります。


yの値を上げていくと?
posDown
テキストウィンドウの位置は変わらず、
キャラクターと背景がそのまま下がっていますね。


逆にyの値を下げていくと?
posUp
さきほどの間逆、背景やキャラクターは上方向に見切れてしまいました。


このの値を時間軸に沿って動かすことで「グラグラ感」を表しています。
camPos
※緑色の線がy値です。0.25秒かけて動かしていますね。
インパクトのときは0.03秒だったので、大体8倍の長さです。


このように、カメラの色々なパラメータを操作することで
多くの表現が可能になります。


ただ今回、説明した方法はあくまでも一例です。

ここら辺は「ソレっぽく見えれば正解は無い」と思うので、
ゲームにあった形になっていれば、どんな方法で実現しても良いのではないでしょうか。



それでは本日はこんなところで!
また来週もよろしくお願いします。

さぁ、ゲーム最高のボタンを決めようじゃないか

こんばんわ!
ngs_projectです。


今日はボタンの話をします!
もちろん、服のボタンじゃなくてゲームのボタンです。


こういうボタンのことです↓

btn1





スマホ全盛のこの時代、
みなさん何も意識することなく
タッチ操作でボタンを入力していると思います。

しかし、お気づきでしょうか?
この世の中の全てのボタンは2種類に分けられるということを・・・。

 



その種類とは・・・。




・押した瞬間に決定するボタン
・離した瞬間に決定するボタンです。 




そう、見た目とかではなく、
判定の仕方で二つに分けることができます。





●押した瞬間に決定するボタンは、
「文字通り押した瞬間に決定する」のでテンポがいいです。
サクサク動く感覚を与えることができます。

一方で、やり直しできないという強烈なデメリットもあります。

スマホで文字入力する際に
「やべっ!この文字じゃなかったっ!!
指を離さずそのままずらして・・・、セーフ!!」


という入力をやったことある人も多いんじゃないでしょうか。
スマホの文字入力であれができるのは次に説明する
「離した瞬間に決定するボタン」だからです。




●離した瞬間に決定するボタンは、
上でも少し触れていますが「やり直しできる」のが最大の強みです。
「このボタン押すはずじゃなかったのに、間違えて押しちゃったっ!」
って時でもだいたいなんとかなります。

一方で、指を離した瞬間に成立するので、若干テンポが遅れるのがデメリットです。
そこらへんはケースバイケースってやつですね。



それではイケメン千秋楽の実例でみていきます。





btn3



例えばこの「タイトル画面にもどる」ボタンで
「押した瞬間に決定するボタン」だった場合どうなるでしょう?

ゲームにおいて、タイトルに戻るというのはリセットと同義です。
もし、遊んでる人がそんなつもりもないのに、
「誤ってこのボタンを押した場合、かなりの精神的ダメージ」を被るはずです。
このボタンを「離した瞬間に決定するボタン」にすることで、万が一操作ミスをしても
最後の砦として誤操作を防ぐことできます。そのまま指をずらせばいいですからね。


というわけでこのような、「誤った場合にユーザーダメージが大きい」所では
「離した瞬間に決定するボタン」がオススメです。






btn2


一方で、このなんてことない会話ウィンドウ。
右下のテキストの文字送りアイコンも、クリックで次に進むので
一種のボタンと捉えることができます。


ノベルゲームなのでテキスト送りは極力サクサク動かしたい
(=遊んでいる人の意思をなるべく迅速に反映させたい)ところです。

上記の理由からここでは
「押した瞬間に決定するボタン」を使っています。

離した瞬間ではなく、押した瞬間にゲームが反応するというのは
文字で書くよりも思った以上に差が大きいんです。

また、万が一誤って操作したとしても
バックログなどから直前の状態を確認できるのも
大きい理由のひとつです。

「間違ってもカバーできる方法がある」場合は
「押した瞬間に決定するボタン」が向いているんじゃないでしょうか?












さて、今日はものすごくマニアックなボタンの話をしました。
普通にゲームを遊んでいると、こういった細かいところは気付かないですよね。

製作者の方々がどういう気持ちで作っているのか?
その答えは細部から伝わってくる、そんな気がする今日この頃です。

 

それではまた来週もよろしくおねがいします!
サークル最新情報まとめ

●イケメン千秋楽公式サイト
http://ngsprojectsite.weebly.com

●C85お品書き
「イケメン千秋楽番外編~雅先輩の恋愛事情~」
お求めの際はこちらからどうぞ!


※BOOTH内のページへジャンプします。
※pixivへのログインが必要です。



●感想お待ちしてます!
ご意見・ご感想はこちら!

●不具合がある場合は・・・
不具合報告はこちら!
Pixiv