2020年8月23日日曜日

unity1week参加記録 お題「ふえる」

 8/10~8/16に開催されたunity1週間ゲームジャムhttps://unityroom.com/unity1weeks】に参加した記録です。


今回製作したのはノワのお花畑大作戦!というパズルゲーム。

鏡を使って光を反射させ、芽に当てて成長させて花を咲かせるというのが基本的なギミックです。詳しい内容はきっとプレイして貰えばすぐにわかると思います。




0日目

前回、お題「密」にて初参加し、「オバケがみえるなんてヒミツだよ」という二つの視点を切り替える探索ゲームを作成しました。



その際に、「楽しさ」「操作性」の評価が他の項目に比べて低かったこと、ギミック・グラフィックはある程度評価していただきましたがゲームシステムの面で物足りなかったことから、
今回はイラストに頼らず、何度も挑戦しようと思えるゲーム性のあるものを作ることを個人的なテーマにしていました。


ちなみに、期間中はお休み&特に帰省などの用事もなかったので、ほぼ制作にのみ集中できる環境にあったことはあらかじめ述べておきます。


初日(8/10)

テーマ「ふえる」の発表直後、まずはメモに思いついたことを殴り書き。



(めちゃめちゃ「大場つぐみ×小畑健」感のあるタイトルがありますね)

とはいえどれもピンと来ず、この日はうまくゲームシステムに落とし込めそうなアイデアが出てこなかったので就寝。

起床後、15時ごろになってふっと降りてきた、「花を増やせばゲームを進めるほど画面上が花でいっぱいになって綺麗な見た目になるんじゃない?」というふわっとしたアイデアから、「お花畑大作戦」の原型が生まれました。

この時点ではまだパズルゲームではなく、「光」「水」「肥料」の三要素をうまく調節して適切なパラメーターに揃えると花が咲くシミュレーションを想像していました。


その後、パラメーターを揃えるってなんだ?という行き詰まりから路線変更、を使って花を咲かせるパズルゲームに。

そして「光を反射させて花に当てる」は思いついたものの、水の生かし方を考えることができず、今回は光のみで花を咲かせることに決定。

unity1weekは締め切りが短い分、欲張りすぎるとあとで痛い目を見ることは明らかだったので、ここは妥協。

ちなみにここまでの思考時間は1時間ほどです。


その後はガシガシコーディングに励み、初日終了。


2日目(8/11)

この日もひたすらプログラム組み。


なんとか形になってきました。 


ちなみに、今回のパズルは「8×8マスとその周囲一マスに0から99の番号を割り振り、光が次に進む方向をマスの番号で指定することで、擬似的に光線を生成する」方法を採用しました。

これはUOZUゲームジャムで作成した「ゴールへの軌跡」というサッカーパズルゲームで採用したやり方をアレンジしたものであり、一度通った道であるため設計・コーディングの時間も短くて済みました。一週間しかないんだもの、時短を意識するのは大事。


3日目(8/12)

昨日の時点で基本的なシステムができたので、今日からはゲームの演出面に取り組んでいきます。本領発揮です✨



まずは「絵本のコッペ」にも登場しているロボットのノワの新規立ち絵を作成。今回のメインキャラクターです。



その後、花やらボタンやらを描きまして3日目終了時点ではこんな感じ。この日はひたすらお絵描きしてただけだから、あんまりブログに書くような話がないんだよな……。


4日目(8/13)


さて、基本的なゲームループも完成、画面の見栄えもよくなってきた……。しかし肝心なものが残っていました。ステージ作成です。

今回はパズルゲームということもあり、「プレイヤーに楽しみながらルールを理解してもらうための簡単なステージ」と「プレイヤーにじっくり頭を使ってもらう難しいステージ」の両方を作らなくてはなりませんでした。

特にテストプレイヤーをしてくれるような人もいなかったので(書いてて悲しくなってきた)、ひたすら「これは……難しい……のか? いやでもいけるはず……」と無い頭をフル活用して作りました。


余談ですが、一番最後に誕生したのがこのステージ23

自分では「フェイクも入れてるし少し難しい……かな? まあでも最後の方だし、このくらいで十分だろう」とか思ってたのですが……。

投稿後にツイートを漁ってるとやけに「このステージが難しい! 解けない!」と言ってる人が多かったので、ちゃんと難しいものを作れた喜びとそんなにやばいのかこれ!?っていう不安で、作者としても印象に残るステージになりました。実質的なラストステージだしまあいっか。


ちなみにステージ23のヒントは、一番上の芽を最初に咲かせることです。


あと、「ふえる」要素として、ステージをクリアするごとに画面下の花壇に花が増えていくようになっています。この仕組み自分では結構お気に入り。



