tosumalog~ IT的備忘とパパ的備忘を書き綴ります ~

tosumalog

~ IT的備忘とパパ的備忘を書き綴ります ~

【FFRK】ウォーリーを探せ!みたいなゲーム作ってみた

こんにちは、tosumaです。


今回もFFRK絡みかつファンサイト関連の記事です。技術的な話なのでプログラムやシステムについてご興味のある方はお時間いただけると幸いです。
(最近多いな)

 

 

1.前置き


ファンツールというかゲーム作りに関しては基本的に勉強がてら取り組んでいます。
やる気のない勉強のイラスト | かわいいフリー素材集 いらすとや

私は10年以上この業界に居るので、出来上がっているプログラムやシステムを見るとある程度は「こんな仕組みなんだろうな~」というのはイメージできます。


......が、実際にやってみるとイメージ通りにはいかなかったり、ちょっとした壁によくぶち当たります。




なので、実際にやってみて、壁にぶちあたって、解決方法を模索して、解決するサイクルがとてもとても大事なんですよね。

それが一番大事 | 言葉は言霊 ~話す言葉によって未来が変わる~


プログラムというのはイメージの世界だ...
実装方法がイメージできないものはプログラムでは実現できない...

アニメ『葬送のフリーレン』リヒターとは?声優は花輪英司さん! | アニメニュース | アニメフリークス


私が作るゲームでは加えて以下コンセプトありきで作っています。

・プラットフォームを問わない
・シンプル
・何かしらFFRKを連想できるもの

プラットフォームを問わないという事は必然的にWebベースのゲームとなります、そのためイメージやサウンドなどは極力避けるor縮小したものを使う必要があります。

※レコパのSE、イメージ以外はすべてライセンスフリーのイメージやサウンドを使うようにしています


2.使っているプログラム


ゲームを作るプログラムはJavascriptベースになっています、シンプルの極みです。

あと、これまでもよく使っていますが、ライブラリにはenchant.jsを選択しています、enchant.jsはオープンソースHTML5向けゲームエンジンになります。
enchant.js - Wikipedia


※ライブラリ…あらかじめゲーム作りに必要なロジックが準備されているもの

enchant.jsはシンプルで難易度も高く無いため個人的には気にいっています。

ただ、開発自体が何年も前に終了してしまっているため最新のブラウザで問題が生じた場合に対処がされないなどリスクはあります。

また、マルチタップに対応していないため複数の指での同時操作するようなゲームは作る事ができません。

なので、いずれはUnityなどにシフトしようかな、とは考えてはいます。




ゲーム作りもこれで5本目ですからね、比較的スムーズにサクッと作れるようになってきました~。



なんて思ってたんですよ。(後述)


3.ゲームの概要


画面に無数に配置されたキャラクターの中に隠れているモグを見つけるゲームになっています。


見つけてタップすると加点されるので、制限時間内でより多くのモグを見つけて最終的なスコアで競う感じですね。

※ゲームはこちらです ⇒ モーグリを探せ!


えっ? どこかで見た感じがするって?



えっ?
ウォーリーをさがせ!展」が東京・横浜・大阪・名古屋で、日本初登場の絵本原画&イラストなど約150点 - ファッションプレス


画面イメージはこんな感じですね。


とにかく目に優しく無いですねぇ。笑



......とまぁ、こんな感じですが


少しでも楽しんで頂ければ幸いです!!


4.工夫した点


ずっと同じ感じだと単調になるので、進捗に応じて以下の工夫を取り入れています。

①モグが段々と小さくなる
②制限時間の増加量が段々と少なくなる
③フェイクキャラが出現&段々と増える
④UFOが出現
⑤ピンチになるとプレッシャーをかける
⑥選択キャラごとにアビリティを用意

UFOはどこの馬の骨かわからん奴ではなく、もちろんFF8のやつです。
FF8】コヨコヨ&UFOイベントの攻略方法【ファイナルファンタジー8】 - ゲームウィズ
※画像はネットで拾ったもの

⑥は実は隠しキャラを1人用意しています......と言っても別に特別強いわけでは無いです。笑


5.公開中断


このゲームですが4/15に公開したんです!!


見てください、この呑気なポスト。

 

そ の 日 の う ち に 公 開 停 止 し ま し た 。


いやいや......どうも一部のAndroidで動かなかったんですよ。
(制限時間が進まないようになってしまっていた)

