5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ElmAdvent Calendar 2020

Day 15

New3DS から利用可能なロマサガ2 のツールを Elm で作った

Last updated at Posted at 2020-12-14

昔々、Newニンテンドー3DS (以下、New3DS) からロマンシング サ・ガ2 (以下、ロマサガ2) のデータを参照するツールを Elm で作りました。
作ったものの、これまで特にネタにしていなかったので今回記事にすることにしました。

# 当記事内では Elm の技術的な話はそんなにしていません。
# Elm で開発されたツールの事例ということでおひとつ。

ロマサガ2 って何だ

1993年にスーパーファミコン用の RPG として当時のスクウェアから発売されたゲームソフトで、「フリーシナリオ」「閃き」「陣形」「継承」といったゲームシステムが特徴です。
2010年以降には種々のプラットフォームで移植版やリマスター版が発売されています。

ツールを作った動機

  1. 当時、入浴のお供に New3DS でロマサガ2 をプレイしていた。
  2. ロマサガ2 の「閃き」に関する情報を New3DS で参照したかった。
  3. New3DS で閲覧するのにいい感じのサイトが見付からなかった (New3DS のブラウザはページの読み込みが遅いので、できれば 1つの画面で完結しているのが望ましい) 。

というわけで自分で作ることにしました。

作ったもの

New3DS での表示

Elmアドカレ-New3DS版画面.JPG

PC での表示

Elmアドカレ-PC版画面.png

スマホでの表示

Elmアドカレ-スマホ版画面.png

ソースとか

何ができるツール?

各キャラクターの閃き可能な技が分かります。
また、技を閃くのに適したモンスターの情報が分かります。

ロマサガ2 ではプレイヤーが「この技を閃かせよう」と思っても、そのためには閃きに関する色々な条件を確認する必要があり、なかなか面倒くさいです。
このツールがあるとその辺を楽できます。
ただし、ある程度のゲーム知識がある前提のため、完全な初心者にとっては若干不親切かもしれません。

**閃きの仕様 (の概要)**

ロマサガ2 の閃きの仕様

ロマサガ2 では、戦闘中にパーティーキャラクターが攻撃を行うと技を閃く (覚える) ことがあります。
キャラクターが技を閃くための主な条件として「キャラクターの閃き適性」「技の派生」「閃き確率」の 3つがあります。

キャラクターの閃き適性

各技に対する「閃き可」or「閃き不可」 (閃き適性) が各キャラクターに設定されています。
つまり、閃きたい技がある場合はその技を閃くキャラクターをパーティーに加え、行動させる必要があります。

技の派生

各技について、その技 (派生先技) を閃く元となる技 (派生元技。通常攻撃を含む) が設定されています。
多くの技は通常攻撃から閃きますが、特定の技からのみ閃く技も存在します。
また、派生元の技が複数設定されている技も存在します。

閃き確率

派生元技と派生先技の組み合わせごとに、閃き難度が設定されています。
そして、各モンスターには技レベルが設定されています。

キャラクターがモンスターを攻撃したとき、攻撃対象モンスターの技レベル閃き難度の差によって閃き確率が決定します。
この閃き確率が、キャラクターが技を閃く確率になります。
基本的にモンスターの技レベルが高いと閃き確率も高いです。

開発アレコレ

開発環境

  • Visual Studio Code+プラグイン色々
    • コード書いたり。
  • GitHub
    • コード置いたりタスク管理したり。
  • Travis CI
    • テスト実行したりデプロイしたり。
  • Firebase Hosting
    • デプロイ先。

当時は GitHub Actions を使えなかったのでこの構成ですが、今なら全部 GitHub に置くのが楽だと思います。

システム構成

フロントエンド (Elm+SASS。あと HTML が少し) だけです。
Web API を介してバックエンドと通信し、さらにその先の DB からデータを取得…という構成にはなっていません。
開発当初は DB設計もしましたが、ツールの規模的にそこまでやらなくてもいいかな、と判断してフロントエンドだけで完結させることにしました。

画面の制限

New3DS の下画面の横幅は 320px 1 なので、ページの横幅もこのサイズにしました。
New3DS で表示することを最優先にしたので、ページ内のセレクトボックスや表のサイズは px 指定で固定にしています。

コーディング

Elm でこんな感じにいい具合にコーディング出来ました、みたいなことを述べられたらよかったんですが、特筆するようなことはないです。

画面レイアウトを大体決めた後、画面の上の方から順に実装を進めたら Model にフィールドが生えていってツールが形になった…という感じです。
TEA のカウンタサンプル の素直な延長線上にある作りだと思います。
追加したパッケージも elm-communityhtml-extralist-extra だけです。

強いて挙げれば技やモンスターデータの漏れ確認やテストデータの作成が大変でした。
これはデータ量の問題なので、Elm に限らず大変だと思います。
フロント側で全部やろうとしたら必然そうなるのかなと。

おわりに

ツールの使い心地はなかなかよいです。
New3DS のブラウザでも読み込みを待たずに結果を得られるので快適です。速さは正義。

当記事を読んでロマサガ2 に興味を持った方、もしくは丁度プレイされてる方は、気が向いたら使ってみてください。
割と便利かもしれません。

おしまり

  1. ニンテンドー3DS/3DS LL/2DS インターネットブラウザーの主な仕様New3DS のブラウザの仕様 には解像度の記載がないが、実機で確認したところ 3DS と差異はなかった。

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?