[게임 개발] '안경알 찾기 게임' 개발 로그

잃어버린 안경알 찾기 게임

p5.js 로 개발하였고, 실행파일은 electron 을 사용하여 빌드하였다.

 

게임 플레이 바로 가기: https://by1994.github.io/Lens-Finding-Game/

 

github repository: https://github.com/BY1994/Lens-Finding-Game

---

Node.js

 

node.js 설치 (공식 홈페이지 다운로드) 및 환경변수 설정 방법

node.js 설치 후 cmd 창에서 npm --version 이 안 먹을 때, 환경변수 설정을 해줘야한다.

https://hohoya33.tistory.com/117

https://cyberx.tistory.com/62

 

Node webkit

 

node webkit 설치 방법 (html -> exe 변환)

https://cyberx.tistory.com/62

홈페이지에 접속해서 다운받고, 그 경로를 환경변수에 추가해주면 된다.

위의 가이드를 따라하면 chrome 이 아닌 webkit을 통해서 열어볼 수도 있다.

(혹은 visual studio code 에서 live server 기능을 이용하면 CORS 문제를 회피할 수 있다)

 

// package.json 파일을 만들어야하는데, 아래와 같이 main 에 index.html 을 넣어서 만들었다.

{
    "name": "finding-game",
    "main": "index.html",
}

 

node webkit 빌드 방법

https://fronteer.kr/bbs/view/181

npm install -g node-webkit-builder // 설치
nwbuild // 폴더 들어가서 이것만 입력하면 실행됨

그러나 ReferenceError: primordials is not defined 에러가 발생하였고,

아래와 같은 해결책이 있지만 잘 동작하지 않아서 더 시도해보지 못하였다.

https://github.com/foundation/foundation-sites/issues/12181

 

node webkit 빌드할 때 window 결과 파일 icon 나오게 하는 방법

(빌드에 에러를 먹어서 아래는 못해봄)

https://github.com/nwjs/nw.js/issues/1078

 

Enigma Virtual Box (html -> exe 변환)

대신 아래 가이드를 참고하여 Enigma Virtual Box 를 다운받아보았으나, 실행 파일이 원하는 대로 만들어지지 않았다. (그냥 nw.exe 가 nw_boxed.exe 로 이름 바뀌기만 한 것 같았다..)

https://iteastory.com/m/116?category=740970 

https://web-inf.tistory.com/29

 

Electron.js

 

electron.js 및 builder 설치 (js -> exe 변환)

아래 명령어를 이용하여 설치한다.

npm install electron -g
npm install electron-builder -g

(맥에서 설치가 안 된 경우에는 sudo 옵션을 붙여주었다)
설치된 electron 버전 확인을 cmd 창에 아래와 같이 진행한다. (이 버전 정보를 package.json 에 넣을 것)

> electron --version
v15.3.0

 

electron 을 위한 package.json 작성

package.json 파일을 직접 만들어도 되고, npm init 을 프로젝트 폴더 내에서 입력하면 자동으로 생성된다.

빌드시에 none of the possible electron modules are installed 에러가 발생해서 electron 버전을 dependency 정보로 넣어주고 해결하였다. 이것도 직접 입력해도 되고, npm install --save-dev electron 을 하면 자동으로 입력이 된다.

 

electron dependency 관련 문제 (none of the possible electron modules are installed )

https://github.com/electron/electron-packager/issues/617

https://github.com/electron-userland/electron-builder/issues/3984

package.json 에 아래와 같은 내용 추가가 필요하다.

{
// 기존 내용 밑에 추가
  "devDependencies": {
      "electron": "7.0.0",
  }
}

 

--save-dev 옵션 설명

https://ingorae.tistory.com/1754

 

최종적으로 작성한 electron용 package.json

{
    "name": "finding-game",
    "version": "1.0.0",
    "description": "Hidden Pictures Game",
    "main": "main.js",
    "author": "BY1994",
    "icon": "assets/icon.ico",
    "devDependencies": {
        "electron": "15.3.0"
    },
    "build": {
        "win": {
          "icon": "assets/icon.ico"
        },
        "mac": {
            "target": ["default"],
            "icon": "assets/icon.icns"
        },
        "dmg": {
            "title": "FindingGame",
            "icon": "assets/icon.icns"
        }
    }
}

 

