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

立ち絵

半裸+温泉+湯気 = 全裸

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

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





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

ゼロから学ぶ、HowTo立ち絵

こんばんわ!


やっとこさ、腰が人並みに戻りつつある 
ngs_projectです。
※ココまで戻るのに二ヶ月かかりました・・・


さて皆様、急にあなたが
「ノベルゲームの立ち絵をいい感じに表示しといて」 
と言われたらどうしますか? 

検索するにしても、絵の描き方などは、
ネットを検索すれば、いくらか情報を拾うことは出来ますが、
「こう、立ち絵を表示するとゲーム的にいいよ!!」
なんてものは、目にする機会が少ないかと思います。
※そもそも調べようと思わない

そこで今回からは、イケメン千秋楽もなんやかんやで結構な期間をかけて
細々と作り続けているので 、培ってきたノウハウ的なものを
小出しして行きたいと思います。

というわけで、今回はその第一弾である
「立ち絵の出し方」について説明していきます。



まずはコチラをご覧ください。
現在ふりーむ!様で公開中
「イケメン千秋楽~4月・5月編~」から抜粋したシーンです。





●1コマ目
b00


●2コマ目
b01


●3コマ目
b02


●4コマ目
b03


去年に立ち絵を指定していたタイミングでは
何の違和感も感じていなかったのですが、
最近のタイミングで改めて見返してみると

「んんっ!?なんだこれっ!?」
 となったシーンがありました。
※キャプチャー時にミスってマウスカーソルが写ってるのが気になる・・・



2コマ目のこのシーンです。
b01

「思わずぎゅっと目を瞑り~~~~~~~~~」

とテキストに書いてありますね。

このとき、テキストの視点にもなっている主人公は
「目を瞑って、身を強張らせて」いるんです。


でも、この画面だけで判断した場合、
「どう見ても目を閉じているようには見えません」



ノベルゲームの演出は、
・テキストだけでは伝わりづらかったり
・テキストをより効果的に魅せるため

にあると思うので、
上記の立ち絵の指定パターンはNGといえます!






そこで、ものすごく安い方法で改善してみたのが
以下のパターンです。
※開発用の画面なのでIDとか表示されてますが、そこはスルーしてください


●1コメ目はまったく同じ
a00



●2コメ目で暗転させてキャラを消すことで
「目を瞑っている感」を表現
a01


●3コマ目
a02


●4コマ目
a03



どうでしょうか。

ただ暗転を挟んだだけですが、それだけでも
最初の例より、「目を瞑った感」が表現できているかと思います。


今回はシンプルなわかりやすい例でしたが、
このような、「なんとも伝えにくい、演出の積み重ね」
遊んだときの満足度に繋がるんじゃないかなーと信じて
今日もイケセンを制作しています。



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


キレイな顔してるだろ?分割してるんだぜこれ

こんばんわ!
ngs_projectです。



今日は立ち絵の話です!



 sori


なんてことない普通の立ち絵ですが
実はこの立ち絵、複数の画像を重ねて表示しています。


sori_body
こんなのっぺらぼう反之宮


sori_face1
顔だけ反之宮を足すことで




sori

いつもの反之宮になってます。
昔は別のやり方でやってました。



バグ画像とかで、顔や髪のパーツだけ
変なところに表示されるのをたまに見かけますが
あれの原因は、このように複数の画像を組み合わせて
キャラクターを表現しているせいじゃないかなと思います。
※あくまでも予測です。




そもそもなぜ体と顔の画像を別々にしてから
くっつけるという面倒な手間を踏んでいるのでしょうか?





それの一番大きい理由が




ゲームのロード時間と処理が早くなるからです。






例えば、体と顔がくっついている方式でゲームを作ったとしましょう。
chr1

これは昔のイケメン選手楽で実際に使っていた画像です。
一枚の画像で4つの表情が入っています。

この方式で40個の表情を制作した場合
4×10で単純に40枚の画像が必要になります。

もしそれぞれの体のポーズ違いが増えて、2種類のポーズになったとしたら
さらに倍の80枚の画像が必要になります。。

