funde-rectangleのブログ

ウルトラごった煮

Adobe Animate:モーショントゥーンの座標整数化の自動化(ドット絵)

最近ドット絵描きさんのasahaさんが配信でAdobe Animateを
使ってらっしゃるというテクニックを聞いて、早速Adobeサブスクリプションを登録して、
色々試している日々です。

www.youtube.com



自分も同じテクニックでアニメーションを作ってみてるのですが、
これがすごーーーーーーーく便利で、いろんなオブジェクトを飛ばすのに超便利です!


ただ、ドット絵の描画ツールとして使うには1つ癖があり、
オブジェクトの座標に小数点が含まれていると、絵にアンチエイリアスが掛かってしまいます。
自分が意図しないかたちでぼやけてしまうので、困ったものですが・・・・
解決策としては座標の小数点を消すことになります。


f:id:funde-rectangle:20210320163619p:plain
こうなっちゃう

ただ、これを1つ1つ小数点を消し込むのはとても大変です。
今回はRPA*1を使ってこの処理を自動化することで、負担もかからないしサクサクっとできるようにします。

この記事内で利用するRPAはSikuliX 1.1.4*2です。
(SikuliXのインストール方法などは他のページを参照ください。javaのランタイムがあれば利用できます。)

f:id:funde-rectangle:20210320164336g:plain
くるくる回るお花

今回は予めこのgifアニメを作っておいて、それを斜め上に徐々に移動させるというものです。

1 使い方


f:id:funde-rectangle:20210320164150p:plain

スクリプトを使うのはこの状態から。

レイヤーにgifアニメを取り込んだ後、「ムービークリップ」→「グラフィック」に変更
貼り付けたのちにモーショントゥーンを作成し、
最初のフレームを選択→取り込んだgifアニメを選択して、
プロパティタブ:オブジェクトをクリックした状態です。
(詳しくはasahaさんの配信をご覧いただいた方がよいかと)

この状態で、以下のスクリプトをSikuliXで実行します。
(AdobeAnimate_Integerization.sikuliフォルダごとコピーします)

github.com



f:id:funde-rectangle:20210320163826p:plain

日本語のパスが含まれているとなぜか実行がうまくいかないので、
Cドライブの直下にフォルダを作成し、その中にスクリプトを保管します。
文字コードとか細工すればうまくいく気がしますが、とりあえず暫定で。)


f:id:funde-rectangle:20210320163835p:plain


SikuliXで開いたら実行!

f:id:funde-rectangle:20210320163844p:plain

モーショントゥーンのフレーム数を入力してOKをクリックすると
自動操作が始まります。

f:id:funde-rectangle:20210320163859p:plain

仕上がった後はこんな感じ。


Adobe Animateでのモーション作成の特徴は、
同じ動きをするオブジェクトを複製できることです。

f:id:funde-rectangle:20210320163917p:plain

1つ作ったらレイヤーごとシンボルに置き換えて・・・


f:id:funde-rectangle:20210320163926p:plain

オブジェクトを選択して・・・

f:id:funde-rectangle:20210320163934p:plain

コピペではりつけると!

これをGIFアニメとして書き出すわけですが、後ろの背景レイヤーは邪魔なので消します。
(分かりやすくするために黒背景にしてました)

f:id:funde-rectangle:20210320164005p:plain
f:id:funde-rectangle:20210320164020p:plain


f:id:funde-rectangle:20210320154654g:plain

出来上がったものはこんな感じです。
自分はこのGIFをAsepriteで取り込んで重ねて使ってる感じです。

f:id:funde-rectangle:20210320164030p:plain


この術を応用してできたのが、以下の絵です。
(速度などは変更してます)

f:id:funde-rectangle:20210320154707g:plain

2 スクリプトの説明

import math

count = input(u"フレーム数は?")

for i in range(1, int(count)+1):
    # インスタンス名クリック
    click("1614139124140.png")
    wait(0.5)
    type(Key.TAB)
    type(Key.TAB)
    type(Key.TAB)
    type(Key.TAB)
    type(Key.TAB)
    type(Key.TAB)
    # X
    # コピー
    wait(0.5)
    type('c',Key.CTRL)
    wait(0.3)
    Xlocate = App.getClipboard()
    if float(Xlocate).is_integer():
        #小数点がつかないときはそのまま
        output = Xlocate
    else:
        # 小数点削除
        output = math.floor(float(Xlocate))
    wait(0.5)
    type(Key.DELETE)
    # 貼り付け
    type(str(int(output)))
    type(Key.TAB)
            
    # Y
    wait(0.5)
    type('c',Key.CTRL)
    wait(0.3)
    Ylocate = App.getClipboard()
    if float(Ylocate).is_integer():
        #小数点がつかないときはそのまま
        output = Ylocate
        print("integer")
    else:
        # 小数点削除
        output = math.floor(float(Ylocate))
        print(str(output))
    wait(0.5)
    type(Key.DELETE)
    # 貼り付け
    type(str(int(output)))
    type(Key.TAB)
    
    
    #type('c',Key.CTRL)
    #Xlocate = App.getClipboard()
    # 小数点削除
    #output = math.floor(float(Xlocate))
    # 貼り付け
    #paste(output)
    # コピー
    #type('c',Key.CTRL)
    # 小数点削除
    # 貼り付け
    click("1614139158530.png")
    wait(0.5)
    type('.')
    click("1614139158530.png")

さて。処理順序は以下の通りです。

1.総フレーム数の確認

2.フレーム数分ループ
 2-1.インスタンス名テキストボックスをクリック(※)
 2-2.そこからXの座標のテキストボックスに移るまでTABキー押下
 2-3.値をクリップボードにコピー
 2-4.クリップボードの内容を取得
 2-5.値から小数点を取り除く
 2-6.テキストボックスに貼り付けなおす
 2-7.Yの座標のテキストボックスに移るまでTABキー押下
 2-8.2-4から2-6の処理を実行
2-9.次のフレームを選択(「.」キーを押下)
2-10.「オブジェクト」タブを選択(※)

※印の処理は画像のパターンマッチングで検出
 (もしこの画像のパターンマッチングでで実行が止まる場合は
  PCの環境ごとにキャプチャを取り直すor画像ファイルを差し替える必要があります)



ほぼキーボード操作を自動化させて、一部に画像のパターンマッチングでボタン操作をする格好ですね。
たまに2-3から2-6の処理で値がおかしくなって、画像の動きがずれることがあるみたいですが、
著しくズレるので流石に見てわかるかと。 Ctrl+Zで元に戻して再実行でOKです。


これがPowerAutomateでできるといいんだけどな~~
ウィンドウの指定方法がよくわからなくて戸惑っているところです
(画像ベースのRPAではないのでウィンドウ指定で動くんだけど、
 録画機能で生成したスクリプトだと、ウィンドウ名が変わるとちゃんと動かないという。)

*1:通称: Robotic Process Automation。PCの操作を自動化させるソフトウェアです。マウス操作やキーボード操作も自動でやってくれるものです。

*2:SikuliXは画像ベース(画面キャプチャを取得して、その中から画像でパターンマッチングすることでマウスのクリック場所を特定するもの)のRPA。処理の記述はpython、処理はjava+OpenCVで実行されています。