ニートが頑張るブログ

ニートが現実逃避するために創作活動など色々とカオスに頑張ってみる
ニートが頑張るブログ TOP  >  ドット絵/Web素材 >  ウボァ1.5倍

ウボァ1.5倍

ちょっと、「ドット絵の1.5倍のスケーリング」にまつわる話をしようと思います。

   ▅▅██████████▅
 ▅████    ▀▀▀████▅
 ████         ▀▀███▅
▅██ █ ▅         ▀███▅
██ ▅██▀   ▅████▅ ▀███
████▀        ▀▀█▅ ███▅
██              ▀ ████
██   ▅▅█▅▅▅▅█▀    ████
██▅  ▀▀█████       ███
▀██     ▀██▀       ███
 ██                ███
  ██▅            ▅████
  ████▅          ██████
  ██████       ▅██████
 █████████▅▅▅▅▅███████
 ▀▀▀▀████████████▀▀▀▀▀


きっかけは、「ゆめにっき」ノベライズだのコミカライズだので話題になってたから。
(まぁこれについてグダグダ語ってもいいんだが)
(完全にサイレントなマンガなら、アリかもしれない) (小説は、無理だ)


ウボァ

ウボァのアイコンでも作ろうと思ったけど、ちょっと48*48には小さい。
かといって2倍にすると大きさがオーバーしてしまう。 (帯に短し襷に長し)

そこで、ドット絵を1.5倍に拡大する方法について色々考えておったのです。


途中まで、物凄い当たり前の話をすることになります。
(人によっては、最後まで当たり前の話に感じるかもしれないけど)




 


◆今回自分が考えたやり方 (というか当たり前のやりかた)

↓このように「2ドットはそのまま、その間に1ドットのラインを挟んで伸ばす」
 という感じで、2、1、2、1・・・という風に進んでいきます。
ウボァ

