Sprite Color Adjustment

# Course Introduction

You can easily change the color of sprites. We'll examine the difference between sprites and web sprites, and how to change their colors.

# Sprites

2D images are called Sprites. You can adjust their location, size, rotation, and so on. Each sprite has a unique RUID value. You can use the RUID value to place sprites in an empty model or change them. If a creator uploads their own image file to Maker, the file will automatically obtain RUID.

> Tip RUID is a unique ID value of various resources, including sprite, animation, sound, etc.

# Example

#### Using Resources from MSW

  1. Find a resource from the resource search window.   
Example RUID: 214069132ceb4962b374c8080fe265ef
  2. Copy RUID, click Workspace - NativeModel - MapObject to place it.  
[gif](16353870233517f049b81ee534a72bd40584976a70c91)
  3. Enter the copied RUID to SpriteRendererComponent's SpriteRUID property.   
[png](168775319866329eb7f3e76cb4d72a8729ab30e0cc030)



#### Using Another Creator's Resources

  1. Select Workspace - MyDesk - Import From - Import Image, and import the image you'd like.
  2. Select Workspace - BaseEnvironment - NativeModel - MapObject, and place it in [png](163452458863504f49c7a23aa4a41af56b5b4611a6daf)Scene.
  3. Enter the copied RUID to SpriteRendererComponent's SpriteRUID property.



# Web Sprite

You can use an image url from the web and use it as a "Web Sprite." If you do not own the image or if the resource isn't from MapleStory Worlds, you must check if you can use it, and to what extent.

#### Example

You can use Lara's artwork from MapleStory as a sprite.

  1. Copy the image url you'd like to use.   
Example address: https://lwi.nexon.com/maplestory/common/media/artwork/artwork_108.jpg
  2. Go to Workspace - BaseEnvironment - NativeModel - WebSprite, select and place a model.
  3. Select the model and go to Property Editor, and enter value for WebSpriteComponent's Url.  
[png](1687753413264ea7d4470867c43b6862bb02387c52d00)
  4. See that the web sprite has been applied.  
[png](16349585335040cdf2dc709064f778ce427cbc7742cde)



# Sprite Color Adjustment

You can adjust the color, brightness, saturation, and opacity of an image in the Color property of SpriteRendererComponent and WebSpriteComponent. [png](1656401414821492ba9c3b86b4d518c6a13747c463285)

[{"Number":"[jpg](1634541272181b5c1a55fcf3d49b19734d25913c38583)","Explanation":"You can drag on top of the color window to find the value you want."},{"Number":"[jpg](1634541300837cb541c2f44e046a79bb1901a885aa8ac)","Explanation":"Bar you can use to adjust color."},{"Number":"[jpg](163454131465069e090278448490f965207e9a4a10348)","Explanation":"Bar you can use to adjust transparency. Moving it to the bottom will make the sprite transparent."},{"Number":"[jpg](1634541326353d8628c1473944497bf376acb7a65ca45)","Explanation":"You can see the new color from new window, the current color from current window below."},{"Number":"[jpg](1634541338689678f574f21e54a6ca533737924124d7e)","Explanation":"You can enter values for HSV, RGB, Lab Color Space to find the color you want."},{"Number":"[jpg](163454135201207284554a25b498380fff224cd767f6b)","Explanation":"You can adjust opacity between 0-100. The lower the value, the more transparent the sprite."},{"Number":"[jpg](1634541365429e8d9fdf4049149eb96f0ec7fdae4b3d1)","Explanation":"HexCode values. You can copy the code to apply the same color on other sprites."},{"Number":"[jpg](1634541383202032ed6f9f38046119acf89fd019b41cf)","Explanation":"[png](163452458863504f49c7a23aa4a41af56b5b4611a6daf)Click on a point from the Scene to pick out the color you like."},{"Number":"[jpg](1634541395594e0bdbc1a69204d11aef5d9fbdf7f7ecd)","Explanation":"You can save the color you picked from the palette. You can create a new box whenever you click the last one."}]

##### Example

Adjust the sprite's hexcode value to ff53a1, and it will be colored like the sprite on the right. [png](1656401406338bb847992bc304ad18f3c75d38259b1f5)

# Summary

Simply changing the color can give the sprite a new look. If your game takes place in a dark world, you can adjust brightness of all the entities for a dark mood. Adjusting the color to match your game will enhance the atmosphere and the level of completion.

##### Reference Guide

[Importing a Custom Image](docs?postId=99) [Finding Resources](docs?postId=211)