무료 게임

. 이들은 페이저와 함께 제공됩니다.장면 클래스. 이러한 각 방법은 아래 설명과 다른 기능을 갖습니다

하루 이내에 실시간 멀티 플레이어 브라우저 게임 구축 – 1/4 부

. 듀! 직접 건설 할 생각을 한 적이 있습니다. 흠.. 게임은 선천적으로 구축하기가 어려워 보입니다. 많은 움직이는 조각이 포함되면 (문자 그대로) 게임 개발은 네트워킹, 수학, 그래픽 등의 거룩한 물에 발을 몰아 넣은 개발자에게 제한된 것처럼 보입니다. 그러나 최근 몇 년 동안 웹이 진화하고 최근 몇 년 동안에 걸쳐있는 모든 새로운 프로토콜과 라이브러리를 통해 브라우저 기반 멀티 플레이어 게임을 구축하기가 매우 간단합니다. 이 기사에서는 Space Invaders의 실시간 멀티 플레이어 게임의 단계별 구현 (AH, Nostalgia!) Phaser3 및 Ably Realtime. https : // Space-Invaders-Multiplayer에서 마지막 게임을 주최했습니다.Herokuapp.com/ 당신이 그것을 시도하기 위해. 그 과정에서 우리는이 뒤에있는 아키텍처, 시스템 설계, 네트워킹 프로토콜을 이해하고 멀티 플레이어 브라우저 기반 게임을 구축 할 때주의를 기울여야합니다. 이 튜토리얼 시리즈는 네 가지 부분으로 나뉩니다

• 1 부 : 게임 개념 및 페이저 라이브러리 소개
• 2 부 : 실시간 앱의 네트워킹 프로토콜 평가
• 3 부 : 모든 플레이어를 동기화하기 위해 서버 측 코드 구현
• 파트 4 : 게임을 렌더링하기 위해 클라이언트 측 코드를 마무리

우리가 시작하기 전에 마지막으로. 이 기사는 JavaScript 및 Express/Nodejs에 대한 기본적인 이해를 가정합니다. 나는 가능한 한 다른 모든 것을 시도하고 설명 할 것이다 ����‍����

게임을 받자!

1 부 – 게임 개념 및 페이저 소개

원래 레트로 클래식과 정확히 동일하지 않기 때문에 게임 규칙을 살펴 보겠습니다.

멀티 플레이어 공간 침입자에 대한 게임 규칙

• 새로운 플레이어가 합류하면 3 개의 사용 가능한 품종 중에서 몬스터 아바타가 무작위로 배정됩니다.
• 각 플레이어는 키보드의 화살표 키를 사용하여 아바타 왼쪽 또는 오른쪽으로 이동할 수 있습니다
• 각 플레이어는 자신의 아바타를 흰색으로 볼 수 있지만 다른 모든 사람들은 사전 할당 된 임의의 색상으로 볼 수 있습니다
• 사전 설정된 플레이어가 게임에 참여하면 배가 출시됩니다. 이 선박은 5 초마다 무작위로 변하는 무작위로 선택된 방향으로 수평 축을 따라 이동합니다. 이와 함께 선박의 속도도 바뀔 것입니다. 이 배는 또한 우리가 사전 설정할 수있는 정기적 인 간격으로 총알을 촬영합니다
• 모든 아바타는 게임 내내 사전 설정 증가로 자동으로 아래쪽으로 이동합니다.
• 게임에서이기는 목표는 선박에 의해 총알이 하나 이상의 총알에 의해 죽이지 않고 게임 화면의 바닥 테두리로 만드는 것입니다.

실시간 멀티 플레이어 게임의 구성 요소

네트워크가 달린 실시간 게임 뒤에 많은 일이 일어나고있는 것처럼 보이지만 실제로 세 가지 핵심 구성 요소로 내려집니다

이 각각을 더 살펴 보겠습니다.

1. 자산

