본문으로 이동

리버티게임:자바스크립트 게임 만들기

리버티게임, 모두가 만들어가는 자유로운 게임
리버티게임의 정책과 지침
대원칙
가이드라인
절차
사용자

리버티게임의 모든 정책과 지침 보기

단축:
버:JS,
버:자스,
버:스크립트,
버:자바스크립트


그들만의 위키백과 버전 문서입니다.
자바스크립트
그들이 가꾸어 나가는 나무위키 버전 문서입니다.
JavaScript

게임을 만들다가 위키 엔진의 한계를 느끼셨나요? 플래시 없이 돈슨 수준의 게임을 만들고 싶으신가요? 그렇다면 자바스크립트를 만나보세요! 자바스크립트 하나로 미디어위키와 웹의 모든 기능을 활용하실 수 있으며, 심지어는 돈슨은 물론이고 당신이 아는 수많은 게임에서도 활용하고 있는 상용 엔진도 지원합니다! 정말 놀랍지 않나요? 자바스크립트를 사용해 리버티게임에서 상상을 초월하는 어마어마한 게임을 한번 만들어 보세요!

게임 만들기의 기초[원본 편집]

이 부분의 본문은 리버티게임:게임 만들기입니다.

로딩 시스템[원본 편집]

리버티게임에서 자바스크립트를 로드하는 시스템은 여러 가지가 있습니다. 실질적으로 게임에 활용할 수 있는 시스템은 굵게 표시하였습니다.

다음은 미디어위키의 시스템이거나 이를 확장한 시스템으로, 이들을 통해 실행되는 스크립트는 async, await, import, export 등 ES2017 이상의 최신 자바스크립트 문법을 지원하지 않습니다.

시스템 인터페이스와 소도구는 관리자에게 등록 요청을 해야하고, 사용자 스크립트는 스크립트를 실행하기 위해 스스로 스크립트를 작성하거나 복붙해와야 하므로 실질적으로 게임에 활용하기는 어렵습니다. 하지만, 게임이 아닌 게임에 활용될 미디어위키 및 리버티게임 전용 라이브러리를 만들려는 경우에는 적합합니다. 다른 스크립트 로딩 틀 역시 이러한 시스템으로 로딩됩니다.

다음은 스크립트를 미디어위키 시스템을 활용하지 않고 불러오는 시스템으로, 이들을 통해 실행되는 스크립트는 브라우저에서 지원하는 모든 자바스크립트 문법을 지원합니다.

개발자 도구[원본 편집]

대부분의 데스크톱 브라우저에는 F12를 눌러 개발자 도구를 띄울 수 있습니다. 개발자 도구에는 현재 화면에 존재하는 HTML 요소와 CSS 스타일을 실시간으로 확인할 수 있고, 원본 소스 코드를 확인할 수 있으며 자바스크립트 코드를 직접 실행해볼 수 있는 콘솔이 있습니다.

모바일 브라우저에서는 개발자 도구를 제공하지 않지만, PC에 연결하여 모바일 인터넷 창의 개발자 도구를 실행할 수 있습니다.[1] 또는 특수:환경설정의 소도구 탭에서 Eruda 개발자 도구 소도구를 활성화할 수 있습니다. 이 소도구를 활성화하면 사이트 맨 아래에 개발자 도구 버튼이 생기고, 이를 누르면 오른쪽 아래에 아이콘이 뜹니다. 아이콘을 누르면 모바일에서도 사용할 수 있는 개발자 도구가 나옵니다. 이 도구도 HTML과 CSS를 확인하고 자바스크립트를 실행해 볼 수 있습니다.

  1. 브라우저 별 모바일 원격 개발자 도구 가이드: Chrome (Android Chromium) / Firefox Android (영문) / Safari (Apple 기기) (영문)

사용자 스크립트[원본 편집]

미디어위키 시스템이나 플러그인 등의 로딩 시스템을 통해서 스크립트를 페이지 로드와 함께 실행하는 것과 페이지가 모두 로딩되고 나서 개발자 도구를 통해 실행하는 것은 서로 다른 결과가 나올 수 있습니다. 특히 틀:플러그인틀:PluginX가 아닙니다.소도구, 또는 미디어위키: 이름공간의 인터페이스 문서, 사용자 스크립트 문서와 같이 미디어위키의 시스템을 통해 실행되는 스크립트는 async, await, import, export 등 ES2017 이상의 최신 자바스크립트 문법이 지원되지 않습니다. 따라서 실제 미디어위키 환경과 유사한 환경이면서 자기 자신에게만 영향을 주는 사용자 스크립트 문서를 활용해 미리 테스트해보는 것이 권장됩니다.