基本的にIPhoneとパソコンと手持ちのタブレット(Android)でのみテストしており、その範囲内では普通に動作していたため気づきませんでした......。

......で、プログラムを眺めても問題が見つからず、ネットで類似事象をえっちらおっちら調べてるとありました。

teratail.com


原因は addChild しすぎ

基本的に[生成]⇒[削除]⇒[生成]がセオリーかと考えていたんですけどね、どうもAndroidの一部だとそれでは描画が耐えられないようなのでした。

描画ではなくメモリ上に展開する部分がネックなんですかね、メモリ上に展開済みであればサイズ操作、位置操作、透度操作などなどはサクサクと軽い感じでした。

Andoroidの一部だとremoveChildしてもメモリから即消えないんですかね、対策としてはaddChildした後はremoveChildは一切しないように見直しをしました。

<対策前>
画像
<対策後>
画像

モグやハズレキャラなどは次ターン時には座標を変更するのみ、UFOやフェイクなどは一時的に画面外の座標を指定して移動したりリサイズする事で対処しています。

そうする事でなんとか本問題は解消できました。


これ実は以前に落ちモノゲーム作ってる時に同じ問題に直面して心が折れてたんですが、今回は調べ出して割とすぐにアタリをつける事が出来て最終的に解消できたので良かったです。笑

 

6.実装のポイント


<構成>

ゲーム構成(シーン)は4つで構成しています。

①ロード
②タイトル
③メイン
④リザルト

ゲームを起動するとまず[ロード]シーンを表示、ロードが終わると自動で[タイトル]シーンへ遷移、開始ボタンを押すと[メイン]シーンへ遷移、制限時間が無くなると[リザルト]シーンに遷移しています。

また、[リザルト]シーンからはボタンに応じて[タイトル]シーンもしくは[メイン]シーンへ遷移するような感じになっています。

<キャラの優先順位付け>

今回はモグ、ハズレ、フェイク、UFOとたくさんのキャラが画面上に配置するわけですが、重なる優先順位にやや苦戦しました。

モグがハズレやフェイクに重なるとタップが出来なくなり詰んでしまいます。笑
そのためハズレ<フェイク<モグ<UFOとなるように優先順位をつけています。

また、ハズレの中でも最大2種類のキャラになるようにしていますがどっちかが下で残りは上だと見た目的にイマイチなので入れ子になるように各要素ごとに優先順位を制御しています。

<難易度を調整するフェイクキャラ>

フェイクキャラを配置したくて考えたんですがFFってドラクエモシャス的な要素やポケモンメタモン的なのがパッと思い浮かばなかったんですよね。

......で、悩んだ末に、FF6モーグリスーツがあるのを思い出して、ストラゴスとリルムは装備すると見た目もモグになるんでこの2人をフェイクキャラとして採用しています。笑

わざわざドット画像もオリジナルで作ったんですが、良い感じでジャマなので満足しています。

<難易度を調整するお邪魔キャラ①>

30ターンを超えるとそれから5ターン起きにUFOが出現します、タップするとリサイズした後に爆発エフェクトのイメージ数枚をフレーム単位で切替することでアニメーションっぽい感じにしました。

最近はドット操作も慣れてきたので良い感じにこれくらいのアニメーションなら作れるようになりました。笑

<難易度を調整するお邪魔キャラ②>

プレイヤーを混乱させる目的(性格悪い)でFFRKモグとFF6モグを配置するパターンがあります、これは10ターンに1回出すようにしています。


7.あとがき


上述した通り、以前は行き詰っていた問題にもスマート(?)に対応できたりとゆるやかな成長が感じられました。笑

本当はアクションゲームを作っていたんですが、先日の縄跳びの評判があまりにも悪くってアクションは一旦避けました......。苦笑


私の最終目標はロックマンみたいなゲームを作る事なので、また引き続き勉強&経験値積みしてレベルアップしていきたいと思います~。


それでは皆さん、引き続き良きレコパライフを!


過去記事

【FFRK】ランキングサイトを作りました - tosumalog

【FFRK】ランキングサイトを作りました(技術話) - tosumalog





f:id:tay_tosuma:20200219062206p:plain
お読み頂き有難うございました。



※よければもう1本 関連記事をお読み頂けると幸いです

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com


 

【FFRK】Tire表の作成ツール作ってみた

こんにちは、tosumaです。


