[RPG MV 전용] 이 플러그인은 게임의 해상도가 고정인 프로젝트를 위한 플러그인입니다, 레터박스를 꾸밀 수 있습니다.

BGModifier.js

/*:
 *
 * @plugindesc body 태그의 스타일을 통해 배경 이미지를 지정합니다.
 * @author Creta Park (http://creffect.com/?me=cretapark)
 * 
 * @param 기본 경로
 * @desc 사진을 선택할 기본 최상위 경로
 * @default img/pictures
 * 
 * @param 기본 파일 확장
 * @desc 사진을 선택할 때 기본 파일의 확장명 (없으면 Set 안의 확장명을 사용함.)
 * @default png
 * 
 * @param 최초 배경 사진 대상
 * @desc 게임을 시작할 때부터 지정할 배경 이미지를 지정합니다. (없으면 검은색)
 * @default 
 * 
 * @param 전환 스타일
 * @desc 배경이 전환하는 방식을 지정합니다. (easings.net을 참고하세요.)
 * @default 0.5s linear
 * 
 * @help
 * BackgroundModifier (BGModifier) 플러그인
 * ----------------------------------------------------------------------------
 * 이 플러그인은 게임의 해상도가 고정인 프로젝트를 위한 플러그인입니다.
 * 이걸 활용해서 게임의 해상도와 맞지 않은 상황에서 나타나는 레터박스를 꾸밀 수 있습니다.
 * 소스코드는 어떠한 경우에도 거의 자유인 MIT라이센스를 붙입니다.
 * 반복 패턴 스타일을 좋아하지 않는다면, 아래의 소스코드를 수정해서 표시 방식을 바꿀 수도 있습니다.
 * 
 * License : MIT
 * 
 * 사용법
 * ----------------------------------------------------------------------------
 * 전형적인 방식은, 이벤트 -> 스크립트를 추가하고, 한 줄 코드를 쓰는 방식으로 활용합니다.
 * 
 * BGModifier.Set(파일 이름 : string) : void   //BGModifier.Set("우주");       //"{기본 경로}/우주.{기본 파일 확장}"을 배경으로 지정
 * 배경을 transition을 통해 바꿉니다.
 * 기본 파일 확장을 지정하지 않았다면, 확장명도 같이 쓰세요.
 * 
 * BGModifier.Unset() : void                  //BGModifier.Unset();           //배경이 사라짐
 * 배경을 지웁니다.
 * 
 * BGModifier.SetRaw(값 : string) : void      //BGModifier.SetRaw("#0099ff"); //배경이 파란색(#0099ff)으로 바뀜
 * 스타일시트에 직접적인 값을 지정합니다.
 * HTML 표준을 준수하는 값은 모두 사용 가능합니다.
 * 이것을 이용해, 기본 경로 외의 리소스를 가져와 표시할 수도 있습니다.
 * //BGModifier.SetRaw("actor/~.png"); 등
 */

//전역 개체
var BGModifier = {};

