팁과 노하우

전체보기

모바일 상단 메뉴

본문 페이지

[기타] HP.MP.TP.스펠타이머를 6개의 음성으로 듣자 /ACT_케릭터_스킨(5가지 타입 첨부) 마음에 안들면?마음에 들게 설정해보자...

하얀야우
댓글: 17 개
조회: 14415
추천: 18
2016-05-12 20:48:11

5월19일 추가 파일및 영상입니다 맨 하단에 링크 있습니다

다크나이트/기공사/점성술사 lv1 ~lv60_아이콘 추가+기존 직업lv52 ~v60 아이콘추가 (스펠타이머용)

안녕 하세요 길가섭에 야우 입니다

Torgan.MiniParse 를 기본 바탕으로 수정 하였습니다


해상도  : 2560*1080 
운영체제:WINDOWS 10 pro
그림파일  *.png 100*100


개인 용도로 쓰려고 수정 하다보니 다른 화면에서는 좀 크게 보일수 있음 (아래 설명 참조 하심 수정 가능 합니다)
누구나 쉽게 소스를 수정 하여 만들수 있도록 소스위치 정보 공유
화면크기를 조절 할수 없던것을 조정 할수 있게 수정 (우측하단 모서리에 있음 )
아이콘으로 직업확인을 잘 하지 못하여 잡 이름은 기본으로 넣었습니다 (필요 없으시면 // 앞에다 넣으세요)
누구나 본인이 원하는 색상 및위치등을 쉽게 설정 할수있으며 (추가케릭 설정도 되어 있습니다)
좀더 많은 스킨등이 올라 오길 바라는 마음에서 공유 합니다 

skin.zip 파일 구성
  
app    폴더                                                   
css    폴더                            Torgan.MiniParse .css 파일 (색상및 위치 조절 )
icons  폴더                            (케릭터 아이콘 _1.png  2.png 3png )
images 폴더                           (직업아이콘/박스설정에 들어 가는 이미지)
Torgan.MiniParse                     기본  타입 (데스/미스 선택 되어 잇음)      
Torgan.MiniParse_icon               icon 타입 (미스만 선택 되어 있음) 
Torgan.MiniParse_icon_gif          움직이는 파일 추가 하였습니다
Torgan.MiniParse_icon_gif_2        5월17일 딜러 화면에 2개에 gif 적용 액션 아이콘 수정 아래 영상 참조
Torgan.MiniParse_Text               text  타입 (데스/미스 선택 되어 있음)    
설정설명.txt                           아래 참조 내용


1)기본 화면 Torgan.MiniParse  

2)텍스트 화면 Torgan.MiniParse_Text 

3)Icon 화면 (현제 블리치버전) Torgan.MiniParse_icon 

4) 움직이는 icon화면 Torgan.MiniParse_icon_gif  

4개중 원하는것 연결 하셔서 사용 하시면 됩니다    
 

위에 4개가 마음에 안드실때 교체 하는 방법

문서편집기
유료
무료
윈도우 기본 편집기를 쓰셔도 됩니다

1).html
 화면 구성 교체
 - 글씨 항목 및 케릭터 교체 방법
2).css 
바탕 화면 투명도 /bar 크기 수정 /bar 색상 수정 /bar 안에 수치들은 개별 색상을 지원 하고 위치 및 크기 조절 가능

1).html 화면 구성

