HNINE_UIShadow_SHD.unitypackage
0.07MB

 


Unity 2022.3.18f
*Legacy Pipeline 으로 제작된 Shader이며,
URP, HDRP 에서 동작하지 않을 수 있습니다.


** 겔럭시 S22 기준 준수한 퍼포먼스이나,,
**** 그림자가 애니메이션 되어야되는 특수 환경을 위한 쉐이더일 뿐 무작정 붙여서 쓰시면안됩니다.

 

// Unity UI canvas Shader 1.0v

// - 별도의 텍스처 없이 원본텍스처 한장이면 그림자를 생성하는 쉐이더 이며, 모바일 상에서 퍼포먼스 이슈가 있음,

// 1.0v
// ㅁ UI Color 대응 및 Shadow Tint Color 대응
// ㅁ 양방향 Blur 구현
// ㅁ 고성능 모드 구현

 

 

프로젝트를 진행하며, Mp4, Mov의 영상 확장자를 성능, 용량의 이슈로 사용할 수 없고,

WebP, WebM이 지원되지 않아 사용할 수 없다면,

 

2D 이미지를 애니메이션 할 수 있는 방법은 다음과 같다.

(1) 3D object + Bone + Key Animation

(2) Key Animation

(3) Gif

 

물론 각각의 장단점이 있지만,

모션그래픽영상을 사용하는 경우는 사용할 수 있는 선택지는 다음과 같다.

(1) Lottie

(2) Sprite Sheet

 

*개발자님들,,, 지원해주시면 안되요? 라고 했다가 전날 야근으로 지처있는 개발자의 아득한 눈망울을 보고 말았다...

 

당연히 모션그래픽일 경우 Lottie로 나가는 것이 가장 좋지만,,,
최적화로 보았을때 벡터 형태의 모션그래픽이라는 한계가 존재한다.

 

시간도 없고 원본 퀄리티를 지키기 위해서는 Animation Sprtie 가 최선의 선택지이다.

 

출처 : https://learnandcreate.tistory.com/941

 

 

스프라이트 시트는 여러개의 작은 그래픽을 그리드에 정렬하여 구성한 비트맵 이미지 파일이다.

Code를 통해 연속적으로 재생하는 형태로 사용되며,

Looping 되는 짧은 이미지 파일 혹은 짧은 모션 그래픽에서 리소스 최적화를 위해 사용하기 매우 좋다.

*단 1:1 비율로 가로세로가 존재해야되며, 빈공간이 존재해서는 안된다.

 

포토샵, 일러스트와 같은 어도비 계열 툴부터 PPT, Game Engine 등 여러 방법으로 리소스를 생성할 수 있으나,
우리는 빠른 퇴근을 위해

 

빛과 소금인 Gluelt를 사용하는 법에 대해 알아가고자 한다.

 

https://github.com/Kavex/GlueIT

 

GitHub - Kavex/GlueIT: :art: Simple SpriteSheet Tool

:art: Simple SpriteSheet Tool. Contribute to Kavex/GlueIT development by creating an account on GitHub.

github.com

출처 : https://github.com/Kavex/GlueIT

 

단순하게 생긴 UI는 니가 퇴근을 빠르게 할 수 있을 것이다 라고 말해주고 있다.

 

테스트를 위해 사용했던 데이터를 참고하고자 한다.

청주박물관 Thㅏ랑해요~~

 

Add 를 통해 이미지를 받게 되면 다음과 같은 화면으로 되게 되며,

순서는 다음과 같다.

 

1. Number Of Colums

# X #으로 이미지 시트를 제작해주는 영역이며, 빈공간이 없이 만들어 주는 것이 핵심이다.
ex)
16장의 이미지 -> 4 X 4
9장의 이미지 -> 3 X 3

** 이미지는 2진수로 커지는 것이 올바르기 때문에 1:1 비율로 이미지를 생성해주는 것이 바람직 하다.
https://m.blog.naver.com/dohjang/221898954780

 

Texture 매핑의 이해

Texture 매핑이란! 3D 모델링(오브젝트) 표면에 색이나 질감 등을 표현하는 2D 이미지를 입혀주는 작업...

blog.naver.com

 

2. GlueIt

 

리소스는 6장의 이미지 이기 때문에 Number Of Columns에 3을 입력하고 GlueIT 버튼을 눌러 Sheet를 제작한다.

*GlueIT 버튼을 클릭해야 저장을 할 수 있다.

*Alpha가 있는 영역의 경우 Black으로 표현한다.

 

다음과 같이 이미지가 생성되게 된다면 Save를 통해 이미지를 저장하면 된다.
*필요에 따라서는 Pngyu를 통해 Indexed Color Space 로 변환하여 최적화를 진행 할 수 있다.

 

 

Q&A

Q. Sheet에 빈공간이 발생되게 되면 어떻게 되는가.
A. 빈 이미지가 출력되게 되며, Code를 통해 막을 수 있으나 불필요하게 Code가 길어지고 리소스를 잡아먹게 되기때문에 빈영역이 발생되지 않는 것이 좋다.

 

Q. 이미지 크기가 너무 커져서 리소스가 오히려 더 커졌다 이 경우 어떻게 진행해야되나?
A. 원본 이미지 크기를 일정부분(75~90%) 줄여서 이미지를 생성하는 것이 좋다.
* 생성시 이미지가 깨질 수 있으니 이점은 눈으로 확인하며 퀄리티 체크를 진행하는 것이 좋다.

 

