스프라이트 색상을 픽셀 단위로 설정하기

# 학습 과정 소개

PixelRendererComponent를 활용하면 크리에이터가 비어있는 스프라이트에 픽셀 단위로 원하는 색을 지정할 수 있습니다. 특정 위치의 픽셀 색상만 바꾸거나 전체 스프라이트 색상을 지정할 수도 있고, 랜덤한 색상으로 변경할 수도 있습니다. 먼저 PixelRendererComponent의 프로퍼티를 살펴보고 예제를 통해 활용법을 알아봅시다.

##### 참고 API Reference



# PixelRendererComponent

PixelRendererComponent의 프로퍼티를 살펴봅시다. [png](169033280248125b25ac7adff41e0a1e7b6d3a06778a6)

[{"이름":"Width","타입":"int","주요 기능":"스프라이트의 가로 길이입니다."},{"이름":"Height","타입":"int","주요 기능":"스프라이트의 세로 길이입니다."},{"이름":"OrderInLayer","타입":"int","주요 기능":"같은 Layer 내의 우선순위를 결정합니다. 수가 클수록 앞에 보입니다."},{"이름":"SortingLayer","타입":"string","주요 기능":"2개 이상의 Entity가 겹쳤을 때 Sorting Layer에 따라 보이는 우선순위가 결정됩니다."},{"이름":"IgnoreMapLayerCheck","타입":"boolean","주요 기능":"SortingLayer에 Map Layer 이름을 지정했을 때 자동 치환을 수행하지 않습니다."}]

# 픽셀 단위로 색상 변경하기

예제를 통해 PixelRendererComponent의 활용법을 알아봅시다.

## 픽셀 색상 변경

`SetPixel` 함수를 활용해 스프라이트에서 원하는 위치의 픽셀 색상을 변경할 수 있습니다. 버튼을 누르면 스프라이트의 랜덤한 위치에 랜덤한 색상의 픽셀이 표시되도록 해봅시다. [gif](165336981276805b48f5770644fda8af385755872a17d)

  1. Hierarchy - map01 - Create Entity - Create Empty를 눌러 새로운 SetPixelTest를 생성합니다.   

  2. SetPixelTest 엔티티에 TransformComponent를 추가하고 Scale 프로퍼티에 X = 10, Y = 10을 입력합니다. 그리고 PixelRendererComponent도 추가합니다. [png](16903328503829c4718ba1607411297b9379c8f304622)   

  3. 새 스크립트 컴포넌트 PixelRendererTest를 생성합니다.   

  4. 아까 생성한 SetPixelTest 엔티티의 Property에 PixelRendererTest 컴포넌트를 추가합니다.   

  5. Workspace - MyDesk - PixelRendererTest를 열고 아래와 같이 Property를 추가합니다. 
         
         @Component
         script LastStateHolder extends Component
         property Color color = Color(0,0,0,0)
         property Color lastColor = Color(0,0,0,0)
         property number lastX = 0
         property number lastY = 0
         end
         



    
    
          
    
    6.  UI 에디터에서  을 눌러 새로운 **SetPixel** 버튼을 만듭니다.
          
    
    7.  **SetPixel** 버튼의 **Property**에 **TextComponent**를 추가하고 프로퍼티를 수정합니다.
        | 컴포넌트 | 프로퍼티 | 값 |
        | :---: | :---: | :---: |
        | TextComponent | Text | SetPixel |
          
    
    8.  새 스크립트 컴포넌트 **ButtonClick_SetPixel**을 생성합니다.
          
    
    9.  **ButtonClick_SetPixel** 스크립트에 아래와 같이 **Property**를 추가합니다.
        ```lua
    @Component
    script SetPixelTestReference extends Component
        property Entity PR = "/maps/map01/SetPixelTest"
    end
    
    
    
      
    
    

  10. PixelRendererTest 스크립트를 열고 `SetRandomPixel` 함수를 작성합니다. 
         
         @Component
         script RandomPixelSetter extends Component
         @ExecSpace("ClientOnly")
         method void SetRandomPixel()
         local pixelRendererComponent = self.Entity.PixelRendererComponent
         
         local x = _UtilLogic:RandomIntegerRange(1, pixelRendererComponent.Width)
         local y = _UtilLogic:RandomIntegerRange(1, pixelRendererComponent.Height)
         
         local r = _UtilLogic:RandomDouble()
         local g = _UtilLogic:RandomDouble()
         local b = _UtilLogic:RandomDouble()
         local a = _UtilLogic:RandomDouble()
         
         -- SetPixel을 사용하여 픽셀 값을 변경합니다.
         pixelRendererComponent:SetPixel(x, y, Color(r,g,b,a))
         
         self.lastColor = Color(r,g,b,a)
         self.lastX = x
         self.lastY = y
         
         log("X : "..tostring(x)..", Y : "..tostring(y)..",Color = "..tostring(Color(r,g,b,a)))
         end
         end
         



    
    
          
    
    11. **ButtonClick_SetPixel** 스크립트에 **ButtonClickEvent**도 추가합니다.
        ```lua
    @Component
    script ButtonClickEventHandler extends Component
        @EventSender("Self")
        handler HandleButtonClickEvent(ButtonClickEvent event)
    
        end
    end
    
    
    
      
    
    

  12. UI - DefaultGroup - SetPixel 버튼의 Property에 ButtonClick_SetPixel 컴포넌트를 추가합니다.   

  13.  시작을 눌러 테스트를 진행합니다. SetPixel 버튼을 누르면 픽셀이 스프라이트에 무작위로 나타나고 로그가 나오는지 확인합니다.



