気ままにニコライフ

アクセスカウンタ

zoom RSS HTML5超高精度フルカラー!【その1:経緯編】

<<   作成日時 : 2017/10/21 13:38   >>

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

せっかくなのでとことんやってみたぞ(・∀・)

先日、flashプレーヤーでの絵系CA制作に区切りをつけて、
本格的にHTML5投コメでの制作を開始しました。

まずは御覧いただきましょう(`・ω・´)

画像



ソレイユ!!

星宮いちご、霧矢あおい、紫吹蘭の3人で
構成される「アイカツ!」の太陽!
1期後期のOP「ダイヤモンドハッピー」は
とても元気が出る曲でいいですね!
製作中ずっと聞いていましたw


そしてこのコメントアートです。
いつもとは明らかに違うことがお分かりいただけるでしょうか。

まず構図から違います(・∀・)
3人分、上半身全体を写した構図。
これまでは基本1人、肩以上を写した構図でしたので
1枚中におさまっている情報量が段違いです。

それもそのはず、今回のコメントアートは
従来の「small38行」よりも俄然細かい「70行」
行数だけでもほぼ2倍の精度ですね。
行数が増えた分作業量も倍以上に増えましたが頑張りました^^;


普段の制作CAでは「いつもと同じ」などと
大したことは書いていませんが、
今回は新しいことだらけですので
ガッツリいきますよ(`・ω・´)



まず、今回のテーマは
「HTML5投稿者コメントの持つ可能性の追求」
といったところです( ・3・)
HTML5投コメでの最初のCAという事で、
これまで出来なかったことを含め、従来の投コメCAの
枠組みにとらわれないコメントアートの制作を目指しました。

その結果がこの構図であり、
「70行」という縮尺での制作となったのですが、
まあそこに至るまでの経緯は割と段階がありまして・・・。


・・・HTML5投コメでのコメントアート制作にあたり、
まず考えたのはこれまでのflashとの仕様の違いです。

HTML5は全体で見ると以前よりも良くなっているといえるのですが、
個々の視点で見るとそうではない部分も散見されます。

まず良くなった部分としては
24コメント消失バグがなくなり、1画面中に
40コメントを目一杯表示できるようになった
ことです。

flash時代のコメントはsmall38行のような高さ固定コメントを
重ねると24コメントを投稿した時点で古いコメントの一部分が
消えるというバグがありました。

画像

2012/03/08「分割キャプチャ」

そのため1画面表示の最大コメント数は40コメントにも関わらず、
実際は23コメントという制限下で構成する必要がありました。

HTML5コメントはそのようなバグはありませんので
1画面中に40コメント全て使用することが出来ます。

この差はとても大きい(`・ω・´)
1コメント中に入れられる情報量が限られる中で
17コメントも使用できる枠が増えたというのは革命的です。
(上の2012年の記事で「いつかバグが直ってくれるといいな」と
書いたことがようやく実現しました。感慨深いです。。。)



もう一つ良くなった部分としては、
画面サイズそれぞれでコメントがほぼ完璧に
伸縮表示されるようになった
こともあげられます。

※大画面表示(854×480)
画像

※中画面表示(640×360)
画像

これまではある画面サイズで作ったCAはサイズを変えると
伸縮率の違いにより崩れてしまうのが当たり前でした。
それが現在では中画面でも大画面でも、
フルスクリーンでも全く同じように表示されます。
これまで決してできなかった画面サイズ互換が
実現しているという事実だけで感動します(;∀;)



一方で個人的に悪くなった部分もあります。
それはこれまで使用していた文字が
一部使用できなくなった
こと。

通常コメントCA製作時にも書いたことがあるのですが、
「U+2588」をこれまで通りブロック文字として使用する場合、
フォントコマンド「gothic」あるいは「mincho」を
使用する必要があります。
windows7の場合は「mincho」だと文字位置が偏るため
「gothic」を使用するのが最も良いのですが、
「gothic」を使用するとバックスラッシュが
全く違う記号で入力されてしまうのです。

画像


これまでスラッシュを用いて細かい曲線を
描いてきた身としては痛い仕様です(´・ω・`)
細かい曲線が描けなくなるぶん、これまでよりも
ギザギザ感=粗が目立つように見えてしまうでしょう。


このようなHTML5の良い部分、悪い部分をふまえ、
自分が作りたいものはどういうものか考えました( ・3・)

まずこれまで当たり前のように作ってきたsmall38行。
作り始めた当時(2012年頃)は高精細と呼んでいたのですが、
それは中画面サイズでの話。
大画面やフルスクリーンで見ることを想定した場合、
38行というサイズは個人的に物足りなさを感じていました。
スラッシュが使えない粗がどうしても目立って見えてしまうのです。

そこで思いついたのが
粗が目立たないほど細かくしてみたらどうだろうということ。
これまで38行を23コメントで制作してきたのだから
40コメントあればもっと細かい行数で構成できるのではないか?

実現のためには2〜3の問題がありましたが、
HTML5投コメ最初の作品というインパクトを
持たせたいという自己欲求も鑑みまして^^;
今回はこのような形で制作を行うことになりました(`・ω・´)


・・・って制作に至った経緯だけでも長いなw
ここから先も色々と問題を解決しながら
作っていったわけですがそこまで一気に書いてたら
とんでもない長さになりますね(゚д゚)

なので今回は記事を分割して書いていくことにします。
次回は技術的な部分が中心となる予定です。

画像


最後に、今回のコメントアートは
従来の中画面よりもっと大きな画面サイズで
見てほしいと思います。
上のキャプ画はフルスクリーン(1920×1080)サイズです。
プレーヤー上でも少なくとも大画面以上、
一番のオススメはフルスクリーン視聴です!
全体として少し重くなってしまったので申し訳ないのですが、
画面いっぱいに表示されるコメントアートは
長くCA制作している人ほど感動するはず(・∀・)


ではまた次回ヽ( ・3・)ノ

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(0件)

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

トラックバック用URL help


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

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
HTML5超高精度フルカラー!【その1:経緯編】 気ままにニコライフ/BIGLOBEウェブリブログ
文字サイズ:       閉じる