そうしたら、次はこの青いラインに注目して、
そのラインを左右の色の平均の色で埋めていくのです。
(今回は、白黒の中間の#808080を用意します)
ウボァ
これで、横方向に1.5倍に拡大させたことになります。


そして今度は同様に
縦方向で「2ドットはそのまま、その間に1ドットのラインを挟んで伸ばす」をやっていって伸ばします。
ウボァ

今度は、中間色との中間色が出てくるので、
3段階の中間色が必要になってきます。
(今回は、#404040#808080#c0c0c0を用意します)


で、完成。
↓これが、1.5倍のウボァです。
ウボァ

ジャスト48*48の大きさになりましたね。


ここまでは当たり前の話。

で、ここで考えることがある。

1.5倍のやり方は、これだけには限らない。


まず最初にやった
「2ドットはそのままで、間に1ドットのラインを挟む」というやり方には
2パターンのやり方があります。

ウボァ ウボァ
青いラインの置き方の候補には、この2つがあります。

(勘違いしないで欲しいのは、3パターンではないということ)
「全部で3ドットの網が横に流れていくんだから3通り出来そう」って思うかもしれないけど)
(「2ドットの間に1ドット挟む」というのには2パターンしか産まれません)
(やってみれば分かるけど、3つ目は1つ目と同じになるのです)


そして、同様に縦に1.5倍にするときにも、ラインの置き方が2パターンあります。

つまり、2×2で、全部で4パターンの1.5倍ウボァが出来ることになります。


↓全部作って並べてみるとこうなります。
ウボァ ウボァ 
ウボァ ウボァ 

表現したい情報 (つまり元のウボァの1.5倍のドット絵であるということ)
は同じなのですが、それぞれちょっとだけ異なります。

何が違うのかというと、位置情報

こいつらは、お互いに0.5ドットずつズレた位置関係にいるのです。

アニメにすると分かりやすいです。
ウボァ
こんなにプルプルしているヤツなのです。


こういうことから何を読み取ればいいのか。
色々あると思う。


まず何故「1.5倍」なのか。

こんな話が出来るのは、この倍率だけだと言っていい。

「1.5」という数字を聞いて、なんか中途半端、必然的ではないと感じる人もいるかも知れないけど、
そうではないと思う。

この数字だけだ。こんなに綺麗に全てのドットで中間色を活かせる拡大の仕方が生まれるのは。


2倍とか3倍とか、そういう定数倍の拡大の場合はそのまま拡大すればいい。
勿論、今回の応用で「1ドット採用して、もう1ドットは左右の色の中間色」みたいなことをしても
2倍に拡大したドットを作ることはできるけど、そんなのをする理由はあんまりないと思う。

0.5倍の場合は、同じように中間色が必要になってくるけど、明らかに情報量は消滅している。

逆に2.5倍、3.5倍、4.5倍と増やしていった場合は、
中間色が発生するラインが格子状に増えていく感じが、美しくない筈だ。

やはり、拡大に関しては1.5倍の一番美しい倍率のように思う。

フルHDのモニター(1080p)で、HDのゲーム(720p)を表示する時も、
まさに1.5倍になってる。

だから、良い感じに気にならないのではないか? そんなことを妄想する。



縮小と拡大

さっき「0.5倍」と言ったけど、
実は1.5倍と0.5倍にはかなり似た性質がある。


当たり前すぎることだけど、「1.5倍する」ということは「3倍にしてから半分にする」ということ。


実際、このウボァの1.5倍のドット絵の作り方には、もっと楽なやり方がある。

ドット絵エディタを使って、↑のような弄り方をしなくていい。

300%にリサイズしてから、50%にリサンプルすると、そのまま同じ画像ができるのだ。
ウボァ → ウボァ
(3倍にする時に、拡大用のリサンプルフィルタを使わないのがミソ)


ここで分かることだけど、
3倍に拡大したウボァのドット絵を
それぞれ上下左右に1ドットずつ移動させたものを用意してみて欲しい。

それを50%に縮小すると、当然だけど上下左右に0.5ドット移動したウボァの画像が手に入ると思う。

つまり、そういう事。

1.5倍のドット絵を作る時、
4種類の候補が出来るのは、そういうこと。

「中間色を使った1.5倍したモノ」と、
「中間色を使わず3倍してから、中間色を使って0.5倍したモノ」は同じなのだ。

そういう関係になる。

後者での1ドットの上下左右の位置関係の情報が
前者での0.5ドットの縮小された情報になって出てきているワケだ。



自分でも当たり前すぎることをベラベラと語っていて不安になる。

でも、ここから何かが見えてくるはずなんだ。
それが、上手く伝えられない。



あんまりにも上手く説明できないので、
もうなんとなく感じることを、箇条書きっぽく書いていこうと思う。
本当に当たり前のことから、何かが見えてくる。


中間色を使うことで、「ドット以下の細かさの移動」を表現することができる。

それはドット以下の細かいアニメーションにも繋がる。

縮小するということは、それだけの情報を削っているということである。
拡大するということは、それだけの情報を含ませる余地があるということである。

半分にリサイズするということは、情報量的には4分の1であり
「他の似たような3倍の情報」を捨てているということである。

n倍にリサイズするということは、n^2倍の候補が出来る。

そこで捨てられている情報は、細かい位置関係とも言える。

縮小前の、ドット単位での上下左右の移動が反映される。

1.5倍に拡大するということは、
9倍にした後4分の1にしているようなものである。

だから1.5倍のドット絵でも位置情報は捨てられている。
候補は4つあったのだ。

0.5倍縮小の場合、明らかにドットとしての情報も消滅している。
一方1.5倍拡大の場合にドットが潰れないのは、「9倍した後の4分の1」だからだと言える。
だが、やっぱり位置情報は消滅しているのだ。




・・・うーんやっぱり大した話では無いのかもしれない。


でも、「サムネ」について考える時、
わりかし有用な話になるかもしれない。


・・・
今採用しているサムネよりも良い感じのサムネが存在する可能性。

それは、ドット1つの情報がとても重要なドット絵とかの場合、かなり重要になるかもしれない。


例えばpixivでは、
絵が上下左右で600pxサイズまでに縮小される。

1200px以上の絵を投稿した場合、
ドット単位で半分以上の縮小が行われているワケだ。


縮小される前の1ドット単位の移動が
サムネに変化を起こすかもしれない。 
(ドットレベルで細かい情報が載っている絵であるなら)


縮小される前に上下左右に1ドットずつズラしてみて、他のサムネ候補を参考にしてもいいかもしれない。


1200px以上の絵にとって、1ドット単位の移動なんて
何の変化もないように感じるかもしれないけど、
実際それでサムネは別の候補に変わるのだ。


1200pxの絵で4候補、
1800pxの絵で9候補、
2400pxの絵で16候補・・・
それだけの潰れ方の違う仲間達が消滅しているのだから、見てやってもいいかもしれない。


やっぱ大した話じゃない。

見切り発車で記事書き始めたからね。
仕方ないね。


ウボァ


   ▅▅██████████▅
 ▅████    ▀▀▀████▅
 ████         ▀▀███▅
▅██ ██      ▅▅▅ ▀███▅
██ ▅██     ██▀▀▀ ▀███
██ █▀      ▅▀     ███▅
████              ████
██       █        ████
██▅  ▀▅            ███
▀██                ███
 ██      ▅▅        ███
  ██▅    ▀       ▅████
  ████▅     ▅▅▀  ██████
  ██████       ▅██████
 █████████▅▅▅▅▅███████
 ▀▀▀▀████████████▀▀▀▀▀



関連記事
[ 2013/03/05 18:10 ] ドット絵/Web素材 | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

月別カレンダー
07 ≪│2017/08│≫ 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -