본문 바로가기

Photon

Photon 아홉째 날 (포톤채팅구현, 채팅 동기화 후 나오는 문제 해결, 닉네임 색 바꿔주기)

목차

 


 

미션

포톤 채팅 구현하기!!

구현 가이드!!

위에꺼 구현 해보기


해결

 

UI를 먼저 구성해보자

 

GameScene => Scroll View 를 생성

Legacy -> InputField 도 생성해서 아래와같이 만들자

위치는 왼쪽 하단으로 가게 만들자!

여기서 ErrorPause 안풀면, 오류떴을 때 컴퓨터가 멈춤!


ChatManager.cs 를  만들자

빈 오브젝트도 만들어서 넣자! ㅎ

변수 세개 생성 ㅎㅎ

 

onSubmit 에 넣을 함수를 만들자

 

inputField 에 AddListener 로 넣자

OnSubmit 에 주석으로 넣는다

OnSubmit 함수 작성

 

Content 의 자식으로 Text 프리팹 파일을 생성하는거임

그리고, Text 컴포넌트를 가져와서, InputField 에 있는 Text 를 

Text 프리팹파일에 대입한다.


유니티로 돌아가서,

텍스트 생성

이걸 복제해보면 똑같은 위치에만 있음

Content 에 Vertical LayoutGroup 을 추가.

이걸 넣어서 높이값이 정확히 맞게 해줄 수 있음

 

height 는 됬는데, width 가 좀..

 

그래서

위처럼 Control Child Size 에 width 를 체크 해준다.

ScrollView (ChatView) 에 Horizontal 을 끄자!

그리고 방금 만든 text 를 프리팹으로 만들자

Chat Manager 에 필요한 내용을 다 Assign 하자!

1번은 만든 Text 프리팹

Input Chat 은 인풋 필드

Content 는 스크롤뷰안에있는 Content 임!

 

ChatManger.cs ---->

    void OnSubmit(string s)
    {
        //1. 글을 쓰다가 엔터를 치면

        //2. ChatItem 을 하나 만든다.
        //(부모를 ScrollView - Content)

        GameObject item = Instantiate(chatItemFactory, trContent);

        //3. text 컴포넌트 가져와서 inputField 의 내용을 세팅
        Text t = item.GetComponent<Text>();
        t.text = inputChat.text;

        //4. inputChat 의 내용을 초기화
        inputChat.text = "";

        //5. inputChat 이 선택되도록 한다.
        inputChat.ActivateInputField();
    }

그리고 Enter 를 누르면 inputField 에있는 text 를 초기화 시켜주는 코드,

   inputChat.text = "";

 

 

그리고 Enter 를 눌러도 InputField 가 계속 활성화 되게 해주는 코드

(원래 Enter 누르면 다시 또 InputField를 눌러줘야 했음)

 inputChat.ActivateInputField();

를 추가한다!

 

초기화도 시켜주자

이제 자연스럽게 칠 수 있음!

근데 텍스트가 너무 옆에 붙어있는 느낌?!

이걸 떨어뜨려볼까?

Left 10으로 바꿈!

아까 Content 에 Vertical Layout Group 의 Padding 에 보면

여유분을 넣을 수 있음

왼쪽에 너무 붙어있었으니까, Left 에 10정도 넣어서 떨어뜨려보자

이뻐진 채팅방


RPC 로 채팅동기화 하기

 

 

항상 2개를 기억하자

RPC 함수를 쓰려면 

 

nameSpace 에

using Photon.Pun,

MonoBehaviourPun 이 필요하다

두개 추가

이렇게 아까 썼던 OnSubmit() 에 있었던 코드들을 잘라서

RPC 함수 틀을 만들고 넣어주자!

이제 OnSubmit 함수에는 RPC 를 호출하는 함수만 있게 된다.

이거 수정 해야함 t.text = chat;

이유 : 

 

OnSubmit(string s) 에서

s를 입력하게 되면, (채팅 InputField 에 입력하고 Enter 를 누르면)

 

그 s 가 RPC 에 매개변수로 들어가게 되고

RPC 입장에서는 그게 string chat 부분이다.

 

즉, 우리가 InputField 에 채팅을 입력하게 되면,

그 채팅 text 는 OnSubmit 입장에서 매개변수 s 이고

 

RPC 를 호출 할 때, 그 s 가 string chat 이 되고,

그 string 이  Instantiate 된 채팅 text 에 text 로 들어가게 된다.


채팅 동기화 성공한 후, 생기는 2가지 문제

이제는 서로 동기화 까지 성공!

 

잘 되는데 여기서 문제,,

 

상대방이 어떤 말을 쓰고있을 때,

내가 채팅을 보내면

쓰고 있던 채팅이 사라짐 ㅋㅋ