현제 html 에 설정 되어 있는 항목 

  damage: {
  encounter: "<div class="title"> <span>{title} <img src='./icons/1.png' align='center' style='width=10%;height:10%;'</span></div><div class="rdps">Raid DPS <span>{encdps}</span></div><div class="time">Time  <span>{duration}</span></div>",
   
            { html: "{icon}", class: "icon" },
            { text: "{name}", class: "name" },
            { text: "{Job}", class: "job" },
//  대문자는 소수점 버린 값
            { text: "{ENCDPS}", class: "dps" },
     { text: "{damage}", class: "damage" },
     { text: "{damage%}", class: "damage1" },
            { text: "{crithit%}", class: "crit" },
//  { text: "{deaths}", class: "deaths", autohide: true },   //죽음 횟수  (죽음은 의미가 없어 미사용 설정)_(죽음발생시에만 빨간색으로 나타납니다_평상시에는 표식 없음)
        //  { text: "{encdps}", class: "dps" },                      //dps *.** 미사용 설정 현제 소수점 버린값으로 되어 잇음 소수점이 필요하면  { text: "{ENCDPS}", class: "dps" },항목에서 대문자를 소문자로 바꾸면됨
            { text: "{misses}", class: "miss", autohide: true }      //미스 횟수  (미스 발생시에만 빨간색으로 나타납니다_평상시에는 표식 없음)

위 소스로 적용된 모습 

난 저거 저거 필요 없는데 하시는 분들을 위해서 수정 해보겠습니다
직업 대미지 대미지% 3가지를 화면에 안나타나게 해보겟습니다

사용 하지 않을 항목에       //          2개만 넣으시면 끝 결과물은? ? ?

결과는 직업아이콘  이름  크리  dps만 남은 아주 깔끔한 버전으로 바뀝니다  
원하시는 항목들만 골라서 넣기도 가능 합니다 (아래 참조 항목을 보시면서 골라 넣으시면 됩니다)

화면 구성 위치및 크기는*. css 설명을 참고 하시면 됩니다


    healing: {
    encounter: "<div class="title1">. .  뭐 하 니?<span> <img src='./icons/2.png' align='center' style='width=5%;height:10%;'</span>  </div><div class="HPS">Raid HPS <span>{ENCHPS}</span></div><div class="time">Total  <span>{healed}</span></div>",
        
            { html: "{icon}", class: "icon" },
            { text: "{name}", class: "name" },
     { text: "{Job}", class: "job" },
     { text: "{healed}", class: "damage" },   // 모든 회복량
     { text: "{healed%}", class: "damage1" }, //자신의 회복 (%)
            { text: "{critheal%}", class: "crit" },  // 크리티 힐
            { text: "{ENCHPS}", class: "dps" },      //초당 힐량  {enchps} xx.xx 방식
            { text: "{OverHealPct}", class: "oheal", autohide: true }   //오버힐
       
    tanking: {
    encounter: "<div class="title2"> ..떨 고 있 니? <span><img src='./icons/3.png' align='center' style='width=5%;height:10%;'</span></div><div class="rdps">Raid DTPS <span>{ENCDTPS}</span></div><div class="time">Total   <span>{damagetaken}</span></div>",
 
            { html: "{icon}", class: "icon" },   //class: "icon"  는 *.css 파일에 ion 항목에 영향을 받아 색상및 글자 크기가 변경 됩니다
            { text: "{name}", class: "name" },
           { text: "{Job}", class: "job" },
     { text: "{damagetaken}", class: "damage" },           // 전투중 받은 총 피해량
     { text: "{healstaken}", class: "damage1" },             //전투중 받은 총 힐량 힐러 2명값 포함
            { text: "{ParryPct}", class: "crit" },      
            { text: "{ENCDTPS}", class: "dps" },
            { text: "{BlockPct}", class: "block", autohide: true }   // 블럭

*예){ html: "{icon}", class: "icon" } 에서  class: "icon"  는 *.css 파일에 icon 항목에 영향을 받아 색상및 글자 크기가 변경 됩니다 색상및 위치는 개별 설정을 하였음

  1) 텍스트/케릭터 버전 (글자 교체방법) 
Torgan.MiniParse_icon      
Torgan.MiniParse_Text         사용하시는 html 파일을 여시면 됩니다

좌측 상단에 .. 뭐 하 니? 이 글씨를 바꿔 보겟습니다
Torgan.MiniParse_icon      
Torgan.MiniParse_Text    중  사용하시는 html 파일을 편집기로 엽니다 

.. 뭐 하니 보이시죠 여기를 원하시는 글자로 바꾸기

따라 해보세요 라고 수정 하고 저장 해보겟습니다
이제 ACT 미터기에 적용이 되는지 확인 하기입니다  우측 하단에 Reload overlay 클릭 하시면 ... 뭐 하니 ? 에서 따라 해보세요 라고 교체 되셧음 완료 입니다 글자는 원하는 내용으로 힐러용과 탱커용 교체 하시면 됩니다


예)  healing / tanking   항목에 원하는 글을 넣어서 사용하면 됨
 healing: {
       encounter: "<div class="title1">. .  뭐 하 니?<span> <img src='./icons/2.png' align='center' style='width=5%;height:10%;'</span>  </div>
<div class="HPS">Raid HPS <span>{ENCHPS}</span></div><div class="time">Total  <span>{healed}</span></div>",

글자를 원하시는대로 바꾸셧다면 글자 색상도 바꿔 봐야죠?

색상및 위치 조정은 css 파일에 들어가 있습니다
css폴더  Torgan.MiniParse  (일반/텍스트용 파일) /    Torgan.MiniParse.icon (icon용 파일) /  사용하시는 타입으로


.title  {
     text-align: left;
     margin-right:-50px;
     font-size: 12px;
}
.title1  {
            color:#36ff36;  (요기색상 바꾸시면 글자색이 바뀝니다)
            text-shadow:  1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
     background-color: rgba(0, 0, 0,0); 
     font-weight: lighter;
            text-align: left;
     margin-right:-50px;
     font-size:12px;
}
.title2  {
            color:#8e8efe; (요기색상 바꾸시면 글자색이 바뀝니다)
            text-shadow:  1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
     background-color: rgba(0, 0, 0,0); 
     font-weight: lighter;
            text-align: left;
     margin-right:-50px;
     font-size:12px;
}




.title(딜러용화면 타겟)     .title1 (힐러용화면   . .  뭐 하 니?)   .title2 (탱거용화면 ..떨 고 있 니?) 

원하는 색으로 바꾸시면 됩니다

2) 케릭터 버전 (그림 교체방법)

