あるみにメモ

技術的なメモをかくかもしれない

【第二回】 あるみに進捗発表 ソシャゲっぽいUIをUnityで作るチャレンジってまだやってるんですか? [2019/7/6]

第二回目の進捗発表にこぎ着けたあるみにの話。

aluminum-pepe.hatenablog.com

なんとか初回坊主になる事は避けられたみたいですね。

なんとか3ヶ月くらいは持ってほしいですね()


前回の進捗発表はこれです。

aluminum-pepe.hatenablog.com


あれからどれくらい進んだんでしょうねえ。

近況報告

毎回やりますけど何か?(目次から進捗発表に飛ぼう)


ゲーム


プリコネ

f:id:aluminum_pepe:20190707222407j:plain

あいかわらず、プリコネにハマッています。


ダンジョンEx2をクリアして、ダンジョンコンプリートしました。

f:id:aluminum_pepe:20190706140612j:plain

やったぜ。


と、いうことで。


プリコネRダンジョンEx2「毒瘴の闇稜」耐久攻略レポ


Ex2のダンジョンボスである「ジャバウォック」はとんでもない威力の毒攻撃を放ってくる厄介なボスです。

f:id:aluminum_pepe:20190706161016j:plain

レベルも160と高く、自分のパーティーでは火力でどうにかなるような相手ではないです。

ユイが☆5になり、専用装備もとりあえず持たせたということで、クランメンバーの正月ユイを借りて挑戦した結果勝てました。

パーティはこんな。

f:id:aluminum_pepe:20190706141749j:plain

  • Lv133 ☆5ユイ RANK12 専用Lv30
  • Lv128 ☆4ミサト RANK11 専用lv30
  • Lv125 ☆5シズル RANK12 専用Lv30
  • Lv126 ☆5ノゾミ RANK12 専用Lv90
  • (サポート) Lv130 ☆4 正月限定ユイ RANK??

備考: ストーリーステータス補正フル


ガチガチの耐久パーティです。

ダンジョンボス戦闘では、1:30の制限時間が設けられていて、ボスは戦闘終了時のHPをそのまま引継ぎ、攻撃するこちら側のキャラたちも同様です。

制限時間に間に合わなくても、編成したキャラが倒れていなければ何度でも戦えるため、回復を重視したパーティで挑み、少しづつ削って倒す作戦です。

どう考えても時間がかかるので「とりあえず一回勝って報酬が欲しい」ときのための戦法。


ミサトの育成が不十分なのもあって適当にやってると勝てなかったのですが、だんだん慣れてきたのでその様子を載せておきます。

ジャバウォックは最後の20秒でものすごい毒を放ってくるのですが、それまでは大したことがないので、最初は三倍速で流してもいいでしょう。

残り20秒で正月ユイのUBをうてるようにしておけば、強毒と拮抗して3回スリップダメージを耐えるので、そこからユイのUBで回復してます。

あとは、

  • 2回スリップダメージ→ミサトのUB(手動の方が暴発しない)

  • autoにしてユイにUB打ってもらう(安定)

  • autoを外してミサトでUB打って回復

  • 以下交互回復

で耐久できました。


発狂状態の動画で申し訳ないんですが、発狂状態かそうでないかはたぶん関係ないと思います。

見てて分かると思うんですが、強毒のスリップダメージによるTPの回復がものすごいため、

回復UB2種を交互に打つことが出来れば耐えることができそうです。

また、戦闘終了20秒までのジャバウォックの攻撃は貧弱かつ後ろにも攻撃してこないので、生き残ってさえいればループ戦闘できそうです。


最後10万くらいは火力高めのパーティで押し切りました。

f:id:aluminum_pepe:20190706151450j:plain


まあ火力出すキャラ皆無なので、めちゃくちゃ時間かかるんですけどね。

どこかの攻略サイトだと上記のシズルがアカリになってるんですが、全然育ってないので安定をとってシズルにしました。

とはいえ、アカリを編成しているということは、そこまで丈夫なキャラじゃなくてもいいのでは……

となったのでお試し編成2。

f:id:aluminum_pepe:20190706152908j:plain

シズルの代わりに、

を入れて若干の短縮を狙ってみました。

戦法はさっきと同じです。TPも貯まりやすいだけあって、クリスがいっぱい攻撃してくれるのでさっきの耐久パでやるよりは早そう。



こんな個人の個人の育成状況やら環境に左右される立ち回りをしてもなんの為にもならないと思いますが、とりあえず載せてみました()

