Javascirpt 공부하기 - Agar.io (Web Game) Bot 설치 & 커스터마이징

사장님 소개로 Agar.io라는 게임을 해보았습니다.

Javascript와 WebSocket을 이용한 웹게임인데, 간단하면서도 중독성 있는 게임으로 시간가는줄 모르고 하게되었네요.

하지만, 워낙 게임치 인데다가 나이까지 40줄에 들어서니 순발력도 떨어져서 살아남는 것이 쉽지가 않더군요.

그래서 Agar.io Bot이라는 것을 찾아서 설치해 보았습니다.

혼자서 다른 유저들로부터 잘 도망다니면서 쑥쑥 크더군요.그런데, Bot이 자동으로 알아서 게임하는걸 보고만 있자니.... 이건 내가 게임을 하고 있는건지, 게임이 나를 가지고 노는 건지...zzzzzz

그래서 자동사냥 위주의 모바일 게임에서 힌트를 얻어 최소한의 사용자 액션을 Bot에 추가 해보기로 했습니다.

1.Agar.io와 Bot에 대해서

Agar.io(http://agar.io)는 자신보다 큰 세포(세포인지 뭔지 모르겠지만 그냥 편하게 세포하고 합시다.)는 피해 다니면서 작은 세포를 먹어서 자신의 몸집을 키워나가는 게임 입니다.

클라이언트는 모두 javascript로 되어 있으며, 서버와는 WebSocket을 통해 실시간으로 통신하는 것으로 보입니다. 그래서 당연히 Bot도 모두 Javascript로 되어 있으며, 소스도 공개되어 있어서 누구나 수정 가능 합니다.

Agar.io는 그냥 보기에는 굉장히 간단한 게임인 것처럼 보이지만, 게임 감각이 비루하거나 순발력이 심히 떨어지는 사람들은 다른 사람들의 먹이 신세를 벋어나지 못하는 어찌보면 참 슬픈 게임입니다.

Agar.io Bot은 이러한 슬픈 몸뚱이를 가진 사람들을 위한 자동사냥 프로그램입니다. 혼자서 알아서 잘 피해 다니면서 알아서 잘 큽니다.

물론 완벽하지는 않습니다. 가끔 죽음을 피할 수 없는 상황에 놓이기도 하고 어이없는 행동(버그?)으로 죽기도 합니다. 결국 상위랭커로 가기 위해서는 사람의 손길이 필요한 것 같습니다.

그리고 Bot의 최대 단점은..... 당연히 직접 게임을 하는 것이 아니기 때문에 금방 흥미가 떨어집니다.

Agar.io Bot의 소스는 GitHub에 공개되어 있습니다.

2. 추가할 기능에 대해서

자동사냥을 기본으로 하는 요즘 모바일 게임을 보면 대부분의 게임 플레이는 자동사냥 봇이 하면서 사용자는 지루하지 않게 스킬 버튼만 눌러주는 방식이 유행인것 같습니다.

모바일 환경의 특성 때문에 케릭터를 직접 컨트롤하는게 어렵기도 하고 피곤하기도 해서 나온 새로운 게임 플레이 패턴인 듯 합니다.

Agar.io Bot에도 이런 방식을 도입해 보도록 하죠. 조금이나마 다이나믹한 플레이를 위해~~~

우선, Bot의 움직임을 간접적으로 제어할 수 있는 버튼을 하나 추가해 보기로 하죠.

Bot의 기본 움직임을 "수비적"이라고 정하고 여기에 "공격적"으로 움직일 수 있는 옵션을 하나 추가하고, 버튼하나를 추가해서 클릭할 때마다 "수비적 움직임"과 "공격적 움직임"이 서로 스위칭 되도록 해보겠습니다.

[그림 1] Agar.io Original

[그림 2] Agar.io With Bot

3. 1단계 - Agar.io Bot 설치하기

(1) 사용자 스크립트 실행을 위한 브라우저 확장 프로그램 설치

Agar.io Bot을 설치하기 위해서는 브라우저에 추가앱을 설치해야 합니다.

[Firefox를 사용할 경우]

Greasemonkey 설치

https://addons.mozilla.org/ko/firefox/addon/greasemonkey/

위의 링크를 통해서 Firefox의 Add-on인 Greasemonkey를 설치합니다.

[Chrome을 사용할 경우]

Tampermonkey 설치

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ko

위의 링크를 통해서 Chrome의 확장프로그램인 Tampermonkey를 설치합니다.

참고로 Greasemonkey나 Tampermonkey라는 프로그램은 원하는 웹페이지가 로딩된 후 사용자가 작성한 스크립트 파일이 실행되도록 해주는 Plug-in 프로그램 입니다. (자세한건 구글신에게...)

이 다음부터는 Firefox나 Chrome 모두 진행 과정은 거의 비슷하기 때문에 Firefox를 기준으로 설명해 드리도록 하겠습니다. (IE는 모릅니다. Agar.io Bot 은 Firefox, Chrome, Opera만 지원하는 것 같습니다. 죄송)

사용자 스크립트를 실행시킬수 있는 프로그램이 브라우저에 설치가 되었다면, 이 다음 단계는 Bot 소스를 설치하는 단계입니다.

(2) Agar.io Bot 설치

https://github.com/Apostolique/Agar.io-bot

위의 링크로 들어가면, Agar.io Bot의 자바스크립트 소스가 있는 GitHub 사이트가 나옵니다.

Bot을 실행하기 위해서는 "bot.user.js" 파일과 "launcher.user.js" 파일이 필요합니다.

먼저, "bot.user.js" 파일을 클릭하면 전체 소스가 출력되며, 소스 상단에 있는 3개의 버튼중 "Raw"버튼을 클릭하면 (1)에서 설치한 확장프로그램의 스크립트 설치화면이 출력됩니다.

"install" 버튼을 클릭하면 "bot.user.js" 스크립트 설치가 완료 됩니다.

"launcher.user.js" 스크립트도 같은 방식으로 설치 합니다.

참고로,

"bot.user.js" 파일은 bot의 자동사냥을 위한 공식, 행동 규칙 등이 정의 되어 있는 파일이고, "launcher.user.js"파일은 agar.io의 원래 스크립트 파일에 "bot.user.js"을 이용해 실제 Bot을 띄워줘는 스크립트를 추가한 파일 입니다.

자, 이제 두개의 파일의 설치를 마쳤으면, http://agar.io에 접속하면 서버 접속부터 사냥 까지 모두 자동으로 진행되는 것을 확인 하실 수 있습니다. (닉네임까지도 봇에 정해진 닉네임으로 플레이가 되버립니다.)

4. 2단계 - Agar.io Bot에 새로운 기능 추가하기

새로운 기능을 추가하기 위해서는 (2)에서 설치한 스크립트 파일을 수정해야 합니다.

스크립트 파일을 수정할려면 스크립트를 편집기에 띄워야 겠죠. 스크립트를 편집기에 띄우는 방법은 다음과 같습니다.

[Firefox]

부가기능 => User Scripts(화면 왼쪽 메뉴) => Launcher의 환경설정 => 이 유저 스크립트 편집 클릭(화면 하단)

[Chrome]

Toolbar에서 Tampermonkey 아이콘 클릭 => Dashboard => Launcher 클릭

이제 launcher.user.js 스크립트 파일이 편집기에 출력이 되었을겁니다.

먼저, 코드를 추가할 위치를 찾아야 합니다.

console.log("Running Bot Launcher!");
(function (h, f) {

// 인자 변수인 h, f는 사람들 마다 다를 수 있습니다.

// 원본 agar.io 의 소스는 자바스크립트 압축 프로그램을 거쳐 나온 소스다 보니

// 변수명과 함수명은 1~2글자의 알파벳으로 치환되어 있고, 이마저도 버전따라 다를 수 있습니다.

// ======= 이부분에 추가 코드를 삽입하시면 됩니다. ==============

.......

다음의 라인을 추가해 주세요.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // by yam-Embian start
  var toggleDefence = true;   
  window.getToggleDefence = function() {
    return toggleDefence;
  }
  var toolbox = window.jQuery("<div id='toolbox'></div>");
  toolbox.css({"position":"fixed","width":"100%","height":"90px","bottom":"0px","text-align":"right","padding":"10px"});
  window.jQuery("body").append(toolbox);
 
  var offBtn = window.jQuery("<input type='button' id='offBtn' value='공격적으로 플레이하기' />");
  offBtn.css({"width":"150px","height":"70px"});
 
  offBtn.click(function(){
    toggleDefence = !toggleDefence;
    window.setDarkTheme(!getDarkBool());
    if (toggleDefence) {
        offBtn.val("공격적으로 플레이하기");
    }
    else {
        offBtn.val("수비적으로 플레이하기");
    }
  });
  toolbox.append(offBtn);
  // by yam-Embian end
  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

사실 원본 소스를 모두 분석할 수 있으면 참 좋겠지만, agar.io의 원본 소스는 압축프로그램을 거쳐 나온 소스이기 때문에 변수명과 함수명이 모두 의미 없는 알파벳으로 이루어져 있어서 분석하는게 쉽지 않습니다.

하지만, 시간이 된다면 천천히 분석해 가면서 변수명과 함수명을 의미있는 나만의 값으로 치환해 나가는 작업을 해보고 이것도 따로 포스팅 해보고 싶은 욕심이 있습니다......만 할 수 있을 지는 잘 모르겠습니다.

위의 코드를 추가하셨다면 다시 한번 agar.io에 접속해 보세요.

화면 하단에 추가 기능 활성화를 위한 버튼이 출력된것을 보실 수 있습니다. 한번 클릭해 보세요. 화면 테마가 Night 버전으로 바뀌게 됩니다. 오호~~

아직은 Bot의 움직임을 바꿔주는 코드가 들어가지 않아서 테마만 바뀌게 됩니다.

처음에는 움직임 규칙이 바뀔때마다 큰 글씨로 바뀐 규칙을 출력해 줄려고 했으나, 귀찮아서 아에 테마를 바꿔주는 방식으로 수정했습니다.

테마를 바꿔주는 코드는 다음 라인입니다.

window.setDarkTheme(!getDarkBool());

움직임 규칙이 바뀔때 테마를 바꾸는게 아니라 다른 액션을 추하고 싶으시면 저 라인 대신 다른 코드를 직접 적으시면 됩니다.

이제 실제 움직임 규칙을 적용해 보도록 하겠습니다.

세포의 실제 움직임을 결정하는 코드는 "bot.user.js" 파일에 있습니다.

위에 launcher.user.js파일을 열었던것 처럼 bot.user.js 파일을 열어주세요.

수정할 곳을 딱 한군데 입니다.

코드를 추가할 위치는 findDestination 함수입니다.

"function findDestination"으로 검색하시면 한방에 찾으실 수 있습니다.

function findDestination() {
  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // by yam-Embian
  splitDistance = f.getToggleDefence() ? 700: 20;
  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  ...
  ...

agar.io bot은 자신을 공격할 수 있는 세포들은 + 710 크기 만큼의 영향력 범위를 추가로 가지도록 해두었습니다.

[그림 3] 나를 공격 가능한 세포의 영향력 범위

그림을 보시면 여러개의 원이 어지럽게 그려진것을 보실 수 있는데, 초록색 운은 내 세포가 도망갈 수 있는 방향을 나타냅니다.

초록색 반대쪽에 있는 주황색 반원은 공격가능한 세포의 범위에 들어왔을 나타나며, 주황색 반원이 없어질때까지 도망을 가게 되어 있습니다.

왼쪽에 태극기 세포가 보이실 겁니다. 태극기 세포 주위에 연한 주황색 원이 있는데, 이 세포는 현재 분열을 할 수 없는 상태로 공격 범위가 주황색 원까지라는 말입니다.(이게 버그인지는 모르겠지만, 가끔 주황색 원을 가지는 세포가 분열해서 저를 먹는 경우도 있었습니다.)

화면에 보이는 빨간색 원이 분열 가능한 세포의 공격가능 범위 입니다. 실제 세포는 보이지 않지만 그 공격 범위에 제 세포가 들어가서 피하는 모습입니다.

위에 추가한 코드는 결국 공격가능 세포의 공격력 범위를 조작하는 코드입니다.

실제로 공격범위에 들어갔다고 해서 모든 세포들이 내 세포를 공격하는 것도 아닌데, 큰 세포들 주위에 있으면, 공격범위에서 벋어나기 위해 회피 기동만 하다가 오히려 코너에 몰려서 죽는 경우를 자주 보게 됩니다.

그래서 정말 피해야 할 상황인지 아닌지 플레이어가 직접 판단해서 결정할 수 있도록 세포들의 공격 범위를 조작할 수 있는 코드를 추가한 것입니다.

이제 필요한 코드 수정은 모드 끝났습니다.

다시 한번 플레이를 해볼까요?

[그림 4] 공격적인 모드를 선택했을 때 화면

공격적인 모드일 떄 화면을 보시면 제 세포 뿐만 아니라 상대방 세포 주위의 원이 아직 작아 진것을 보실 수 있습니다.

공격적인 모드 일때는 상대방 세포가 정말 가까이 접근하기 전까지는 회피 기동을 하지 않고 먹이를 먹는데 집중하게 됩니다.

"수비적으로 플레이하기" 버튼을 클릭하면 [그림 3]처럼 화면 모드나 하얀색으로 다시 바뀌고 원래 방식대로 세포가 움직입니다.

기본은 공격모드로 해서 플레이 하다가 위험할 것 같으면 수비모드로 바꾸는 등 다이나믹한 플레이가 가능해 졌습니다. ㅎㅎㅎ

5. 3단계 - 부가 요소 추가하기

위에 내용까지만 따라 하셔도 충분히 재미 있으실 것 같은데, 그래도 재미를 위해 몇가지 요소를 더 추가해 보도록 하겠습니다.

첫번째는 내 세포의 이름 입니다.

Bot은 무조건 닉네임이 "NotReallyBot"으로 고정이 되어 있습니다. (이름참 넌센스 합니다.ㅡㅡ;;)

Bot의 닉네임을 정해주는 파일은 launcher.user.js 파일 입니다.

"NotReallyBot"이라고 검색하면 딱 한군데 있습니다. 원하는 닉네임으로 수정해 주시면 됩니다.

//names = ["NotReallyABot"],

names = ["배고파 배고파"],

두번째는 "분열 가능 세포 함수 무시하기" 입니다.

앞에서 잠깐 설명 드렸었는데, 세포중 어떤 세포는 일반적인 공격범위를 가지고 있지 않은 세포들이 보이실 겁니다.(노란색 원) 소스 코드를 보면 canSplit 함수에서 false를 리턴받은 세포들은 일정한 크기의 다른 공격범위를 가지게 되는데요.

이게 좀 애매한 부분이 있습니다. 실제로 플레이 해보시면 이런 노란색 원의 공격범위를 가지는 세포들이 실제로 분열을 해서 우리의 세포를 먹어버리는 경우를 자주 격게 되는데요.

그래서 아에 canSplit이 항상 true를 리턴하도록 수정을 해 보았더니, 실제로 생존률이 높아졌습니다.(통계를 내서 내린 결론은 아닙니다.)

bot.user.js파일에서 canSplit 함수를 찾아 항상 false를 리턴하도록수정하시면 됩니다.

function canSplit(player1, player2) {
      return true;
      //return compareSize(player1, player2, 2.30) && !compareSize(player1, player2, 9);
}

지금까지 agar.io bot에 새로운 기능을 추가하는 방법에 대해서 알아보았습니다.

사실 제목에 "공부하기"라고 적어놓고는 공부하고는 거리가 먼 게임 이야기만 했는데, 억지로 공부하는 것보다는 이렇게 재미있는 주제를 가지고 조금씩 지식을 넓혀 가는 것도 좋은 방법이지 않을까 생각합니다.

다음에 시간이 되면 앞에서 말씀 드렸던 agar.io 원본 소스 분석에 대한 글도 적어보도록 하죠. 감사합니다.