자산은 게임을 구성하는 중요한 요소입니다. 게임에 객체가 나타나고 싶다면 게임 캔버스에 하나를 그리거나 이미지 나 스프라이트 시트를 사용하고 함께 애니메이션 할 수 있습니다. 마찬가지로 게임에서 소개하고 플레이하고 싶은 오디오는 자산에 해당됩니다.

게임 테마의 슈퍼 아케이드를 만드는 데 관심이 있다면 Glauber Kotaki 의이 픽셀 아트 튜토리얼을 따라 방법을 배울 수 있습니다.

2. 물리학

물리학은 우리가 자산을 움직이고 게임의 다른 물체가 서로 상호 작용하는 방식을 결정할 수있는 이유입니다. 예를 들어, 간단한 판 게임에서 공은 특정 방향으로 튀어 오르며, 외륜의 일부에 따라 특정 속도로 충돌합니다. 마찬가지로, 우리 게임에서, 여기에는 선박이 가야 할 곳의 컴퓨팅, 어떤 속도, 총알 촬영, 플레이어의 아바타와의 총알 물체의 충돌 등이 포함될 수 있습니다.

이 모든 것들은 기본적으로 물리의 개념에 따라 수학적 계산입니다. 그러나 너무 많은 수학은 간단한 게임을 위해서도 처음부터 글을 쓰는 것이 압도적 일 수 있습니다. 그래서 우리는 처음부터 처음부터 쓰는 대신 우리를 위해 대부분의 수학 마법을 할 수있는 물리 엔진을 사용할 수 있습니다.

삼. 네트워킹

멀티 플레이어 라이브 온라인 게임에 특히 중요한 최종 핵심 구성 요소는 네트워킹입니다. 모든 플레이어 간의 동기화를 유지하는 것은 매우 까다로울 수 있습니다.

이 모든 것이 복잡하게 들리기 시작하면 걱정하지 마십시오. 우리가 올바른 방식으로 시작하는 데 도움이되는 많은 기존 디자인 패턴이 있습니다. 우리는 문제의 특정 게임의 메커니즘과 관련하여 게임 아키텍처가 원하는 방법을 선택할 수 있습니다. 이 기사 시리즈 전체에서 우리는이 게임을 구축하기 위해 내가 간 패턴과 건축 선택에 대해 이야기 할 것입니다.

이제 우리는 핵심 구성 요소를 더 잘 이해 했으므로 게임에서 이러한 작업을 수행 할 수있는 방법을 살펴 보겠습니다.

페이저 3을 사용하여 자산을 추가하고 물리학을 활성화합니다

Phaser는 개방형 소스 캔버스 및 WebGL 렌더링 JavaScript 프레임 워크입니다. 우리는 Phaser 3을 사용하여 게임을 구축합니다. 내가 구체적으로 버전을 언급 한 이유는 구문을 포함하여 페이저 2와 3 사이에 많은 깨진 변화가 있기 때문입니다. 또한 미래에 게임에 멋진 새로운 기능을 추가하려는 경우, 무엇을 찾아야하는지 알아야합니다.

Phaser는 웹 페이지에서 캔버스에 자산을 표시하고 애니메이션 및 사운드 등을 재생할 수있을뿐만 아니라 내장 물리 엔진 (실제로 다중)과 함께 제공됩니다. 즉, 두 객체가 충돌 할 때해야 할 일과 같은 것들을 말할 수 있으며 충돌을 자동으로 주시하고 코드가 발생하면 코드를 실행할 수 있습니다.

Phaser 3에서 처음 작업 한 경우 추천 할 페이저를위한 정말 좋은 비디오 튜토리얼 시리즈가 있습니다.

PHASER3를 사용하여 TL; DR 버전에서 캔버스 크기, 스타일 속성, 게임 플레이에 포함 된 다양한 장면을 포함하여 캔버스 및 게임 자체에 대한 정보가있는 구성 객체를 지정할 수 있습니다. (곧 논의), 물리 엔진 유형 (페이저가 많음) 등.

