ニートが頑張るブログ

ニートが現実逃避するために創作活動など色々とカオスに頑張ってみる
ニートが頑張るブログ TOP  >  2013年09月

「本当に綺麗な」ディザリング付きグラデーション素材

前々から「グラデーション」について、考えていることがありました。


「綺麗なグラデーション」というのは、なかなか簡単には手に入らないのです。

例えばpixivで、「saiでグラデーションを作る方法」とかを調べようとすると、
こういうのとか、こういう講座系が、色々引っかかります。

要は、「2値ペンで2ピクセルの画像を作り、解像度を引き伸ばすと、グラデーションになる」という事です。


でも、こんな方法で作るグラデーションというのは、実はガタガタなモノなのです。


結局のところ、「PC上の色」というモノは、24ビットのアレです。
RGB一色あたりだと、8ビットのアレです。 つまり、たかだか256色です。 
#00~#FFまでの256段階でしか、グラデーションというモノは作れません。

だから、256ピクセル以上のサイズの絵用に作ったグラデーションというのは、
アップして見ると、絶対にガタガタになってしまっているのです。


                              ▅▅▅▅▅▅▅▅▅▅██████████
          ▅▅▅▅▅▅▅▅▅▅██████████████████████████████


↑もしもRGB値を「高さ」で見ることができたら、「グラデーション」というモノは、このように見える筈です。


このような、「ガクガクのグラデーション」ですが、なんとかマシにする方法があるはずです。

それが、「ディザリング」です。

つまり、「確率的に拡散させる」のです。

                          ▅  ▅ ▅▅ ▅▅█▅▅█▅██▅██████
      ▅  ▅ ▅▅ ▅▅█▅▅█▅██▅██████████████████████████


↑これだけだと、却って凸凹に見えるかもしれませんが、
遠くからみると、より滑らかなグラデーションに見えるのは、こちらの筈なのです。


というワケで、「ディザリングをすれば通常よりも綺麗なグラデーションが手に入る」のは分かったワケですが、
そのような良質なグラデーションとなると、もうsaiでも簡単に作ることはできないでしょう。

実際にどうやって「自作」するか、一度は考えておかないといけません。


█   █   █   █   █   █   █   █   █   █   █   █   █

  █   █   █   █   █   █   █   █   █   █   █   █   █
█   █   █   █   █   █   █   █   █   █   █   █   █
 █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █
█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █
 █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █
█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █
██ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ █
 ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
████████████████████████████████████████████████████
██ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ █
████████████████████████████████████████████████████
████████████████████████████████████████████████████


        █   █    █   █ █ █ █ █ ███ ████ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █  █   █   █ █ █ █ █ ███ ██ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █    █   █ █ █ █ █ ███ ████ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █  █   █   █ █ █ █ █ ███ ██ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █    █   █ █ █ █ █ ███ ████ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █  █   █   █ █ █ █ █ ███ ██ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █    █   █ █ █ █ █ ███ ████ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █  █   █   █ █ █ █ █ ███ ██ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████


↑こんな風に、「ドット絵的にディザリングを施す方法」も考えたのですが、
やはりこれは、絵画素材的にはダメだと思うのです。


説明しづらいけど、
これでは、「ギザギザになっている部分」、「01の情報量が変化している部分」に偏りがあるからです。
グラデーションの帯の中間部分で、ずっと「市松模様」が連続しています。


要は、激しすぎるのです。 
絵を完成させた後、シャープネスをかけた時、そういう部分が目立ってしまう筈です。

イラストを拡大したり、「ガンマ値を弄ってまで絵を観察する人」にかかれば、
こういうのはすぐに、粗として見つかってしまうはずです。


だからここでは、本当に「ランダムに」ディザリングをかけた素材を作らなければならない。

そのようなモノは、どうすれば作ることが出来るのか。


大きなサイズでグラデーションを作って
それに「ノイズ処理」をかけただけでは、綺麗なディザリングにはなりません。

グラデーション素材

色つきで図示すると、ガタガタなグラデーションにノイズをかけても、
↑このような「均一な階段にノイズがかかったモノ」が出来上がるだけです。


上記の講座系のような方法で得たグラデーションで絵を描いてから、
最終的にノイズ処理で「誤魔化し」をかけたとしても、このような結果になるだけなのです。



