fresh digitable

めんどくさかったなってことを振り返ったり振り返らなかったりするための記録

実行環境でうまく表示できないVectorDrawableについてのメモ

Android

レイアウトエディタのプレビューだと何ともないのに実行環境だと表示が崩れてしまうVectorDrawableのファイルがあったので状況整理のためにメモしておく。

もとのSVGはデザイナさんが作成したものを受け取ったあとSvgToVectorDrawableConverterというツールで変換した。

github.com

 

件のSVGのデータは平たくいうと目のアイコンなんだけど、ノードがものすごく近い間隔でいっぱい置いてあって、「パスが長すぎる」という旨の警告がAndroidstudioに出ていた。ただ、VectorDrawableのプレビューでもレイアウトエディタのプレビューでも問題なく表示できていたので大丈夫かと思ってエミュレータで動かしてみたところ、塗りつぶしの領域を決めそこなった感じの目のアイコンが表示された。

参考: VectorDrawableの穴を塞がないようにする

最初はfillTypeの問題かなと思ってパスをざっくりと読んでみたが、回転の方向はあっているように見えた。また、そのようなツールが公開されていたので確かめてみたが、特に問題はなさそうであった。

 

次に、VectorDrawableが読み込まれてPathオブジェクトに変換されるあたりの処理を眺めることにした。

http://tools.oesf.biz/android-7.1.1_r1.0/xref/frameworks/support/graphics/drawable/static/src/android/support/graphics/drawable/PathParser.java

 

AndroidのPathParserではA命令をいくつかのC命令に変換・分割している様子。A命令をベジエ曲線で近似した時の誤差については次のページが詳しい。

zellij.hatenablog.com

 

いくらか調べて、ノードの間隔が詰まりすぎていると近似したときの誤差でパスが重なってしまい、塗りつぶしの領域が意図しないものに変わってしまうのではないかという仮説を立てた。ちゃんと検証するかどうかは未定。

 

いずれにせよ、近い間隔でノードを置かない、ツールなどでクリンナップする、A命令を予めCやSなどのベジエ曲線の命令に置き換えておくなどしてみると安心かもしれない。

2017年に見たアニメ

毎年恒例になりつつあるアニメの振り返りを今年もやる。基本的に五十音順だが、もしそうなっていないところがあったとしたらそれは私のミスです。また、括弧つきのタイトルは録画してあるけどまだ見てないというやつです。再放送のやつもいくつか見た気がするが覚えていないので申し訳ないが割愛。

冬クール

リトルウィッチアカデミア、けものフレンズ、昭和元禄落語心中、幼女戦記、ACCA、メイドラゴン、デミちゃん…と挙げていけばキリがない（キリがないとは言っていない）くらい豊作だった。

春クール

このクールも豊作で枚挙に暇がない。レクリ、ヒロアカ、進撃の巨人、有頂天家族、サクラクエスト、ID-0あたりだろうか。さえかの、ぜかまし、エロマンガ先生、アリスと蔵六、しんげき、ベルセルクあたりも好きだった。

夏クール

メイドインアビスに強く心を揺さぶられ、プリンセス・プリンシパルにはハードボイルドスチームパンクスタイリッシュスパイアクション百合なる新しいジャンルを見せつけられるなどした。シンフォギア、ボールルームへようこそ、ナイツマ、グルグル、アホガール、NEW GAME、賭ケグルイあたりも好きだった。前半のEDであはごんだけ一つも動かなかったのは草。

冬クール

まだほとんど見れてないのでアレだが宝石の国は終始美しく儚い感じとギャグのバランスがよくてよかった。SideMも熱い展開でよかった。

劇場版

ごちうさは冒頭の茶番で種ちゃんがリゼやっとるなあとなってしんみりした。ガルパンもタイトルに最終章って書いてるの見たらしんみりしてしまった。内容はどっちもすごくよくて続きを見たいと思える感じだったので引き続きよろしくお願いします。

参考: 2017年度の人気アニメランキング【あにこれβ】

マテリアルデザインぽいアイコンをinkscapeで作った

memorandum 俺アプリ

アプリを出すにあたってアイコンを作る必要があったのでinkscape(ver. 0.92.2)でマテリアルデザインっぽいアイコンを作ってみることにした。参考にした動画：

こういうツールをまともに使ったことがなかったので動画を何度も見返したりしてなんとかそれらしい形になった。