効率の悪い耐久しなくても5チャレンジくらいで倒せるようになったら継続的に倒していきたいですね。


攻略レポおしまい。



一周年記念の無料10連から初めて4ヶ月ほどになりますが、ランクも上限に辿り着き、キャラ育成もある程度高い水準までまとまってきた気がします。


マスターコイン、いいよね

ランク上限になると、得られる経験が全て無駄になってしまうので、なんだかもったいない、という事ってランク上限が比較的低いところにあるソシャゲにはあることだと思います。

じゃあ上限上げろやって感じなんですけど、プリコネはキャラの育成とランクの関係が深すぎるので簡単には上げられないようですね。

最近導入された「マスターコイン」制度は、溢れた経験値をそのままゲーム内通貨の1つに変換して、別のゲーム内のアイテムと交換できる仕組みです。


f:id:aluminum_pepe:20190706161333j:plain

やりこんでるからこそ欲しいアイテムがあったり、誰でも手に入るわけではないゆえのラインナップがいいと思います。


f:id:aluminum_pepe:20190706154127j:plain
マスターコインで交換した1000万マナ。これはうまあじ



夏。


f:id:aluminum_pepe:20190706153937j:plain
ばきゅーん♪

今は夏イベント中という事で、夏スズナがとても可愛くて、書いてあることも全部強そうなんですけど、持ち石からしても引ける気がしません。現場からは以上です。



……



……だから何の話してんの???????


研究室

プログラムかいてシミュレーションまわしてお勉強しての日々。

研究室にいる間は「職場に来て仕事してる」みたいな気持ちでやってるつもりです。

これを聞くとブラック研究室か??とかなるんですけど、そのスタイル自体は性に合ってるかなと思っていますね()、特に強制されてるわけでもないです。

周りがちょいちょい心配してくれるんですけど僕は元気です。


生きがい


完結↓↓



次回最終回(2019/7/6現在)↓↓


最近見ている実況グループナポリの男たち」のシリーズが1つは完結、1つは次回最終回(2019/7/6現在)というところまできてます。


生きがいが……


個性ある4人の実況者が集まっているグループ実況で、1人1人のポテンシャルがあって全員推せますね。

編集がものすごく丁寧で分かりやすく、ユーモアが聞いていてめっちゃ面白いです(べた褒め)


まだ見てない人は僕の進捗発表なんて見ている暇があったら↑のリンクから動画を見てください。



ゲーム制作

研究の合間を縫って、何なら2日くらい進捗のための日を作ったくらいにはやってるので、それなりにやる気をもって挑めてるんじゃないですかね。

新しく得る知識が多すぎて死ぬ



進捗発表

近況報告をわざわざ読んだ人がもしいましたら、本当にお疲れ様でした。

出来ればこの先も見て行って欲しいなあ……?


つくってるもの「UI」

まだUI作ってますよ。

厳密には、「ソシャゲっぽいゲームのUI」ですね。

自分が好き(だった)ソシャゲディバインゲートをモデルにしつつ、

他の自分がやってるソシャゲのUIなんかを参考にしながら見よう見まねで作っています。

詳しくは前回の記事を見ていただければと思います。


前回のおさらいからしていきたいと思います。