で、ここで思いつきました。

  ┃
  ┃┃
  ┃┃    ┃
  ┃┃    ┃┃
  ┃┃    ┃┃    ┃
  ┃┃    ┃┃    ┃┃
  ┃┃    ┃┃    ┃┃    ┃
  ┃┃    ┃┃    ┃┃    ┃┃
    ┃    ┃┃    ┃┃    ┃┃
          ┃┃    ┃┃    ┃┃
            ┃    ┃┃    ┃┃
                  ┃┃    ┃┃
                    ┃    ┃┃
                          ┃┃
                            ┃


ノイズ付きの大きなサイズのグラデーションを、
↑このように1ピクセルずつズラしながら、半分ずつ、半分ずつ重ね合わせていけば、
ちょうどいい感じのディザリングになるのではないかと。



で、能書きはここまでにして、兎にも角にも出来ましたとさ。

ディザリング付きグラデーション素材

横1024 * 縦2048の、#000000から#FFFFFFまでの、グラデーション素材です。

これだけで見ても本当に滑らかなのか良く分からないだろうから、
↓分かりやすく着色してみたモノがこれです。

グラデーション素材

ディザリング付きのグラデーションと、
単にノイズを走らせただけの階段状の階調の違いが分かったでしょうか?


というわけで、
これからはこの素材を使っていけば、綺麗なグラデーションを得られる筈です。


で、具体的な使い方だけど、
これは「十分大きく作った素材」なので、
「縮小」して使って貰う分には、粗が出ることは無いワケです。

これだけだと縦長な素材に見えるかもしれませんが、
横にコピペしていって伸ばす分にも、問題ありません。


で、実際には半透明にして重ねたり、
「スクリーン」にして重ねたり、
「オーバーレイ」のレイヤーに入れて色つきのグラデーションにしたりすると思います。



その時は不透明度を「100%以下」にして使うと思いますが、
これもまぁ問題ありません。

ただ、「薄める」ということはディザリングの「ノイズも薄まる」ということです。

ノイズに関しては、各自で勝手にノイズフィルタをかけて、強めてもらっても問題ありません。

この素材は「なめらかな階調」でできているので、上で説明したとおり、
ノイズを後からいくらかけたところで、ガタガタが強まったりはしないのです。

[ 2013/09/30 12:10 ] ドット絵/Web素材 | TB(0) | CM(0)

積みゲー解消マンション法 

最近厨二文章を書いてない気がする。
いや、いっつも書いているアレが現在進行形で厨二文章なのかもしれない。


とにかく、日々考えている糞下らない妄想をたまには吐き出さないと
頭がおかしくなりそうだという話は前にしたので、結局定期的に厨二文章を書いてしまうわけだ。

(こんな風に「定期的に書いてみる」などと言っておくということが
 すでに「モチベ作り」であり、同時に「言い訳」にすぎないのかもしれないけれど)



という訳で今回は
「積みゲーを解消するシステム」を思いついたので、その話をします。

[ 2013/09/25 12:21 ] ニートメソッド | TB(0) | CM(4)

ポケモンの複合タイプ組み合わせ評価ツール XY版

ずっと前に作ったポケモンの複合タイプ評価ツールの改訂版を作りましたよ、という話です。
要は、XYで追加される「フェアリータイプ」に対応しただけです。





まぁ本当に、フェアリータイプが追加されただけです。 
(ボタンとしては「妖」ね)


トータルダメージは18です。

ポケモンの複合タイプを設定して、
トータルダメージが18より増えたか減ったか、
半減や弱点が増えたか減ったか
、そういうのを見て、色々なにやら考えるためのツールです。


フェアリータイプが増えただけのことによって、考えることも変わってきますね。


例えば今までは、「悪×霊のポケモンには弱点がない!」ということになっていたのですが、
これからは普通にヤミラミもミカルゲも、フェアリー技から抜群を喰らうようになるわけです。


そして
そもそも、弱点がないポケモンが一番打たれ強いかというと、そういうわけでも無いだろ
というのがこのツールの開発理念です。
取り敢えず全属性の攻撃を受けてみて、そのトータルで考えるべきだという発想です。
(だって、抜群技に注意すれば、オールマイティーに弱点が無い奴よりも、半減が多いヤツのほうが硬いでしょう?)


実際やってみてもらうとわかると思うのですが、
XY以降では「悪×霊」タイプは15.5のトータルダメージです。

18より大幅に減っているので悪くないタイプ組み合わせだとは思いますが、
当然それ以上の効率を求めることも出来るわけです。


そんな感じで、

・複合タイプで一番トータルダメージが小さくなるのはどのような組み合わせか。

・一番トータルダメージがでかくなるのはどの組み合わせか。

・6タイプのポケモンの組み合わせで一番小さくなるのはどれか。 大きくなるのはどれか。

・あらゆる組み合わせを重複させた上で、最強or最弱になるのはどのような組み合わせか。


などなどの疑問に対する答えも、今までとは変わってきます。



で、もういい加減に答えを書いておこうと思います。 
以下、答え合わせ。

[ 2013/09/19 10:50 ] 作ったFlash | TB(0) | CM(16)

気持ちよさは全てに優先するぜ

というわけで「パシフィック・リム」の落書きがようやく終わったので、貼る。
(しかし12年も経つと、911にビルがぶっ壊れている絵を描いても怒られないのだね)



「タシット・ローニン」さん


ところでどうなのだろう。
「パシフィック・リムで一番好きなイェーガーは何?」って問われたら、
自分は余裕で即効で「タシットローニン」と答えるんだけど、それは実のところ、どう思われるのか。

パシフィック・リム自体は、こういう「細身のロボ」が活躍する映画ではない。
もっと骨太でムサイごっつい、無骨なデザインのロボが頑張る映画なのだ。

その中にあって、こういう
一人だけ「アーマード・コア」に出てきそうな、
一人だけ「ファイブスター物語」に出てきそうなデザインのロボが好きだ
なんて言ってると
「分かってね―奴」と思われるだろうか?


でも仕方が無いではないか。

こういう
華奢で、
逆関節で、
装甲が白で、
駆動系が黒で、
日の丸まで付いてて、
紙装甲で、高火力で、
第一世代機で、
腕にブレードが付いてて、
しかもそれが両手で、逆手で・・・

「属性てんこ盛り」すぎるロボではないか。
きっと開発した日本人もノリノリだったのだろう。


たとえ一瞬しか映らなかったロボでも、好きになるしか無いではないか。


オニババさん


同様に、「パシフィック・リムで一番好きなKAIJUは何?」って問われたら、
自分の答えは「オニババ」になってしまうワケだ。


これもどうなのだろう。
パシフィック・リムの中でメインに活躍するのは
爬虫類とサメが融合したような海獣っぽいヤツら。
どいつもこいつも似たようなフォルムである。 (ジラっぽい)

その中にあって、こいつだけが甲殻類っぽいのだが、それがいい。

あとコイツだけが昼間にビル街で戦闘をしている。 それがいい。

こいつだけ着ぐるみが無理そうだけど、実は何とかなりそう。 それがいい。
(レギオンとか、ペスターみたいに、アクター二人で頑張ってそう)



以下、どうでもいい話  誰も読むべきではない

[ 2013/09/11 19:53 ] イラスト | TB(0) | CM(0)

見返りレギオン

いつになったら完成するんだ、という感じの動物歩かせシステムですが
とりあえずレギオンのスキンが出来ました。
それだけで嬉しすぎるので報告です。

レギオン
はぁ、レギオン超かっこいい・・・




◆操作方法
方向キーで歩く
Zキーで注視モード
シフトキーで平行移動  スペースキーで走る
Xキーで高いところから落とす  Cキーで地面にめり込ます  Vキーで横からどついてみる 
胴体をドラッグで全身を引きずる  足をクリックで四肢切断 Dキーでキャラの複製 
Bキーで自爆

新機能: Nで時間停止 Mでコマ送り


全画面表示


やったこと

◆レギオンのスキン

兎にも角にもレギオンです。

今までずーっとボーンだけは用意していましたが
本気で取り組んでいませんでした。
今回、バランスも直しつつ、ようやくここまで持ってきました。

レギオンは足が16本も生えています。
今までは「蜘蛛」の4対・8本足が最大だったので、その2倍です。 人間の4倍重いです。


何度も言いますが
この「動物歩かせシステム」は、モーションをリアルタイムで精製しています。
姿勢をリアルタイムで計算して、接地した足が地面を実際に蹴って、そのあとキャラが蹴った量に応じて歩くのです。
はじめに操作性があって、キャラの座標を移動させて、そのあとに歩行アニメを再生する通常のゲームとは真逆です。

それ故に、処理の重さは「キャラに生えている足の数」に比例します。
今回、レギオンの干渉波クロ―を全て「足の一種」として追加したので、糞重いことになっています。

