위 사진은 두 가지가 구성되어 있습니다.
- Canvas 영역
- 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 를 참고하라는 답변을 얻긴 했지만, 거의 다 했기에 이렇게 코드 구현 질문을 드립니다...