今回はFFRK絡みかつファンサイト関連の記事です。技術的な話なのでプログラムやシステムについてご興味のある方はお時間いただけると幸いです。

 

 

1|まえおき

FFRKももうすぐ10周年ですね。


それはさておき、オリジナルのTire表(=ランク表)を作成するツールを実装しましたので先日ファンサイトへ公開させて頂きました~。

Tire表はよく格闘ゲームとかのキャラの格付けなどで用いられるS~Eランクとかの
格付け表ですね、よく見かけるやつです。


なんとなく手持ちの格付けとか作ってみたいな~とふと思ったんですよね、だいたいファンサイトの新機能は私の「こんなの欲しい」がスタートです。笑


いや、だって無いなら作るしかないじゃないですか!





それはそうと、もし使えそうなら使って頂ければ幸いです。


という訳で、今回は実装した際のポイントを抜粋して紹介いたします!!

2|ゲームの概要

本機能のページはコチラです ↓
FFRK FanTool | オリジナルランクメーカー

タイトル含め自分だけの〇〇〇〇ランクが作れます。

作り方は「①タイトルを入力」⇒「②画像を選択」⇒「③[ランク表の作成]ボタンをタップ」の3ステップで作成可能になってます。

使い道としては、他プレイヤーとのコミュニケーション、キャラクターの強さなどの格付けや手持ち必殺技や育成状況の戦力格付けなどの整理に活用してもらえたら嬉しいです。

細かい使い方はコチラをご覧くださいませ ↓
FFRK FanTool | オリジナルランクメーカー 使い方

3|Tire表の実現

Tire表自体はTableを2種類掛け合わせて作成しています。

全体の大きな親Table(8×2)と、各ランクごとに更に子Table(4×5)とでの構成になっております、なお予め各ランクの子Tableの方は2~4行目は非表示しています。

そして、それぞれの1セル目に「+」ボタン用の画像を配置して、Clickイベントで処理が走る仕掛けになっています。

走る処理は以下の流れになっています。
(上記図の番号と連動)
①+ボタンをタップするとどの表のどのセルなのかを隠しテキストフィールドにセット
②キャラクター選択用のモーダルを起動(キャラクター選択はこの際に初期化)
③決定ボタンをタップした時点の選択キャラクターを①の表とセルに対して埋め込みする

③では加えて、キャラクターが選択された場合に次のセルに「+」ボタンを設置し、5の倍数に到達した場合には次の行を表示する処理も一緒に行っています。

モーダルはセルの数だけ設置はくそめんどい......もとい、非効率なので1つのモーダルを上記の考え方で使い回す手法を取っています。
(つまり、1つのプログラムが初期化されて表示、非表示される)

4|HTMLのイメージ化

生成したTire表をイメージに置き換えるのは毎度のことながら「html2canvas」を利用させて頂いています。
html2canvas - Screenshots with JavaScript

イメージ化する範囲を指定してHTMLをイメージ化するわけですが、当機能は生成する大きさが選択したキャラクターの数次第で動的となるため、事前に定義する事ができません。そのためデバイスによっては高さが定まらない悩みがつきまといます。

なので私は(今の所は)このようにしてその点を解消しています。
①コンテンツの最下部にブロックの埋め込み
②最下部ブロックの画面左上頂点からの絶対位置を取得
③html2canvasのheightオプションに②を指定する

※以下プログラムのイメージ

 

5|X(旧Twitter)への共有

今回もX(旧Twitter)に共有できるようにしたんですが、ここで問題が1つ発生しました。
[ファンサイト]⇒[API]⇒[ポスト編集画面]と情報を転送した際にデコードされてしまう事がわかりました。

つまりコレが


勝手にこうなるわけです。


まぁ普通の観点なら見やすい、識別しやすいと有難い機能なのかもしれませんね。
いらすとや on X: "これで一旦素材の更新は終わります。沢山の温かいメッセージをありがとうございました。あっという間の9年でした。時期は未定ですが、まだ描きたいものは沢山あるので環境を整えて再開したいと思います。  しばらくはのんびりインスタをやってるので ...


......でもね、私がX(旧Twitter)に共有できるようにした目的は[ファンサイト]⇒[X(旧Twitter)]の後に逆方向で[X(旧Twitter)]⇒[ファンサイト]と気軽にアクセスするためなんです。