初期のお絵かき的模索

最初はあんまり何も考えずにとにかくデフォルメしたアオエリヤケイを描こうとしていた。キャンバスサイズもめちゃくちゃ適当で本当にどうしようもない。最初は本家のアイコンと同じく右を向いている絵を描こうとしていた。

デザインする上で決めたこと

マテリアルデザインのアイコンで抑えておくべきルールは次のページに書いてある。

Icons - Style - Material design guidelines

長さの単位にdpが使われているのだが、これとpxとの関係をどう決めればよいのか分からなかったので、今回はxxxhdpiのフォルダに入っているデフォルトのアイコンのサイズと同じ192x192pxをキャンバスサイズとし、単純にdpをpxに読み替えることにした。キーラインの細かい寸法（角のRとか小さい円の半径）も分からなかったので大体で引いた。edge tintの高さは全部1pxにした。その他、陰影の色の指定のルールなどは上のページに倣った。

アプリアイコンのデザインでポイントとしたのは次の通り。

  • 頭文字のaを使う
  • 背景は緑か青で迷ったけど青だと本家と被りそうだったので緑にした
  • アオエリヤケイのトサカの青をどうしても入れたかった
  • 正方形でまとめるとペンギン感が強くなったのでちょっと縦長にしてヤケイ感が少しでも増すようにした

ざっくりとした手順

  1. キーラインを引く
  2. キーラインの大きい円に合わせて背景の円を置く
  3. aを作る
    • 右上がりのエッジだけ角度を合わせた
  4. aの影(shadow)を作る
    • aをコピーして別のレイヤーに置く
    • 塗りを黒色に変えてぼかす。オブジェクトの面積か何かによってぼかしの度合いが変わるので見た目が揃うように数値を調整する
  5. aの陰(shade)を作る
    • aをコピーして別のレイヤーに置く
    • 塗りを黒色に変えて"エクステンション -> パスから生成 -> モーション"で45度方向に円からはみ出る程度うごかす
    • 背景の円をコピーして陰のレイヤーに置き、"オブジェクト -> クリップ -> 設定"で陰の右下の方を円形にくり抜く
    • くりぬいた陰はいくつかのオブジェクトにわかれているので、パスを統合して一つにまとめる（統合できないオブジェクトができてしまい何度かやり直したので注意）
    • 塗りのグラデーションツールで右下に向かって薄くなるようにしたりレイヤーの透過度を調整したりしていい感じにする
  6. aのedge tintをつける
    • aをコピーして別のレイヤーに置く
    • もう一度コピーして下方向に1pxずらし、クリップする（くちばし以外は下側のedgeしか作っていない。下側のedgeはaに重ならないように置いたら影とかとブレンドされていい感じになったと思う。上側のedgeはaに重ねて置く）
  7. 背景のedge tintをつける
    • aと同じように1pxずらしてクリップしたかったがうまくクリップできなかったので、1px下にずらして色を濃くした円を背景の下レイヤーに差し込んだ
  8. 背景の影を作る
    • 背景をコピーして別のレイヤーに置く
    • aのようにぼかして影を作りたかったのだが同じようにならなかったので、塗りを黒のグラデーションにして背景の下からはみ出すようにする
  9. ラスタライズする
    • AS3Beta2のVector Assetではグラデーションがベタ塗りになってしまったり、陰を円形にクリップしたところをうまく変換できなかったのでそれぞれの画面解像度ごとにラスタライズした（不可視のレイヤーを無視してくれたのはよかった）
    • inkscapeのコマンドラインツールでsvg -> pngしてやると便利*1

    inkscape -f [svgファイルの絶対パス] -w [幅px] -h [高さpx] -e [pngファイルの絶対パス]

雑感

  • 作っている途中で何度かスマホの画面に置いたりして調整したけど、他のアプリアイコンと見比べるとやっぱりなんだかくどい感じがする
    • 背景の上にaを浮かせたのはやりすぎたかな
    • 角を取った方がよかったかも
  • トサカと顎の下の部分のバランスをもっと模索してもよかったかも
  • 背景無しでaに直接色を乗せるなどもっといろんなパターンを試してもよかった
  • オブジェクトのコピー（ctrl + D）が分からなくて毎回似たようなオブジェクトを作って位置と高さと幅の値をコピペしてた

akihito104.hatenablog.com

*1:参考: コマンドラインからinkscape使用する - code snippets