## 여러 픽셀 색상 변경

`SetPixels` 함수를 활용해 스프라이트 픽셀들의 색상을 변경할 수 있습니다. 버튼을 누르면 스프라이트에 픽셀 단위로 랜덤한 색상이 표시되도록 해봅시다. [gif](16534560711537b9397a8eb804578b2045aa1d5517c9a)

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

  2. SetPixels 버튼의 Property에 TextComponent를 추가하고 Text에 SetPixels를 입력합니다.   

  3. 새로 스크립트 컴포넌트 ButtonClick_SetPixels를 생성합니다.   

  4. ButtonClick_SetPixels 스크립트에 아래와 같이 Property를 추가합니다. 
         
         @Component
         script SetPixelTestReference extends Component
         property Entity PR = "/maps/map01/SetPixelTest"
         end
         



    
    
          
    
    5. **PixelRendererTest** 스크립트를 열고 `SetPixelsTest` 함수를 작성해야 합니다.
    그전에 먼저 **PixelRendererTest**의 기존 **Property**에 `[None] SyncTable colors`를 추가합니다.
        ```lua
    @Component
    script ColorMovementTracker extends Component
        property Color color = Color(0,0,0,0)
        property Color lastColor = Color(0,0,0,0)
        property number lastX = 0
        property number lastY = 0
    end
    
    
    
    위와 같이 설정한 후 `SetPixelsTest` 함수를 작성합니다.
    ```lua
    

@Component script PixelColorRandomizer extends Component @ExecSpace("ClientOnly") method void SetPixelsTest() local width = self.Entity.PixelRendererComponent.Width local height = self.Entity.PixelRendererComponent.Height
    
    
    local colors = {}
    
    for i=1, width * height do
        local r = _UtilLogic:RandomDouble()
        local g = _UtilLogic:RandomDouble()
        local b = _UtilLogic:RandomDouble()
    
        colors[i] = Color(r,g,b,1) 
    end
    
    -- SetPixels를 사용하여 스프라이트 픽셀들의 색상을 변경합니다.
    self.Entity.PixelRendererComponent:SetPixels(colors)
    end
    

