あるみにメモ

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

【第一回】 あるみに進捗発表 ソシャゲっぽいUIをUnityで作るチャレンジ [2019/6/8]

進捗発表してみるあるみにの話。

aluminum-pepe.hatenablog.com

本日より進捗発表という名の落書きを公開していきたいと思います。

いいですか今は6/8の、24:18です。6/8に間に合ってますね。ええ。

こんな調子で、いつまで続くことやら。



近況報告

近況報告なんていらん!という方は目次から「進捗発表」へ飛ぶといいです。

ゲーム


プリコネ

最近やってるゲームは、もっぱら「プリンセス・コネクトRe:Dive」です。

f:id:aluminum_pepe:20190609024609j:plain


サブ(でやる)ゲー(ム)にはピッタリとの触れ込みで、研究やらで忙しい自分も片手間でできるかな? という感じで1周年記念の無料10連から初めてはや4ヶ月になろうとしていますが、今も継続して楽しんでます。


このゲームは、ゲーム内通貨というか、育成やゲームを有利に進めるためのリソースの種類がとにかく多いゲームですね。


f:id:aluminum_pepe:20190609014525j:plain
「ショップ」の画面。上のタブの数を見てもわかるように「通常(マナと呼ばれるものを消費)」から「女神の秘石」まで、色んな種類のゲーム内リソースがあって、これまた経験値アイテムやらキャラを開放するアイテムと交換したりする。


それでいて、それらのリソースを回収できるあらゆる手段に対して、「1日に○○回or個まで」という制限があるんです。

普通、課金アイテムを使うとそういった制限は無限に突破できるはずが、このゲームではスタミナ回復や、特定のクエストの周回回数まできっちりと制限(※1)がある。

逆に、そのスタミナ回復等に使う課金アイテムの消費量はかなり少なく(※2)、無課金ですら数回であれば費用対効果が圧倒的に高いのです。

f:id:aluminum_pepe:20190609023356j:plain


※1 :スタミナ回復は1日30回、有用なリソースの手に入るクエストは周回回数を1日2回しか増やせない

※2 :スタミナ回復は初回~3回程度まで格安。回数を追うごとに消費数が増える。初回のスタミナ回復の石数は30回目の5分の1ってくらい最初安い


自分もかつて、「スタミナ回復やコンティニューに石を使うなんてありえない、そういうのは課金廃人のすることだ、僕はガチャにしか使わない」、そんな風に思っていました。

実際、ガチャで新規キャラがやってくることによる戦力の変動を考えれば、それ以外に石など使っていられないものです。

しかしプリコネの場合、前述した「あらゆるリソース」を使うことでほとんどのガチャキャラを入手する機会があります。つまり、ガチャに石を突っ込まなくとも、日々の限られた周回数によって、運にたよらずとも戦力を伸ばしていけるのです。


f:id:aluminum_pepe:20190609024054j:plain
キャラ開放アイテムを集めると、未所持キャラを開放できる

しかもこちらのほうが「運にたよらない=確実」なため、周回数の拡充に石を使ったほうが良いとすら思えてきます。

もちろんガチャでしか手に入らないキャラも存在しますし、ガチャで当ててしまうほうがいいに決まっています。それでも、「石をガチャ以外に使ってもいい」と自然に思えたのはこのゲームが初めてでした。

ガチャ以外に、「ゲーム内リソースを集めるために、課金アイテムを運用する」考え方をより自然にユーザーに対して与えることができていて、アプリゲーの新しい可能性を見た気分でした(小並感)


ある種、「白猫プロジェクト」というゲームとは対極な気がしています。

あっちは無限に周回する機会が与えられていて、やろうと思えば一日でほとんどのリソースを集めることができます(たぶんガチャキャラが手に入ったりはしないと思いますが)。

それに対してプリコネでは周回回数が限られているが故に、少ない周回回数を増やすために石を使おうと思いますし、無限に周回する必要はないのである意味気が楽ですね。

与えられている機会(例えばスタミナ)をMaxに使えない状態ってモチベーションが下がるんですよね。