//초기화 메서드
(function() {
    
    //body 스타일 지정
    var bodyStyle = document.body.style;
    
    bodyStyle.backgroundPosition = "center";
    bodyStyle.backgroundRepeat   = "repeat";
    bodyStyle.backgroundColor    = "black";
    bodyStyle.backgroundSize     = "20vh 20vh";
    bodyStyle.margin             = "0";
    bodyStyle.overflow           = "hidden";
    
    //플러그인 관리자에서 지정한 값을 가져옴
    BGModifier.path              = PluginManager.parameters('BGModifier')["기본 경로"];
    BGModifier.extension         = PluginManager.parameters('BGModifier')["기본 파일 확장"];
    BGModifier.transition        = "opacity " + PluginManager.parameters('BGModifier')["전환 스타일"];
    
    //후처리 투명 전환을 위한 컨테이너
    BGModifier.Before = document.createElement('div');
    BGModifier.Before.style.position           = "absolute";
    BGModifier.Before.style.width              = "100vw";
    BGModifier.Before.style.height             = "100vh";
    
    //이미지 표시 방식은 부모 컨테이너인 body의 스타일을 그대로 상속받음
    BGModifier.Before.style.backgroundPosition = "inherit";
    BGModifier.Before.style.backgroundRepeat   = "inherit";
    BGModifier.Before.style.backgroundSize     = "inherit";
    BGModifier.Before.style.transition         = BGModifier.transition;
    BGModifier.Before.style.opacity            = "0";
    
    document.body.appendChild(BGModifier.Before);
    
    //타임아웃 토큰은, setTimeout을 무효화하기 위해서 사용함.
    BGModifier.timeoutToken    = -1;
  
    //transition의 시간과 동일하게 setTimeout을 처리하기 위해 값을 구함
    BGModifier.timeoutDuration = BGModifier.Before.style.transitionDuration;
    
    if (BGModifier.timeoutDuration.indexOf('ms') != -1) {
        BGModifier.timeoutDuration = parseInt(BGModifier.timeoutDuration.replace('ms', ''));   // :)
        
        if (isNaN(BGModifier.timeoutDuration))
            BGModifier.timeoutDuration = 0;
        
    } else if (BGModifier.timeoutDuration.indexOf('s') != -1) {
        
        BGModifier.timeoutDuration = parseFloat(BGModifier.timeoutDuration.replace('s', ''));  // :D
        
        if (isNaN(BGModifier.timeoutDuration))
            BGModifier.timeoutDuration = 0;
        else
            BGModifier.timeoutDuration *= 1000;
        
    } else {
        BGModifier.timeoutDuration = parseInt(BGModifier.timeoutDuration);
        
        if (isNaN(BGModifier.timeoutDuration))
            BGModifier.timeoutDuration = 0;
    }
    
    //BGModifier.Unset() : void
    //레터박스를 점전적으로 검은색으로 전환합니다.
    BGModifier.Unset = function() {
        if (BGModifier.Source == "black") return;
        
        BGModifier.Before.style.transition = "";
        BGModifier.Before.style.opacity    = "0";
        
        setTimeout(BGModifier.PrepareTransition, 1, "black");
    }
    
    //BGModifier.Set(파일이름 : string) : void
    //레터박스에 점전적으로 이미지를 표시합니다.
    BGModifier.Set = function(image) {
        if (image === undefined || image == null) return;
        var extension = (BGModifier.extension != "" ? 
                         ("." + BGModifier.extension) : "");
        
        var target = "url('" + BGModifier.path + "/" + image + extension + "')";
        if (target == BGModifier.Source) return;
        
        BGModifier.Before.style.transition = "";
        BGModifier.Before.style.opacity    = "0";
        
        setTimeout(BGModifier.PrepareTransition, 1, target);
    };
    
    //BGModifier.SetRaw(값 : string) : void
    //스타일시트에 직접적으로 적용합니다.
    //표시는 점전적으로 바뀝니다.
    BGModifier.SetRaw = function(target) {
        if (target === undefined || target == null || target == BGModifier.Source) return;
        
        BGModifier.Before.style.transition = "";
        BGModifier.Before.style.opacity    = "0";
        
        setTimeout(BGModifier.PrepareTransition, 1, target);
    };
    
    //BGModifier.PrepareTransition(리소스 : string) : void
    //트랜지션을 준비합니다. (내부 전용)
    BGModifier.PrepareTransition = function(target) {
        if (BGModifier.timeoutToken != -1) {
            clearTimeout(BGModifier.timeoutToken);
            
            document.body.style.background = BGModifier.Source;
        }
        
        BGModifier.Source = target;
        BGModifier.Before.style.background = BGModifier.Source;
        BGModifier.Before.style.transition = BGModifier.transition;
        BGModifier.Before.style.opacity    = "1";
        
        BGModifier.timeoutToken = setTimeout(BGModifier.SetForce, BGModifier.timeoutDuration, BGModifier.Source);
    };
    
    //BGModifier.SetForce(값 : string) : void
    //트랜지션을 강제로 끝냅니다.
    //현재 상태의 배경을 사용하려면 BGModifier.SetForce(BGModifier.Source); 를 사용하세요.
    BGModifier.SetForce = function(target) {
        if (BGModifier.timeoutToken != -1)
            clearTimeout(BGModifier.timeoutToken);
        
        document.body.style.background     = target;
        
        BGModifier.Before.style.transition = "";
        BGModifier.Before.style.opacity    = "0";
        BGModifier.Before.style.background = "";
        
        BGModifier.timeoutToken = -1;
    };
    
    //게임을 처음 실행했을 때 표시될 레터박스 준비
    setTimeout(function() {
        BGModifier.Source = PluginManager.parameters('BGModifier')["최초 배경 사진 대상"];
        if (BGModifier.Source != "")
            BGModifier.Set(BGModifier.Source);
    }, 100);
    
})();

/**
* 이 소스코드에 손을 갖다 대려는 용감한 자를 위해 : 당신은 선택받은 자 입니다.
* 우리는 가장 지저분하고 복잡한 코드를 고치고, 쉬지 않으며 맞서싸운 기사단입니다.
* 하지만 우리의 힘으로는 어떻게 할 수가 없었습니다. 당신만이 유일한 희망입니다.
* 당신이라면 해낼 수 있습니다. 절대 포기하지 말고, 스파게티 몬스터에 대항할 힘을
* 나눠 주십시오. 우리는 믿고 있습니다. 선택받은 당신이라면 해낼 수 있으리라...
*/

2019-01-10 수정

• 플러그인 파라미터에 잘못된 값이 들어가있는 문제 수정
• HTML에 스크롤이 생기지 않도록 스타일 기본값에 overflow: hidden을 기본값으로 추가

2018-10-19 추가 : 활용 예시 gif

2018-10-18 추가 : 활용 예시 gif