HP とかの残量に応じて色を変える

最近、妻とドラクエ6をやったりしている。ドラクエを見ていてすごいな、と思う点の1つは (他の RPG でもほとんど実装されているけど) 残 HP が少なくなってくると HP がオレンジ色で表示され、警告される点。これ、すごく便利ですよ。

自前で作っている SWEET とかでもこういうのがあれば便利そうだな、と思いこれを実現するためのツールを作った。

サンプルページ

// https://shunshun94.github.io/shared/other/io/github/shunshun94/util/colorutil.js を読み込んでおく必要あり

var colorRater = new io.github.shunshun94.util.Color.RateColor();
colorRater.getColor(100); // => white
colorRater.getColor(0); // => red

colorRater.getColor(75); // => white 25 : 75 red 位の色
colorRater.getColor(50); // => white と red の中間位の色
colorRater.getColor(25); // => white 75 : 25 red 位の色

var colorRater = new io.github.shunshun94.util.Color.RateColor('blue', 'black');
colorRater.getColor(100); // => blue
colorRater.getColor(0); // => black

colorRater.getColor(75); // => blue 25 : 75 black 位の色
colorRater.getColor(50); // => blue と black の中間位の色
colorRater.getColor(25); // => blue 75 : 25 black 位の色

var colorRater = new io.github.shunshun94.util.Color.RateColor({
	100: 'black',
	80: 'black',
	50: 'orange'
});
// =>
// 80までは black だが、50にかけて徐々に orangeになっていき、
// 50を下回ると徐々に red に近づいていく

作ってみて使ってみて思ったけど、オリジナルみたいに途中で唐突に変わる方が分かりやすい気もした。うまくいかないものね。唐突に変わる版もつくるかー……