funde-rectangleのブログ

ウルトラごった煮

Aseprite:EDGE形式からレイヤ形式でインポートする

前回少し紹介したAsepriteというドット絵ツール、大変便利です。
機能や使い勝手はAdobe製品のIllustratorPhotoshopに似ているので、
それらを使ったことがある人には真っ先に使ってもらいたいドット絵ツール。

ところがドット絵経験者の多くはどちらかというと、
たかぼーさんが開発なさっているEDGEを利用している方のほうが多い印象です。
こちらは老舗のドット絵ツールで、レイヤー機能が使えてしかも初代のEDGE1は無料で使える
という優れもの。また、iOS版のEDGE touch(有料)というアプリもあり、
外でも気軽にドット絵が描けるこれまた便利なものです。


しかし、AsepriteはEDGE専用のedgファイルをサポートしていないため、
直接取り込むことはできません。EDGE2なら一度スプレッドシートに起こすことで
レイヤ単位の出力は可能ですが、Aseprite側で取り込んだ時にレイヤではなくフレーム形式
として移植されてしまいます。(どう不便なのかは後述します)

今回はそんなEDGE2→Asepriteにレイヤ形式の情報を持たせて移植する手段を紹介します。
(Aseprite側でスクリプトの登録が必要です。詳しくは後述します)


【必要なもの】

 1.EDGE2
  ※EDGE1/EDGE touchにはレイヤを1枚の画像に出力する機能がないため、
   今回の手順は使えません。ちなみにEDGE1/EDGE touchで作成したedgファイルは
   EDGE2で取り込むことはできます。
   
 2.Aseprite(まあそうですよね...)

前準備

Asepriteではスクリプトの取り込みがあらかじめ必要なので用意しておきましょう。
Asepriteのスクリプトは「File」→「Scripts」→「Open Scripts Folder」の順に
選択すると開くフォルダにluaファイル形式で保管すればOKです。
登録に成功すると、以下の画像の「ImportFromEDGE2」のように、luaファイル名が
Scriptsの中に表示されます。(表示されなかったら再起動してみてください。)

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

スクリプト

do

  local spr = app.activeSprite
  if not spr then return app.alert "There is no active sprite" end

  app.transaction(
    function()
	local celcol = app.activeSprite.layers[1].cels
	for i = 2, #celcol, 1 do
		local newLay = spr:newLayer()
		local newcel = spr:newCel(app.activeSprite.layers[i], app.activeSprite.frames[1])
		local image = app.activeSprite.layers[1].cels[2].image
		local copy = image:clone()
		newcel.image = copy
		app.activeSprite:deleteFrame(2)
    end
    end)
end

※2021/02/02 追記 GitHubにアップロードしました。
 ファイル名は「ImportFromEdge2_past.lua」です。

github.com

なお、レイヤー削除に対応したバージョンも「ImportFromEDGE2withDeleteLayer.lua」として追加しました。



普段ソースコードをアップしないので、読みづらいコードで申し訳ないですが。。。
やってることはレイヤー中にあるフレームを、レイヤー形式に変換してるだけです。
(最後に2フレーム以降は削除しているので要注意)


Asepriteを使ってないとさっぱりかもしれませんが、そのうち理屈はわかると思います。
前準備はこんな感じで、操作説明をば。


(1)EDGE2でedgファイルを開く

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

ファイルをEDGE2で開きます。

(2)レイヤーを1枚のPNGファイル(透過あり)に出力する。


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

レイヤーウィンドウから「ファイル」→「レイヤを1枚に並べて書き出す」を選択します。

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

「背景色を透過」にチェックをつけて、「保存」をクリックします。
※ここで透過してないと、Asepriteで透過されません。注意!

あと、キャンパスのサイズは取り込み時に必要なので覚えておきましょう。


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

(3)EDGE2から出力した画像をAsepriteでインポートする。

ここからはいよいよ取り込みの手順になります。

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

「File」→「Import Sprite Sheet」の順に選択します。

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

先ほど出力した画像を取り込みましょう。

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

すると、画像を分割して取り込むダイアログが表示されるので、
WidthとHeightに先ほど覚えたキャンパスのサイズを書き込んで
「Import」をクリックしましょう。

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

すると取り込まれますが、すべてフレーム単位で取り込まれてしまい、
レイヤとして使えなくなってしまいます。(ここが不便...)

(4)Asepriteのフレームをレイヤーに変換する

ここでスクリプトの登場です。
出力後のレイヤーを選択した状態で、スクリプトを実行してみてください。

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


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

【新しいスクリプトの方の手順】

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

新しい方は実行するとまずEDGE2ファイル側の総レイヤー数を聞きますので、
数値で入力し、「OK」ボタンをクリック。
f:id:funde-rectangle:20210202021831p:plain

次にEDGE2からのエクスポート時に指定した、行ごとのコマすうを入力。
f:id:funde-rectangle:20210202021931p:plain

この2つの情報を使って余分なレイヤーを削除します。



あっ!というまに選択されたフレームがレイヤ形式に変換されます。
ちなみにページ単位の移植は一括ではできないので、ページ単位の移植をするときは
これまでの手順をページ単位でやる必要があります。




Asepriteのフォーラムもあるのですが、いかんせんEDGEが日本語のソフトなので、
海外ではあんまり使われてないのかな.... というのと僕自身が英語のフォーラムに
書き込みをしたことがないので、チラ裏でやるべきと思いこっちのブログに書きました。
(でもやっぱりチラ裏でも英語が未熟でもフォーラムに書くべし!なんでしょうか。。。)


...で、ちょっと愚痴になってしまうのですが、Asepriteで用意いただいているAPI Documentationに掲載された
メソッド名と実際のメソッド名が違うような... ここにRemoveFrameというメソッドがあるのですが、
記述しても動く気配がなく.... ほかの方のサンプルを見ると「Delete」という文字をよく見るので、
まさかと思いDeleteFrameという名前に変えてみたら実行できてしまいました。 そんな...
(これはフォーラムに書くべきだろとか思ったけど、Termsとかしっかり見れてないので、
 その旨の記述がどこかに書いてあったりするのかも?と思い保留にしてます。)

Asepriteでスクリプトを描くときは要注意です。


※2020/10/11追記
上のURLにあるコマンドはどうやら「app.command.」に続いて記入すれば実行できるみたいです。例:app.command.RemoveFrame(1)  だけどパラメータの情報があんまりない...