気ままにニコライフ

アクセスカウンタ

zoom RSS ハイライト処理の有効活用

<<   作成日時 : 2018/01/02 14:36   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

画像

70行の世界は新発見が目白押し!

前回からの続きです(`・ω・´)

2018/01/01「ニコ動コメントでバーチャルYoutuber!」

画像


先日投稿した新作絵系CA。
バーチャルYoutuberキズナアイさん。

前回は境界線の表現方法について
書かせていただきました。

画像

前回書いたとおり、
境界線の表現を差分式で表現したのですが、
上の画像の赤丸の中のように、
コメント間の境界線がはっきり
浮き出ているように見えるのには
コメントのとある描画処理の仕様が
大きく関係しています。

それはコメントのハイライト処理です。
ニコ動のコメントは動画上に描画される際、
コメントを目立たせる目的で文字の周りに
薄い層が表示されます。

画像

これがコメントのハイライトです。
黒背景に黒コメントをすると
最もわかりやすいですね。
(「コメント」の周りの白くみえる部分。)

ハイライト処理自体は
flash時代からあったものですが、
HTML5になり文字の周りによりはっきりと
表示されるようになりました。

とはいえ、普段の通常サイズでコメントを
見ている限りではそこまで
気になるものではないと思います。
今回ポイントとなるのはこのハイライトの層が
コメント自体のサイズによらず
ほぼ一定の幅を持っている
ということです。

画像

つまり、通常サイズのコメントにおけるハイライトと
70行という縮小率の世界におけるハイライトでは
70行のほうが文字に対して太く目立って見える。

通常サイズのコメントで大して目立たなかった
コメント差分式の表現法が
70行においてよりはっきり見えたのには
こういった理由があったわけですね(`・ω・´)




また、今回は曲線の表現について
新たな手法を試してみました。

画像

右側の髪部分。
毛先の表現などにおいて使用する文字を
これまでの罫線系のスラッシュなどから
「▎(U+258E)」などといったブロック系の文字に
してみました。

理由は70行においてはスラッシュ系の文字が
細すぎてあまり目立たないから。
上の画像で言うと鼻の部分の
黒いスラッシュ文字を見るとよくわかります。
対してブロック文字((U+2588〜U+258E)であれば
文字自体の太さに自由度が聞くことと、
例えつながらない箇所が出ても
1行あたりが小さいので全体を視聴した際、
見る側の補完効果で曲線として
認識してくれるのではないかという
目算を立てたためです。

実際に構成してみると、
先ほどのハイライト処理が意外と
大きな効果を発揮しました。

画像

赤丸部分。
ハイライト処理で実際の文字よりも
太く表示されているようにみえるため、
隙間を埋めるような形になり
補完効果が上がる結果に。


・・・とまああたかも目論見どおりみたいに
言いましたが、実際の製作では
ハイライトについては想定していませんでした( ・3・)

画像

構成段階の着色。ハイライトは背景色に溶け込んでいます。
元々はハイライトがなくても(見えなくても)見る側が
補完して曲線に見えてくれれば良いと目論んでいました。

ただ、結局ハイライト処理で太く見えるようになるなら
細すぎて使えないと思っていたスラッシュ系の
文字でも問題なく表現できるのでは・・・?

そこで顔部分の毛先表現では
罫線系の文字を使用してみました。

画像

赤丸部分。
これを見る限りでは問題なさそうに見えます。
むしろハイライトで各文字がくっつくようにみえるので
これまで構成上難しかった鈍角の線表現が
より見栄え良くなるのではないかという期待がありますね。

ただ、鼻部分の黒コメントのように
ハイライトが全く目立たないケースもありますし、
色合いによっても印象が変わってしまう可能性があるので、
状況に応じて使い分けるのがベターでしょう。


画像

背景は公式ウェブサイトのデザインに準拠しています。
キズナアイのロゴデザインに
電波(?)を上手く重ねることが出来ました。


画像

以上のような構成で
締めて本体26コメント+背景8コメントの
合計34コメント。
一人分のみではありますが思ったより
コメント数がかさばりました^^;

ですがコメント数の割に、
おそらくは前作よりは重くないです( ・3・)
理由は正直なんとも言えないのですが、
置換処理の方法をより効率化させたことが
関係しているのかもしれません。

前作時点では置換対象は空白と
ブロック文字だけだったのですが、
その後改行そのものも置換処理が
できる
ことがわかったため、
置換テンプレートを更新しました。

画像

置換文字の内訳はこちら。

Ч=「U+2004×2」
Ы=「tab×2」
Ю=「tab×4」
Ф=「tab×8」
Б=「tab×16」


И=「U+2588×2」
Ж=「U+2588×4」
Я=「U+2588×8」
К=「U+2588×16」
Э=「71〜92行改行+W(漢字幅)×132」


⒈=「3行改行」
⒉=「6行改行」
⒊=「9行改行」
⒋=「12行改行」
⒌=「15行改行」
⒍=「18行改行」


改行の記号を追加したことと、
「Э」の文字一つで71行以降の文字数を
全て置換
できるようにしました。

今回の置換テンプレートで70行コメントを
最も短く表現するとこうなります。

「Ч⒍ ⒍ ⒍ ⒌ ~Э」

実際には40行を境に上部下部で構成しているので
このような表記にはほとんどなりませんが、
短くまとめられるところはそうした方が良いでしょう。


70行の世界は1コメントあたりの情報量が
相応のボリュームになるので作るのは大変ですが、
細かいがゆえの表現法や仕様の発見があって楽しいですね。
特に今回わかったハイライトの仕様は次回以降
もっと上手く活かしてみたいです(・∀・)

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
ハイライト処理の有効活用 気ままにニコライフ/BIGLOBEウェブリブログ
文字サイズ:       閉じる