過度なゲームプレイを求められていないからこそ、継続してプレイする気持ちになっている、みたいな。

最近はものすごい勢いでイベント開催しているからか、やっぱり忙しい気はします。



自分の場合、結局のところ「ガチャでしかあたらないキャラ」が現状ほとんど当たっているからモチベーションがあるだけかもしれないですね()


f:id:aluminum_pepe:20190609000620j:plain


先日もリゼロコラボの「レム」という子が当たりました。嬉しい。そんなわけでちまちま課金もしつつやっていますね。みんなもやってみよう。



……何を長々と話しているんだ自分は???これは何のための記事なのか……???



研究室

研究室に配属になって、なんとなくやる方針も決まって……というような状態です。

ほぼ自分の使える日中の時間は研究室にいって研究のためのプログラム書いたりお勉強しています。

プログラムいじるのは楽しいですね。

人のプログラムを読むということを初めて真剣にやりました。

それはそれで勉強になるので今のところ悪くはないです。

特に、プログラムを理解して新しく機能を追加できると気持ちいい。

でも、こんなに忙しい(というか時間を使う)と思ってなかったので、他のこと、ほとんどできないよう。

正直行くか行かないかも行く時間も帰る時間も指定されていませんが、取り敢えず己を律して早く成果を出したいですね。


アルバイト

バイト先がつぶれました。時間が増えるね(お金はなくなるね)


ゲーム制作

やろうと思えば帰ってから寝るまでに2~3時間は使えそうじゃん?

まって、YouTubeを、ニコニコ動画を開かないで……(一日終了)



進捗発表

というわけで本題。


つくったもの「UI」

自分がここ最近何をつくったかといえば「UI」になると思います。

とりあえずは制作物そのものの紹介等、軽くしたいと思います。

簡単に説明すると、Unityでゲームを作っています。

環境

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

  • Androidビルド


スマホアプリつくりたい

去年自分はゲーム開発インターンに参加し、その中でスマホアプリゲームを一つ作りました。

このとき、自分たちがつくったゲームが(チームプロジェクトだった)、普段使っている携帯端末で動いてることにものすごく感動しました。

気分ブチ上がりました。

ちなみにそのゲームはGooglePlayで配信してるらしいのでよかったら覗いてみてください。

play.google.com


そういった事で、まず「自分だけでもスマホアプリがつくりたい」となったわけです。


ソシャゲっぽいアプリがつくりたい

同じインターンで一つ感じたのが、「UnityのUIのそれっぽさ、すごいそれっぽいな」でした。

Unityを触ったことないメンバーが主にUnityのUIを調べながら実装してくれていたのですが、

正直期待してなかったくらいまでそれっぽい見た目になったんです(失礼)

それはきっとメンバーの頑張りが大きかったと思うのですが、初心者がここまでそれっぽく見せられるのってすごいなって素直に思いました。

そこで、今回はUIにも気を使っていこうと思ったわけです。

スマホアプリのUIといえば……そんなのソシャゲのよくあるアレしかないじゃないですか。

上にユーザー名、スタミナ、下はクエストとか編成とか選べるボタン群。これを固定して、真ん中は選択したボタンによって変わるヤツ。


f:id:aluminum_pepe:20190608114050p:plain


そう、こんなのです。(汚い絵ですみません)

せっかくだからこんなのを作りたいわけです。


目指すソシャゲのUI

ソシャゲのUIを再現すると決まった所で、とあるアプリをモデルにしたいとすぐに考えつきました。

それはディバインゲートです。


f:id:aluminum_pepe:20190609001016p:plain


下はゲームUIをまとめて上げているブログの「ディバインゲート」のページです。

http://gameui.matme.info/blog/archives/1600

「ディバゲ」のUIは時期によって大きく3タイプあるのですが、一番初期のものがまとめられているみたいです。

「ディバゲ」のUIもゲームも好きだったんです。

サービス終了しましたが。


小一時間程度このゲームについて語りたいところですが、今の本題はそれではないので思い切って割愛します。

1つだけ強調しておくとすれば、「ディバインゲート零」ではない、ということでしょうか。

