Chrome の色補正

プログラム話…というかブラウザ話です。

滅びの国の王女では、王女の色を選択できる、というギミックがありました。
テクスチャーをパレット対応の形式で作成して、リアルタイムでパレットを適用するといったことをやっていたのですが、わざわざパレットデータを作るまでもないようなモノに関しては、普通のテキスト形式の設定ファイルで色指定を行っていました。

ところが、設定ファイルでは色の指定を16進数のカラーコードで行っていたため、どんな色を指定しているのかイマイチわからない、という問題がありました。

単に１つのカラーコードが欲しいだけなら 適当なツールや
https://www.rapidtables.com/web/color/html-color-codes.html
なんかを使って16進数を持ってくれば良いのですが、色の組み合わせを指定したい時は設定中の複数の色が全部見えていた方が分かりやすいんですよね。

そこで思いついたのが Web ブラウザの活用です。

設定ファイルをうまいこと html 形式で記述できるようにしておけば、web ブラウザで設定ファイルをそのまま開いて色を確認できます。
というわけで、table タグを使って色の設定項目を埋め込めるようにしてみました。

具体的にいうと、これまでテキストファイルで

PlayerColor.Red   = 0xff0000
PlayerColor.Green = 0x00ff00
PlayerColor.Blue  = 0x0000ff

のようにしていたものを、

<table><caption>PlayerColor</caption>
<tr><td>Red  </td><td bgcolor="#0xff0000">dummy text</td></tr>
<tr><td>Green</td><td bgcolor="#0x00ff00">dummy text</td></tr>
<tr><td>Blue </td><td bgcolor="#0x0000ff">dummy text</td></tr>
</table>

と記述できるようにした、というものです。かえって面倒になったようにも見えますが、テンプレートを作っておけば実際はコピペするだけで済みます。

このファイルをゲーム側で読み込んで解析して、色の設定情報を取り出します。

んで、さっそく今までテキストで書いていた色テーブルを html 形式に変換して試してみたのですが……なんか、「？？」て感じになりまして。

#0000FF と指定して表示した色が、いやに彩度が低いというかグレーがかって見えるんですよね。

「あれ？ #0000FF ってもっとキツイ青じゃなかったっけ？」と。

最初、HTMLでのRGB指定というのは普通のRGB指定と異なっていて、目に優しいRGB空間になっているのかと思ったのですが、そういうわけではなさそうですし。
というわけで少し調べてみて初めて知ったのですが……。

Google Chrome って自動的に色を補正してくれるんですね！

確かに、同じファイルを Firefox で開いてみるとちゃんとキツイ青で表示されています。
比較画像を作ってみました。

左上： Gimp で R=0%, G=0%, B=100% で作った色
左下： Firefox で表示した #0000FF の色
右側： Chrome で表示した #0000FF の色

この現象、私は全く知りませんでした。
「Chrome 色が違う」とかで検索するといっぱい出てきますね、コレ。
どちらかといえば Chrome が正しくて他が間違っている（Windows上でのガンマ補正が関係しているみたいですね）ようなのですが、このあたりは私も勉強不足ですので詳細はあまり分かりません。
そーいやPhotoShopでガンマがどうとかあったような……。

とりあえず、今回の目的から言うと余計なおせっかいであることは確かなので、この補正機能を切ってしまう事にしました。

sRBG とガンマ補正に関してはこちらをどうぞ

ガンマ補正のうんちく
https://qiita.com/yoya/items/122b93970c190068c752

sRGBとAdobe RGBを理解する
https://www.itmedia.co.jp/dc/articles/1009/01/news030.html

しかしまさかこんなところで罠にハマるとは… orz

販売ページに貼るアレ

実際にはまだ当分使わないし、作り直すかもしれないのでフォロワー以上限定で公開です。

背景の話　その２

久し振りのあまり参考にならないシリーズ。
前回ゲームの背景の話をしたので、ついでに私はこんな風に描いてますというメイキングのようなものです。

一応フォロワー以上で。

背景の話

ゲームを作るのって大変ですよね（唐突）。

創作というのは何だって大変なんですが、個人的にゲーム作りで辛いことのひとつが背景です。

特にアクションゲームの背景はゲームの仕様によってサイズやら何やら全く異なるので、使えるフリー素材がほとんど無くて結局ほとんど全部自力で描くしかないんですよね。
（それを言ったら主人公とか敵キャラとかもそうなんですが、キャラは描いてて楽しいので……）

今作っているゲームは奥行きのある横スクロールアクションゲーム、いわゆるベルトスクロールアクションゲームで、以前作ったヴィータ大脱出のブロックを配置したような背景ではなく、大きな一枚の絵として背景を描いています。

マップチップを作る→配置してマップを作るという手間が無くなる分、ラクになるかなーと思ったんですが、そんなことはありませんでした。
大きな絵になるとその分描き込み量も増えるし、ものすごく横長の絵になるので全体のイメージもなかなか掴めません。実際にゲーム画面でキャラ動かしてみたら部室が広過ぎィ！とかなります。なった。

あと、当たり前ですが判定（移動できる範囲とか障害物とか）は別に設定しないといけないんですよね。
これがブロック単位で指定できなくなって地味に大変というか何というか。

一見なんということも無い、昔からよくあるタイプの2D背景ですが、プログラム上ではこんな風になっています。
↓

ええ。実はこれ3Dゲームなんです……。

ゲームを作るのって大変ですよね（締め）。

ZIPファイル その３

ZIPファイルについてです。
またかよ！て感じですよね（汗

いや、本当は２回目で終わりだったのですが、せっかくだからプログラムも公開しておこうかと思って第３回を追加しました。

今回は、なるべくシンプルなライブラリだけを使って ZIP ファイルを作成 or 読み取るソースコードを公開します。もちろんパスワード付き、コメント付き ZIP にも対応しています。
zlib による圧縮展開の部分だけは外部ライブラリを使っているのですが、本家 zlib はファイル数が多くて面倒なので、その代わりに互換ライブラリ miniz を同梱してあります。
https://github.com/richgel999/miniz

※ちなみに miniz には zip ファイルを解析するための miniz_zip.h というのも含まれているのですが、パスワード付き圧縮に対応していないためここでは使っていません。

miniz は zlib に比べると圧倒的にファイル数が少ないので、ソースコードごと組み込みたい場合にすごく助かります。
（自分の中では stb_image や stb_truetype と並ぶ定番ライブラリとなっております）

いくつか参考サイトを挙げておきます

組み込みファームウェアで ZIP ファイルを扱う ～ miniz の紹介
https://qiita.com/ishihatta/items/0d7e529f7dca3220e1d9

１ファイルで提供されるzipソースコードライブラリ miniz
http://ambiesoft.fam.cx/blog/archives/2568

miniz.cを使ってC言語でファイルを展開する
https://blog.piyo.tech/posts/2014-08-05-200000/

とりあえずビルドに必要なファイルは全て一緒に入れてありますので .sln を開いてビルドすれば普通に実行できるはずです。
（Visual Studio 2017 で確認しています）

フォロワー以上でソースコードをダウンロードできます。
例によってこのプログラムを使用したことによる責任は一切負いません。
その代わり、組み込み、改造、再配布など全て自由です。