스크린샷 촬영 및 공유하기

# 학습 과정 소개

`ScreenshotService`를 통해 화면을 캡처하고 이미지 파일을 저장하는 방법을 살펴봅시다. 추가로 모바일에서 스크린샷을 저장한 뒤 공유하는 방법도 알아봅시다.

##### 참고 API Reference

[ScreenshotService](/apiReference?postId=807) [MobileShareService](/apiReference/Services/MobileShareService)

# ScreenshotService

`ScreenshotService`를 활용하면 PC나 모바일에서 메이플스토리 월드 스크린샷을 촬영, 저장할 수 있습니다. 또한 `MobileShareService`와 연동하여 스크린샷을 공유할 수 있습니다. `ScreenshotService`에서 제공하는 함수는 용도에 따라 아래와 같이 구분됩니다.

[{"함수":"CaptureFullScreenToPhotoLibraryAndWait()CaptureScreenRegionToPhotoLibraryAndWait()","용도":"사진 보관함에 스크린샷 저장","저장 경로":"Windows: 내 PC > 사진 > MapleStory Worlds > 월드 ID > fileName.png macOS: 홈 > 사진 > MapleStory Worlds > 월드 ID > fileName.png Android: 갤러리 - Maplestory Worlds 앨범iOS: 사진"},{"함수":"CaptureFullScreenAsFileAndWait()CaptureScreenRegionAsFileAndWait()","용도":"모바일 공유용 스크린샷 저장(MobileShareService와 연동하여 사용)","저장 경로":"Windows: 내 PC > 사진 > MapleStory Worlds > 월드 ID > fileName.png macOS: 홈 > 사진 > MapleStory Worlds > 월드 ID > fileName.png Android: 내장 메모리 > Android > data > com.nexon.mod > files > MapleStory Worlds > Screenshots > 월드 ID > fileName_*.png iOS: 내 파일 > 나의 iPhone > MapleStory Worlds > Screenshots > 월드 ID > fileName_ *.png"}]

각 함수의 용도 및 저장 경로를 참고하여 함수를 활용해 봅시다.

# 스크린샷 촬영하기

## 전체 화면 촬영

버튼을 눌러 전체 화면 스크린샷을 촬영해 봅시다.   


  1. UI 에디터에서  버튼을 눌러 새 버튼 FullScreenBtn을 만듭니다.   

  2. FullScreenBtn에 TextComponent를 추가하고 프로퍼티를 아래와 같이 설정합니다. 

[{"Property":"Text","Value":"Full Screen Capture"},{"Property":"FontColor","Value":"#ffffff"}]

  

  3. Workspace - MyDesk의 콘텍스트 메뉴에서 Create Scripts - Create Logic을 클릭해 새로운 로직을 생성합니다. 이름은 ScreenshotServiceTest로 변경합니다.   

  4. 스크립트 에디터에서 ScreenshotServiceTest를 열고 이벤트 핸들러에 `ButtonClickEvent`를 추가합니다. 이벤트 센더를 아래와 같이 Entity로 설정합니다. [png](1681187758910df0cdbd4dc784785850f16fb584abbdf)   