사용자 스크립트는 .js 확장자로 끝나는 사용자 하위 문서예) 사용자:너/common.js로, 다음과 같은 종류가 있습니다.

  • /common.js: 모든 스킨에서 동작하는 스크립트로, 특별하지 않은 일반적인 상황에서는 이 문서를 사용합니다.
  • /(스킨명).js: 특정한 스킨에서만 동작되는 스크립트입니다. 리버티게임에서 사용 가능한 스킨의 종류는 리버티게임:스킨을 참고하세요.

미디어위키 인터페이스[원본 편집]

미디어위키에서는 미디어위키의 여러 기능을 자바스크립트로 활용하고 조정할 수 있도록 자바스크립트 인터페이스를 제공하고 있습니다. 대부분 mw 객체에 속해있습니다. 자세한 내용은 미디어위키 자바스크립트 코드 설명문서를 참고하세요.

모듈[원본 편집]

스크립트를 만들면서 npm, GitHub 등에서 배포되는 라이브러리가 필요할 수도 있습니다. 리버티게임에서 이러한 라이브러리를 가져오는 방법은 여러 가지가 있습니다.

ResourceLoader[원본 편집]

먼저, 미디어위키의 ResourceLoader 시스템을 활용하는 방법이 있습니다. 먼저 리버티게임에서 지금 당장 쓸 수 있는 라이브러리가 어떤 것이 있는지 확인해 보세요. jQueryjQuery는 mw.loader.using 함수를 통한 로딩 과정 없이도 바로 사용할 수 있습니다., Vue.js 등 생각보다 다양한 라이브러리가 이미 제공되고 있습니다. 리버티게임의 몇몇 소도구도 ResourceLoader 시스템을 통해 여러 기능을 제공합니다. 소도구는 이름 앞에 ext.gadget. 접두어가 붙습니다. 자바스크립트 콘솔 창mw.loader.moduleRegistry를 쳐서 리버티게임에서 지금 사용 가능한 모듈 목록을 확인해 볼 수 있습니다.

만약 필요한 라이브러리가 없는 경우, 활동적인 시스템 관리자에게 라이브러리 설치를 요청할 수 있습니다.

필요한 라이브러리가 이미 있거나 설치가 되었다면 mw.loader.using 함수를 통해 해당 라이브러리를 불러올 수 있습니다. 함수의 첫번째 인자에 필요한 라이브러리의 이름을 문자열로 넣으면 됩니다. 필요한 라이브러리가 여러개라면 배열로 묶어 넣을 수 있습니다. Promise를 반환하므로 .then 메소드를 통해 로딩이 될 때까지 기다렸다가 실행할 코드를 콜백으로 작성할 수 있습니다. 콜백의 인자로 CommonJS 시스템의node.js에서 기본으로 사용되는 모듈 시스템을 말합니다. 미디어위키:Common.js사용자:너/common.js와는 다르다! require 함수를 반환하므로 이 함수를 통해 라이브러리에서 내보낸 값을 사용할 수 있습니다. require 함수의 인자에 라이브러리 이름을 문자열로 넣으면 해당 라이브러리에서 내보낸 값이 반환됩니다.

완성된 코드는 이런 형태가 될겁니다.

mw.loader.using('vue').then((require) => {
    const Vue = require('vue');
    
    // ...
});

CDN[원본 편집]

또는 unpkg, JSDelivr와 같은 CDN 서비스를 이용할 수 있습니다. 이러한 CDN 서비스를 사용하면 npm의 라이브러리를 관리단의 허가 없이도 바로 활용할 수 있습니다. 단, CORS 정책에 따라 리버티게임에서는 앞서 언급한 두 CDN 서비스만 허용합니다.

다만, <script> 태그를 바로 사용할 수는 없으므로 약간 다른 방법을 사용해야 합니다.

전역 스코프에 값을 등록하는 IIFE나 UMD 모듈은 mw.loader.getScript$.getScript 함수를 통해서 불러올 수 있습니다. 사용법은 둘 다 비슷하며, 인자에 URL을 문자열로 넣기만 하면 됩니다. Promise를 반환하므로 .then 메소드를 통해 로딩이 될때까지 기다렸다가 실행할 코드를 콜백으로 작성할 수 있습니다. 완성된 코드는 이런 형태가 될겁니다.

mw.loader.getScript('https://cdn.jsdelivr.net/npm/eruda').then(() => {
    // ...
});

ES 모듈은 일반적으로 정적 import 문법을 사용하지만, 리버티게임의 로딩 시스템 중 이를 지원하는 시스템은 없습니다. 그 대신 동적 import 함수는 이용할 수 있습니다. 이 함수 역시 Promise를 반환하므로 .then 메소드를 통해 로딩이 될때까지 기다렸다가 실행할 코드를 콜백으로 작성할 수 있습니다. then 콜백을 받을 때 인자로 내보내진 메소드나 상수, 객체 등을 이용할 수 있습니다. 틀:PluginX의 경우 다음과 같이 사용할 수 있습니다.

import('https://cdn.jsdelivr.net/npm/three@0.173.0/+esm').then((THREE) => {
    // ...
});