Q. 데이터가 출력이 안되는데 어떠한 이유인지 알수 있을까?
A. 이미지가 너무 큰 경우 (Png에서 지원하지 않는 경우) 제작이 안될 수 있다.
*이럴 경우에는 개발자와 상의해서 영상확장자를 지원하는 쪽으로 가닥을 잡는 것이 정신건강에 이롭다.

 

 

'리소스 최적화' 카테고리의 다른 글

WebP 최적화에 한걸음  (1) 2024.01.03
최적화로 향하는 Gltf Export Ver 1.0  (0) 2024.01.03
PNG 압축은 Pngyu / 최적화의 희망  (1) 2024.01.02
H.264 최대한으로 압축하기 (HandBrake)  (1) 2024.01.02

arcoreimg.exe
4.35MB

 

https://developers.google.com/ar/develop/augmented-images/arcoreimg?hl=ko

 

arcoreimg 도구  |  ARCore  |  Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 arcoreimg 도구 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. arcoreimg는 참조

developers.google.com

 

AR Image Target을 진행해야되는 마커의 퀄리티는 매우 중요한 요소중에 하나이다.

구글 디벨롭먼트는 75점이상 되는 마커를 사용하는 것을 권장하고 있으며,

 

위에 링크와 파일은 윈도우 개발환경에서 마커의 퀄리티 체크를 진행하는 툴이다.

 

 

< 사용방법 >

 

1. Arcoreimg.exe. 를 다운받은 후, 윈도우 + R 키를 눌러 실행창에 CMD를 입력한다.

 

2. CMD 창을 연다음 아래와 같이 이미지 품질을 확인하는 명령어를 입력한다.

*데이터의 경우 D드라이브의 2.Android라는 디록토리에 arcoreimg.exe를 다운로드 하여 저장하였다.

 

테스트를 위해 test.jpg 데이터를 활용하여 설명하고자 한다.

D드라이브로 이동하기 위한 명령어 = d:
D드라이브에서 폴더로 이동하기 위한 명령어 = cd 2.Android

 

Sample /// arcoreimg.exe eval-img --input_image_path=이미지경로\이미지이름.확장자명
arcoreimg.exe eval-img --input_image_path=D:\2.Android\test.jpg

 

 

태극기 이미지로 하였을 경우 복잡성이 있음에도 불구하고 50점이라는 점수를 받았다.

 

구글 디벨롭먼트 내에 문서를 확인하고 실제 Exe를 활용하여 테스트해본 결과

고품질의 마커를 이끌어 내기위해서는 다음과 같은 세팅이 필요하다.

 

 

https://developers.google.com/ar/develop/augmented-images?hl=ko%EF%BB%BF#unity-ar-foundation

 

 

< Tip >

(1) 300x300 이상의 이미지 데이터

>> 활용되는 마커 이미지의 경우 비율에 상관없이 300 x 300 이상의 이미지 데이터를 활용해야된다.
* 결국 최적화의 영역이기 때문에 알맞은 크기를 세팅하는 것이 좋으며 용량 이슈로 인해 최대 2024 x 2024를 넘지않는 것을 추천한다.

 

(2) Gray Sclae

>> Image Target 로직의 경우 RGB Color Space를 기준으로 진행하는 것이 아닌 Gray Sclae Color Space로 마커를 인식하기 때문에 여러 컬러를 사용하여 이미지를 만든다고해서 점수가 높아지는 것이 결코 아니다.

 

(3) 소통

>> 결국 마커의 경우 디자이너가 제작하는 이미지를 따르기 때문에 이와 관련한 내용을 공유하여 디자이너와 싱크를 맞추는 작업이 필요하다.
*마케팅으로 사용되는 마커의 경우 퀄리티 문제가 발생되는 경우가 많아 선행적으로 프로젝트의 PM 및 클라이언트에게 이 내용을 이해시키는 것이 필수적으로 요구된다 생각한다.

 

Unity Game Viewer에서 프레임을 체크할 수 있는 코드이다.

단점으로는 실제 빌드를 하였을때와 에디터 상에서 프레임의 차이가 발생되는 문제가 있으며,

단순하게 에디터 상에서 확인하기에는 이만한 친구가 없다.

* 해당 코드의 경우 구글링을 통해서 습득한 코드이기 때문에 최초 작성자는 알 수 없다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class FrameChecker : MonoBehaviour
{
    [Range(1, 200)]
    public int fFont_Size;
    [Range(0, 1080)]
    public float xPos;
    [Range(0, 2400)]
    public float yPos;
    [Range(0, 1)]
    public float Red, Green, Blue;

    float deltaTime = 0.0f;

    private void Start()
    {
       
    }

    void Update()
    {
        deltaTime += (Time.unscaledDeltaTime - deltaTime) * 0.1f;
    }

    void OnGUI()
    {
        int w = Screen.width, h = Screen.height;

        GUIStyle style = new GUIStyle();

        Rect rect = new Rect(xPos, yPos, w / 2, h * 2 / 100);
        style.alignment = TextAnchor.UpperLeft;
        style.fontSize = h * 2 / fFont_Size;
        style.normal.textColor = new Color(Red, Green, Blue, 1.0f);
        float msec = deltaTime * 1000.0f;
        float fps = 1.0f / deltaTime;
        string text = string.Format("{0:0.0} ms ({1:0.} fps)", msec, fps);
        GUI.Label(rect, text, style);
    }
}

'Unity > Script' 카테고리의 다른 글

[Unity] Frame Checker On Editor  (0) 2024.06.18
[Unity] Camare Position Move v1.0  (1) 2024.06.18

+ Recent posts

티스토리툴바