5日目(8/14)

ここまできたらもうウィニングランです。

細かいバグを取り除き、タイトルやステージセレクト、クレジットを作成し、ちょっとした導入のストーリーを書き加えれば完成!



早々と投稿し、5日目にしてunity一週間ゲームジャムに終止符を打ちました。やったね!


以上、「ノワのお花畑大作戦!」制作の感想戦でした。評価結果発表後、また別に振り返り・反省の記事を書こうと思います。




















6日目・7日目(8/15,16)



増えました。 お題回収。


伏線も回収。

2020年8月22日土曜日

Unity初心者向け、会話アセットFungusでできること紹介!


初めてこういう技術記事的なの書きます。何か間違いがあったら教えてください……。

はじめに


僕がUnityでゲームを作るにあたって、ヘビーローテーションして重宝しているアセットに
というものがあります。


無料です。


簡単にこんな感じの立ち絵付き会話が作れます。
主にノベルゲームやストーリー付きのゲームで、キャラクター同士の会話シーンに使われるアセットですが、かなり多機能でストーリーがないゲームでも有用なので、せっかくなので紹介したいと思います。

基本全て英語ですが、そこまで難しくない単語しか使われていないのでたぶん大丈夫!


前置きはここまでにして、早速本題に入りましょう。


※この記事で登場するのは「僕が普段使ってる機能の紹介」です!だいぶ偏りがあるので使えそうなものだけ使ってね!


1.何はともあれフローチャートを作成


Fungusをアセットストアからダウンロードしたら、まずはUnityの画面上部、ステータスバーにある「ツール(tools)」から、「Fungus」→「作成(createかな)」→「Flowchart」でフローチャートを作成します。


このフローチャートがFungusの管理画面になります。Flowchartのインスペクターから、「Open Flowchart Window」をクリック。


左側が開いたFlowchartです。New Blockを選択するか、右クリックでAdd Blockを選択することでインスペクターに各ブロックの情報が出ます。

インスペクターのうち、Execute On Eventからイベントの発生条件を選び、下部の+ボタンからイベントの内容を追加します。残りは特に使わないので今は放置。


2.発火・発生条件を設定


Execute On Eventの右にあるリストから発生条件を選択します。
とりあえずよく使うのを3つ覚えてください(投げやり)。


Game Started

シーン開始と同時に発火します。

Input/Key Pressed

指定されたキーを押したら発火します。Key Codeのリストでキーを指定。

Scene/Message Received

これが3つの中で一番使い勝手がいいです。(かつ一番ややこしいのでまずは前者二つを試してみて)
スクリプトで指定された文字列が送られてきたら発火。

message」の欄に発火するための文字列を入力します。今回はkoppe(コッペ)と入れておきます。(これは僕のゲーム『絵本のコッペ』の主人公の名前です。覚えてね)


続いて、「koppe」という文字列をこのFlowchartに送りこむためのスクリプトを書きます。

新規のスクリプトを作成します。とりあえず名前は適当に「FungusExecute」とかにします。


① public class FungusExecute: MonoBehaviourのクラス内、void start()の前に以下の一文を追加します。
public Fungus.Flowchart flowchart = null;


②発火したい条件が書かれている部分に以下の一文を追加します。
flowchart.SendFungusMessage("koppe"); 

この"koppe"の部分をmessageで入力した文字列に対応させてください。


③スクリプト「FungusExecute」をオブジェクトにくっつけます。続いて、インスペクター中のFlowchartにヒエラルキーからフローチャートをドラッグ&ドロップ。


これでOK!


一例として、"Player"タグがついているオブジェクト(=操作キャラ)と接触したときにイベントを発生させたい!という場合は、以下のように設定します。

①そのまま。

②接触を判定するためのコードを書きます。
    private void OnTriggerEnter(Collider other)
     {
        if(other.gameObject.tag == "Player")
        {
            flowchart.SendFungusMessage("koppe");
        }
     }

③ここもそのまま。Player側とオブジェクト両方にcolliderを設定するのを忘れずに。

これでプレイヤーとオブジェクトがぶつかると発火してイベントが発生するようになるはずです。
 


3.イベント内容を設定


各ブロック下部のCommandsの欄にイベント内容を追加していきます。
 Commandsのさらに下にある +マークをクリックすると、イベント内容のリストがずらっと表示されます。これをクリックすると、一つずつCommandsの欄に追加されます。

先ほど設定した発火条件を満たすと、上から順に実行されます。



イベントの種類について

こちらも僕が普段使っているものをいくつかピックアップして紹介します。
ここからは箇条書きになるので、自分が使いたいものを確認してください。


