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

プログラム制作

キミは塩の作り方を知っているか?

こんばんわ!
ngs_projectです。



突然ですが、今日は
塩の作り方を説明したいと思います。 


作り方といっても、
蒸留方法とか、レシピ的な話ではありません。 


塩エフェクトの作り方の話です。



BlogPaint

さて、まるでどこか宇宙のような画像ですが、
この画像が塩エフェクトの全てです。
(※黒い部分は透過処理されます)



この画像をプログラムでぐりぐり動かすことで

effect
 (※画像容量制限の関係で見づらくなってます)

このような、塩エフェクトの動きを実現しています。
ええ、わざわざキャプチャーしてきました。地味に大変ですよねこういうの。

※このGIF画像・・・
まさに今、記事を書いてる途中も
常時ループした状態で表示されているので、めっちゃ気が散ります・・・。




さてさて、では上記の画像から
この塩エフェクトを作るにはどうしたらいいか?
それを説明したいと思います。


●ステップ1 ~放物線に投げろ

ゲームだと放物線の動きはものすごく良く使いますね。
今回の塩の場合の動きだと

 ・最初に投げる力と角度を与える
 ・水平方向は等速直線運動で飛ぶ
 ・垂直方向は重力加速度が加算される


という動きになります。
なんだか、高校物理の授業みたいですね。


これをUnityのプログラムにすると
以下のようになります。


「プログラムとかなんのこっちゃ?」
という方がほとんどだと思いますので
そのような方はステップ2まで、飛ばしちゃってください。



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


下のプログラム、実行確認をしていないので、
多分バグってそうですが、大体あってるはずです。

// 超適当塩エフェクトクラス.
public class SaltEffect : MonoBehaviour 
{
    // 投げる力.
    public float ShootPower;
    // 投げる角度(Degree).
    public float ShootDegree;
    // 重力
    public float Gravity;

    // 速度保存用.
    private Vector3 mSpeed;

    void Start()
    {
                // 力を分解.
float speedH = ShootPower * Mathf.Cos( ShootDegree );
float speedV = ShootPower * Mathf.Sin( ShootDegree );
mSpeed.x = speedH;           
                mSpeed.y = -speedV;
    } 

    void Update()
    {
                // 垂直成分はフレームレート考慮した加速度.
mSpeed.y += Gravity * Time.deltaTime;

                // 位置更新
                transform.position += mSpeed * Time.deltaTime; 
    } 
}

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


●ステップ2 ~超小さい状態から始めろ~
動画だと多分わからないと思いますが、あの塩の画像、
最初はスケールがかかって、ものすごい小さい状態で表示されています。 

BlogPaint
※実際はこれよりももっと小さい


処理の流れとしては

 ・見えないくらい超小さい画像で表示
 ・0.3秒くらいで元の画像の大きさに引き伸ばす


ということをしています。
こうすることで、あたかも噴出しているかのような見た目になります。 



またまた、これをUnityのプログラムにすると・・・

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

// 超適当塩エフェクトクラス.
public class SaltEffect : MonoBehaviour 
{
    // 最小スケール値.
    public float MinScale;
    // 最大スケール値.
    public float MaxScale;
    // アニメーション時間.
    public float AnimationSec;

    private float mTimer;

    void Update()
    {
        // 本当は線形補間より、ease系関数つかったほうがキレイだけど面倒なので.
        float rate = Mathf.Clamp01( mTimer / AnimationSec );
        float scale = Mathf.Lerp( MinScale, MaxScale, rate );
        transform.localScale = new Vector3( scale, scale, scale );

        mTimer += Time.deltaTime;
    }
}

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


あとは適当に時間差をつけて、
これらの処理をしたたくさんの塩画像を飛ばしてあげれば、
あら簡単!?郵便ポストから塩を飛ばすことが可能です。

こうしてイケメン千秋楽の塩は作られていたのでした。

ちなみに、Unityには色々と便利な機能が備わっているので、
今回みたいにプログラムで直接書かなくても、こういった動きは表現できます。

塩以外にも色々と動きをつけたい・・・。
そんな思いを抱きつつも作業をしているngs_projectでした。

ではでは、また来週もお願いします!
 

今日から始まるギャラリーモード作り。 その2

こんばんわ!
ngs_projectです。


今日も元気に
ギャラリーモードの作り方(主にプログラム)
解説していきたいと思います。

その1はコチラ 


さて、前回お伝えしたかった内容を
ここでおさらいすると

「どんなキレイな絵でも、プログラマー視点だとただの機能の塊
ということです。



この絵が
gar3

本当にこう見える
prog_gal




機能機能っていうけど機能ってなによ?」というと、
プログラマにとっては「マウスでクリックできるかどうか?」です。
※ノベルゲームのギャラリーモードのみの話
 
 
ここまでくると、
「そんなにクリックできるかどうかが大事かあぁ!?」 
gin