그런 다음 구성 객체를 전달하여 새 게임을 시작합니다.

아직 코드를 보지 못했기 때문에 약간 혼란 스러울 수 있습니다. 다음에 해보자.

게임을 시작합니다

지금은 게임 화면으로 바로 가자. 나중에 출시 및 리더 보드 페이지에 대해 걱정할 것입니다. 우리 게임은 캔버스가 렌더링 된 HTML 페이지입니다. 이 캔버스는 실제 게임을 유지하고 실행합니다. 그래서 파일을 만들고 인덱스라고 부릅니다.HTML . 물건을 정리하기 위해 모든 HTML 파일을 Views라는 폴더에 저장하고 모든 클라이언트 측 JavaScript 파일을 Public이라는 폴더에 저장합니다 . 보기/색인을 시작합시다.기본 골격이있는 HTML 파일 :

보시다시피, 우리가 여기서하고있는 것은 곧 추가 할 CSS 및 JS 파일에 대한 링크뿐만 아니라 Phaser JS CDN에 대한 링크입니다. GitHub 프로젝트에서 직접 CSS를 복사 할 수 있습니다

그 외에는 HTML 본체 내에서 게임 컨테이너의 ID가있는 DIV가 있습니다 . 이것은 우리가 JavaScript를 통해 게임 캔버스를 추가 할 곳입니다.

공개 폴더에서 파일을 만들고 스크립트라고 부릅니다.JS와 우리가 이전에 대해 이야기 한 게임 구성 객체를 정의하여 시작합니다.

보시다시피, 캔버스의 크기와 배경색을 지정하는 것 외에도이 캔버스가 가야하는 위치 (부모가 식별) 와이에 참여하고 싶은 장면의 배열도 지정했습니다. 게임.

페이저는 ‘장면’의 개념을 사용하여 게임의 내용을 구성합니다. 장면을 언제라도 시각적으로 볼 수있는 것으로 생각할 수 있습니다. 게임을하는 동안 게임이 게임 객체 간의 다른 상호 작용으로 다른 배경으로 전환되면 아마도 이전에 본 것과는 별개의 장면 일 것입니다.

우리 게임의 경우 단일 장면을 가질 것입니다 (GamesCene에서 식별). 페이저의 장면은 페이저를 확장하는 클래스입니다.장면 클래스. 우리 게임에 대해 이것을 정의합시다. .

보시다시피,이 클래스에는 3 가지 빈 방법이 있습니다. 이들은 페이저와 함께 제공됩니다.장면 클래스. 이러한 각 방법은 아래 설명과 다른 기능을 갖습니다

1. Preload () 메소드는 어디에서나 필요한 모든 리소스를 가져 와서 게임에 추가하고 싶을 때 준비하고 준비합니다.
2. 게임이 처음 실행될 때 Create () 메소드가 한 번 실행됩니다. 이 방법에서 모든 변수 초기화, 애니메이션 정의 등을 추가 할 수 있습니다.
3. Update () 메소드는 게임이 시작되는 한 루프에서 지속적으로 실행되므로 게임 로직에 따라 게임 객체를 지속적으로 업데이트 할 수 있습니다. 우리는 아바타를 업데이트하고, 총알을 쏘고, 배를 옮기십시오..

자산을로드하고 애니메이션 생성

계속해서 자산을 지금로드합시다. preload () 메소드를 다음과 같이 정의하십시오

나는 원래 모든 자산을 버킷에 저장하고 CDN 링크로 검색 할 수있는 글리치 에서이 게임을 주최했습니다. 동일하게 사용할 수 있습니다. 그렇지 않으면 Amazon S3는 또 다른 인기있는 옵션입니다.

우리는 세 가지 유형의 아바타를 추가했습니다. 모두 흰색과 다른 세 가지 색상으로. 그 외에도, 우리는 또한 선박, 총알, 물론 플레이어가 죽을 때 폭발을위한 자산을 추가했습니다.

