[유니티/게임개발] 픽셀 리마인드(PixelRemind) - 갤러리 모드 플레이 화면 UI 개선 작업

2023. 3. 31. 23:41·유니티/작업

| 현재까지 작업 내용과 목표 📋

이번에도 갤러리 모드 부분을 작업하려고 합니다.

각 잡고 기획한 게임이 아니다 보니 생각날 때마다 기능들을 수정, 추가 작업이 많아지는 것 같습니다.

 

저번에 플레이 화면의 불필요한 UI정보를 제거하는 작업을 하였었는데, 대신 플레이 타임과 남은 픽셀수 그리고 간단한 UI 효과들을 작업해 보려고 합니다.


| TO DO LIST 💡

  • 표시할 UI 배치
    • 플레이 타입 UI 배치
    • 남은 픽셀 UI 배치
  • UI에 기능 연결
    • 플레이 타임 체크를 위한 타이머 기능 필요
    • 현재 남은 픽셀 개수를 UI에 업데이트 필요
    • 플레이 타임을 로컬 데이터로 저장하기 위한 int <=> string 변환하는 함수 필요
  • 픽셀의 색을 복원하는 방식 변경 (기존 플레이로 얻은 카운트를 통해 복원 => 컬러값을 매칭시킬 때 알아서 복원)
    • 기존 카운트 증가 대신 FillRandomPixel함수를 실행하도록 수정
  • 완료된 PixelArtSlot은 플레이 타임을 슬롯에 함께 표시 
  • 간단한 UI 효과 추가
    • 플레이 시 플레이 타임 UI, 남은 픽셀 UI에 페이드인 효과 적용
    • 플레이 끝날 때 플레이 타임 UI, 남은 픽셀 UI에 페이드 아웃 효과 적용

| 작업 과정 🖥️

1) 표시할 UI 배치

UI 배치

2) UI에 기능 연결

기존 PixelArtData에 PlayTime 프로퍼티를 추가하였습니다.

1초가 지날 때마다 PlayTIme을 증가시키는 코루틴을 추가하고, PixelArtUtill에 현재 int형이니 UI에 반영시키기 위해서

UIHelper클래스를 새로 추가하여 FormatSecondsToTimeString함수를 추가하여 "00:00:00"의 형식으로 변환시키는 함수도 추가 구현 하였습니다.

PlayTimer코루틴에서 플레이 하는동안 1초씩 타이머를 지연시킬 _timerDelay 변수
1초씩 카운트하는 PlayTimer코루틴
int형 PlayTIme을 "00:00:00" 형식으로 반환 시키는 함수

그리고 같이 추가한 남은 픽셀 수 UI도 데이터를 반영시키겠습니다.

기존 복원 수 UI를 업데이트하는 함수를 수정했습니다.

사실상 클래스 네임과 UpdateUI 함수만 수정

3) 플레이 시 픽셀 컬러 복원 방식을 수정 

이제 픽셀 컬러 복원 방식을 수정해야 합니다. (카운트를 모은 후 터치 하여 복원 => 컬러를 매칭시킬 때마다 복원)

PlayArtData에 RemainingFills는 이제 필요가 없어졌으니, 제거하고 SelectSlot에서 RemainingFills를 증가시키는 대신 FillRadomPixel 함수를 실행하도록 수정해 줬습니다.

알맞은 컬러를 매칭하면 FillRandomPixel함수를 호출 하도록 수정

4) 완료된 PixelArtSlot은 플레이 타임을 슬롯에 표시

이번에 플레이 타임을 추가하면서 완성된 PixelArtSlot에도 표시를 하면 좋을 거 같다는 생각을 해서, 한번 기존 슬롯에 UI를 추가하고, 데이터를 표시하는 작업까지 진행해 보겠습니다.

PixelArtSlot에 플레이 타임 UI가 추가된 모습
해당 픽셀 아트가 완료 되었을 때 플레이 타임 표시

5) 간단한 UI 효과 추가

플레이를 할 때 플레이 타임과 남은 픽셀수 UI에 간단한 페이드 효과를 추가했습니다.

다른 UI요소에도 사용할 수 있도록 UIHelper에서 Graphic 타입과 duration을 입력받는 함수의 형태로 효과를 주도록 구현했습니다.

FadeInOut 효과를 주는 코루틴


| 작업 결과 ✅

작업 결과


| 다음에 작업할 내용 🕟︎

다음번엔 픽셀 아트 들을 좀 더 기능적인 부분들을 추가 작업을 하겠습니다.

그 후로 현재 개발자 계정 문제가 해결된다면, 구글 플레이 서비스도 연결하는 작업을 해봐야겠네요


저작자표시 비영리 변경금지 (새창열림)
'유니티/작업' 카테고리의 다른 글
  • [유니티/게임개발] 픽셀 리마인드(PixelRemind) - GPGS 로그인 + Firebase Auth 연동 + Firebase Distribution 배포하기
  • [유니티/게임개발] 픽셀 리마인드(PixelRemind) - 구글 플레이 서비스 세팅 (Google Play Service)
  • [유니티/게임개발] 픽셀 리마인드(PixelRemind) - 갤러리 모드 추가 수정 및 코드 정리
  • [유니티/게임개발] 픽셀 리마인드(PixelRemind) - 픽셀 아트의 json데이터를 다이어트 시키기
프로포폴
프로포폴
Unity 클라이언트 개발자가 운영 하는 개발 블로그 입니다
  • 프로포폴
    약파는개발자
    프로포폴
  • 전체
    오늘
    어제
    • 분류 전체보기 (67)
      • 유니티 (21)
        • 공부 (0)
        • 튜토리얼 (0)
        • 에셋 (3)
        • 문제 해결 (2)
        • 작업 (16)
      • 언리얼(Unreal) (1)
        • 문제 해결 (1)
      • 백준 (20)
        • 브론즈5 (Bronze V) (20)
      • 프로그래머스(Programmers) (23)
        • C# 풀이 (23)
      • C# (0)
        • 팁 (Tip) (0)
      • 컴퓨터 과학(CS) (2)
        • 알고리즘 (1)
        • 자료구조 (1)
  • 블로그 메뉴

    • 홈
    • 글쓰기
    • 태그
    • 유니티
    • 알고리즘
  • 링크

    • Github
  • 공지사항

  • 인기 글

  • 태그

    브론즈5
    CS
    유니티
    c#
    컴퓨터과학
    개발일지
    알고리즘
    SHA
    프로그래머스_C#
    C++
    탐색(Search)
    baekjoon
    작업
    백준
    프로그래머스_Lv.0
    프로그래머스
    projecta
    Bronze V
    Unity
    픽셀리마인드
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
프로포폴
[유니티/게임개발] 픽셀 리마인드(PixelRemind) - 갤러리 모드 플레이 화면 UI 개선 작업
상단으로

티스토리툴바