......で、勝手にデコードされてしまうと、URLが日本語になり、ポスト上のURLをタップする事ができません(途中で切れたURLになってしまう)。


その場合、どうなるのか?


ポストのURLであろうと思われる部分をわざわざ全体コピーしてブラウザのアドレスバーに貼り付けなどをしないとファンサイトへは戻れません!!




なんだこの非可逆性!!
なんだこれは!?オレはこんなのはじめてみるぜ|まっさ(◎-◎;)のブログ|まっさ(◎-◎;)のページ - みんカラ


こんな仕組みは絶対ダメです。論外です。
ふざけんな!! - 煽り画像・ネタ画像・レス画像まとめ


で、悩んだ結果、独自のエスケープを仕込む事にしました。


こんな感じでファンサイト側でエンコードした文字列に対して「%」を「@」に置き換えています。


そしてこのURLでファンサイトで戻ってきた場合には開いた際に今度は「@」を「%」に置き換えています、それでやっと解決。

そしてこの対応の為にタイトルには半角記号を使えなくしました、エスケープ記号である「@」と任意の文字列である「@」の区別がつかないからですね。


まぁ頑張れば識別可能ですが、これ以上難しくしたくなかったんです.....。

6|今後の予定

本当はS~Gの定義づけもこの画面で行えるようにして、一緒に画像化するなどをしたかったんですが、↑の問題があったので諦めました。

あとXで「プロデューサーを2人追加して~」とリクエスト(?)を頂いたのでそのうち追加予定です。笑



それでは皆さん、引き続き良きレコパライフを!


過去記事

【FFRK】ランキングサイトを作りました - tosumalog

【FFRK】ランキングサイトを作りました(技術話) - tosumalog





f:id:tay_tosuma:20200219062206p:plain
お読み頂き有難うございました。



※よければもう1本 関連記事をお読み頂けると幸いです

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com


 

【FFRK】ファンサイト(頭の)棚卸

こんにちは、tosumaです。


今回はFFRKのファンサイトついての記事です。技術的な話なのでプログラムやシステムについてご興味のある方はお時間いただけると幸いです。

過去記事

【FFRK】ランキングサイトを作りました - tosumalog

【FFRK】ランキングサイトを作りました(技術話) - tosumalog

 

1|まえおき

2022年の5月から運用してるファンサイトですが、コツコツと改善や機能追加を繰り返した結果、当初10本程度だったプログラムの本数も今や200本以上あります。笑

(思い付きで作ったサイトにしては機能盛り盛りじゃないですか?笑)


当サイトはベースとして 無料ホームページテンプレート.com さんのテンプレを使っています。利用している理由としては、スマホとパソコンとでレスポンシブなレイアウトを意識していたのでテンプレがあると開発工数が大幅に縮小できるためです。

と言ってもほぼ原形無くすくらいには作り変えてはいます。笑
お借りする上での規約の都合、フッターにはクレジット表記をするようにしています。


で、元々は運用安定したら1から作ろうと思っていたんです。



が!



前述の通り機能が増えすぎて、もはや1から作り直すのは膨大な労力が伴います......もうこのまま行くかもしれません......。苦笑

2|変わっていない考え方

本サイトは以下をコンセプトに作りました。

・プラットフォーム(スマホ、PC)に依存しない
・X(旧Twitter)アカウントさえあれば使える
・X(旧Twitter)のクリア報告と双方向で連動できる
・日本ユーザーと海外ユーザーとで共存できる
・日々のFFRKをより有意義にする支援ができる
・FFRKのプレイヤー間で情報を共有できる

100点!!とは言いませんが、概ね達成できたんではなかろうかと感じています、そしてこのコンセプトが今後も変わる事はありません。

また、私(1レコパプレイヤー)自身が「こんな機能あったらFFRKやるのに便利だな~」と本気で感じたものを作るようにしています。それ以外ではリクエストで頂いたものなんかは基本的には取り入れるようにしています。

なんか色々と作ってる感はありますが別にファンサイトで何でもやるつもりはなく、他のサイトだったり公式Wikiなんかで実施されているような事はそちらを使う方がいいと考えています。

ラビリンスダンジョンの検索機能追加の時のように類似の機能が公式で取り入れられれば基本的にその機能はファンサイトからは廃止する方針です。

公式がやってくださるのが一番いいですもんね。笑

3|変わった考え方

私の設計思想では「共通化を特に意識しています。