と某御大将のような気持ちになってくるかと思いますが、
「そんなにクリックできるかどうかが大事」なのです。









ゲームのプログラムというのは
「○○をしたら」 → 「□□をする 」
という処理をつなげ合わせて作ることが多いです。


抽象的過ぎてピンとこないので、具体例を出すと



「セーブボタンをクリックしたら」 → 「データがセーブされる」
「スキップボタンを押したら」 → 「テキストが早送りになる」


などなどです。


 
「○○をしたら」 → 「□□をする 」
の粒度というか、処理のカテゴリーはさまざまですが、
基本的にイケセンはこのつなぎ合わせが絡み合うことで動いています。

こういったプログラムの作り方をイベント駆動型プログラミングと言います。
イベント駆動型プログラミング(イベントくどうがたプログラミング)は、起動すると共にイベントを待機し、起こったイベントに従って処理を行うプログラミングパラダイムのこと。フロー駆動型プログラミングと呼ばれる従来のプログラミングパラダイムに対する概念。「イベント駆動」は「イベントドリブン (event-driven)」とも呼ぶ。
※wikipedia --- イベント駆動型プログラミング --- より引用


・・・。


・・・。


ものすごく真面目な話になってきて、我ながら驚いています。
先週まで和同開珎や鎖の話をしていたのが嘘みたいですね。








話を戻しますと・・・、




PCのノベルゲームで、
一番頻出する「○○をしたら?」の部分は何か?
それが「クリックをしたら」 になります。

PCの場合、マウスで遊ぶ人がほとんどですからね。
自然と一番行う操作もクリックになるのです。 


つまり、ユーザーの入力を受け取る、始まりの場所として
「クリックをしたか?」が全ての鍵となるのです。


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


というわけで、今日のまとめです。
  • イケセンは「クリックをしたら」 → 「□□をする」のつなぎあわせで動いている
    tsuma



というわけで、来週は
「□□をする」の部分を解説したいと思います!!

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



 

今日から始まるギャラリーモード作り、プログラム的な考えとともに。

こんばんわ!
ngs_projectです。


今日からは、今までと流れを変えて
「ギャラリーモードが完成するまで」をお届けします。


ギャラリーモードとはいわずもがなですが
見たことのあるスチルなどが鑑賞できるモードのことです。


当たり前に世にある機能は、当たり前に作ってリリースする!
そんな気持ちで作業中のチーム一同です。




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


さてさて、そんなわけで実際に
ギャラリーモードのラフを実際に作ってもらいました。

てやっ!!


 gar3
これがギャラリーモード(予定)です。


もちろんこれはラフなので、
製品版では見た目が変わる可能性が大です。



前にキャラセレ作った時もラフが上がってましたが

277b7dd891ea47e8b618723d52b21c06

この試作版が最終的に


chara_select

こうなりました。
結構変わるもんですねー。





さっきのラフに話を戻します!


ブログ担当は、プログラム担当でもあるので、
作ってもらったラフから、どういうプログラムにするかを考えます。 


非常にざっくり説明すると、
UIを構成するプログラムは大きく分けて3つです。
  • ボタン(クリックできる何かのこと)
  • テキスト
  • テクスチャ

gar3

先ほど上げてもらった、
この色とりどりのラフ画像を
プログラマー視点でみるとこうなります。















prog_gal


自分でも作ってる途中に思いましたが

びっくりするほど、味気ない画像です。





しかし、これがプログラマーの真実。
あの華やかだったギャラリーモードのラフは
0と1で構成されている、ただの機能の塊にしか見えないのです。


プログラマー視点でみると、

パット見はただの画像やテキストでも、
クリックできるとしたら、それはボタン


なんですね。

えっ!と思われるかもしれませんが、 
スチルのサムネイル一覧があるところ。
あれも全部、画像ではなくボタンの集まりです。

スチルのサムネイルはクリックでスチルを拡大表示する仕様です。
「クリックで表示できる」ということは「プログラム的にはボタン」なのです。
※イケセンのプログラムに限る話です

パット見はただの画像ですが、
機能面から中心に考えて仕分けをする。
それがプログラマー脳なのです。

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


はいっ!
ものすごく途中ですが来週に続きます!! 

来週も宜しくお願いします。

ツール、それはイケメン千秋楽を構成する重要な要素

どうもこんばんわ!
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人&全員本業持ちなので
作業時間の確保が中々大変です。

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

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

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







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

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



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

 
 

これまでのイケメン千秋楽~技術編~

こんばんわ!ngs_projectです。

怒涛だった夏コミも終わり、
すっかり日常に戻ってくることができました。


