Pixi.js: ColorMatrixFilter ์ƒ‰์ƒ๋ณ„ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

์— ๋งŒ๋“  2018๋…„ 01์›” 14์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: pixijs/pixi.js

์•ˆ๋…•ํ•˜์„ธ์š”, ColorMatrixFilter๋ฅผ ์ƒ‰์ƒ "#e73b37"๋กœ ์‚ฌ์šฉํ•˜์—ฌ ๊ทธ๋ฆผ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ํ–‰๋ ฌ ๋ฐฐ์—ด๋กœ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ณ„์‚ฐ ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‹น์‹ ์ด ์ฐพ๊ณ  ์žˆ๋Š” ๊ฒƒ์ด ๋ฌด์—‡์ธ์ง€ ์ •ํ™•ํžˆ ๋ชจ๋ฅด์ง€๋งŒ:

๋‹ค์Œ์€ ColorMatrixFilter๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ธฐ๋ณธ์ ์œผ๋กœ tint ๋ฅผ ๋ณต์ œํ•˜๋Š” ์ ‘๊ทผ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

const color = new PIXI.filters.ColorMatrixFilter();
const tint = 0xe73b37;
const r = tint >> 16 & 0xFF;
const g = tint >> 8 & 0xFF;
const b = tint & 0xFF;
color.matrix[0] = r / 255;
color.matrix[6] = g / 255;
color.matrix[12] = b / 255;

https://jsfiddle.net/bigtimebuddy/4612gq30/1/

๋‚˜๋Š” PixiAnimate์—์„œ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค: https://github.com/jiborobot/pixi-animate/blob/master/src/mixins/DisplayObject.js#L143 -L153

์œ„์˜ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ƒ‰์ƒ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์ƒ‰์กฐ๋ฅผ ๊ณฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

๋‹น์‹ ์ด ์ฐพ๊ณ  ์žˆ๋Š” ๊ฒƒ์ด ๋ฌด์—‡์ธ์ง€ ์ •ํ™•ํžˆ ๋ชจ๋ฅด์ง€๋งŒ:

๋‹ค์Œ์€ ColorMatrixFilter๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ธฐ๋ณธ์ ์œผ๋กœ tint ๋ฅผ ๋ณต์ œํ•˜๋Š” ์ ‘๊ทผ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

const color = new PIXI.filters.ColorMatrixFilter();
const tint = 0xe73b37;
const r = tint >> 16 & 0xFF;
const g = tint >> 8 & 0xFF;
const b = tint & 0xFF;
color.matrix[0] = r / 255;
color.matrix[6] = g / 255;
color.matrix[12] = b / 255;

https://jsfiddle.net/bigtimebuddy/4612gq30/1/

๋‚˜๋Š” PixiAnimate์—์„œ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค: https://github.com/jiborobot/pixi-animate/blob/master/src/mixins/DisplayObject.js#L143 -L153

์œ„์˜ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ƒ‰์ƒ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์ƒ‰์กฐ๋ฅผ ๊ณฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@bigtimebuddy ๋‚ด ๋ฌธ์ œ๊ฐ€ ์„ฑ๊ณต์ ์œผ๋กœ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ์ง„์‹ฌ์œผ๋กœ ๋ฐ”๋ž๋‹ˆ๋‹ค

์ด ์Šค๋ ˆ๋“œ๋Š” ๋‹ซํžŒ ํ›„ ์ตœ๊ทผ ํ™œ๋™์ด ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ž๋™์œผ๋กœ ์ž ๊ฒผ์Šต๋‹ˆ๋‹ค. ๊ด€๋ จ ๋ฒ„๊ทธ์— ๋Œ€ํ•œ ์ƒˆ ๋ฌธ์ œ๋ฅผ ์—ฌ์‹ญ์‹œ์˜ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