유니티에서 구글 메터리얼 디자인 컬러 시스템 사용하기

유니티에서 구글 메터리얼 디자인 컬러 시스템을 사용하는 방법입니다.

혼자서 개발하다보면 항상 색상값을 어떻게 정해야할지 막막했습니다. 안드로이드 스튜디오에는 메터리얼 디자인 가이드만 따라해도 깔끔한 앱이 완성되는데, 유니티는 그렇지 못하지요...

 

그래서... 유니티에서 메터리얼 디자인 색상값을 가져와 사용하기 쉽게 코드를 작성해보았습니다...

 

https://github.com/gangside/UnityMaterialDesignColorSystem

GitHub - gangside/UnityMaterialDesignColorSystem: Using Google Metal Design Color System at UNITY

Preview

Use Google Material Color System in Unity

 

SampleCode

using UnityEngine;  
using UnityEngine.UI;  
using Morm.MaterialDesign;

private Image img;

private void Start()  
{  
    //Action that is called when Theme changes
    ColorSystem.Instance.OnThemeChanged += OnThemeChagned;  

    //get color
    img.color = ColorSystem.Instance.GetColor(ColorType.Primary);

    //change theme
    ColorSystem.Instance.ChangeTheme(ColorSystem.Theme.Dark)
}

Getting Started

1. Install the Material Theme Builder.
2. Please sign in at https://www.figma.com/ and create a New design file.
3. Open the Material Theme Builder Plugin.
   4. Select an image to extract the color preset, or select the color you want. And export the file.
   5. Unzip the file. Keep the colors.xml file in the value folder.
   6. Create Color Preset in Unity.
   7. Put colors.xml in Inspector's Xml File. And click [Load Color Xml_Light] or [Load Color Xml_Dark] to extract the color.
   8. Two Scriptable Objects must be created for two themes (Light, Dark).
   9. Preparations are complete. Check the Resources Path within ColorSystem.cs.
   10. If the path is correct...
   11. Use the Morm.MaterialDesign.ColorSystem.Instance.GetColor(ColorType type) function.
   12. There's not much code. Look at it, modify it, and use it as you want. Please refer to the demo.