개미v

phaser3 강좌(5) 온라인 멀티플레이

게임에 여러명이 접속을 하면 플레이어 캐릭터가 생성되는 예제입니다. 플레이어 세션관리는 서버쪽에서 하고, 클라이언트와 서버의 통신은 웹소켓으로 통신합니다. 클라이언트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) 사용했습니다.​이미지 불러오기첫번째 강좌로 이미지 불러와서 화면에 보여주는 예제 입니다.    결과화면