Xcode
sketch
AffinityDesigner
SFSymbols

SF Symbols をカスタマイズしてオリジナルのGlyphをつくりたい(失敗)

前回の続き


tldr;

手元ではAffinity DesignerではBooleanの穴を開けたままprepareすることができなかった(バージョンのかなり古いSketch.appでは通常の通りの作業であっさり成功)。

それだけだとなんなので、一応こんな風に見えるというスクリーンショットを貼っておきます。

sf_symbols_14_final_result.png

NSTextAttachmentのイニシャライザでまだimageがとれないようなので、UIImageViewとUILabelを並べています。


消えたBoolean

なぜBooleanで開けたはずの穴が、SF Symbols.appでのprepare後に消えてしまったのか?

原因究明のために実験をしていきます。まずは別のSymbolをエキスポートして他はまったく手付かずの状態でBooleanを使って穴だけあけ、prepareしてみます。

sf_symbols_10_wrench_hole.png

ちゃんと空いてます。前回失敗したものはオリジナルファイルのhammerをトレースした持ち手をつかったので、どうやらその編集過程に問題がありそうです。

そこで今度は、Affinity Designer のEllipse Toolを2度使って丸をふたつつくり、それにBooleanのsubtractだけを当ててみました。エキスポートしたsvgがこれ

sf_symbols_11_ellipse_svg.png

ここまでは期待通り。しかしこれをprepareすると・・・

sf_symbols_12_ellipse_prepared.png

やっぱり消えます! うーむ。ちなみにこのスクリーンショットはそれぞれのsvgファイルをQuickLookしたものなんですが、prepare後のものはなぜかズームされています。不思議。Regular-Mを見るのにいちいちスクロールさせないといけなくて、結構めんどうなんですが、これにもなにか深遠な理由があるんでしょうか。


原因を探る

なにがいけないんでしょうか? Affinity Designerの画面をじっとみつつ作業を再現していったところ、あることに気がつきました。デフォルトで画面右中央から下にかけて位置するLayersペインに表示されている属性(らしきもの)がSubtractの前と後で変わっているのです。

最初はEllipseという形をしめしていたものがCurvesへ。下にならぶ他の「お手本」がすべてCurvesになっていることから、なにが起こっているのか、用語の整理のためにすこし調べてみることに。


Affinity Designer用語


Curves と Shape

まずはCurvesとはなにかを調べます。affinity.helpによるとshapeとは


The shapes are fully geometrically correct, customizable, and can even be converted to curves for additional editing.


逆にいえばshapeはLayer > Convert to Curvesをしないことにはeditingができない、ということになります。なるほどSubtractというEditingをするためにはCurvesへの変換が必要なんだろうと推測できます。

ちなみにこれはSketch.appにはなかった分類で、正直にいってうまくのみこめません。そこでさらにConvert to Curvesについてしらべてみると

Support Forumでモデレータの以下のような記述をみつけました。


parametric objects (like geometric shapes) into "regular" shapes (paths)


geometric shapesはさっきのEllipseとかの、テンプレートで作られた「shape」のことだとして、それにConvert to Curvesをすると、“レギュラー”なshapeになる? pathsと書いてあるのはおそらくopen pathの対比としてのpathsなんじゃないかと思うんですが、shapeがshapeになるというのは・・・なかなか理解がむずかしいです。


Compound

あとCompoundというものもあって、これはBooleanを「可逆的に」適用することができるもので、Booleanのボタンを押す前にoptionボタンを押すことで発動させることができます。内部的な仕組みともかく外形的にはSketch.appではこちらがデフォルトだし、あとあとウェイトを足す時にも有利だろうとこれも試したんですが、Prepareの段階ではねられてしまいました。だから下の「いろいろな組み合わせ」にはCompoundは含まれていません。

しかしともかくAffinity Designerのshapeにはふたつのステートがあることがわかったので、"regular" shapesの使い方がまちがっていたのかもしれないと思い、いろんな組み合わせでためしてみました。


いろいろな組み合わせでExportを試す

具体的には土台となる被BooleanオブジェクトとBooleanの型オブジェクトにsubtract前からConvert to Curvesを当てたり、他のところでsvgへのエキスポートで問題がある時にためしてみればいいとされていたExpand Strokeを当てたりといったことです。結論からいうとすべて失敗しました。しかしかなりバージョンの古いSketch.appでためすと、通常のプロシージャで一発で成功。Xcodeでもきちんと表示されました(ここで「QuickLookではprepareに失敗しているように見えてるけど、Xcodeにインポートしたら案外うまくいってるかも」とか楽観的に考えてAffinity Designer版もよみこませようとしたらXcodeがクラッシュします。再現度100%)

sf_symbols_13_xcode_import_succeed.png


結論

SF Symbol.appの問題なのか、はたまたAffinity Designerの問題なのかは現状ではわかりませんでしたが、いずれにしてもSF Symbolsの本リリースまでまだまだ時間があるので、対応がなされることを期待しましょう。ウェイトのバリエーションづくりとか試してみたかったんですが、SF Symbolsに関してはベータが更新され、さらに情報がでるのを待つことにします。疲れました。