*.gif 로 교체한 영상 입니다 

icons 폴더에 1.png 2.png 3 .png  3개의 파일이 있습니다로 교체원하는 그림파을을 1.png 2.png 3 .png 형식으로 교체 하여 넣으시면 케릭터 설정 위치에 지정 하신 그림으로 보여 집니다

html 에서 *.png 형식을 .gif 형식으로 바꾸시고 .gif 파일을 넣으시면 움직이는 그림도 가능 합니다
예)
damage: {
        encounter: "<div class="title"> <span>{title} <img src='./icons/1.png' align='center' style='width=10%;height:10%;'</span></div>
<div class="rdps">Raid DPS <span>{encdps}</span></div><div class="time">Time  <span>{duration}</span></div>",
수정)
 damage: {
        encounter: "<div class="title"> <span>{title} <img src='./icons/1.gif' align='center' style='width=10%;height:10%;'</span></div>
<div class="rdps">Raid DPS <span>{encdps}</span></div><div class="time">Time  <span>{duration}</span></div>",

참고)style='width=10%;height:10% 화면상에 나타내는 그림 크기 입니다 수치만 바꾸시면 크기 조절 가능 합니다 



images/glow_icons 폴더에    limit break.png 이름을 같게 하여 교체 하심 리미트 브레이크 를 바꾸시면 원하시는 그림으로 보여 집니다

*일반/텍스트 버전은  images/glow 폴더에    limit break.png 이름을 같게 하여 교체 

2)css 파일에서는 크기/색상/ 위치등을 수정 

1)바탕 화면 투명도 
예)
#wrapper {
    background: rgba(0,0,0,0.50);
    box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.50);           0.50 투명도가 반정도 됩니다 진한걸 원하시면 1.0 으로 수정, 수치는 직접 만져 보시길)
    border-radius: 7px;
    margin: 15px;