もっというと「旧ディバインゲートUI」なのですが、その説明も別の機会にするとします。

ゲーム性についても少し似たモノ?にするつもりです。

現状の方針としては、



というような感じです。ただし色々見よう見まねです。

真似するだけで、UIデザインそのもののに関しては詳しく調べていないのですが、いずれは調べるかもしれない。

素材

インターンから得た学びとして、「素材は使うと見栄えがいい」がありました。

当たり前のことなんですけど、どうしても細かいところまで素材を集めるのは面倒です。

大抵、用途に対して思い通りの素材なんてフリーだけでは見つかるものではないと思います。

ただ、加工OKの素材であれば、多少編集することで、差分を作ったり、用途に近いものを作り出すことができることに気が付きました。利用規約に注意!)

前の項で紹介した「それっぽいUI」も、素材を貼ることで機械的なボタンから、ゲームの世界観にあったものになっていました。


f:id:aluminum_pepe:20190609030103j:plain
はむちゃんGo!のタイトル。それっぽくない?


ということで、素材に対してもそれなりに気を使っていきたいと思います。


そこで、

使う素材は「いらすとや」に縛る

ことにしました。(なんで?)


一応、「いらすとや」さんのよくあるご質問より、

イラストの一部を加工して使うことはできますか?

問題ありません。ただし過激な表現やグロテスクな表現、法的に問題のある表現など、素材の印象を損なうような利用はやめてください。また、いらすとやのものと分からなくするための加工もご遠慮ください。

加工・トレースをしても素材部分の著作権は作者に帰属しますので規約に沿ったご利用をお願いいたします。


とか、


スマートフォン用のアプリに利用できますか?

問題ありません。ただし広告を掲載しているものや課金システムが導入されているものについては商用利用となりますので点数制限があります。

また「課金をすることでイラストやキャラクターが手に入る」といった形ではご利用できません。


とのことで、加工したりスマホアプリにするのは問題なさそうです。

ついでに商用利用するつもりもないので、点数縛りも考えなくていいと思います。

(商用利用する際は、20点まで自由、それ以上は有償だそう。)

いらすとや素材をうまく使わせて頂きたいと思います。


UI

そんなわけで、「UI」の話に戻ります。

今回の進捗はゲーム部分ではなく本当にUIの部分しか進めていないからです。



タイトル画面

まずはタイトル画面です。


f:id:aluminum_pepe:20190608122340p:plain


はーい強烈ですね()

こんな雰囲気で作っていくと思います。

タイトルに関しては色々と雑で思うところはあるのですが、「はじめる」ボタンは、



f:id:aluminum_pepe:20190608122632p:plain


この、毎月のタイトル文字の10月を表すイラストを少し加工してボタンにできるようにしています。



ホーム画面構成

一番ソシャゲっぽい場所です。


f:id:aluminum_pepe:20190608123321p:plain


構成としては、上から

  • ユーザー名などが表示される(はず)の上側のステータスパネル(と名付けました)、

  • ボタンによって中身(クエスト選択やユニット図鑑)の変わるコンテンツパネル、

  • コンテンツパネルの中身をボタン操作で決めるボタンパネル

と大きく3つに分かれていて、ステータスパネルとボタンパネルを固定しながら、コンテンツパネルの中身が遷移するような仕組みです。


■ホーム


f:id:aluminum_pepe:20190608123321p:plain

これは、「ホーム画面」です。

ボタンパネルの、「Home」を押すとコンテンツパネルの中身がこうなります。

ソシャゲで言う、タイトル開いてまず出てくる画面という位置付けです。


f:id:aluminum_pepe:20190609031900j:plain
こんなやつ。ぺコリーヌかわいい。


多分イベント情報が出てたり、ここからでも主要なシーンに遷移できたりするんですよね。

実装内容としては、

  • 時間が分かるデジタル時間表記

  • 遊び方が見れる(遊び方ウィンドウが開く)ボタン

位しか今は実装できていません。

「キャラ変更」とは、ホームに配置できるキャラを設定できる機能のことです。