보시다시피, 우리는 이것을 사용하여 페이저에 스프리 시트 자산을로드했습니다.짐.Spritesheet () 및 세 가지 매개 변수를 보냈습니다

• 식별자
• 실제 파일로가는 길
• 파일의 크기 (픽셀).

우리는 또한 그것을 이미지라고 부를 수 있지만 곧 볼 수 있듯이 멋진 애니메이션을 할 수 없습니다.

피.에스. 아바타 색상을 구현하는 더 좋은 방법이 있습니다. . 나는 아직 얼마나 잘 모르겠지만, 그것을 알아 냈을 때 이것을 업데이트 할 것입니다 🙂

“폭발”스프라이트 시트를 검사하면 서로 옆에 배치 된 다양한 이미지임을 알 수 있습니다. 우리가 “애니메이션”을 일으키는 방식은 이러한 다른 이미지를 특정 속도로 수행하는 것입니다. 실제로 폭발이 발생하는 투명한 비디오 인 것처럼 보입니다.

Create () 메소드 에서이 폭발에 대한 애니메이션을 정의합니다

우리는 Phaser ‘s This를 사용했습니다.애니메이션.생성 () 메소드를 만들려면 애니메이션을 만듭니다. 이 방법은 다음을 수행합니다

• 나중에이 애니메이션을 재생하기 위해 사용할 키
• 이 애니메이션을 적용하려는 자산의 식별자를 사용하여 프레임을 생성하는 프레임
• 이 애니메이션을 재생하려는 속도를 지정하는 프레임 속도
• 애니메이션이 몇 번 실행되는지 지정하는 반복
• HideOnComplete 애니메이션이 완료된 후 애니메이션이있는 자산이 사라질 지 여부를 지정합니다

지금은 Update () 메소드에 아무것도 추가하지 않을 것입니다. 당신이 알면, 우리는 실제로 게임을 인스턴스화하지 않았으며,이 기사 시리즈의 후반부에서 그렇게 할 것입니다.

지금은 그게 다야. 2 부에서 실시간 앱의 네트워킹에 대해 알게 될 것입니다 – 실시간 앱의 네트워킹 프로토콜 평가

이 시리즈의 모든 기사 :

• 1 부 : 게임 개념 및 페이저 라이브러리 소개
• 2 부 : 실시간 앱의 네트워킹 프로토콜 평가
• 3 부 : 모든 플레이어를 동기화하기 위해 서버 측 코드 구현
• 파트 4 : 게임을 렌더링하기 위해 클라이언트 측 코드를 마무리

이 자습서와 관련된 별도의 릴리스는 확인하려면 Github에서 사용할 수 있습니다.

이 프로젝트의 최신 개발을 위해 Github 프로젝트를 따라갈 수도 있습니다.

궁금한 점이 있으시면 트위터 @srushtika에서 저에게 연락하십시오.

카테고리 : 멀티 플레이어 빌딩

Chimeraland는 PC (Windows) 및 Pixel Soft에서 개발 한 모바일 (Android/IOS) 용 Open World Sandbox Survival MMORPG (Mass Plays Mouthlayer Online Role Playing Game) 및 Level Infinite에 의해 게시 될 수 있습니다. 이 게임은 선사 시대의 신화적인 세계에서 설정됩니다 […]