이걸 빼줘야 한다

왜??

 

inputChat 내용을 초기화 하는것 까지 동기화가 되었기 때문에 

상대방은 채팅치면서 보내지도 않았는데 없어지는 현상이 발생함 ㅋㅋ

 

여기서 또 문제

 

상대방은 채팅 치지도 않았는데, 내가 채팅을 치고나면,

상대방 InputField 가 활성화 되어있음...?

왜 ? 

ActivateInutField 때문에

이렇게 작성하면 됨!

ActivateInutField 는 InputField 를 활성화하게 만들어주는 함수이다.

내가 채팅을 치고나면 InputField 가 활성화되게 되는데 이걸

동기화 시켜버려서 상대방꺼도 켜짐..ㅋㅋㅋ

 

그러니 ActivateInutField 도 위로 빼주자!


채팅 쓸 때 플레이어 움직임 막기

 

근데 여기서 보이는 문제,,

1번 시작하기

 

ChatManager.cs -->

이렇게 하면 플레이 할 때 커서 안보이게 할 수 있음!

이 때도 UI 들이 클릭이 되긴 함 ㅋㅋㅋㅋ

 

근데, 그래도 커서가 안보이는데

InputField 에 클릭이 될 확률이 낮으니까 이대로 한번 가보자!

 

(참고)

Editor 상에는 ESC 누르면 커서가 다시 나오긴 하는데

빌드하면 ESC 눌러도 안나옴!

 

ChatManager.cs -->

Update문에

 

esc키를 누르면 커서 활성화 하게 만들자!

 

PlayerMove.cs -->

이제 플레이어 움직임을 막아줘야 하니까,

커서가 안보일 때, 움직이게 하자

커서가 안보인다는건, 마우스가 안보이니까

채팅을 칠 수 있는 상태인거다! (움직이게 하면 안됨)

 

(참고)

 

if(photonView.IsMine == true && Cursor.visible == false )

이렇게 만들면 오류가 나게 될거임

 

이 if문 밑에는 

else 문으로

내 스크립트가 아니면, 포지션과 로테이션을 받아서 움직이게 하는.

즉, 1번 PC에 있는 1번 캐릭터(주인) 의 움직임을

2번 PC 에 있는 1번 캐릭터(주인아님) 이 받아서 움직이게  (끊기는것 때문에 Lerp 로 보간해서 움직이는거로 구현했었음)

하는 코드가 되어있는데

 

else 는 (photonView.IsMine == true && Cursor.visible == false ) 이거의 반대의 조건이게 될 것이다.

그건, photonView 가 isMine 이고, Cursor.visible 이 true 인 상태도 된다는것이다.

 

하지만 꼭 photonView 가 false 일 때에만 저게 실행되야 하기 때문에 오류가 나는 이유이다!

 

 

이제 플레이어의 회전도 막아주자!

PlayerRot.cs ----->

커서가 보이면 안움직여지게!

 

근데 지금, esc 키를 눌렀을 때 커서한번만 활성화 되서,

어디든지 클릭만 하면 다시 커서가 안보이게 만들어보자

 

ChatManager.cs -->

근데 여기서 또 문제ㅋㅋㅋㅋ

 

Esc 눌러서 커서 활성화 하고나서

InputField 누르면 Cursor 가 false 가 되버림

 

클릭했으니까.

그러니까, 클릭이 UI 누른게 아니었을 때만 커서 안보이게 바꾸자!

UI 눌렀으면 커서는 계속 보이게 해놔야 하니까 

 

 

(참고)

모바일 일때는 좀 다르다!

모바일 일 때는 컴퓨터와 다르게, 터치가 하나만 되는게 아니기 때문이다!

그래서 이런식으로 써야함!

GetTouch(0) 일 때는, 첫 번째 터치한것


닉네임도 채팅방에 나오게하기

 

엄청 쉬움

ChatManager.cs -->

RPC 안에 "RpcAddChat" 이거임!! 위에꺼 오타임!!

위처럼

OnSubmit 함수에

 

chatText = 이름 + 내용 인 string 값을 하나만들고 그걸 

나오케 하면 됨

 

닉네임 + s 가 새로운 문자가 되는거임


닉네임 색 바꿔주기

ChatManager.cs ---->

 

이 코드는 아까 위에서 썼던 코드 이다.

HTTP 형태로 좀만 바꿔주면 됨!

 

 

이제 닉네임 파란색으로 나옴!


닉네임 컬러 랜덤으로 변경해주기!

 

ChatManager.cs ---->

Color 변수 하나 생성

start 부분에서 nickColor 를 하나 랜덤으로 생성시켜준다.

ColorUtility.TohtmlStringRGB 부분에 넣어준다

닉네임의 색이 랜덤으로 나오게 된다!