#899 開発工程日誌「#043 image-motionのissue進捗」

こんにちは。影織です。

image-motionのissue解消の進捗
アニメーションを作るimg-motion側のバグをいくつか修正いただきました。
その中からいくつかを取り上げて書いてみましょう。

・netlifyで読み込むと、表示が小さくなる

→回線速度を変えてみたことで、画像の読み込みタイミングにより、
ずれが生じていることが判明したそうです。

画像取得方法を切り替えたことで、解決となりました。


・scaleがついた状態でアニメーションさせると、positionが変わってしまった状態で再生される

→CSSトランスフォームの書き順が重要で、
x10, y10の位置に動かしたモデルのscaleを変えた場合と、
scaleを変えたモデルをx10, y10の位置に動かした時とで、
表示にずれが生じてしまうことで起きていた問題でした。なるほど。

編集画面と再生画面とでこの書き順を統一させたことで、解決となりました。


・Safariで画像の前後関係が入れ替わってしまう

shape機能を使ったアニメーションと、transform: translateZの位置を入れたもので、表示が変わってしまっていました。
Safari固有の問題で、z-indexとtranslateZを併用すると、順番が崩れてしまうようです。

今回は、手作業でtranslateZを再セットすることで解消が必要そうです。
今後、アニメーション新規作成の時には、デフォルト値が全て入った状態で作られるようにする必要があるかもね、
と話しました。



ストーリー機能の進捗

こちらも、ストーリーの仕様が固まってきたことで、ツールとしてかなり安定してきました。

各ゲームのシーンを、以下のようなjson形式のスクリプトを書くだけで作れるようになりました。






現時点で、以下のような機能が実装されています。

・fade-in/out
シーンのフェードインやフェードアウトをします。

・click
クリックを待って、次の動きに進めることができます。
クリックすることで進むgotoと、クリックを待たずに次のアニメーションにgotoする機能の2種があります。

・action_count
アニメーションの繰り返し回数を指定できます。

・action_end
アニメーションが指定回数終了した後、どのアニメーションに移るかを設定できます。


まとめ
img-motionとこのゲーム開発ツールさえあれば、
どんなポイント&クリックゲームでも作れるのではないかしら。

めちゃくちゃ強力なツールなので、ぜひ使いこなしていきたいと思います！