투명으로 나타나게 하고 싶으면  rgba(0,0,0,0.0)
    background: rgba(0,0,0,0.0);
    box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.0)

  2)딜러/힐러/탱 선택 하는 박스 설정

 /*   우측 작은 박스 위치 조절*/
.viewModes {
 /*   display: none; */
 /*   list-style-type: none; */
    padding: 0;
    margin: 0;
    position: absolute;
    top: 26px;
    right: 15px;
}

li {
    background-color: rgba(0, 0, 0,0);
    display: inline-block;
    width: 16px;                     박스사이즈
    height: 16px;                    박스사이즈
    margin: 0 2.5px;
}
/* 마우스가 올라간 상태  */
li:hover {
    border: 1px solid #ccc;        1px 마우스 동작시 반응 하는 크기


 
3)bar 안에 들어 가는 표시들 색상및 위치 조절

bar 색상 수정 (나만의 색상을 가지자!  클릭 하고 붙여 넣기만 하면됨)
색상표 참조 http://encycolorpedia.kr/633b00  

bar 안에 수치들은 개별 색상을 지원 하고 위치 및 크기 조절 가능

  3)bar 안에들어가는 표시 설정
.icon 
.name
.name1 
.job 
.damage 
.damage1 
.dps 
.crit,
.miss,
.oheal,
.crit 
.block
.miss1 
.miss 
.oheal 
.deaths 
.healed1

등으로 구성 되어 있음 (필요에 따라서 추가해서 설정도 할수 있음)

이제 미터기에 dps 위치를 옴겨 보겠습니다  
html 열어서 dps가 css파일 무엇으로 연결 되어 있는지 보시면 됩니다 
encdps 은 미터기 화면에 나타나는 dps 입니다 뒤에 dps는 css 에 .dps 로 적용 됩니다

예) 참고 사진
css 폴더에 Torgan.MiniParse.icon 를 엽니다  .dps 항목을 찾기

기본 적용상태 
 

이제 dps 위치를 바꿔 보겠습니다   right: 5px;    이 항목에서  right: 200px;   5에서 200으로 수정한 상태


원하시는 상하좌우및 크기 색상 설정 하시고 저장 하시고 적용 시키시면 끝


4)직업 색상 설정

예).rog div.bar, .nin div.bar {   
    background: linear-gradient(to top, rgba(80, 0, 0, 1), rgba(223, 31, 31, 1.0)); 


기본 소스 색상 입니다 이제 수정 해보겠습니다
css 폴더에서 적용중인 Torgan.MiniParse.icon 파일을 편집기로 open 수정 하고 싶은 항목 찾기

아래 색상표 링크를 클릭 하셔서 원하시는 색을 선택 하시고 우측에 rgba( . . . .) 복사 하셔서 붙여 넣기 후 저장 하시면 끝
색상표 클릭  http://encycolorpedia.kr/633b00 

드래그 해서 복사  편집기에 수정할 항목을 붙여 넣기 하셔도 되고 적어 두셧다가 1번째 rgba(수치 넣으셔도 됩니다)

드래그 해서 복사  편집기에 수정할 항목을 붙여 넣기 하셔도 되고 적어 두셧다가 2번째 rgba(수치 넣으셔도 됩니다)

편집기에 저장 하시고 미터기 Roload overlay 클릭 하시면 결과는????

  색상이 원하는 색으로 ? 마음에 안들면 다시 위에 반복 하셔서 원하는 색상을 찾으시기 바랍니다
* 아래가 어둡고 위로 갈수록 밝은 설정 입니다 반대로 rgba 1 번과 2번을 바꾸시면 위에가 어둡게
  아래는 밝게 됩니다


tip) 편집기로 수정후 ACT미터기 설정 화면에서 Reload overlay 누르시면 바로 저장한게 적용 됩니다