つまり、似たような機能や似たような情報は極力共通した持ち方をしています、そうする事で開発も運用維持も工数が大幅に縮小でき、工数だけでなく更新漏れなどのリスクも軽減できます。

なにせ1人で運用していますから、とにかく日々のメンテ時間だけは極力減らしたいんです。例えば毎週発生する必殺技構成画像メーカーや必殺技検索なんて追加時の実働時間は5分未満です。笑


はい、ここまで前置きです。

通化に重きを置いてるんですが、以下の共通化についてはもう一切止めました。

Javascript(画面上のアクション)
CSS(画面の見た目)


いやいや、このあたりこそ共通化すべきでは?


私もそう思ってましたし、仕事では今もそう答えるでしょう。


理由は3つあります。

①キャッシュが更新できない
②部分的なアップデートができない
③ゲーム側の更新についていけない

まず①については、ScriptやStyleを外出し管理すると変更時にキャッシュの更新をしないと利用者側で反映されません。
機能のリリースや不具合対応時にはキャッシュ更新をしてもらうよう最低限の処理を仕込んでいます。

が、誰がどんな端末を使っていてどんな設定をしているかわからないですし、利用者側のITリテラシーの差もあるため外出しにする事は止めました。

次の②③はほとんど同じような話です。
今までは選択肢が2つだったものが●●画面だけ3つになるような変更があった時に共通化してしまっていると非常に手が出しづらいんです。

1つの修正がそれぞれに反映されてしまいます、こういった小さい変更がちらほら発生してきました。

その都度、「影響調査して」、「微調整して」、「別の共通部品作って」・・・と繰り返していると逆に時間が掛かってしまいますし、似たような部品が結局は溢れてしまいます。

なので、基本的なレイアウトや処理などを除き画面固有のものは各画面ごとにプログラムを作るように今はしています。


今はA画面に手を加える場合の他画面への影響調査は0です。


ゼロ~♪
NEWS ZERO | CRYPTOMERIA


グダグダ書きましたが、ようは個人が日々更新していくようなサイトの場合、見た目やアクションの共通化はしない方がラクチンよ♪って事です。



IT業界歴(たぶん)15年、実際に2年ほど毎日サイト運営してきた現時点の私の持論です

4|作りかけの機能

機能名にβ版とつけているものは私の中では完成していないものになります、具体的には以下の4つの機能が該当します。

①レジェンドマテリア検索 β版
②個別検索(結果)スクショメーカーβ版
③こだわりランキング β版
④Dr.モグ QAメーカー β版

①について、先日リクエストを頂いたので突貫で作ったんです、現状でも最低限の検索は可能なレベルにはなっています。ただ、レジェンドマテリアで何を検索条件にすると便利か?など検討が終わっていません。

②について、レイアウトの調整が終わっていません。
プロフィールメーカーと必殺技構成画像メーカーでかなり苦労したんですが、結果を画像にして、ダウンロードできるようにしてはいるものの、表示するスマホの種類や大きさによってレイアウトがかなり変わってしまいます。そのためデバイスに応じた出力調整を行う必要があります。

③について、1人旅攻略ランキングだけはイメージした形にできたんですが、推しシリーズ攻略ランキング、推しキャラ攻略ランキングのイメージがまだ検討段階レベルです。せっかくプロフィールメーカーでシリーズ毎の画像はあるので良い感じに表現したいなぁと思っていて止まっています。笑

④について、これも②と同じなんですが端末によって表示が安定しません。苦笑
いやね~全員がiPhone15使う!!とかなら瞬殺できるんですが、iPhone1つだけ取っても20種類くらい有るんですよ。苦笑


なので、この辺りは時間がある時にコツコツと進めています。
①③は今月中に終わらせたいなぁとは思っています。(小声)


②と④は難しいんすよねぇ...というか必殺技構成画像メーカーVer2と同じように改善する場合、1から作り直すことになるので、3ヶ月くらい掛かりそう。苦笑


あ、あとはリクエスト頂いているもので対応できていないものが今日時点で2件ほどあります。



そんな感じで、粛々と引き続き運用していきます。笑

今後とも何卒よろしくお願いいたします。
また5月11日(3周年)に何か書きます~。


それでは皆さん、引き続き良きレコパライフを!



f:id:tay_tosuma:20200219062206p:plain
お読み頂き有難うございました。



※よければもう1本 関連記事をお読み頂けると幸いです

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com