canvas, socket.io 구현 되었습니다. 이제 채팅 내용을 캐릭터 위에 표시하고 싶습니다. (git 예제 공유)

조회수 1263회

이미지

위 사진은 두 가지가 구성되어 있습니다.

  1. Canvas 영역
  2. socket.io 영역

1번 영역은 움직이는 캐릭터를 표현합니다. 방향키 + space 바 키를 입력할 수 있으며 키에 따라 움직이고 점프 합니다.

2번 영역은 input에 글자를 입력하여 다중 채팅이 가능합니다. 채팅한 내용은 중간 채팅 목록에 표시됩니다.

여기서 채팅내용을 Canvas 영역의 캐릭터 위에 따라다니도록 표시하고 싶습니다.
( 일반 RPG게임 채팅 시스템 처럼 ) ( 캐릭터를 움직임에 따라 캐릭터 위에 채팅내용을 표시하도록 )

그러나 canvas 영역이 setInterval(); 로 계속 그려지다 보니 어렵네요.

분리하여 구현할 수 있는 방법이 있을지...

git 주소를 공유합니다. git clone 하시면 쉽게 테스트해보실 수 있습니다.

https://github.com/zealot71/chat_rpg.git

ps. 어제 질문 중 http://codecanyon.net/item/virtualspaces-socketio-virtual-chat-room/13678953 를 참고하라는 답변을 얻긴 했지만, 거의 다 했기에 이렇게 코드 구현 질문을 드립니다...

1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    거의 다 가신것 같은데 조금만 더 가보시면 될것 같습니다.

    간단하게 답변 드리자면 화면에 캐릭터를 그릴 때 글자를 함게 그려주셔야 합니다.

    지금 키보드 이벤트 등을 받으면 특정 데이터를 갱신한 후에 화면에 그려주시지 않나요?

    마찬가지로 소켓으로 채팅 정보를 받게 되면 해당 정보를 바로 화면에 그리시는게 아니라 아래처럼 하는 일을 나눠보세요.

    1. 먼저 캐릭터가 포함된 데이터에 채팅에 그릴 내용을 포함시켜서 데이터를 갱신(키보드 이벤트에 반응하는 것 처럼)

    2. 특정 인터벌 마다 화면을 그리는 렌더러에서 해당 데이터(채팅)를 캐릭터와 함게 화면에 그리기

    • 아하... 캐릭터만 다시 그리는게 아니라 채팅 텍스트까지 같이 다시 그리도록 구현하라? 뭔가 확 와닿네요. 좋은 조언글 감사드립니다. 상남자 2016.5.11 23:34

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.