Taking and Sharing Screenshots

# Course Introduction

Let's look at how to capture a screen and save an image file using `ScreenshotService`. In addition, we'll learn how to save and share screenshots on mobile.

##### API Reference

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

# ScreenshotService

You can use `ScreenshotService` to take and save screenshots of MapleStory Worlds on PC or mobile. You can also share screenshots by integrating with `MobileShareService`. The functions provided by `ScreenshotService` are classified as follows according to their intended use.

[{"Function":"CaptureFullScreenToPhotoLibraryAndWait()CaptureScreenRegionToPhotoLibraryAndWait()","Intended use":"Save screenshots to your photo library","Save path":"Windows: My PC > Pictures > MapleStory Worlds > World ID > fileName.png macOS: Home > Pictures > MapleStory Worlds > World ID > fileName.png Android: Gallery - Maplestory Worlds AlbumiOS: Pictures"},{"Function":"CaptureFullScreenAsFileAndWait()CaptureScreenRegionAsFileAndWait()","Intended use":"Saving screenshots for mobile sharing(used in integration with MobileShareService)","Save path":"Windows: My PC > Pictures > MapleStory Worlds > World ID > fileName.png macOS: Home > Pictures > MapleStory Worlds > World ID > fileName.png Android: Built-in memory > Android > data > com.nexon.mod > files > MapleStory Worlds > Screenshots > World ID > fileName_*.png iOS: My file > My iPhone > MapleStory Worlds > Screenshots > World ID > fileName_ *.png"}]

Let's use the function by referring to the intended use and save path of each function.

# Screenshot Capture

## Full Screen Capture

Press the button to capture the full screen.   


  1. Create a new FullScreenBtn button by pressing the  button in the UI Editor.   

  2. Add TextComponent to FullScreenBtn and set the properties as below. 

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

  

  3. In the context menu of Workspace - MyDesk, click Create Scripts - Create Logic to create new logic. Change the name to ScreenshotServiceTest.   

  4. Open ScreenshotServiceTest in Script Editor and add `ButtonClickEvent` in Event Handler. Set the event sender to Entity as shown below. [png](1681187758910df0cdbd4dc784785850f16fb584abbdf)   
After that, enter the content as below. 
         
         @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. If you press  **[ Start]** followed by the **Full Screen Capture** button, the full screen screenshot is captured, and you can see the image saved path in the log.
    [png](1681191751073ddae20ad59954d928e4210f758bec775)
      
    
    By checking the saved FullScreen.png, you can see that the full screen has been captured as below.
    [png](16811917796840a7e9d430cf34b7d86aafb09c99c3a8b)
    
    ## Partial Screen Capture
    Press the button to capture the partial screen.
      
    
    1. Click **Duplicate** in the context menu of the **FullScreenBtn** button to copy the button and move it to an appropriate location.
      
    
    2. Rename the copied button **PartialScreenBtn**. Enter **Partial Screen Capture** to **Text**. 
        [png](16811921606221a01221441844aae815f4af11770bd37)
          
    
    3. Open **ScreenshotServiceTest** in Script Editor and add `ButtonClickEvent` in Event Handler.
        Set the event sender to **Entity** as shown below.
        [png](168119229553433590599d6bb42e1948da148bef1a832)
          
    
        After that, write the content as below.
        ```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. If you press  [Start] followed by the Partial Screen Capture button, the partial screen is captured, and you can see the image saved path in the log. [png](16811926961341471a8a6920248e39480c0ee8bc6852f)   
By checking the saved PartialScreen.png, you can see that the partial screen has been captured as below. [png](1681192771299639cd1d5758642508dce913d1b6afa73)



> Note For partial screen capture, the location of screen capturing can differ depending on the user's screen resolution. Users should be aware of this when using the partial screen capture feature.

# Share Screenshots from Mobile

Let's see how to share a screenshot from mobile. Sharing is not possible from a PC.   


  1. Click Duplicate in the context menu of the FullScreenBtn button to copy the button and move it to an appropriate location.   

  2. Rename the copied button ShareBtn. Enter Share in Text. [png](168119541043350d44d07d02c4bb98d2de0b5da0f7266)   

  3. Open ScreenshotServiceTest from the script editor and search for the event linked to FullScreenBtn. Change ‘CaptureFullScreenToPhotoLibraryAndWait()’ to ‘CaptureFullScreenAsFileAndWait()’. 
         
         @Component
         script ButtonScreenshotCapturer extends Component
         @EventSender("Self")
         handler HandleButtonClickEvent(ButtonClickEvent event)
         --------------- Native Event Sender Info ----------------
         -- Sender: ButtonComponent
         -- Space: Client
         ---------------------------------------------------------
         -- Parameters
         local Entity = event.Entity
         ---------------------------------------------------------
         -- Modified the following function to CaptureFullScreenAsFileAndWait() to save screenshot for mobile sharing.
         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. Add `ButtonClickEvent` to the event handler.
        Set the event sender to **Entity** as shown below.
        [png](168119303326810820bf91ef54332aa0488d261883a41)
          
    
        After that, write the content as below.
        ```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. After pressing  [Start], press the Full Screen Capture button to save the screenshot. Then press the Share button to share the screenshot.



# Caution

You can only save a screenshot file once per second.