環境

  • Uinity2019.1.0f2(C#)
  • VisualStudio2017
  • GitHub , SorceTree

  • Androidビルド

特出して使ってるアセットも載せときます。

  • DOTween(アセット)
  • TextMeshPro(kazesawafont)

前回の進捗

前回はUIアニメーション遷移の仕組みを実装し、

ホームシーン内のいくつかのUI遷移を実際に適応させてみました。


f:id:aluminum_pepe:20190609044023g:plain

そうそうこんなやつ。


今の制作物について

前回も制作物について説明していますが、ここでも少しだけ。

現在制作中のゲームは、実は一年ほど前にゲーム部分のプロトタイプを既に作ったまま、ほったらかしにしていたものがベースになっています。

つまり、「ゲーム部分がちょっとできているのでUIつくって組み合わせるか!!」という前提で進んでます。

UIに力をこめるのもそうそうない機会なのかなと思うので、いろいろ発見があって楽しいですね。



UI

ではさっそく今回のUIの進捗の様子を見せていきたいと思います。

相変わらずUIしかやってません。


■タイトル

前回こんなでしたね。

f:id:aluminum_pepe:20190608235803g:plain


こうなってます。

f:id:aluminum_pepe:20190706164143p:plain

色々素材貼り付けまくってます。

機能も紹介しましょう。

UIアニメーション

「遊び方」、「キャラ変更」ボタンを押すと、"ボタンから出てきて見えるように"ウィンドウが拡大します。

f:id:aluminum_pepe:20190706165037g:plain

UIアニメーションの記事がまだできてないのでここで軽くInspector画面を。

f:id:aluminum_pepe:20190706230517p:plain


作成したDOTween製のアニメーションスクリプトであるScaleUPやScaleDownはUnityEditorで時間や拡大しつつ移動する値を設定できるようにしてあるので、

アタッチしたオブジェクトをアニメーションさせるのは簡単です。

どっちが「出てくる」用で、どっちが「引っ込む」用なのかは、これまたお手製のUIAnimationCont"o"roller(スペルミスしてるやんけ……)で管理し、呼び分けられるようにしてあります。


キャラ変更

前回実装できていなかった「キャラ変更」機能が付いています。

ホームに表示するキャラを設定できるとかいう、よくあるやつです。

f:id:aluminum_pepe:20190706171125j:plain
こんなやつ。カスミかわいい。


こんな風に動作します。

f:id:aluminum_pepe:20190706171001g:plain


ポイントとしては、

  • キャラサムネイル画像つきのボタンを生成
  • 生成したボタンをアニメーションしながら表示
  • 選択したキャラの画像を黄色枠でハイライトする
  • OKを押さない限りキャラは変更しない
  • 途中で違うUIに飛んだりしても矛盾が生じない

といったところですかね。

正直上の2つが今回の進捗の全体のすべてと言っても過言ではないですね。


ボタン(ノード)生成して並べる

イメージとしては、プリコネのキャラ画面です。

f:id:aluminum_pepe:20190707224216g:plain


ステップとしては、

  • ゲーム開始時にUnity内のデータベース()から画像を読み取る
  • 予めつくっておいたボタンのprefabに貼り付けて複製し、並べる

です。

f:id:aluminum_pepe:20190706172317p:plain

これは試しにprefabに男の子の画像をいれてみてる様子です。

Mask機能が便利で、特定の箇所だけイメージを有効化してくれるのがいいですね。

Mask機能をはき違えるとこうなります。

f:id:aluminum_pepe:20190707223838p:plain
狂気。


そんなこんなで、複製する過程で、表示する画像と、そのボタンが押されたときに渡す情報を設定してます。


f:id:aluminum_pepe:20190706172841p:plain


後述しますが、データベースといっても今は仮置きしたデータを"""Resorces"""に放り込んで読みだしているだけなので、

ここは読み出し方も含めてまだまだ要検討です。

あと、Imageの位置も調節できるようにデータにオフセットの情報を入れるか、Maskやめてbutton用に一つずつ切り出すかしないとね。


ボタン有効化アニメーション

アニメーションの様子


f:id:aluminum_pepe:20190706173700g:plain


UIアニメーションが完全終わった後にUIアニメーションをする

ポイントはそれしかないですね。

拡大やら縮小アニメーションは一度つくってしまえば使いまわせるのでいいとして、

実装しているときは終了を検知する方法を用意していませんでした。

ので、しました。

終了検知だけのためにupdateでを垂れ流すのに抵抗があったので、必要に応じてコルーチンで待ちたいフラグを待つようにしてみたけどどうなんでしょうかね。




//コルーチンが呼ばれたら{}の最後にたどり着くまで毎フレーム呼ばれるようになる
IEnumerator HomeCharacterPanelCoroutine()
    {
        while (animationflagCheck() == false)//終了検知できていない限り
        {       
            yield return null;//ここで処理を中断=次のフレームで続き(Whileの判定)からまた呼ばれる
        }
        //終了検知できていればWhileを抜けてアニメーションを呼ぶ
        CharacterButtonNodeAnimation();
    }


//コルーチンは
StartCoroutine(HomeCharacterPanelCoroutine());
//で呼ばれるよ


上のコメントアウトをつけてわかりやすくしてみたつもりなんですけど、

「コルーチンというのは,処理を中断した後、同じ部分から続けて再開できる処理のまとまりである」

って色んな場所に書いてあります。

特定の時間待つ動作にオススメという事で使ってます。

僕も初めて使いました(未熟)。

今のところ上手く動いているのでこれでいいかなーと思っています。


これでHomeの説明はおしまいです。


……



なんだこの分量!?

まあ、ほとんどやってきたことが説明されつくされているので、あとはスッキリしそう。


■図鑑(Book)画面

前はこう。


f:id:aluminum_pepe:20190608233923p:plain


これが、


f:id:aluminum_pepe:20190706180631p:plain


こう。

まあ、さっきとほとんど一緒ですよ。

アニメーションはコチラ。


f:id:aluminum_pepe:20190706181719g:plain


一回拡大されているキャラが縮小するようなアニメーションをしています。

これ、かつてディバゲでキャラが表示されるときのアニメーションなんですけど、わかる人いるのかな……


f:id:aluminum_pepe:20190707144731p:plain
ディバゲでは、このアニメーションを利用してこんなスクリーンショットを撮るのがはやってました。


テキストの読み出し方も、テキストファイルをとりあえずResorceにいれて読み込んでいます。

Resorcesとは

Resorcesというのは、Unityの「Resorces」と名のついたファイルに入っていれば中のデータをどこからでも読み出せる素敵な機能です。

こんな素敵な機能のUnity公式チュートリアルページを見てみましょう。


unity3d.com


f:id:aluminum_pepe:20190706182811p:plain
Resorcesシステムのベストプラクティス :使用しないでください。


「最も最善の方法は使用しないこと」……だと!!??


僕も詳しくないので理由の説明は丸投げしますが、Resorces調べると大体この話題で持ちきりです。

メモリ的によろしくない、またはメモリ管理が難しい。という事です。

まあ、Resocesが便利であり、試験的に動かす分には使いやすい、とかスマホアプリ程度ならまあ、、みたいなことも見かけたんですが、

とりあえずResorcesすらほとんど使ったことないので、他の方法を調べつつ使ってみる方針です。



というわけで図鑑の紹介おしまい。


f:id:aluminum_pepe:20190706180956p:plain
試験的に書いたテキスト。最後の2行が書きたかっただけなんだ……


■ステージセレクト

前回まではこう。


f:id:aluminum_pepe:20190608124706p:plain


これが


f:id:aluminum_pepe:20190706183751p:plain


こう。

結構大幅改修してます。

動かしてるところはコチラ。

f:id:aluminum_pepe:20190706233348g:plain

こんな感じ。

ここもステージ用の画像からボタンを生成して配置させたり、

ステージに関する情報のテキストを表示できるようにしています。


f:id:aluminum_pepe:20190706233637p:plain

テキストはみんな適当です。


選択したステージの情報を各所に反映して見せるにはこだわってます、

が、あんまハロウィン関係ないね。

デザインはいろいろこれからも試すとする。


これでステージセレクトもおしまい。



■Others

前回まではこう。


f:id:aluminum_pepe:20190608233959p:plain


これが


f:id:aluminum_pepe:20190707145035p:plain


こう。


なにもいじってません。


アザーズ終わり!


まとめ

まとめるとこんな感じです。


f:id:aluminum_pepe:20190708065729g:plain


初回と比べてイメージが形になってきました。


f:id:aluminum_pepe:20190708070558j:plain


もちろんビルドして実機でも動かしてみてます。

自分の作ったアプリが動いてるのを見るのはやっぱりいいね。



締め

今回は以上になります。

時間がなさ過ぎてかなり適当な文章になっているが、とりあえず公開します。

機能自体はいっぱい追加して、かなり雰囲気も変わったので発表出来ることは多かった気がします。


本当はフッターのボタンにアニメーションをつけたり、選択状態によって表示する絵を変えたりもしたかったですね。

ノード生成、、配置、アニメーション終了検知、Mask機能、他uGUIのコンポーネントいろいろ。

UIに必要な機能の実装をするにあたって、試すことが多かったのでかなり勉強になりました。

データの格納方法だったり、読み込み方も要検討。SprictableObject?Assetbundle?なんかを試してみようかなと思っています。


コードを見直すとか、UIもう少しいじるとか、やれることはまだあるんですが、

そろそろゲーム機能の調整もしなければならないですね。


本日も、最後までお読みいただきまして、ありがとうございました。




f:id:aluminum_pepe:20181119135346g:plain
バイバ~~~~~~イ



次回予告

次回進捗発表、「8/21(土)」

頑張って、自分。(予定が詰まってるので8/10(土)にする可能性高)

↑カスが参ったので8/21(水)予定


↓さらに遅刻した続きです

aluminum-pepe.hatenablog.com