박스 배경색을 바꿔보자 -3-[발롱도르~]

이 부분 색이 이부분이랑 달라요

이 부분 투명하게 바꾸고 싶어요

등등 

박스 부분 배경 색 또는 투명도를 바꾸고 싶을 때 어떻게 할까요?

 

 

우선 바꾸고 싶은 부분 패널을 열어봅니다.

 

건조3.0스킨 선수 프로필 화면을 예시로 해볼게요

 

 

 

이 화면의 패널은 panels/player/player overview panel.xml 입니다.

 

메모장또는 프로그램으로 열어봅니다.

 

박스의 색깔은 의 색을 지정해 줘서 바꿔 주어야 합니다.

 

 

위 스샷에 보면

appearance="boxes/bordered/no margin/paper2"

이것이 보이죠?

이런식으로 appearance="~" 가 있으면 이 박스는 paper2 라는 파일로 배경을 표시하라는 말입니다.

그렇다면 이 appearance가 없는 container는 어떤걸로 표시가 되는 걸까요?

 

앞에 resource archiver로 기본스킨의 패널과 그래픽 파일들을 넣은 폴더에서

skins/fm-widgets/graphics/boxes 폴더를 보면 container 종류에 따라 적용되는 기본 그래픽 파일들이 있습니다.

appearance="~" 로 지정해 주지 않은 container는 이 기본 그래픽 파일들이 적용되게 됩니다.

따라서 appearance="~"가 없는 container들의 색을 맞추기 위해서는

container 종류를 같게 맞춰주든지 appearance 로 같은 파일로 적용시켜 주면 됩니다.

 

 

우선 첫번째로 appearance 없이 색을 바꾸는 방법입니다.

안에 background_colour="색" 을 넣어주는 것입니다.

 

 

background_colour="red" 와 background_colour="yellow" 를 넣어봤습니다.

 

 

이렇게 빨강과 노랑으로 바뀐것을 볼 수 있습니다.

간단하게 색을 넣을 수 있습니다.

 

 

 

두번째로 appearance="~" 로 좀더 복잡한 색이나 그림을 넣어봅시다.

 

appearance로 색이나 그림을 넣기 위해서는 그림파일이 필요합니다.

 

예시를 위해 스킨/graphics/boxes/custom/test 폴더를 하나 만들어서 그림파일을 넣어볼게요

 

 

 

샘플로 대충 3개를 넣었습니다.

50.png 는 빨강 투명도 50%

jy.png는 정연이

rgb.png 는 red, green, blue를.. (255,0,0), (255,255,0), (255,0,255), 등등 나눠 놓은 것입니다.

 

하나씩 적용해 볼게요

 

 

appearance="boxes/custom/test/50" 을 추가해서 확인해보니까..

어? 안되네요ㅠ

 

이거 어떻게 하나요?....ㅠㅠ

 

 

 

 

당황하지 마시고.. 이렇게 container class에 따라서 안되는 것들이 있네요 ㅋㅋ 

여기서는 꼭 적용하고 싶으면 여기 적용된 다른 파일에다 하면 됩니다. 

 

다시 gunzo/gunzo player profile.xml 파일에서 적용해보도록 합시다.

 

 

 

 

나오긴 하는데 이거 뭔가 이상하죠? 

네 바로 그림파일 사이즈 그대로 나온것입니다.

 

이 그림파일들을 박스 크기에 맞게 할려면 어떻게 해야할까요?

저 박스 크기가 얼마인지도 모르는데....

그래서 xml 파일이 필요하게 됩니다.

 

스킨/graphics/boxes/custom 폴더 안에 다른 폴더에서 아무 paper.xml 파일을 복사해서 가져옵니다.

그리고 그림파일과 이름을 똑같이 해줍니다.

 

 

 

이제 이 xml 파일이 어떤 역할을 하는지 볼 차례 입니다.

 

50.xml 파일을 열어봅니다.

 

 

내용은 어떤 파일을 복사해 왔느냐에따라 다르겠지만 

모양은 비슷할 거예요

 

우선 위에 

<record id="image_borders" left="0" right="0" top="0" bottom="0"/>
이 것은 적힌 그대로 image의 border를 얼마나 할건지 설정하는 부분입니다.

단위는 픽셀입니다.

설정한 값 만큼 테두리로 설정이 됩니다.

여러가지 값으로 테스트 한 번 해보세요

 

<record id="image_slices" left="8" right="8" top="8" bottom="8"/>

이 부분은 image를 어디까지 유지시킬건지라고 생각하면 됩니다.

left="8" 은 왼쪽 8 픽셀까지 그대로 두고 9픽셀부터는 늘리거나 줄여준다고 생각하면 됩니다.

즉 left="8" right="8" top="8" bottom="8" 이건 상하좌우 각각 8픽셀씩 원본그대로 두고 나머지 가운데 부분을 늘려라입니다.

 

아래

<colour id="red_replacement" name="box_background"/>
<colour id="green_replacement" name="box_shadow"/>
<colour id="blue_replacement" name="box_border"/>

 

FM에서는 rgb로 색을 지정해 줄 수 있습니다.

빨강은 흰색으로, 녹색은 빨강으로, 파랑은 노랑으로 이렇게 바꿔줄 수 있습니다.

<colour id="red_replacement" name="white"/>
<colour id="green_replacement" name="red"/>
<colour id="blue_replacement" name="yellow"/>

이렇게요

그럼 이미지에서 빨강은 흰색, 녹색은 빨강, 파랑은 노랑으로 바꿔서 FM에서 이미지를 보여줍니다.

직접 여러가지 테스트 해보시는게 이해하기 쉬울거예요

 

 

 

이제 각 이미지의 xml 파일을 수정해서 테스트해 봅시다

 

 

 

각각 이렇게 나오네요

 

 

직접 해 보면서 여러가지로 이것저것 테스트 해 보면 금방 쉽게 이해가 될겁니다.

다양하게 응용해 보세요