[LINE] アニメーションスタンプでじゃんけんを実現する

アニメーションスタンプの仕様と制作環境の続きです。

じゃんけんを実現する

通常の静止スタンプでは絶対に同時に出せない「拳」を、動いている「4秒の猶予時間」を利用して繰り出すことによって、トークルームでのじゃんけんを成立させる…という試みですが、ここにも仕様の壁が。

先頭フレーム問題

アニメーションスタンプの1フレーム目

アニメーションスタンプのメジャーなリジェクト理由ともなっている「1フレーム目」。アニメーションに対応しない環境や、ストアのサムネールとして表示するのが「1フレーム目」であるため、最初のフレームには、必ず「オチ」を配置しなければいけないという厳密なルールが存在します。つまり原則的にネタバレ仕様

アニメーションスタンプの最終コマが一瞬チラっと見えてしまったりするのは、このためです。

例えば

LINEスタンプ「じゃんねこ」 チョキ(旧版)再生

LINEスタンプ「じゃんねこ」 チョキ(旧版)

タップで再生

最初に一瞬チラっと「チョキ」が見えてしまっては、勝負が成立しない…。APNGには、じつは「1フレーム目をスキップして再生する」というオプションもあるのですが、これも「不正形式」扱いで使えず。

回避策

そこで考えたのが、高速切替殺法。秒間20コマをフルに使って、「グー」「チョキ」「パー」をめまぐるしく入れ替えて、最初の「チラ見せ」をうやむやにする方策です。

ところがもうひとつ壁が。

ループ問題

20fpsだと、アニメ自体は1秒間。1秒以内にお互いの手を出すのは、相当のLINEの遣い手でもハードルが高い。最長4秒の猶予を確保するためには、「1秒×4回ループで4秒」という設定になります。

LINEスタンプ「じゃんねこ」 グー(旧版)
再生

LINEスタンプ「じゃんねこ」 グー(旧版)

タップで再生

ぱっと見は分かりませんが、動体視力を鍛えるとループの継ぎ目が「グー」であることが分かってしまう…。先頭と末尾の「オチ」フレームを同じ「グー」にする必要があるため、ループするとそこだけ2コマ連続となって、ごく一瞬ながら「グー」が止まって見えるのが理由です。

回避策

Adobe AnimateCCでLINEアニメーションスタンプ、じゃんけんを実現するタイムライン

それならば、それも隠してしまえるように、他にもわざと「2コマ連続同じ手」になる部分を入れて視覚的撹乱をつくりだしてみてはどうか…タイムラインの中に、気づかない程度のイレギュラーなうねりを与えました。

完成した動き

LINEスタンプ「じゃんねこ」 チョキ再生

LINEスタンプ「じゃんねこ」 チョキ

タップで再生

これで4秒間、相手の手がほぼ判別不能になりました。ぜひ、LINEでじゃんけんしてみてください。\(^o^)/

じゃんけん以外のアニメ

  • ひょこっと登場
    ひょこっと登場
    ひょこっと登場

    タップで再生

  • OK!
    OK!
    OK!

    タップで再生

  • 決定
    決定
    決定

    タップで再生

  • THANKS
    THANKS
    THANKS

    タップで再生

ループさせるものは、オチコマからアニメーションが開始するようにこしらえました(チラ見せがイヤなので堂々と見せる)。これでつなぎ目が無くなります。紹介ページにて、原寸サイズのスタンプ画像をすべてフリー素材として開放していますので、使い道は無いかもしれませんがご自由にお持ち帰りください。

動きの参考

今回はAnimateCCのトゥイーンにずいぶん頼ってしまいましたが、もっとアニメらしい中割り作業を楽しめる余裕が欲しいところ。昔のFlash本をひっぱりだしてきて再確認しましたが、高評価のレビューで書かれているとおり、エッセンスはまだまだ参考になります。おすすめです。

関連リンク