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