Posts 個人アプリ「デレガイド」の紹介
Post
Cancel

個人アプリ「デレガイド」の紹介

デレガイドは、スマホゲームアイドルマスター シンデレラガールズ スターライトステージ (デレステ)のサードパーティツール iOS アプリです。カード図鑑、ライブシミュレーターなどの機能を付いています。

現在、App Store にてリリースされ、4.9 星評価・600 件以上のレーティングをいただきました。また、アプリに関する告知やアプデ情報は @dereguide2 にて発信しています。

技術点概要

  • WWDC19 から SwiftUI を学び、多くの画面を SwiftUI で実装
  • UIKit による複雑図形の描画
  • Combine による MVVM アーキテクチャを使用
  • 複雑な計算ロジックを持つスコアシミュレーターの構築
  • Instrument による計算と描画性能の観測と改善

開発背景

デレステというゲームは、上から流れてくるリズムアイコンが下部の判定箇所と重なった時にタップなどしていく音楽ゲームです。ゲーム内ではこのプレイ過程をライブと呼びます。

ライブを行う前、プレイヤーはアイドルカードを選び、ユニットを組みます。カードにはそれぞれ、ライブに有用な特技が持っていて、ライフ回復、スコアボーナスなど、今は既に 30 種類以上の特技が存在しています。

すると、いかにして最適のユニットを結成して、より高い得点を獲得するのかが、デレステのゲーム性の一つになっています(いわゆるスコアタ)。今まででは、あるユニットを使った最終スコアを知るために、実際に 2 分間の曲をプレイしないと分からないので、結局、最適したユニットを探すために、2 分間のプレイを繰り返して試行錯誤をしなければならなくて、非常に手間をかかります。

こういった検証過程が簡単にできるようにするのが、デレガイドを開発した当初の目的でした。

開発過程

2019 年 6 月、WWDC19 で新しい UI フレームワーク SwiftUI と Reactive Programming フレームワークの Combine がリリースされ、これらを学ぼうとして実際に開発に使うのが一番手早い方法と思い、上述の背景を踏まえ、9 月からデレガイドの開発を始めました。

3 ヶ月くらいをかかり、まずカード・ライブ図鑑を完成し、2020 年 1 月で App Store にリリースしました。その後まだ 3 ヶ月をかかり、ライブシミュレーション機能の初版を 4 月で実装しました。

しかし、デレステゲーム内で、特技をめぐるスコアの計算ロジックがかなり複雑で、初版からバグが多く、また、新特技と新プレイモードの追加も並列に行われていて、そこからは常にユーザーからのフィードバックをもらいながら、シミュレーション機能の改善をしてきました。

アピール点(?)

カード図鑑と絞り込み

カードのアピール値(能力値)、センター効果、特技などの情報を展示する機能です。

カードリストでは、汎用性の高い絞り込み機能を実装しています:

絞り込み機能の実装詳細は、Swift でアプリ内アイテム絞り込みの話を見てください。

そしてカード詳細画面:

ライブ図鑑と譜面

音楽ゲーム自体を楽しむプレイヤーが、本番挑戦する前に譜面を確認できるようにするため、譜面の確認機能を提供しています。

実装困難点:リズムアイコン(通称ノーツ)などのコンポーネントは全部カスタムなビューで、2 分間の曲の中にノーツ数が千を超えるものもあります。パフォーマンスから考えると、それらを全部一度に描画することができず、スクロールの位置に合わせて動的に描かなければなりません。UIBezierPath を使ったアイコンの描画とか、UITableView に模倣した ScrollView の差分更新とか、UIKit を用いて軽量で正確に描画することが難しいでした。

シミュレーター

前述の通り、ゲーム内ライブのスコア計算をシミュレートする機能です。

ユーザーがユニット、曲などの条件を設置してからシミュレーションを行います。ノーツごとのスコア情報を譜面上で確認することや、最終スコア分布の確認もできます:

シミュ過程の詳細ログ譜面でノーツチェックスコア分布

実装困難点がいくつあります:

  • 特技効果の再現

    30 種類以上の特技効果をゲーム自体と異ならなく再現すること。他の特技に参照するとか、互いに影響を与えるとか、さらに Grand というカード 15 枚が参戦するプレイモードが追加され、後期になればなるほど特技の仕様も複雑になります。

  • 複数シミュレーション

    特技の発動には確率があり、同じユニット編成で同じ曲をプレイしても、確率によって特技が発動したりしなかったりして、違うスコアが出てくれます。そのため、デレガイドは複数回のシミュレーションを行い、どの区間のスコアが出やすいとか、スコアの期待値とかの情報を計算します。

    しかし、もし単純に 1 回のシミュレーションを、例えば 1 万回を行うと、iPhone 11 では 4 秒くらいの時間がかかります。そこで、時間をかけて、グラフ構造を用いたアルゴリズムを開発し、その時間を ms レベルに縮むことができました。

iOS 13 時代の SwiftUI の制限

アプリ全体的な困難点として、iOS13 時代の SwiftUI がまだ API が少なく(バグも多く)て、少し複雑なものを実現しようとしたら詰んだことが多くにあります。例えばユニット編集画面でのアイコングリッド:

初期の頃 LazyVGrid がまだ無く、軽率に H/VStack ForEach を使うと、すべてのアイコンが一気に描画され、パフォーマンスとメモリが耐えなくなります。UITableView と同じ「表示された部分のみ描画する」な行為がほしいので、結局 GeometryReaderList で自前の実現をしなければなりません。

Roadmap

今後余裕があればやってみたいこと。

  • サーバー構築
  • アイドル誕生日通知
  • スクショでシミュレーションを自動入力(深層学習による物体検知)
  • スクショで手持ち入力(画像処理)
  • ゲーム MV スクショ整理機能(Image Classifier)
This post is licensed under CC BY 4.0 by the author.

直感で性能改善をするな!

【SwiftUI】OptionalObservedObject の実現

Comments powered by Disqus.