登場キャラクターはそこそこいるので
最終的には80枚×登場キャラクター数になります。

莫大です。半端無い数です。
画像の管理も大変です。



でもこの画像から体と顔を分離することで・・・


plus


少なくて2枚の画像で表現可能になります。
さっきは80枚必要といってたので
極端な例だと40倍ぐらいの差があるわけです。


こうすることでロード時間を極力少なくできるのです。



やっぱりロード時間はなるべく減らしたいですからね!
ゲーム中の無駄時間の中でも

・起動した瞬間のたくさん出る企業ロゴ(しかもスキップ不可)
・NowLoading画面を代表とするロード時間

これら二つは遊んでる側に何の刺激もあたえてくれないので
なるべくイケメン千秋楽では撲滅しようとしています。


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

今更このタイミングで紹介!?主人公編

こんばんは!
ngs_projetです!

皆さん3連休も終了間近ですが
如何がお過ごし でしょうか?
ちなみに、ブログ担当は残念ながらほぼ仕事でした。・・・ 
悲しいですがこれが現実なんですね。



さてさて、今回はこのゲームの主人公である
有栖川 恋詠の紹介をしたいと思います。


すごく今更感がありますがご容赦ください・・・。



 arisu
まさかの一番最後に主人公の立ち絵が出来ちゃいました。
本編が出る前に、番外編がでたりと
相変わらず作る順番がおかしい当サークルです。


主人公の性格やら設定の話はいずれ
テキスト担当が詳しく書くと思うので 、そのときまでお待ちを・・・。



主人公である、有栖川恋詠は
イケメン千秋楽の舞台となっている高校「八掛宵高校」
理事長と親戚関係にあたるのですが・・・。


rizi
なんということでしょう。


開発一同全く意識していなかったのに、
胸元に手を持ってくるというポーズが完全に一致してしまいました。

制作の際に、特に示し合わせたわけでもないのに、
こういった共通項ができちゃうのは面白いですね!

本当イケメン千秋楽は不思議なゲームです。



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

相撲部。つまり部活。つまり他校。つまりライバル その2の2

------------------------------------------------------------
●最新イベント告知情報

【コミティア110】
こちらからどうぞ

【2014冬コミ】
本編の制作を進めるため不参加です
------------------------------------------------------------


こんばんは!ngs_projectです。


さて、先週の続きです。
ライバルキャラクターの紹介その②、すなわち反之宮(兄)の紹介です。

ちなみに、今回はいつものブログ担当ではなく、
グラフィック担当が記事を書いています!
前回の記事はこちら 



まわしが和同開珎でできている!



それだけは決まりましたが、
さて、他にどんな味付けをしたものか?

悩んでいるとシナリオ担当が兄貴の
登場シーンのテキストを投げつけてきました。


これは僥倖!兄貴ってどんな人なの?
とテキストを読み始めたグラフィッカーズですが、
いきなり、とんでもない描写を目にすることになります。


紅の長い髪に、褐色の肌をした男の人」


………赤毛の長髪!!?褐色!!?!?!?
そして和同開珎のまわし!!!!!

こんなキャラクター指定今まで聞いたことがありません。
いやあの。ほんとに。 
※ブログ担当からの注釈
 「赤毛で褐色の和同開珎感のあるセフィロス」というオーダーで書いてもらいました。




困りながらも時間がないので
「赤毛の長髪」「褐色肌」「和同開珎」をキーワードにラフを描き始めました。

とにかく兄は弟より優れていなくてはならない…というコンセプトを思い返して、
資料として横に反之宮(弟)を並べ…ん?



ani_01

反之宮(弟)…持ってるやんけ……




どうしましょう!?

兄は弟より優れていなくてはならないから、
当然、何か持っていなくては示しがつかないはずです!

きっとそうです!!


 
和同開珎も「なんかスゴそう」とかいう
謎の理論で決まったので、その理屈で(?)
なんかスゴそうなものを持たせなくてはなりません!
 