end
    
    
          
    
    6. **ButtonClick_SetPixels** 스크립트에 **ButtonClickEvent**도 추가합니다.
        ```lua
    @Component
    script ButtonPixelTest extends Component
        @EventSender("Self")
        handler HandleButtonClickEvent(ButtonClickEvent event)
        -- Parameters
        local Entity = event.Entity
        --------------------------------------------------------
        -- 버튼을 클릭하면 SetPixelsTest 함수를 호출합니다.
        self.PR.PixelRendererTest:SetPixelsTest()
        end
    end
    
    
    
      
    
    

  7. UI - DefaultGroup - SetPixels 버튼의 Property에 ButtonClick_SetPixels 컴포넌트를 추가합니다.   

  8.  시작을 눌러 테스트를 진행합니다. SetPixels 버튼을 누르면 스프라이트에 픽셀 단위로 무작위 색상이 표시되는 것을 확인할 수 있습니다.



## 스프라이트 크기와 여러 픽셀 색상 변경

`ResetWithColors` 함수를 활용해 스프라이트의 크기와 픽셀들의 색상을 변경할 수 있습니다. [gif](1653456362928aa034bd72e7b4298ae6919d32fde6401) 예시 코드는 아래와 같습니다. 버튼을 만들고, 함수를 추가한 다음 버튼에 ButtonClickEvent를 연결하는 것은 위의 예제와 동일합니다.
    
    
    @Component
    script PixelRandomizer extends Component
        @ExecSpace("ClientOnly")
        method void ResetColorsTest()
        local newWidth = _UtilLogic:RandomIntegerRange(8, 32)
        local newHeight = _UtilLogic:RandomIntegerRange(8, 32)
    
        local colors = {}
    
        for i=1, newWidth * newHeight do
            local r = _UtilLogic:RandomDouble()
            local g = _UtilLogic:RandomDouble()
            local b = _UtilLogic:RandomDouble()
    
            colors[i] = Color(r,g,b,1) 
        end
    
        -- ResetWithColors를 사용하여 스프라이트의 크기와 픽셀들의 색상을 변경합니다.
        self.Entity.PixelRendererComponent:ResetWithColors(newWidth, newHeight, colors)
        end
    end
    

# 스프라이트 전체 변경하기

PixelRendererComponent를 활용하면 스프라이트 전체 색상을 변경할 수도 있습니다.

## 스프라이트를 단색으로 변경

`FillColor` 함수를 활용해 스프라이트 전체를 단색으로 변경할 수 있습니다. 지정한 색으로 변경할 수도 있고 아래와 같이 랜덤한 색으로 변경할 수도 있습니다. [gif](1653376631359d2f630081b4b4e74835f35ec5df965d1) 예시 코드는 아래와 같습니다. 버튼을 만들고, 함수를 추가한 다음 버튼에 ButtonClickEvent를 연결하는 것은 위의 예제와 동일합니다.
    
    
    @Component
    script ColorRandomizer extends Component
        @ExecSpace("ClientOnly")
        method void FillColorTest()
        local r = _UtilLogic:RandomDouble()
        local g = _UtilLogic:RandomDouble()
        local b = _UtilLogic:RandomDouble()
    
        -- FillColor를 사용하여 스프라이트 전체 색상을 변경합니다.
        self.Entity.PixelRendererComponent:FillColor(Color(r,g,b,1))
        end
    end
    

## 스프라이트 크기와 전체 색상 변경

`ResetWithColor` 함수를 활용하면 스프라이트의 크기와 전체 색상을 변경할 수 있습니다. [gif](1653378536538b82441c0538b4e2da706381061607fe5) 예시 코드는 아래와 같습니다. 버튼을 만들고, 함수를 추가한 다음 버튼에 ButtonClickEvent를 연결하는 것은 위의 예제와 동일합니다.
    
    
    @Component
    script RandomRendererProperties extends Component
        @ExecSpace("ClientOnly")
        method void ResetColorTest()
        local newWidth = _UtilLogic:RandomIntegerRange(8, 32)
        local newHeight = _UtilLogic:RandomIntegerRange(8, 32)
    
        local r = _UtilLogic:RandomDouble()
        local g = _UtilLogic:RandomDouble()
        local b = _UtilLogic:RandomDouble()
    
        -- ResetWithColor를 사용하여 스프라이트 크기와 전체 색상을 변경합니다.
        self.Entity.PixelRendererComponent:ResetWithColor(newWidth, newHeight, Color(r,g,b,1))
        end
    end
    

## 알파 값 변경

`SetAlpha` 함수를 활용하면 스프라이트 전체의 알파 값을 변경할 수 있습니다. [gif](165337928365796df7621cff04bc68247b9ffe1280269) 예시 코드는 아래와 같습니다. 버튼을 만들고, 함수를 추가한 다음 버튼에 ButtonClickEvent를 연결하는 것은 위의 예제와 동일합니다.
    
    
    @Component
    script RandomAlphaSetter extends Component
        @ExecSpace("ClientOnly")
        method void SetAlphaTest()
        local a = _UtilLogic:RandomDouble()
        -- SetAlpha를 사용하여 스프라이트 전체의 알파 값을 변경합니다.
        self.Entity.PixelRendererComponent:SetAlpha(a)
        end
    end
    

# 스프라이트 색상 받아오기

`GetPixel`, `GetPixels` 함수를 활용해 픽셀의 위치와 색상을 받아와 월드에 표시하는 방법을 알아봅시다.

## 픽셀 색상 받기

`GetPixel` 함수를 활용하면 제일 최근에 변경된 픽셀의 위치와 색상을 받아올 수 있습니다. [gif](165344235792573c3640770c64858902a84cf1af10904)

  1. Hierarchy - map01 - Create Entity - Create Empty를 눌러 새로운 CheckGetEntity를 생성합니다.   

  2. CheckGetEntity에 TransformComponent를 추가하고 Scale 값으로 X = 10, Y = 10을 입력합니다. 그리고 PixelRendererComponent도 추가합니다.   

  3. UI 에디터에서  을 눌러 새로운 GetPixel 버튼을 만듭니다.   

  4. GetPixel 버튼의 Property에 TextComponent를 추가하고 Text에 GetPixel을 입력합니다.   

  5. 새 스크립트 컴포넌트 ButtonClick_GetPixel을 생성합니다.   

  6. ButtonClick_GetPixel 스크립트에 아래와 같이 Property를 추가합니다. 
         
         @Component
         script EntityLinker extends Component
         property Entity PR = "/maps/map01/SetPixelTest"
         end
         



    
    
          
    
    7. **PixelRendererTest** 스크립트를 열고 `GetPixelTest` 함수를 작성해야 합니다.
    그전에 먼저 **PixelRendererTest**의 기존 **Property**에 아래와 같이 내용을 추가해줍니다.
        ```lua
    @Component
    script CheckReference extends Component
        property Entity PRCheck = "/maps/map01/CheckGetEntity"
    end
    
    
    
    위와 같이 설정한 후 `GetPixelTest` 함수를 작성합니다.
    ```lua
    

@Component script PixelVerifier extends Component @ExecSpace("ClientOnly") method void GetPixelTest() \-- GetPixel을 사용해 SetPixelTest에 최근에 표시된 픽셀 하나의 좌표 및 색상을 받아옵니다. local color = self.Entity.PixelRendererComponent:GetPixel(self.lastX, self.lastY) \-- 위에서 받아온 값을 SetPixel을 사용해 CheckGetEntity에 표시합니다. self.PRCheck.PixelRendererComponent:SetPixel(self.lastX, self.lastY, color) end end
    
    
          
    
    8. **ButtonClick_GetPixel** 스크립트에 **ButtonClickEvent**도 추가합니다.
        ```lua
    @Component
    script PixelTestTrigger extends Component
        @EventSender("Self")
        handler HandleButtonClickEvent(ButtonClickEvent event)
        -- Parameters
        local Entity = event.Entity
        --------------------------------------------------------
        -- 버튼을 클릭하면 GetPixelTest 함수를 호출합니다.
        self.PR.PixelRendererTest:GetPixelTest()
        end
    end
    
    
    
      
    
    

  9. UI - DefaultGroup - GetPixel 버튼의 Property에 ButtonClick_GetPixel을 추가합니다.   

  10.  시작을 눌러 테스트를 진행합니다. SetPixel 버튼을 누른 다음 GetPixel 버튼을 누르면 SetPixelTest에 가장 최근에 표시된 픽셀이 CheckGetEntity에도 잘 표시되는지 확인합니다.



## 스프라이트 전체 픽셀 받기

`GetPixels` 함수를 활용하면 스프라이트 전체의 픽셀 값을 모두 받아올 수 있습니다. [gif](16534576466290e6655858bc24915b190bc343b8daf73) 예시 코드는 아래와 같습니다. 버튼을 만들고, 함수를 추가한 다음 버튼에 ButtonClickEvent를 연결하는 것은 위의 예제와 동일합니다.
    
    
    @Component
    script PixelCopyTest extends Component
        @ExecSpace("ClientOnly")
        method void GetPixelsTest()
        -- GetPixels을 사용해 SetPixelTest 전체의 픽셀 값을 받아옵니다.
        local getPixels = self.Entity.PixelRendererComponent:GetPixels()
        -- 위에서 받아온 값을 SetPixels를 사용해 CheckGetEntity에 표시합니다.
        self.PRCheck.PixelRendererComponent:SetPixels(getPixels)
        end
    end