Muck은 인기있는 노르웨이 개발자, 아티스트 및 YouTuber Dani (크랩 게임 및 Karlson을 만든 사람)의 무료* 싱글 플레이어 및 멀티 플레이어 생존 Roguelike Game For PC (Windows)입니다. Muck은 낮은 폴리이며, 캐주얼하지만 (매우) 생존의 도전적인 조화 (E.g. […]

샌드 박스는 활발한 개발 (Open Alpha)에서 PC (Windows and Mac) 용으로 무료로 플레이 할 수있는 무료 및 플레이를하는 플레이, 분산 및 커뮤니티 중심 게임 생태계 및 가상 세계이며 이더 리움 블록 체인 (탈 중앙과 유사)에 구축됩니다. 플레이어는 구축, 소유, 공유 및 […]

Core는 Crayta 및 Roblox와 유사한 무료 게임 컬렉션 및 게임 제작 플랫폼입니다. 다시 말해, 코어는 자유 게임의 다수이며, 당신이 쉽게 할 수있는 글로벌 개발자 커뮤니티가 디자인 한 세계를 탐색 할 수있는 세계입니다 […]

Crayta는 Core 및 Roblox와 유사한 PC 용 Unreal Engine 4에 구축 된 무료 공동 게임 제작 플랫폼 및 멀티 플레이어 아카데 게임 컬렉션입니다. 플레이어는 프로그래밍 경험에 관계없이 클라우드에서 함께 뛰어 들어 게임을 만들 수 있습니다. 에서 […]

와일드 테라 온라인. 일련의 작업을 완료하고 장비를 만들기 위해 천 늑대를 죽일 필요가 없습니다. 모든 것이 많다 […]

ARK : Survival Evolved (Mobile)는 무료 플레이* 모바일 액션-어드벤처 생존 게임입니다. 스튜디오 와일드 카드 (Android, iOS)의 스튜디오 와일드 카드 (Android, iOS)는 섬에 좌초 된 플레이어가 로밍에서 살아남아야하는 선사 시대 세계에 설정되어 있습니다. 공룡 및 기타 선사 시대 동물, 자연 위험, […]

Unberned는 신흥 MMO/멀티 플레이어 Apocalypse Survival 장르에서 PC (Windows, Mac 및 Linux) 용 좀비 테마 샌드 박스 생존 근접 및 슈터 게임을 무료로 재생할 수있는 무료입니다 (PVE에서 혼자 또는 쿠트에서 재생할 수는 있지만). […]에 집중하기보다는

Totemori는 재미 있고 혁신적인 무료 공유 공유 스크린 멀티 플레이어 Brawler Game입니다. Totemori는 최대 4 명의 플레이어를위한 로컬 대 및 협동 멀티 플레이어를 특징으로합니다. 친구와 대결하거나 봇에 대한 연습, […]

Galactic 정크 리그. 무엇이든 건설하십시오. 누구든지 싸워라. 우주에서. 문자 그대로 모양과 크기에 정크 선박을 만들고 […]의 창작물과 싸우십시오

Creativerse는 친구들과의 모험, 탐험 및 창의성에 대한 유쾌한 무료 무료 및 차세대 MMO 샌드 박스 게임입니다. 그리고 이제는 자유롭게 플레이 할 수 있습니다. 당신은 사나운 짐승들과 […]

. 펌핑 액션 샌드 박스에서 창의력을 발휘할 수있는 게임입니다! Gunscape는 블록 배치 인터페이스를 기반으로 사용하기 쉬운 도구를 제공하여 모든 사람이 이미 싱글 플레이어를 만들기 위해 익숙한 도구를 제공하여이를 수행합니다 […]

Trove는 PC (Windows, Mac), Xbox One, PS4 및 Nintendo Switch 용 Trion Worlds의 무료로 플레이 할 수있는 개방형 액션 어드벤처 복셀 MMORPG입니다. Trove는 퀘스트, 가슴 및 적으로 채워진 수많은 영역이 크고 작은 것입니다. 당신의 길을 탐험하고 창조하십시오 […]

Roblox는 사용자가 자신의 게임 및 레벨을 디자인하고 공유하고 다른 사용자가 만든 모든 유형의 게임을 디자인하고 공유하고 [[Core 및 Crayta와 유사한) 대량 플레이 레이어 온라인 비디오 게임 및 게임 제작 플랫폼으로 무료로 플레이 할 수 있습니다. …]