サークルメンバーは全員、本業持ちなので、
時間の捻出が大変なのが辛いところですが、
この調子で完成まで走り続けたいと思います!



さてさて、 今日は話題を変更して

「これまでのイケメン千秋楽(技術編)」


お送りしたいと思います!








思い起こせばちょうど一年前、2013の夏コミに
「イケメン千秋楽体験版」
出展したのが全ての始まりでした。

5738985

以前の記事でも軽く触れていますが、なんとこの体験版
  • クイックセーブクイックロード無し
  • バックログ無し
  • オートモード無し
という中々、漢らしいシステムのゲームでした。


軽くココで言い訳を挟みますが、なぜそんなシステムになったかというと・・・

  「スマホアプリでだそうぜ!!」
  → 「まずはPCベースで作って、後でスマホに移植しよう」
  → 「でもPCのノベルゲームのUIって細かいから、そのままだとスマホで遊べないよね」
  → 「本当に必要最低限の機能だけ作って、後は様子見ながら足してこう!」


という 、経緯があったのです。
「スマホで出す・・・」そう思っていた次期もありますが、今はPCしか見えていません。PC最高です。


この「イケメン千秋楽体験版」では
多くの方々から感想を頂くことができました。
(本当にありがたいことです。いや本当に・・・。すごく励みになります!)






そこで一番多く頂いた意見が









システムを充実させて欲しい!








dogeza

本当にすみませんでしたあああ!!!













スマホとか言ってる場合じゃないっ!
まずは自分達の出してるハードでちゃんとしたのを作ろう!!!





そんな我々は、次の冬コミで番外編を作成するにあたり

「まずはPCで気持ちよく遊べるのを目指そう!」

と方針を変更しました。





jacket02


C85で販売したこの番外編では、多くの頂いた感想を元に

システム面の大幅改良をしました。

  • クイックセーブ、ロード追加
  • バックログ追加
  • オートモード追加
  • 全てのUIを新規で作り直し
  • 各種演出の追加(画面の揺れや、回想シーン的な表現)


 これでやっと、一般的なノベルゲームと肩を並べられるシステムになりました!
ただこの時の冬コミ・・・、当サークル史上最大のピンチでした。

ブログを遡り、過去の記事の日付を見ると分かるのですが







作業開始してから、冬コミ当日まで3週間しかない





全員の本業が多忙すぎたのが原因ですが、
まさに命を削りながら作った3週間でした。南無・・・。





そしてC86 2014夏コミ
「イケメン千秋楽4月・5月編」



新しいジャケット
 
「番外編のシステムを基準により使いやすくしよう!」

これが今回の方針でした。(誰にもいってなかったけど)




●4月・5月編のシステムの追加内容
  • 各種画面効果の追加 
    ※全部書くと結構な量になるので、一部についてコチラで解説


  • ルート選択画面の追加 ※制作過程はコチラ
    chara_select
    ここのBGMが病み付きになります。


  • 漫画っぽいスチル表現の追加
    mini_still
    イケセンではギャグ的なシーンが多いので、SDキャラとの相性が抜群です。


  • セーブロード画面のキャラ分岐対応
    save
    どのルートのセーブデータなのかわかりやすくしてます。
    (何気なしに作業環境からキャプチャしましたが、セーブ時刻がリアリティ満載な時間・・・)

  • オプション項目の追加
    option
    「オートモード速度の設定追加」「右クリックを任意の機能に変更」
    右クリックの機能は個人的にも結構気に入ってます。


  • テキストの演出機能追加
    string
    文字が大きくなったり小さくなったり色が変わったり
    細かい機能が多いですが、結構ゲームに効いてきます


かなり大雑把ですが大体これくらいの追加機能が
「イケメン千秋楽4月・5月編」から組み込まれています。




ではでは、本編ではどうなるのか!?





細かいことは作ってる当人達も分かりませんが、
下記に掲げていることは間違いなく入ります!!
  • 選択肢の対応
    4月・5月編では「キャラルートへの導入」の意味合いが強いため、選択肢はありませんでした。
    どのキャラも6月以降は選択肢が存在します。もちろん分岐もします。

  • セーブロード画面の改良
    もうちょっと使いやすくします

  • ユーザー操作部分の改良
    既読スキップや入力判定など、操作全般の改良をします。

完成した暁には、もうちょっと使いやすく、遊びやすいゲームになっていると思います。










以上、「これまでのイケメン千秋楽~技術編~」をお送りしました!!

自分達でも、このゲームが完成するのが楽しみで仕方ないです。
ゴール地点は遠いですが、歩みは止めていないので気長にお待ちいただけると嬉しいです。

それでは来週の更新をお楽しみにっ!!
ngs_projectでした。
サークル最新情報まとめ

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

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


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



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

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