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

Unity

半裸+温泉+湯気 = 全裸

こんばんは!
お久しぶりです、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です!


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

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


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



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


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


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

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


その記念すべき第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です。


最近はメインキャラ紹介の投稿が続いており
世界観の説明が多かったと思います。

今回は久々に、ゲーム処理の説明をします。



ノベルゲームを作る上で重要なわりに、
遊んでる時はほとんど意識しない要素。それはスクリプトです。



「スクリプトってなに?」というと、
スクリプトとは、テキストの内容やキャラの種類、背景やSEなどを指定して、
ゲームとして構成させるための処理
のことです。
※ノベルゲームの場合は上記の意味で使われることがほとんどです。厳密には違う意味です。

イケメン千秋楽~4月・5月編~では
全てのスクリプト処理を1人の担当が大体2週間弱で行いました。
※平日は本業後の作業なので、あまり時間を割けてません。
※サウンドは別の担当の方にお任せしています。

体験版は3~4時間程度のボリュームがあるので 
自分達で言うのもなんですが、
そこそこの速さで作れているんじゃないかなーと思ってます。



なんで結構な速度で作れるのか?
その大きな理由がツールです。 





そんなわけで今回はツールのお話をします。 






ノベルゲームの開発ではNScripter吉里吉里といったツールが有名ですが、
イケメン千秋楽ではUnityというゲームエンジンで開発をしています。

Unityは小規模~中規模ぐらいのゲームなら、
これ以上ないというくらい使いやすい素晴らしいエンジンです。
(スマホアプリなどの開発でものすごく使われていますね。)

なんといっても無料(ただし機能制限あり)で使えるのがすごい!



Unityは汎用的なゲームエンジンなので、
ノベルゲームに都合の良い、スクリプト解析機能はもちろんありません。

そこで、イケメン千秋楽では下記のようなエクセルファイルを用意し、
それを解析することでゲームの進行を作成しています。


下の画像は妻鳥5月ルートより一部抜粋したものです。

excel





こんなテキストデータの羅列がUnityを通すことで

unity_cap

こういった画面になります。


エクセルファイルでちゃんと入力できているかの確認は
Unityで実行ボタンを押すだけなので、ものの10秒程度あれば確認できます。



「10秒程度なら、このままエクセルで作ってればいいか!」

そう思っていました・・・。「4月・5月編」を作るまでは・・・。





イケメン千秋楽は部活動の描写が多いため
必然的に表示キャラクター数が多くなります。

cap1
※最大3人同時制御の図


表示キャラクターが多いということは、当たり前ですが
多くのキャラクターを制御する必要があります。

上記の画像のようなテキストベースだと
多くのキャラクターを制御する際に、必然的に「入力ミス」が多くなります。

したがって
  1. 「データ入力」
  2. 「Unityで実行」
  3. 「入力ミスを修正」
  4. 「最初に戻る」
のループを何度も繰り返すことになり、
「プログラム自体の効率は良いものの、
人為的ミスが多発することで結果的にあまり効率がよくない」

状態になっていました。悲しきことです・・・。



「4月・5月編」でこれなら、本編を作る際に
スクリプト担当(ブログ担当)が死んでしまう・・・。



という危機を回避するために作ったのが以下のツールです。


tool
※イケメン千秋楽専用、テキスト入力ツール

これの一番のポイントは

「データを入力した瞬間に、
ゲーム画面としてどう表示されるかがわかる」


この一点です。




入力直後に、大体のゲーム画面が右に表示されるので
「何度もUnityとエクセルを往復してデータを修正する」という
無駄な反復作業を、このツールでカットしています。


当サークルメンバーは7人&全員本業持ちなので
作業時間の確保が中々大変です。

そんな状況で、このゲームをなるべく早く完成させるには
単純に考えても「一人当たりの作業効率を上げる」しかありません。

今回のツール作成もその一環になります。

このように、なるべく無駄な時間をカットして
なるべく早く完成させられたら・・・と思っております!







今回は久々に、大真面目な投稿をしてしまいました・・・。

同じテイストの記事が続くと、やはり少し飽きてしまうので
たまにはこういうのもいいかなと思っているブログ担当です。



それではまた、来週も宜しくお願いします!!

 
 
サークル最新情報まとめ

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

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


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



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

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