【第三回】 あるみに進捗発表 進捗無いと不安よな。いらすとや、うごめきます。 [2019/8/22]
第三回目の進捗発表にこぎ着けたあるみにの話。
進捗発表日予定日の推移
8/28/10- 8/21 ←ココ!
- 8/22(27:00) ←いまココ!
大☆遅☆刻
次からは頑張りましょう （失踪だけは免れてよかった）
前回の進捗発表はこれです。
近況報告
大遅刻の言い訳もあります。（興味のない人は目次から進捗発表に飛ぼう）
ゲーム
プリコネ
夏キャラが当たりません。
遅刻の原因
進め、キノピオ隊長です。
『進め！キノピオ隊長』を、自分のNintendo Switchでまるっとすべて遊べる特別イベント「いっせいトライアル」が、Nintendo Switch Online加入者限定サービスとして開催されることが決定しました。
期間は8月5日（月）12:00 ～ 8月11日（日）18:00 までの1週間。
Nintendo Switch Online加入者なら、期間内、何度でも、何時間でも、なんと最後までも、遊ぶことができちゃう特別なイベントです。
Nintendo Switch Online加入者の皆さんは、この機会に『進め！キノピオ隊長』を体験してみてください。
…てなわけで、Nindentdo Switch Online 加入者のみ、期間限定でNindentdo Switchである「進め！キノピオ隊長」が無料でプレイできるということで、これを始めたわけです。
8/10(投稿予定日)に。
なぜもっと早く始めなかったかについては後悔してもしきれないところがあるのですが、すぐ終わるだろうって、思っていたんですよ。
すげえボリュームあった。
とても記事書きながら片手間にできる作業じゃなかった。
そもそもニンテンドーソフトのゲームがすぐ終わるなんてないって少し考えれば分かるはずなのだが…
そんなわけで、途中から「明日終わるのに記事なんて書いてる場合じゃねえ！！」となって徹夜しながらキノピオ隊長をプレイしていました。なんなら記事さえとりかかってなければ…と後悔するクズさ。
まともに、素材を収集したり記事を書いたりできるのは土、日くらいなもんなのだけど、それをこの全て投げうちました。最低。
それはそうとして、自分の（「キノピオ隊長」の）進捗状況等を語るために、「キノピオ隊長」のゲームについて簡単に説明しましょう。
システムとしてはマリオに近い3Dアクションゲームで、1ステージ単位でクリアしていく、といったものです。
というようなルールです。
方形、というか四角柱型のほうがわかりやすい。
ステージ内の敵やギミックを乗り越えながらステージクリアを目指します。
キノピオ隊長には1ステージに対して三種類のやりこみ要素があります。
ステージ内に隠された3つのジュエル。いわゆるスターコイン。
ステージ課題（サブミッション？）。「コインを○○枚集めてクリア」や、「敵を全て倒す」など、1ステージにつき1つ。
※かくれんぼはステージクリア後に選択可能なかくれんぼモードでのみに出来、かくれんぼ中のプレイは他のミッション等の成果は反映されない
よくもまあ1つのステージにこれだけやることを詰め込んだものです。
クリアするにも、これらのやりこみ要素を埋めるにも、ステージのギミックの謎を解いたり、隠された仕掛けを見つけたりするので、アクションというより謎解きの要素が強い感じがしました。
それから、ステージ数が結構あります。
ネタバレになりそうなので具体的に言いませんが、少なくとも1日でやるようなものではなさそう。
初見からキノピオ隊長RTAをしている気分でしたが、結論からいうと全然終わりませんでした。
追加で特殊な解放条件のステージがないのであれば、
ジュエルは全ステージ回収したが、
ステージ課題全制覇は後3ステージ程で届かず、
ドットキノピオに関してはほとんど探せていない
という有様で無料トライアルを終えました。
うーん無念。
もう少し語ることがあります。
先ほど「すげえボリューム」だとか、「詰め込まれている」なんて述べましたが、
ある種1、２日で全クリア出来そうだったとも言えます。
とはいえ、その分時間をかけているし、1、2日でクリアできないゲームもそうそうないですけどね。
もちろん次作にあたるスーパーマリオオデッセイやゼルダの伝説BotWに比べたらボリュームはないほうだと思います。（そもそもの値段も異なるので、比べるのもどうか)
個人的にはお値段以上の満足度ではあるのだけど、すげえボリュームだと感じた理由とかがあるんですよ。
なんというか、キノピオ隊長は丁度いいんです。
例に出したスーパーマリオオデッセイや、BotWにもパワームーンだとかコログだとか、真にボリュームのエグいやりこみ要素がありますが、いざやろうとするのには覚悟がいるものです。少なくとも初見から１，２日でやろうとは思わないです。自分は。
キノピオ隊長のやりこみ要素は1ステージ単位で完結しているので、与えられた一つの問題を全て解き明かせばそのステージは終了し、わかりやすい単位で、かつ細かいスパンで「やり切った感」が得られるような感じがしました。
1ステージごとのやりこみ要素も、詰め込まれているが、詰め込まれ過ぎていない、ような気がします。
ステージ課題が3つもあったら流石に覚えてられない＆やる気がでにくいかも知れません。
そんなわけで、「これはやってやろう」と思えた範囲で最上のボリュームであったというのが正確な自分の感想です。
3Dステージは四角柱の側面視点も上からもたまに下からも余すところなくいかされていて、そんな箱庭ステージで頑張るキノピオ隊長がとても可愛かったです。
追加ステージも追加課金であるみたいでしたし、「ふたりであそぶモード」は家で一人でこもってやっていてできなかったのでとても気になりますね。貧乏性が祟ってRTAのようなプレイしていましたが、またじっくりやってみたいですね。
お財布にめちゃくちゃ余裕ができたら、ね
遅刻の原因2
ふと始めてしまった。
キノピオ隊長で記事執筆の出鼻をくじかれた後、モチベの下がるあるみにを襲ったのがこれ。
離反と小復帰を繰り返してるこれは、今年で5周年だそうで、なんだかんだ周年イベントだけは毎年やっていたので今回も手を染めてしまいました。
最近の白猫はこんな感じだよ（語弊）。
ルーンセイバーで飛び回るのたのしいなあ～
ガチャが振るったのもあって、5周年イベントのステージをやりつくしましたとさ。
久しぶりにやったけどキャラ操作やつよつよスキル打つのは爽快で結構面白かった。
……
…
つまりサボって遊んでました
研究室
プログラムかいてシミュレーションまわしてお勉強しての日々。
ここは以前と変わらず。
最近はデータとるためのプログラム実行の命令セットをまとめてシェルスクリプトで実行してくれるようにしたり、分かりやすい名前のファイルを作って結果を分けて保存してくれるような、「自動化（？）」にはまっています。
実のところシェルスクリプト自体あまり触ったことがなかったので、初歩的なことしかやってませんが、シミュレーションプログラムに対して汎用性のあるシェルスクリプトを書いたりとか結果をまとめるのに有用なものをつくって、効率化を狙いたいと画策しています。
肝心の研究も、中間発表に向けてのより本格化する空気を感じています。（遅いともいう）
あつい
あつい。
暑すぎてやる気が出ない。
なんなら進捗にも全然取り掛かれなくて…
進捗発表
どんなに遅れても近況報告はするのが信条。
ここから先が進捗発表です。
つくってるもの「ハロウィンゲート（仮）」
これまではゲームというより「UI」を作っていましたが、今回からゲーム部分に入り始めたので、現在制作中のゲームであるハロウィンゲート（仮名だけどこのままいきそう）を作っていると言えそうです。
といっても、今回も「ソシャゲっぽいゲームのUI」づくりをすこーしだけやっています。
UIについても、ゲーム性についても、自分が好き(だった)ソシャゲ「ディバインゲート」をモデルにしつつ、
他の自分がやってるソシャゲのUIなんかを参考にしながら見よう見まねで作っています。
詳しくは前回、前々回の記事を見ていただければと思います。
環境
特出して使ってるアセットも載せときます。
- DOTween
- TextMeshPro(kazesawafont)
- Anima2D ←new!!
前回の進捗
前回のおさらいからしていきたいと思います。
前回は、よりソシャゲっぽくするために、かなりいろいろな実装をしました。
こんな感じ。
各所にUIアニメーションを適応させました。
ノードの自動生成、データや画像テキストのデータ反映、表示するためのアニメーションまで、
内部的にも外面的にもソシャゲっぽさには重要なシステムをいくつか実装できたと思います。
作ってきたUIに対して素材を貼り付けることもしたので、大分「ぽさ」はでたんじゃないかと。
こうやってみると、先月の自分はよく働いてますね。
UI
ではまずは今回のUIの進捗の様子を見せていきたいと思います。
大きく一つだけです。
ボタンのアニメーション
前回はボタンにアニメーションはついていませんでした。
要求
ソシャゲっぽいボタンのイメージは自分的にはこうです。
- 選択されてる状態と対応するボタンは強調（ハイライト等）される
- アイコンが強調時とそうでないときで絵が少し変わる（キャラの顔→笑顔みたいな）
- 強調時はアイコンがぴょんぴょん跳ねたりアニメーションする
ソシャゲ関係なく、UIとしてボタンが分かりやすくあるために強調するのは当然として、画像差し替えやらアニメーション当たりが実装したいところですね。
できた
そんなわけでできたのがこちら。
どうでしょう、結構それっぽいのでは。
ここからもう少しだけいじってみる。そこも含めて、実装の話をしていこう。
実装の話「画像入れ替え」
選択したときとそうでない時で2パターンの画像を用意しました。
以下一覧
あとは状態に合わせてどちらかをアクティブにして見せるだけ。
気に入っているのは、図鑑（Book）ボタンの本が開いたり閉じたりする所です。
あとはパネルそのものにも色をつけてみたのも分かりやすいでしょ？
実装の話「UIアニメーション」
アクティブ状態のオブジェクトには、待機UIアニメーションを設定してあるので、有効になった瞬間に動き出します。
これまでは「UI要素をアクティブ／非アクティブにして、拡縮や移動をする」という、ある種一方通行のアニメーションを作ってきました。
今回はそれらとは異なり、「UI要素がアクティブな間は常に発動する待機アニメーション」をいくつか作ったので紹介します。
例えばこれはぷにぷにしたジャンプをする「Idlepunipuni」です。
ぷにっと跳ねさせたかった。Homeボタンに採用で。
DOTweenにある「DOJump」メソッドをつかってみました。
始めはこれ一つしか作るつもりがなかったのですが、単純なアニメーションを複数作って同時に付けた方が面白いのでは？と思って以下を制作しました。
ボタンアニメーション紹介と試行錯誤
イカれた仲間たちを紹介するぜ！！！
ただジャンプするだけの「Idlejump」。
とってもシンプル。
さっきのIdlepunipuniからぷにぷにを除いたやつ。
コードも載せよう。(スマホからだと見にくくて申し訳ないです)
using System.Collections; using System.Collections.Generic; using UnityEngine; using DG.Tweening; public class Idlejump : MonoBehaviour { [SerializeField, Tooltip("アニメーションさせたい要素を指定可能")] RectTransform rect; [SerializeField, Tooltip("ジャンプパワー")] float jumpPower = 30; [SerializeField, Tooltip("アニメーション時間")] float time = 1.0f; private Sequence sequence; public void animation() { sequence.Play(); } private void Awake() { //特にアタッチされていなければそのまま取得 if (rect == null) rect = this.GetComponent<RectTransform>(); } private void OnEnable() { //アクティブになったときアニメーションを再生 animation(); } private void OnDisable() { //非アクティブになったときシーケンスを初期化する sequence.Restart(); sequence.Pause(); rect.anchoredPosition = new Vector2(0f, 0f); } void Start() { //Startで定義 sequence = DOTween.Sequence(); //無限ループ設定 sequence.SetLoops(-1); sequence .Append(rect.DOJumpAnchorPos(new Vector2(0f, 0f), jumpPower, 1, time)); sequence.Play(); } }
自作した待機アニメーションはsequenceの中身がちょっと違うのみで、大抵こんな実装です。
アタッチしたオブジェクトの有効状態の変化をOnEnableやOnDisable関数で検知して、DOTweenアニメーションの実行や、初期化を行っています。
DOTweenは、そのTweenさせるオブジェクトが非アクティブであっても、「Complete」という完了状態や、「pause」という停止状態、またはTweenが「kill」=破棄されない限りは処理され続けるようです。
多重にDOTweenを実行させると、なんだかよくないことが起きる（起きたので）、無駄なTweenは起きないように管理します。
setLoop(-1)で無限ループ設定をしているときは、完了状態にならないので、非アクティブの場合はpause(停止)状態にし、周期が中途半端な状態で止まっても初期状態に戻せるようにRestartさせています。
紹介にまた戻る。
ゆらゆら揺れるだけの「IdleYure」(酷い名前だ)。
これを図鑑ボタンに採用する。
この2つを同時に適応することで、揺れながらジャンプのアニメーション。
ちょっと違うアニメーションを作れた。
これにはあるみにもにっこり。
いろいろ組み合わせられそうと感じて手を叩いて喜んでました。
これはそのままQuest(StageSelect)ボタンに採用。なんか はしゃいでるっぽくなった？
薄くなって消えたり濃くなったりする「Idletikatika」(チカチカするってことです)。
これは、「Idlejump」と組み合わせつつ、その他ボタンの幽霊くんを透かしてみた。
採用してませんがひっくり返るような回転をする「IdleZRotate」（急にまともな命名）。
なんてものも作ってみた。
個人的に、指定したImageの画像を明滅させられる「Idletikatika」はけっこう気に入っています。
コードはこんな感じ。（さっきと似通っている部分は省略・スマホからだと見にくくてry)
：
：
public class Idletikatika : MonoBehaviour
{
：
：
private void OnDisable()
{
//非アクティブになったときシーケンスを初期化する
sequence.Restart();
sequence.Pause();
//アルファ値を初期化
rect.GetComponent<Image>().color = new Color(255, 255, 255, 1);
}
float nowAlpha = 1f;
float goalAlpha = 0f;//目的
//ゲーム実行中はアルファ値は0～1で変化する。0～255ではない
void Start()
{
//Startで定義
sequence = DOTween.Sequence();
//無限ループ設定+折り返す設定
sequence.SetLoops(-1,LoopType.Yoyo);
sequence
.Append(DOTween.To(() => nowAlpha, (n)=> nowAlpha = n, goalAlpha, time/2f)).OnUpdate(()=>rect.GetComponent<Image>().color = new Color(255, 255, 255, nowAlpha));
//OnUpdateで値の変化をImageに常に伝えることができる
sequence.Play();
}
}
にあるように、アルファ値を変更して明滅させるものに、DOTweenのCanvasGroupの拡張メソッドである、「DOFade」があります。
これを使えば同じCanvusGroupがアタッチされたGameObjectすべてのアルファ値をTweenできるのですが、Canvusを隔離せずとも特定の要素のアルファ値をいじりたかったので満足はしています。
ただ単にコンポーネントを付けた場合はそのオブジェクト直下のImageのアルファ値を取得してTweenさせますが、Inspectorから特定のImageをアタッチしたときは、そのImageのアルファ値をTween出来ます。
コンポーネントを適用したオブジェクトの有効状態を取得して、ループの中断やRestartするので、特定の一つをTweenさせるときは親オブジェクトに適応させる運用。
↑はその他(Others)ボタンに適応されたUIアニメーション用のインスペクター。
Rectは指定しなければImageをまとめたPanelそのものをまとめてTweenさせ、uGUIの要素を指定すれば一つをTweenさせます。
「Idletikatika」において、幽霊くん(ghost)を指定しているので、幽霊くんが明滅してくれるというわけです。
「Idlejump」は指定していないので、そのままImageを複数含むオブジェクトごとjumpし、アイコン全体に影響があります。
今のところ、1つの明滅スクリプトにつき1つのImageしか変化させられないので、リスト登録型にしたり、下層全てに影響を及ぼすようにした方がいいかも。 （それをするとDOfadeでよさそう）
……とまあ、ボタンアニメーションとかいう地味な部分でけっこう色々試して見てみました。
むしろ時間をかけすぎたまである
最終的に実装したボタンアニメーションをまとめるとこう。
それなりに「ぽい」ものが作れたんじゃないかな？
ゲームシーン始めました。
やっとゲームシーンを作り始めました。
改めて説明すると、1年ほど前にゲーム部の実装をちょっとだけしていて、それをほったらかしにしていた。という背景があります。
そんなわけで、ほったらかしにしていたものを移したのがこちらです。
見た目こんな感じになりました。
手前から、キャンディーの入ったバスケットが5つ、机、敵が迫ってくるゾーンです。
動いているところはこれ。
アッ、アメのカウントがマイナスいってる！
ルール説明
いらすとやのハロウィン仮装キャラが、うごめきながらにじり寄ってくるのを、欲しがっているキャンディーを与えてお帰りいただく。
バスケット内のキャンディーはランダムに出現し、机にはキャンディーをおいておける。
キャンディーをタップして運び入れる操作のみ。
現状間に合わなかったときのペナルティがないので、右上にあるライフのようなものは現状飾り。
イメージは、現状、ディバインゲートの仕分けに近い、リアルタイム操作。(？)
といった感じ。
そのいらすとや、動くよ
現状のゲーム性のガバガバさは要検討で今は置いておくとして、
Anima2Dを用いたいらすとやのアニメーションが今回の進捗のもう一つのウリです。
詳しくはこの記事でも触れてます。
250日くらい前の記事って表示されてたんだけど…どんだけほったらかしにしてたんだ
この記事を見つつ、Boneを設定し直しました。
かつてのこれが、
こう。
前より現実的な骨構成になった。
ボーンに合わせていらすとやが動くぞ……!!
こんな記事も参考にしてます。
あんまりよく理解していなかったIK(limbとCCD)について、理解を深めてつかえるようになりました。
相変わらずMeshを切り分けていません。なんか、これはこれで味があるかなって思ったんですけど…
同じAnima2Dでここまでできるんだ……！！と思わせられる記事。
この記事を見れば見るほど切り分けなきゃなと思うので、次回は切り分けにも挑戦してみようかなと思います。
このBoneの動きはUnityの機能であるAnimatorとAnimationで実装しています。
Boneのアニメーションとして保存してみたので、使いまわせるのですが、Meshを切り分けていないものに使うのはちょっと微妙そう。
もう一つ違うモデルを生成したので、同じBoneアニメーションを適応してみた。(なんかかわいい)
足の開き方が最初のモデルに合わせてるせいで不自然だ。使いまわすのは厳しそう。
こうやって見るとモデルをTポーズで統一する大切さとかがわかる気がする。
実装の話「敵オブジェクトの階層構造」
Anima2DのMeshやBone、IKを空のラップオブジェクト（Warp_Enemy）に入れています。
必要なアメを表示するオブジェクト(EnemyDemand)も、同じラップオブジェクトに入れて一緒に動かしています。
迫りくる様子は、ラップオブジェクトを拡大させながら移動させるだけです。
以前はここもAnimationで実装していましたが、DOTweenで作り直します。
実装の話「キャラの移動」
かつては拡大するだけで近づいてくる様子を表していたのですが、今回はキャラの移動経路を、「DOPath」を使って実装してみました。
DOPathは、座標情報の配列を登録することで、登録した座標を順に通るような移動Tweenをしてくれるメソッドです。
ただし、ただ通って欲しい座標をSceneで調べながら数値を入力するのは効率が悪すぎるので、Path用に生成したGameObject群を作ってみました。
その名も「EnemyPath」。
この、ゲームオブジェクトである「○」を置いた座標を通る仕組みです。
実際のシーンではこう。
キャラが「○」の上を通ってるでしょ。
キャラが通って欲しい経路にpathpoint =「○」を複製しながら配置して、
これらのをまとめた親オブジェクト(EnemyPath△△)を、キャラ用のスクリプトに適用することで、
その経路通りに動くようになりました。
↑は弧を描くように配置されたpointを子にもつ「EnemyPath01」をキャラの移動を管理するスクリプトに読み込ませて、positionを取得している様子です。
キャラごとの個性ある移動パターンがつくれる……かはさておき、エディタ上でキャラの移動経路を簡単に作れるのはいいことな気がしますね。
(まあ、有料版にはデフォルトでこの機能がついているらしいですけど)
なお、アメの生成の拡大なんかも、DOTweenに置き換えています。けっこう書き換えることが多くって大変だった。
前回に比べてBone構成やアニメーションを若干丁寧に作り直してゲームシーンを実装中…というのが今の進捗状況です。
まとめ
まとめるとこんな感じです。
ボタンアニメーションの実装
ゲームシーンの移植・改装
ゲームバランスについての反省、検討とかもしたかったけど、分量もきつくなってきたので今日はここまで。
締め
とにかく今回の記事は難産でした。
序盤のやる気のなさに加えて、
「どうせ遅刻してしまったしキリのいいところまで実装しちゃおう」
なんて考えてちょっと実装増やしたのが良くなかった。
なんならボタンアニメーションの話だけすればよかったんだ……
？？？「実装量が増えるとどうなる？」
？？？「記事の量が増える」
というような事で、実装で期間は伸びてるわ、記事の量も増えてまとまらないわで大変。
ただでさえまとまりのない記事がより煩雑になってしまったような感じ。
余計にグダグダしてしまったので、期限を守ることはやはり大事だなあ。
…といつまでも出さないままではマズイので，公開になんとか踏み切れました。
アメ生成や吹き出しの実装は、以前作っていたものを移していますが、若干オブジェクトの階層を見直したり、Animationを使っていた部分をDOTweenに置き換えたりしたので思ったよりもかなりボリュームのある作業になりました。
何だかんだでゲームに必要なシステムもいくらか用意できたので、これからはゲームシステムをもう少しマシになるように考えつつ、
ゲームオーバーやリザルトまでの一連の流れを仮でも実装できたらいいなと思います。
あとは、ステージデータのやり取りの仕方だとか、動くキャラを増やしたり、図鑑やホーム画面でも動くようにだとか、機能追加もできたらいいな
仮にもハロウィンには間に合わせたいので、ほどほどに完成できるように頑張ります
今回も実際にAndroidビルドしながら開発してみています。
自分の作ったアプリが動いているのを見るのはいいね。
今回も読んでくださった人がいたとしましたら、ありがとうございました。
次回予告
次回進捗発表、「9/28（土）」予定。
頑張って自分。