electron 빌드시 윈도우 앱 아이콘 설정 방법

package.json 에 build 밑에 win 밑에 icon을 추가한다.

https://stackoverflow.com/questions/47263056/set-electron-favicon-with-electron-builder

{
// 다른 기존 내용 밑에 추가
  "build": {
    "win": {
      "icon": "build/app.ico"
    }
  }
}

 

electron 빌드를 위한 추가 절차

main.js 라는 파일을 만들고, package.json 의 main 을 main.js 로 작성한다.

https://lts0606.tistory.com/261

// 내가 적용한 main.js 파일

const { app, BrowserWindow } = require('electron');

function createWindow () {  // 브라우저 창을 생성
  let win = new BrowserWindow({
    width: 850,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  //브라우저창이 읽어 올 파일 위치
  win.loadFile('./index.html')
}

app.on('ready', createWindow);

 

electron build

이제 빌드해주면 된다.

https://kauboy.tistory.com/34

electron-builder // 프로젝트 폴더 들어가서 이것만 입력해도 됨 현재 환경에 적합한 거로 알아서 만들어줌
electron-builder build -m // mac 용 빌드를 위한 명령어
electron-builder build --win --x64 // window 용 빌드 명령어

윈도우에서 아무 옵션도 주지 않았더니 알아서 윈도우용으로 빌드가 되었다.

build -m 은 윈도우에서는 빌드가 불가하다는 에러가 떠서, 맥에서 빌드했더니 가능했다. (맥에서는 윈도우용도 빌드가 가능하다...)

// 윈도우 환경에서는 아래와 같은 에러메세지가 보였다.
C:\Users\BY\Documents\Github\Hidden_Pictures_Game>electron-builder build -m
  • electron-builder  version=22.13.1 os=10.0.18363
  • loaded configuration  file=package.json ("build" field)
  • writing effective config  file=dist\builder-effective-config.yaml
  ⨯ Build for macOS is supported only on macOS, please see https://electron.build/multi-platform-build

 

electron 빌드 결과물

(1) 윈도우용 설치용 exe 파일

 

(2) 윈도우용 설치 없이 쓰는 exe 파일 (단, 이건 exe 단독으로 동작하는 게 아니다)

 

(3) 맥용 app 파일

실행시 개발자 정보가 없다고 뜨기 때문에 control + 버튼 클릭으로 열기를 해야한다.

 

(4) 맥용 app 설치를 위한 dmg 파일

 

저작권 정보

 

(1) 배경음악

음원제공 - BGM팩토리 (https://bgmfactory.com)

사용음원 - 봄 사랑

 

(2) 메인 페이지 목수 캐릭터 이미지

https://www.flaticon.com/free-icon/carpenter_1995595?term=carpenter&related_id=1995595

 

(3) 게임 배경 (isometric) 에 사용된 배경 및 아이템 정보

https://www.freepik.com/free-vector/modern-woodworking-machinery-isometric-set_4358888.htm#page=1&position=2&from_view=detail#query=machine%20isometric&position=2&from_view=detail#position=2

 

https://www.freepik.com/free-vector/industrial-machinery-flowchart-with-bending-machine-symbols-isometric_6839982.htm#page=1&position=5&from_view=detail#&position=5&from_view=detail

 

https://www.freepik.com/free-vector/furniture-production-isometric-colored-flowchart-with-design-assembly_16608143.htm#page=1&position=5&from_view=detail#&position=5&from_view=detail

 

https://www.vecteezy.com/vector-art/1266011-meeting-room-isometric-composition

 

https://www.vecteezy.com/vector-art/3728771-constructions-tools-drill-hammer-paintbrush-measuring-builders-equipment-isometric-illustration-hammer-screwdriver-drill-equipment

 

위의 파일 포함하여 게임에 사용하기 위해 만들어놓은 이미지 모음

assets_for_game.vol1.egg

10.00MB

assets_for_game.vol2.egg

10.00MB

assets_for_game.vol3.egg

10.00MB

assets_for_game.vol4.egg

10.00MB

assets_for_game.vol5.egg

10.00MB

assets_for_game.vol6.egg

7.14MB

 

끝