Scratch用の画像作成は無料になったAffinityがおすすめ

画像編集ソフトのAffinityが無料になりました。今公開されているのはWindows版とMac版。iPad版も公開されるみたいです

Affinity | プロフェッショナル クリエイティブ ソフトウェア、無料で万人のために
パワフルで正確、そして永久に無料。Affinity を発見 — クリエイティブな自由のために構築された次世代のプロフェッショナルな写真、デザイン、レイアウトのソフトウェア。

Scratchで画像を使いたい場合は、Affinity(Affinity Designer)を使って作成しています。有料版の時からお世話になってるソフトです

当然ながらScratchの画像エディタより機能が充実していて、複雑な図形を描きやすいです

作った画像はSVGで出力してScratchで利用しています。SVGだと、画像を拡大しても汚くなることはありません

ScratchでSVGはそのまま読み込めます

ただ、Affinityで出力したSVGをそのまま読み込むと、エディタに画像が表示されません。たぶん、スプライトとしては普通に使えると思うのですが、ちょっと気持ちが悪いです

この場合、面倒ですが、テキストエディタでSVGファイルを開きます。SVGファイルはテキストファイルなのでテキストエディタで編集できます

ファイルの中身はこんな感じになってると思うので

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 480 360" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-56,-69.243902)">
        <path d="M296,80L333.045,194.012L452.924,194.012L355.94,264.476L392.985,378.488L296,308.024L199.015,378.488L236.06,264.476L139.076,194.012L258.955,194.012L296,80Z" style="fill:rgb(255,240,40);"/>
    </g>
</svg>

3行目の
width=”100%” height=”100%”
を削除して保存します

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 480 360" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-56,-69.243902)">
        <path d="M296,80L333.045,194.012L452.924,194.012L355.94,264.476L392.985,378.488L296,308.024L199.015,378.488L236.06,264.476L139.076,194.012L258.955,194.012L296,80Z" style="fill:rgb(255,240,40);"/>
    </g>
</svg>

このファイルをScratchで読み込むとエディタに問題なく表示されます

タイトルとURLをコピーしました