パッと思いついた、スゴそうなものを持たせてみましたが、
描けば描くほど不思議な造形になる、反之宮(兄)に内心怯えつつ、
文字通りの「こうですかわかりません!!!」ラフを
ngs_projectメンバーにお披露目しました。




ani_02
 
赤毛長髪褐色和同開珎まわしな
優れた兄ってこうですかわかりません!!!



…これが爆笑を呼び、一発OK。
勢いで持たせた謎の巻物に、
シナリオ担当がどんな描写やエピソードをねじ込んで来るのか、
グラフィッカー一同楽しみにしています(無茶振り)。





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



さて、反之宮(兄)のラフにOKが出ましたので、
本格的に作画を始めていきます。
 
ラフを整え、サクサクと清書していきます。
何気に、制作期間自体は結構長いイケメン千秋楽ですので、
作業工程自体は慣れたもの…

…だったのですが。



和同開珎まわしを真面目に描き始めてふと気が付きました。

 
このまわし……




ani_03
すごく描くの面倒くさい!!!!



この面倒くさがりめ!という問題ではありません。

物量勝負のノベルゲームで、
かつ全員本業持ちで、作業時間の確保が難しいイケセンスタッフにとって、
作業コストを下げるのはとっても大事なことなのです。


以前シーン編集を楽に行うための、自作ツールを紹介しましたが、
それはグラフィックにおいても同じことです。

(そもそもイケメン千秋楽のキャラクターが、こんなにも服を着てないのも
 服を描かなくていいから楽だよね☆
 みたいな理由もあったような…おっと誰か来たようだ)




どうにかして和同開珎を楽に描く方法はないものだろうか?

普通に考えられるのはブラシを使う方法です。


さっそく和同開珎のフリーブラシを求めて
検索しましたが、まあ、あるわけなかったですよね……
 
…うん…普通のグラフィッカーは
和同開珎を楽に描く方法で悩まないよね………orz
 
 
しょうがない!
自作するしかない!!


というわけで意気揚々と
和同開珎のブラシを作ってみました。


 
 
数十分後、和同開珎ブラシ完成。
兄貴のまわしに向かって筆を走らせます!

ani_04
そぉい!




ani_05

てぇい!!




……

 
うん、だめだこりゃ。



残念ながら、
和同開珎を体のラインや、回り込みの角度に合うように描画するのは
ブラシ設定をいじるだけでは難しい。と言わざるを得ない感じでした。


 
そもそも和同開珎って普通、
面が見えるように横に連ねるような形状してない
よね…(遠い目)

 
でも「和同開珎」って書いてある面を並べないと和同開珎感出ないし…

かと言って和同開珎をビッシリ均等に並べただけでは
何か気味の悪いまわしになりそうだし…
 
ani_06

※和同開珎をビッシリ均等に並べた気味の悪いまわし




結局ブラシを投げ打ち、一個一個お手製の和同開珎を描画するという
アナログな方法で兄貴の和同開珎まわしが誕生しました。


ani_07
 
(集中線つけると意味不明に面白いのなんでなんでしょうね…)


ひとつひとつ手作業で描くことでなんというか…
書き込み具合は自在だし、古銭の温かみみたいなものが出るよね!!!orz


作業コストを下げるとはなんだったのか!
グラフィッカーズの今後の健闘にご期待ください。



---

 

さて…悲しいことに役立たなかったこちらの和同開珎ブラシですが、
現在CLIP STUDIOでダウンロードできるようになっています。


これ以後、和同開珎ブラシが欲しくなった皆様は
検索結果が0件で落ち込むことはありません。



羨ましい限りです。





~使用例~

ani_使用例1

思い出の風景に和銅開珎を添えて






ani_使用例2

かわいいペットの写真にすかさず和同開珎






ani_使用例3

自作ゲームのスチルに「なんだかスゴそう」な効果が欲しい時にも和同開珎






ani_使用例4

可愛い女の子にはやっぱり和同開珎が似合うね


あなたの暮らしに和同開珎を……





サークル最新情報まとめ

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

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


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



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

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