하지만 플러그인, 소도구, common.js 등 미디어위키 기반 로딩 시스템에서는 바로 사용하면 미디어위키의 자바스크립트 파서에 오류가 발생하므로 약간의 우회가 필요합니다. new Function('module', 'import(module)') 와 같이 Function 생성자 함수를 사용해 이 제한을 우회할 수 있습니다. 동적으로 생성된 함수의 인자에 스크립트 URL을 문자열로 넣으면 됩니다. 완성된 코드는 이런 형태가 될겁니다.

const importFunc = new Function('module', 'import(module)');
importFunc('https://cdn.jsdelivr.net/npm/three@0.173.0/+esm').then((THREE) => {
    // ...
});

위키 문서[원본 편집]

export, import 문법을 사용하는 ES 모듈 형태의 자바스크립트 코드를 위키 문서로 저장한 뒤, 이를 다른 자바스크립트 코드에서 불러올 수 있습니다. 단, 미디어위키 이름공간이나 사용자 문서에 저장한 문서만 가능합니다. 미디어위키 이름공간은 관리자만 사용할 수 있으므로 자바스크립트 문서는 사용자 문서에 작성하시기 바랍니다. 플러그인 등 로딩 시스템에서 직접 실행되는 코드는 CDN에서 불러올 때와 같이 동적 import 함수를 통해서 불러올 수 있으며, 정적 import 문법은 사용할 수 없습니다. 여기서 인자에는 mw.util.getURL를 사용해 mw.util.getURL('(문서 이름)', {action: 'raw', ctype: 'text/javascript'})와 같은 형태로 넣으면 됩니다. 여기서 자바스크립트 문서의 제목을 (문서 이름) 부분에 넣어 주세요. ES 모듈 형식의 문서가 아니라면 mw.loader.getScript$.getScript를 대신 사용해도 되지만 동적 import 함수를 그대로 써도 큰 문제는 없습니다.

틀:PluginX의 경우 다음과 같이 사용할 수 있습니다.

import(mw.util.getUrl('사용자:너/모듈.js', {action: 'raw', ctype: 'text/javascript'})).then(({foo, bar}) => {
    // ...
});

플러그인, 소도구, common.js 등 미디어위키 기반 로딩 시스템에서는 바로 사용하면 미디어위키의 자바스크립트 파서에 오류가 발생하므로 약간의 우회가 필요합니다. new Function('module', 'import(module)')와 같이 Function 생성자 함수를 사용해 이 제한을 우회할 수 있습니다. ES 모듈 문서가 아니라면 mw.loader.getScript$.getScript를 대신 사용해도 좋습니다. 완성된 코드는 이런 형태가 될겁니다.

const importFunc = new Function('module', 'import(module)');
importFunc(mw.util.getUrl('사용자:너/모듈.js', {action: 'raw', ctype: 'text/javascript'})).then(({foo, bar}) => {
    // ...
});

다른 코드에서 불러와지는 모듈 문서에서는 import, export 문법을 포함한 모든 자바스크립트 문법을 이용할 수 있습니다. 다른 모듈을 불러올 때는 정적 import 문법을, 이 모듈을 불러오는 다른 스크립트에 내보낼 함수, 클래스, 상수 등은 export 문법을 사용할 수 있습니다. 경로에는 mw.util.getUrl과 같은 함수는 사용할 수 없으며, /index.php?title=(문서 이름)&action=raw&ctype=text/javascript 이나 /wiki/(문서 이름)?action=raw&ctype=text/javascript와 같이 입력해야 합니다. 여기서 (문서 이름) 부분을 모듈을 저장한 자바스크립트 문서의 제목으로 바꾸면 됩니다. 모듈 문서는 다음과 같은 형태가 될겁니다.

import {foo} from '/index.php?title=사용자:너/다른모듈.js&action=raw&ctype=text/javascript';

export default function bar() {
    // ...
}

export {foo};

타입스크립트[원본 편집]

타입스크립트를 활용해서 스크립트를 만들고 있나요? 그런 당신을 위해 리버티게임과 미디어위키의 타입을 미리 정의해둔 패키지가 있습니다!

  • 리버티게임 타입: 별도의 패키지가 없는 리버티게임의 전역 변수/상수 및 함수와 소도구 모듈의 타입입니다. 후술할 미디어위키 타입과 jQuery 타입이 포함되어 있습니다.
  • 미디어위키 타입: 미디어위키의 자바스크립트 전역 변수/상수 및 함수의 타입입니다. jQuery 타입이 포함되어 있습니다.

도보시오[원본 편집]

  • mw:Manual:Coding conventions/JavaScript: 미디어위키 코어나 확장 기능에서 준수해야 하는 자바스크립트 코딩 규칙입니다. 리버티게임에서는 무조건 준수할 필요는 없지만, 참고하면 더 좋은 스크립트를 만들 수 있습니다.