会話文の表示:Narrative/Say

メッセージ表示機能です。
これ単体でも簡単なメッセージは表示できますが、「キャラクターのセリフとして表現したい!」とか、「キャラクターの立ち絵も一緒に表示したい!」とかの場合はもう少し詳しく設定する必要があります。

もう少し詳しく設定

まずは「Fungus」→「作成(create)」→「文字/Character」を、用意したキャラクターの人数分作成します。(日本語に設定してると"character"が「文字」に翻訳されている罠があります)
次に、今作ったCharacterのインスペクター内にある「Character(スクリプト)」を編集して、各キャラクターの情報を追加します。


Name Text:キャラ名。
Name Color:キャラ名の色。
Sound Effect:効果音かな?(すいません使ったことないです)→キャラクターが喋ってる間、文字表示に合わせて鳴る効果音を変更できます(情報ありがとうございます!)
Set Say Dialog:Say Dialogの設定をキャラクターごとに変えたい時はここにセットする(Say Dialogについては下の方参照)
Portraits:キャラの立ち絵。サイズで立ち絵差分の数を指定、要素に一つずつ追加していく。



また、今のうちに「Fungus」→「作成(create)」→「Stage」で ステージを作成しておきましょう。もしこの先で立ち絵を表示するなら必要です。


さて、メッセージを書くための準備が整いました。Narrative/Sayを追加し、ガンガン書き込んでいきましょう。



Character:どのキャラクターのセリフかを選択。
Portrait:セリフの隣にキャラクターの顔画像を表示したいなら、ここで先ほど追加したPortraitsの中から選んでください。
Story Text:セリフの内容を入力。

とりあえずこの三つを把握してれば言葉を話すことができるはずです。人類はついに言葉を手にしたのだ。



*日本語の文章が表示されない時は
デフォルトのフォントである「Amaranth-Regular」と「Exo2-Regular」が日本語に対応していないことが理由の可能性が高いです。Say Dialogを弄りましょう。

「Fungus」→「作成(create)」→「Say Dialog」で文字に関する設定を作成、ヒエラルキーの中にある「Say Dialog」を開いて→「Panel」→「NameText」と「StoryText」を見つけてください。
次に、それぞれのインスペクター内のText→Characterの中にあるフォントの欄に、別で用意した日本語フォントを放り込んでください。おそらくこれでうまくいくはず……。



立ち絵の表示:Portrait

Portraitを使えばどのキャラクターが喋ってるのかを明らかにするために、画面上に立ち絵を表示することができます。



Display:Show(出てくる)とHide(ひっこむ)しか使ってない……。
Character:立ち絵を動かすキャラクターを選択。
Portrait:どの画像を使うかを選択
At Position:画面のどこに立ち絵を配置するか。

移動:これにチェックするとスッ……って感じで登場するようになります。
From Position・To Position:どこからどこに移動しながら登場するかを決定。画面外から出てきて欲しい時はOffscreen Right/Leftを使おう。

これをNarrative/Sayと組み合わせるだけで、基本的な会話シーンが作れます。



まだまだあるよ便利機能!

Commandに追加して色々試してみてください。

シーンの遷移:Load Scene
遷移先のScene名をScene Nameに入れるだけ。

画面のフェードイン・フェードアウト:Fade Screen
Target Alphaを1にすると画面がフェードアウト、すでにフェードアウトしている状態からTarget Alphaを0にするとフェードイン。
僕はよく「Fade Screen(Target Alpha 1)でフェードアウト→ Load Sceneで別のシーン移動→Fade Screen(Target Alpha 0)でフェードイン」というコンボを使っています。


オブジェクトのアクティブ化/非アクティブ化:Set Active
切り替えたいオブジェクトをインスペクターから引っ張ってくるだけ。Active Stateにチェックを入れるとアクティブ化、入れないと非アクティブ化。

オブジェクトの色を変える:Fade Sprite
スプライトレンダラーにインスペクターから放り込んで、継続時間とTarget Colorを設定。

オブジェクトの移動:iTween、LeanTweenシリーズ
基本的に「ターゲットオブジェクト」が「継続時間」の間に「オフセットで定められた位置」に移動します。
全貌を把握できていないので色々試してみてください。

BGM・ SEの挿入:Play Music/Play Sound
アセットの中から使いたい音源ファイルを入れるだけ。
鳴らしたいタイミングで呼び出せるから、うまく使えばかなり重宝する機能だと思う。

他のスクリプトのメソッドの呼び出し:Call Method
ターゲットオブジェクトを入れてメソッド名を入力。これも使いたいタイミングで呼び出せるのが使い勝手良い。