でも、そんな糞重いことをしているからこそ
内部に何のモーションデータも用意していないのに、キャラが歩くのです。

単に「歩くだけのアニメ」が出来るだけではなく、
「歩き始め」「歩き終わり」「旋回」「平行移動」「バック」「注視移動」「落下時のクッション」「ジャンプ」×「走り」・・・
などなどの各種モーションにもリアルタイムで対応できますし、
それらのモーション間に「繋ぎ」というモノが無いのです。
(そしてこれらの派生モーションを、
 いちいち特殊なボーン構成をしているモンスターに合わせて作りなおす必要も無い)

だからこそ、そこらのゲームより、よっぽど生々しさのある動きが実現できると思っているのです。


◆頭に足を生やすこと

レギオンを実現させるにあたって
「頭に足を生やす」ことも出来るようになりました。

レギオンの頭部からに生えている干渉波クロ―は、
レギオンの胴体ではなく、頭部の回転に応じて位置を変化させます。


こういうことが出来るようになったことで、
また作れるキャラの可能性が増えるわけです。

例えば頭にしっぽを生やすなんてことも出来ます。

これを利用すれば、頭にツインテが生えたキャラとかも作れるわけですね。
(こうなってくるとまた、ミクさんのゲームとかが作りたくなってくるわけです)
ミクさんの首が撥ねられるゲームとか、どうなのでしょう)


◆時間停止

あと、地味に重要な新機能がこれです。
時間を止めたり、コマ送りしたり出来るようになりました。

こういうのは、将来、メニュー画面を開いた時とかに必要になってくる機能ですね。


今、「<キー」を押したときに擬似的にスローになる機能とかも作ってみましたが、
これは単にカクカクになっているだけですね。

上手くやれば、DMCの「時の腕輪」みたいに時間を止めたり、
DMC3の「クイックシルバー」、ベヨの「ウィッチタイム」みたいに
時間をゆっくりにしたりとかの応用にも使えるかもしれません。


というわけで残りはレギオンギャラリーです。

レギオン

レギオン レギオン
正面から見たときは難があります。
当然壁をよじよじもできます。

レギオン
でかい。

レギオン
レギオン レギオン
やっぱりレギオンは後ろからみた所がかっこいいと思う。
そんでもって、ちょっと頭部がこっちを振り返っているようなのが、良い。
見返り美人。


それにしても、このベクタ絵の表示方法にも限界を感じますね。
足の部分とかは正直気にならないけど、頭部が問題です。


自分が今やっているこのベクタ絵のツギハギ表示法は、こんな感じで実現してるんだけど、
このやり方は、さらに進歩出来るかもしれない。

とにかく、3次元上の3点の位置が分かれば、裏表は決められる。
だから、モーションデータの中に「ねじれ成分」が含まれていなくても、無理やりこういうことが出来るんだ。

カマキリ腕
↑今はこんな風にして角度を求めて、この角度が正なら表、負なら裏、みたいにしている。
そしてそれは、ベクタ絵素材をひっくり返すだけで実現している。


でも、これでは「180度の2分割」しか出来ない。
これを更に「90度の4分割」にするにはどうすればいいか?

(もう一つ「法線ベクトルを求めるための頂点」を用意すればいいかもしれないが、それは面倒だ)
(なんとかして、今ある3点だけで4分割をしたい)

カマキリ腕
↑ここの2点のZ値(カメラへの距離)を比較して、
A点がB点より大きければ表、小さければ裏、みたいにすれば、
上の方法との組み合わせで、4分割の軸判定が出来るのではないか、ということを思いついた。

(正確にはBC点の平均のZ値だ)
(いやでもそれだと二等辺三角形じゃないと通用しない) (ああ面倒くさい)


問題は、もう一枚「裏からみたベクタ絵」を描かなきゃならないということですね。
(2枚の画像の組み合わせでキャラグラを表現するのって、なんかサガフロ2のデュエルを思い出す)


でもレギオンのベクタ絵をもう一種類ずつ作るというのは大変そうだ。
これはどうなんだろうな。 
「一枚絵の組み合わせだけであらゆる動物を表現する」ってのが好きだったんだけど。

[ 2013/09/07 17:06 ] Flash作成過程 | TB(0) | CM(0)
月別カレンダー
08 ≪│2013/09│≫ 10
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 - - - - -