이후 아래와 같이 내용을 작성합니다. 
         
         @Component
         script FullScreenCapture extends Component
         @EventSender("Self")
         handler HandleButtonClickEvent(ButtonClickEvent event)
         --------------- Native Event Sender Info ----------------
         -- Sender: ButtonComponent
         -- Space: Client
         ---------------------------------------------------------
         -- Parameters
         local Entity = event.Entity
         ---------------------------------------------------------
         local error, path = _ScreenshotService:CaptureFullScreenToPhotoLibraryAndWait("FullScreen", true)
         log(error, path)
         
         if error == ScreenshotError.Success then
             self._T.lastPath = path	
         else
             _UIToast:ShowMessage("Failed to save! "..tostring(error)..", Path: "..path)
         end
         end
         end
         



    
    
          
    
    5.  시작을 누른 뒤 **Full Screen Capture** 버튼을 누르면 전체 화면 스크린샷이 찍히고 이미지가 저장된 경로를 로그에서 확인할 수 있습니다.
    [png](1681191751073ddae20ad59954d928e4210f758bec775)
      
    
    저장된 FullScreen.png를 확인하면 아래와 같이 전체 화면이 찍힌 것을 확인할 수 있습니다.
    [png](16811917796840a7e9d430cf34b7d86aafb09c99c3a8b)
    
    ## 일부 화면 촬영
    버튼을 눌러 일부 화면 스크린샷을 촬영해 봅시다.
      
    
    1. **FullScreenBtn** 버튼의 콘텍스트 메뉴에서 **Duplicate**를 클릭해 버튼을 복제한 뒤 적당한 위치로 옮깁니다.
      
    
    2. 복제한 버튼의 이름을 **PartialScreenBtn**으로 변경합니다. **Text**에는 **Partial Screen Capture**를 입력합니다. 
        [png](16811921606221a01221441844aae815f4af11770bd37)
          
    
    3. 스크립트 에디터에서 **ScreenshotServiceTest**를 열고 이벤트 핸들러에 `ButtonClickEvent`를 추가합니다.
        이벤트 센더를 아래와 같이 **Entity**로 설정합니다.
        [png](168119229553433590599d6bb42e1948da148bef1a832)
          
    
        이후 아래와 같이 내용을 작성합니다.
        ```lua
    @Component
    script ScreenRegionCapturer extends Component
        @EventSender("Self")
        handler HandleButtonClickEvent(ButtonClickEvent event)
        --------------- Native Event Sender Info ----------------
        -- Sender: ButtonComponent
        -- Space: Client
        ---------------------------------------------------------
        -- Parameters
        local Entity = event.Entity
        ---------------------------------------------------------
        local startPixel = Vector2(600,0)
        local endPixel = Vector2(1100,700)
    
        local error, path = _ScreenshotService:CaptureScreenRegionToPhotoLibraryAndWait("PartialScreen", startPixel, endPixel)
        log(error, path)
    
        if error == ScreenshotError.Success then
        	self._T.lastPath = path	
        else
        	_UIToast:ShowMessage("Failed to save! "..tostring(error)..", Path: "..path)
        end
        end
    end
    
    
    
      
    
    

  4.  시작을 누른 뒤 Partial Screen Capture 버튼을 누르면 일부 화면 스크린샷이 찍히고 이미지가 저장된 경로를 로그에서 확인할 수 있습니다. [png](16811926961341471a8a6920248e39480c0ee8bc6852f)   
저장된 PartialScreen.png를 확인하면 아래와 같이 일부 화면이 찍힌 것을 확인할 수 있습니다. [png](1681192771299639cd1d5758642508dce913d1b6afa73)



> 더 알아보기 일부 화면 촬영 시에는 유저의 스크린 해상도에 따라 촬영되는 화면의 위치가 달라질 수 있습니다. 이 점에 유의하여 일부 화면 촬영 기능을 사용해야 합니다.

# 모바일에서 스크린샷 공유하기

모바일에서 스크린샷 공유하는 방법을 살펴봅시다. 단, PC에서는 공유할 수 없습니다.   


  1. FullScreenBtn 버튼의 콘텍스트 메뉴에서 Duplicate를 클릭해 버튼을 복제한 뒤 적당한 위치로 옮깁니다.   

  2. 복제한 버튼의 이름을 ShareBtn으로 변경합니다. Text에는 Share를 입력합니다. [png](168119541043350d44d07d02c4bb98d2de0b5da0f7266)   

  3. 스크립트 에디터에서 ScreenshotServiceTest를 열고 FullScreenBtn에 연결한 이벤트를 찾습니다. `CaptureFullScreenToPhotoLibraryAndWait()`을 `CaptureFullScreenAsFileAndWait()`로 수정합니다. 
         
         @Component
         script ScreenshotButtonHandler extends Component
         @EventSender("Self")
         handler HandleButtonClickEvent(ButtonClickEvent event)
         --------------- Native Event Sender Info ----------------
         -- Sender: ButtonComponent
         -- Space: Client
         ---------------------------------------------------------
         -- Parameters
         local Entity = event.Entity
         ---------------------------------------------------------
         -- 모바일 공유용 스크린샷을 저장하기 위해 아래 함수를 CaptureFullScreenAsFileAndWait()로 수정함.
         local error, path = _ScreenshotService:CaptureFullScreenAsFileAndWait("FullScreen", true)
         log(error, path)
         
         if error == ScreenshotError.Success then
             self._T.lastPath = path	
         else
             _UIToast:ShowMessage("Failed to save! "..tostring(error)..", Path: "..path)
         end
         end
         end
         



    
    
          
    
    4. 이벤트 핸들러에 `ButtonClickEvent`를 추가합니다.
        이벤트 센더를 아래와 같이 **Entity**로 설정합니다.
        [png](168119303326810820bf91ef54332aa0488d261883a41)
          
    
        이후 아래와 같이 내용을 작성합니다.
        ```lua
    @Component
    script MobileShareHandler extends Component
        @EventSender("Self")
        handler HandleButtonClickEvent(ButtonClickEvent event)
        --------------- Native Event Sender Info ----------------
        -- Sender: ButtonComponent
        -- Space: Client
        ---------------------------------------------------------
        -- Parameters
        local Entity = event.Entity
        ---------------------------------------------------------
        local path = self._T.lastPath
        if path ~= "" then
        	local success = _MobileShareService:ShareFileAndWait(path)
        	log("Share : "..tostring(success))
        end
        end
    end
    
    
    
      
    
    

  5.  시작을 누른 뒤 Full Screen Capture 버튼을 눌러 스크린샷을 저장합니다. 이후 Share 버튼을 누르면 스크린샷을 공유할 수 있습니다.



# 주의사항

스크린샷 파일 저장은 1초에 1번만 가능합니다.