などなど。



ずらっと並べるとこんな感じになります。

Fungusを使うと、イベントを「起こしたいタイミングで」「起こしたい順に」発生させるのがとても楽になります。
是非一度試してみてはいかがでしょうか。(この終わり方アフェリエイトみたいで嫌だなあ)



2020年8月5日水曜日

7月の活動報告



ブログ更新一ヶ月以上サボっちゃってたんですね。

7月に頑張った成果を2つお見せすることができたので、その紹介です。(という記事をのんびり書いてたらもう8月になって5日も経ってた)



『絵本のコッペ 』完成しました。



7月29日にリリースしました。こんな辺境のブログを覗きに来てる方なら当然もうプレイ済みだと思いますが、iOS/Androidどちらにも対応しておりますのでまだ未プレイの方はぜひダウンロードしてね!



ゲームを作るぞ!ってなったとき、一番最初に思いついた目標が「iPhoneのアプリでリリースしたい! あわよくば何万DLもされて社会的大ヒット作になってチヤホヤされたい」だったので、無事目標達成です。いえーい!



何より嬉しいのが、「ちゃんと企画段階で考えていた通りストーリーを完成させられた」ってことです。
一番怖いのはエターナルすること、次に怖いのはエターナルにビビってそこそこの完成度でリリースしちゃうことだったので……。自信を持って完成したって言えることが、こんなに嬉しいんですね。


6月の途中くらいから、「ブログ書いてる暇があったらゲーム制作する時間に充てた方が効率的じゃない?」っていう発想が湧いてきてどうにも更新をサボってしまっていたのですが、良い頃合いだしブログもまた再開しようと思います。結構書きたいネタも増えてきたし。





続いてもう一つ。

UOZUゲームジャムにて「カターレ富山賞」をいただきました。





ゲーム制作で賞をいただくことはもちろん初めて、というより何かのコンテストで表彰されるのが人生初かも……。




そもそもUOZUゲームジャムって?


つくるUOZUプロジェクトさん主催によるゲームジャムです。7月18日(土)〜7月26日(日)の九日間で、オンライン上で開催されました。

今回はサッカーJ3リーグに所属しているクラブ、カターレ富山さんとコラボしており、制作テーマは
「若い世代にカターレ富山の魅力が伝わるようなゲーム!」と発表されました。

(*カターレ富山:富山を本拠地とするプロサッカークラブ。安達監督が掲げる攻撃的なスタイルが持ち味であり、司令塔の花井選手やストライカーの武選手を中心にJ3の舞台で爆発力を見せつける。)
 (*J3:プロサッカーリーグであるJリーグの上から3つ目のカテゴリー。レベルが高くメディア露出も多いのが一番上のJ1リーグ、その下に順にJ2、J3となる。)


僕はもともとサッカー観戦が好きで、今回のジャムもカターレコラボが発表された直後に意気揚々と参加しました。

若い世代の集客を考えた時に「じゃあカターレのゲームを作ろう!」というアイデアを実行できるカターレ富山の広報さんの行動力がすごい。





何を作ったの?


 
「ゴールへの軌跡」というパズルゲームを作りました。

ボードゲーム×パズル×サッカー」をコンセプトに、ピッチを模した盤面の上に選手を配置しパスをつないでゴールを目指すゲームです。
詳しい解説は上のツイートに記載してあるURLからどうぞ! 


文章で説明するとややこしい印象を受けるかもしれないのですが、操作やUIは直感でわかるように頑張ったので、実際にプレイしてみるのが一番楽しさが伝わると思います!(今はまだ未公開ですが……)




選評で書いていただいたのですが、ベースは詰将棋のようなパズルゲームなので従来のサッカーゲームとは一味違った感覚になっており、サッカー好きもパズル好きも取り込めるような「とっかかりやすさ」が評価されたのかな? って思ってます。


カターレ富山賞をいただいた事で、今後もしかしたら何かしらの進展がある……かも……しれない? ので、もし公開することができる日が来たら、「何を意識して制作したのか」みたいな話も書きたいです。



余談




翌日何の気なく検索してたらYahooニュースに載っててびっくりした。京東…… 

【UGDG】ギルド民よ、ペンを取れ! ibisPaintで描くお絵かき入門のススメ!【アドカレ2020】

この記事は、 Unityゲーム開発者ギルド Advent Calendar 2020  12月2日の記事です。 タイトル長いな。 前置き(それから言い訳) うすいしお と申します。ゲームつくりびとです。 『絵本のコッペ』 ならびに 『ノワのお花畑大作戦!』 の二作品をリリースして...