さっきのホーム画面例にいた、キャラクターの事です。

これだけ旧バージョンの画面なのですが


f:id:aluminum_pepe:20190609032553j:plain

こんな感じになる予定です。



f:id:aluminum_pepe:20190608235803g:plain


遊び方ボタンを押すとこんな風に遊び方が書かれたウィンドウが出ます。(雑文章)


■ステージセレクト


f:id:aluminum_pepe:20190608235705g:plain


ゲーム画面へ移行する前の、ステージ選択画面です。

ここはかなり「ディバインゲート」を意識したUIになっています。

上のステージが並んでいるボタンを押すと、下のパネルに押したステージの詳細が表示され、「START」を押せばゲームが開始します。


f:id:aluminum_pepe:20190609034423p:plain
旧ディバゲUI。ステージセレクトと詳細はこっちは2回に分かれてる。



■ブック(図鑑)


f:id:aluminum_pepe:20190608235616g:plain


キャラクター図鑑です。

いままで遭遇したキャラが一覧として表示される予定です。

ボタンを押すと対応するキャラの詳細が見れる予定です。


f:id:aluminum_pepe:20190609043046p:plain

キャラリストはプリコネ、キャラ詳細画面はディバゲを参考にしている感じ……かな?


アザーズ(その他)


f:id:aluminum_pepe:20190608233959p:plain


その他です。何か用途があるはずです()

もともとBGMやSEの音量が設定できるオプション画面にするつもりでしたが、今は手が空いていないので、開発環境だとか使用アセットを記述したクレジット場面みたいになっています。これはこれで必要だと思いますね。


UIアニメーション

今回一番頑張ったところです。

むしろここだけ書けばよかったのでは()

UIが遷移するときに、ただ「カチカチ」と切り替わるのは今時のソシャゲUIとしては、ありえないですよね。

というわけで最低限のアニメーションを付けました。

それが、こんな感じです。


f:id:aluminum_pepe:20190609044023g:plain


どうですか、それっぽく出て来たり引っ込んだりしてるよね!!?


一度はUnityの機能である「Animation」をUIオブジェクトに適応してはいちいち設定して動かしていたんですが、なんだかすごくめんどくさかったんですよ。

Unityのためのアニメーションの設定をいじったり、animatorに変数渡したり……、

大した事のないアニメーションにいちいちキーフレームを打つのがなかなかしんどかったのです。

自分のやり方もきっと悪かったんでしょうけど、「これくらいならスクリプトだけで動かしたい」みたいな気持ちが強くなったため、DOTweenを使ってみることにしました。


DOTweenの知識もゼロからはじめたので、色々詰まりましたが、少しずつ慣れてきて、UIアニメーションを設定するシステムを作れたので満足です。

今は遷移アニメーションがごちゃごちゃで統一感がないですが、色々試してみてるということで。

「UIアニメーションを設定するシステム」についても説明したい(というかここが最大のポイント)のですが、締め切りが近いのでここでいったん公開してしまいしょう。(いっそ別の記事で書くかも)

え?過ぎてるって???


Androidビルド


もちろん実際にAndroidビルドもして、実機でも見てみてます。


f:id:aluminum_pepe:20190609045016j:plain

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

スマホアプリは画面サイズがまちまちのため、それに対応できるようにCanvasは設定しているはずです。

ちなみウチのDIGNO T 君は調べたところ540x960だったため、UnityのGameウィンドウでのテストはそのサイズに合わせています。



課題

まだまだUIだけでも未実装の機能が山ほどありますし、UIアニメーションも全部には設定できていません。

UIに画像素材も貼り付けられていないので、見た目もまだ、Unityって感じですね。

ゲーム機能の方も調整が必要なのでUIばかりにうつつを抜かしてないで、作りたいと思います。



締め

というわけで、終わり。


お疲れ様でした。多分加筆修正します()

宣言した締め切りにはとりあえず間に合わせるぞ(間に合ってなかったよ)


見てくださった方がいましたら、ありがとうございました。




次回進捗発表予定日 7/6(土)

頑張って自分。