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


이미지

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

  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 를 참고하라는 답변을 얻긴 했지만, 거의 다 했기에 이렇게 코드 구현 질문을 드립니다...

  • 2016년 05월 11일에 작성됨
    웹 사이트 공부 중입니다. 많은 도움 주시면 좋아요.

조회수 267


1 답변


좋아요
0
싫어요
채택취소하기

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

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

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

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

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

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

  • 2016년 05월 11일에 작성됨
    프로그래밍 언어를 좋아하는 프로그래머

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

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close