쓰다 보니 정리가 생각처럼 안되네요
나름 주석을 넣었으니 직접 열어서 보심 더 쉬울수도 있습니다


몆가지 더 수정해서 올리고 싶었으나 4월이후 더 이상 수정을 하지 않아서 이상태로 올립니다
    
누군가 수정 해주셧으면 하는 내용 ^^ 

1)랜덤 텍스트
클릭 할때 마다 나 떨고 있니/ 넌 뭐하니 / 등 항목을 10가지 이상의 글자들이 html 수정없이 랜덤으로 나오는 것
2)랜덤 이미지
클릭 할때 마다 케릭터 아이콘이 10가지 이상에서 랜덤으로 나오는 것

두가지 항목은 천천히 할 생각이긴 하지만 언제 할지는 .... 소스 올려 주셔도 감사 합니다 수정해서 올려 주셔도 됩니다

허접한 야우의 긴글 보시느라 고생 많이 하셧습니다.



-end
(요청)      작은 화면에서 RDPS TIME 겹치는 부분을 1cm 작게해도 안겹치게 수정
5월15일 Torgan.MiniParse_icon_gif           움직이는 파일 추가 하였습니다 (skin.zip)
5월17일 Torgan.MiniParse_icon_gif_2        움직이는 파일 2개 적용 가능한 버전 추가 (딜러용만 적용 했음)
         평상시에는 시계가 보이다가 마우스를 올리면 시계가 사라지고 3개의 아이콘이 나오게 수정

         마우스가 미터기 밖으로 나가면 Time 및 Total 이 보입니다

Torgan.MiniParse 파일에 있던 기능 입니다 (2개이상 그림 파일로 적용이 공간이 나오지 않아서 원본 소스로 수정)                                        
gif_2 수정 영상 입니다 


결국 실력은 없지만 간단 하게 영상까지 만들어 올려 봅니다 
도움이 되길 바랍니다



* ACT_플러그인_설정 영상 _관리자 권한으로 실행 하셔야 합니다 (플러그인 첨부시 거부에러 발생 합니다)

* ACT_설치후 방화벽 설정 영상  (항목에 없을시는 ..... 하단에 추가 하셔서 개인 , 공용 체크 하시면 됩니다)

*ACT_TP모니터 설정 영상

*ACT_다운 받아서 설치 및 기본 세팅 까지 하는 영상 입니다


ACT플러그인 입니다

스펠타이머 및 파티원 HP MP TP  % 이하 일시 음성 지원

음성은 원하는 글 넣으시면 됩니다 

기본 플러그인에 들어 있는 음성

API KEY 입력후 추가로 생성 되는 음성 6개 

음성 제어 할수 있는 바 3개 

아쉽게 한글 지원은 되지 않습니다

일본어  / 숫자 

영어  지원 됩니다 

간단 하게 제작한 영상 입니다

음성 볼륨을 on 하시고 보세요


TTS 를 이용한 감정 표현 


음성 글자 그림 까지 가능 합니다


https://github.com/anoyetta/ACT.TTSYukkuri/releases/tag/v1.10.2  간단한 설치 및 설명은 블러그에 일단 먼저 올렷어요 인벤에는 정리 해서 올리도록 하겠습니다

스텔타이머에 사용할 아이콘 추가 
다크나이트 / 점성술사 /기공사  + 기존 직업 lv 60까지 아이콘 포함 입니다

* 윈도 7 용tts 설치 파일을 구햇는데 테스트를 할수가 없네요  - -





모바일 게시판 하단버튼

댓글

새로고침
새로고침

모바일 게시판 하단버튼

지금 뜨는 인벤

더보기+

모바일 게시판 리스트

모바일 게시판 하단버튼

글쓰기

모바일 게시판 페이징

최근 HOT한 콘텐츠

  • 파판14
  • 게임
  • IT
  • 유머
  • 연예
AD