개미v

게임에 여러명이 접속을 해서 플레이어 캐릭터가 이동하는 예제입니다. 실시간으로 웹소켓을 통해서 다른 플레이어와 이동 정보가 공유 됩니다. 클라이언트Loading Scene에서 '시작하기'를 클릭하면 MyGame Scene으로 이동하고, MyGame Scene에서는 웹소켓 연결을 생성하고 서버로부터 MOVE 메세지를 주고 받으면서 다른 플레이어 위치 정보를 주고 받습니다.네트워크 트래픽을 줄이기 위해서 이동중일 때에만 위치 정보를 서버로 전송하고, 정지상태일 때에는 위치 정보를 서버로 전송하지 않습니다.// CANVAS 크기const WIDTH = 800;const HEIGHT = 600;// 웹소켓 : 클라이언트 --> 서버const C_JOIN = 1;const C_EXIT = 2;const C_MOV..

온라인 멀티플레이 이동을 구현하기에 앞서 기존 이동을 tween으로 개선했습니다. tween은 캐릭터를 (x, y)로 이동 시키는 기능입니다. 클라이언트Loading Scene에서 '시작하기'를 클릭하면 MyGame Scene으로 이동하고, MyGame Scene에서는 웹소켓 연결을 생성하고 서버로부터 JOIN이나 EXIT 같은 메세지를 주고 받으면서 다른 플레이어 정보를 주고 받습니다.// CANVAS 크기const WIDTH = 800;const HEIGHT = 600;// 웹소켓 : 클라이언트 --> 서버const C_JOIN = 1;const C_EXIT = 2;// 웹소켓 : 서버 --> 클라이언트const S_JOIN = 1;const S_EXIT = 2;const SERVER_URL = 'h..

게임에 여러명이 접속을 하면 플레이어 캐릭터가 생성되는 예제입니다. 플레이어 세션관리는 서버쪽에서 하고, 클라이언트와 서버의 통신은 웹소켓으로 통신합니다. 클라이언트Loading Scene에서 '시작하기'를 클릭하면 MyGame Scene으로 이동하고,  MyGame Scene에서는 웹소켓 연결을 생성하고 서버로부터 JOIN이나 EXIT 같은 메세지를 주고 받으면서 다른 플레이어 정보를 주고 받습니다.// CANVAS 크기const WIDTH = 800;const HEIGHT = 600;// 채팅 : 클라이언트 --> 서버const C_JOIN = 1;const C_EXIT = 2;// 채팅 : 서버 --> 클라이언트const S_JOIN = 1;const S_EXIT = 2;const SERVER_UR..

Loading 장면에서 MyGame 장면으로 전환하는 예제 입니다.각 Scene는 클래스로 만드는 것이 효율적입니다. Scene 전환  결과화면

키보드 왼쪽, 오른쪽, 위, 아래 눌렀을 때 캐릭터가 이동하는 예제 입니다. 캐릭터 이동  대각선 이동 코드대각선 이동시는 아래 코드 추가하면 됩니다.글자수 제한 있어서 따로 뺏어요. function create() { // 왼쪽 위 이동 this.anims.create({ key: 'leftUp', // 애니메이션 이름 frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), // 프레임 범위 frameRate: 10, // 프레임 속도 repeat: -1 // 무한 반복..

스프라이트 이미지란?캐릭터가 이동할 때 움직임을 표현할 수 있도록 배열로 구성된 이미지 입니다.아레 예제 이미지는 하나가 32px × 48px 크기로 10개로 구성 되어 있습니다.  스프라이트 이미지 불러오기  결과화면스프라이트 이미지의 4번째 프레임만 화면에 보여집니다.

난생 처음 해보는 게임 개발을 시작했습니다.기존 운영 중인 웹사이트에 게임 기능을 넣어볼 생각이라서, 웹에서 쉽게 개발할 수 있는 게임 프레임워크를 찾아보니 phaser3가 가장 무난하다고 합니다.​phaser3란?HTML5 게임 개발을 위한 자바스크립트 게임 엔진입니다. 웹에서도 게임을 만들 수 있습니다.​개발환경phaser3는 자바스크립트 프레임워크이기 때문에 메모장 하나만 있어도 개발 가능합니다.npm, webpack, node.js 이런 것 필요없습니다.​저는 개발편의를 위해서 에디터는 비주얼 스튜디오 코드를 사용했고, 웹서버는 Live Server (비주얼 스튜디오 코드 Extensions) 사용했습니다.​이미지 불러오기첫번째 강좌로 이미지 불러와서 화면에 보여주는 예제 입니다.    결과화면