Tag Archives: Homebrew

Cocos2d-X 웹게임 개발하기 – Mac에서 개발환경 구축하기

웹기반 게임을 개발하기 위해서는 다양한 게임 엔진을 사용하는것을 고려해 볼 수 있습니다. 이 문서에서는 Cocos2d-X 를 이용하여 게임을 WEBGL 또는 CANVAS 환경에서 동작하는 게임을 만드는 과정을 설명하려 합니다. 먼저 개발 환경을 설정 할 것이며 Homebrew를 사용하는 맥 환경을 가정할 것입니다. 또한 개발 툴로는 IntelliJ를 사용할 것입니다.

1. JAVA 설치

우리는 Cocos2d-X를 사용하여 웹게임만을 개발할 생각이지만 JSB(Javascript Binding)이라는 기술을 사용하여 JS로 만들어진 게임 코드를 이용하여 iOS/Android 등과 같은 네이티브 게임을 빌드할 수 있습니다. 이러한 준비를 위하여 필요한 모든 것을 설치해 보도록 하겠습니다.

Homebrew를 사용하면 최신버전의 Java를 손쉽게 설치할 수 있습니다.

$ brew cask install java

위와 같은 명령을 사용하여 최신 버전의 Java를 설치할 수 있으며 설치 후 .bash_profile에 JAVA_HOME 환경 변수를 추가해주도록 합시다.

$ echo "export JAVA_HOME=`/usr/libexec/java_home`" >> ~/.bash_profile

2. Android SDK/NDK 설치

기존에 Android Studio를 활용중이라면 사용중인 SDK를 그대로 사용하셔도 무방합니다만 여기서는 Homebrew를 이용하여 SDK와 NDK를 설치하는 방법을 적어보겠습니다.

$ brew install android-sdk
$ brew install android-ndk

설치가 완료되면 다음의 명령을 사용하여 Android SDK를 업데이트할 수 있습니다.

$ android

이후에 뜨는 화면에서 자신이 빌드시에 사용하고자 하는 필요한 것들을 선택하여 설치를 진행하도록 합시다.

3. Python 및 Ant 설치

마찬가지로 Homebrew를 사용하여 Python과 Ant를 설치해보겠습니다.

$ brew install python
$ brew install ant

다음의 명령을 사용하여 Ant의 환경 변수를 추가해주도록 하겠습니다.

$ echo "export ANT_ROOT="/usr/local/opt/ant/bin"" >> ~/.bash_profile

4. Cocos2d-X 다운로드 및 설치

[Cocos2d-X 공식홈페이지]에 방문하면 최신버전의 Cocos2d-X 안정화 버전을 다운로드 받을 수 있습니다.

이 글을 작성할 시점에는 3.14.1 버전이 최신버전이네요. 다운로드 받도록 하겠습니다.

다운로드가 완료되었다면 압축을 풀고 적절히 원하는 위치에 옮겨놓도록 하겠습니다. 저는 홈디렉토리 밑에 cocos2d-x 디렉토리에 옮겨두었습니다. 이후에 셋업 명령을 실행합니다.

$ ./setup.py 

Setting up cocos2d-x...
->Check environment variable COCOS_CONSOLE_ROOT
  ->Search for environment variable COCOS_CONSOLE_ROOT...
    ->COCOS_CONSOLE_ROOT not found

  -> Add COCOS_CONSOLE_ROOT environment variable...
    ->Added COCOS_CONSOLE_ROOT=/Users/dennis/cocos2d-x/tools/cocos2d-console/bin

->Check environment variable COCOS_X_ROOT
  ->Search for environment variable COCOS_X_ROOT...
    ->COCOS_X_ROOT not found

  -> Add COCOS_X_ROOT environment variable...
    ->Added COCOS_X_ROOT=/Users/dennis

->Check environment variable COCOS_TEMPLATES_ROOT
  ->Search for environment variable COCOS_TEMPLATES_ROOT...
    ->COCOS_TEMPLATES_ROOT not found

  -> Add COCOS_TEMPLATES_ROOT environment variable...
    ->Added COCOS_TEMPLATES_ROOT=/Users/dennis/cocos2d-x/templates

->Configuration for Android platform only, you can also skip and manually edit "/Users/dennis/.bash_profile"

->Check environment variable NDK_ROOT
  ->Search for environment variable NDK_ROOT...
    ->NDK_ROOT not found

  ->Search for command ndk-build in system...
    ->Path /usr/local/Cellar/android-ndk/r13b was found

  -> Add NDK_ROOT environment variable...
    ->Added NDK_ROOT=/usr/local/Cellar/android-ndk/r13b

->Check environment variable ANDROID_SDK_ROOT
  ->Search for environment variable ANDROID_SDK_ROOT...
    ->ANDROID_SDK_ROOT not found

  ->Search for command android in system...
    ->Path /usr/local/Cellar/android-sdk/24.4.1_1 was found

  -> Add ANDROID_SDK_ROOT environment variable...
    ->Added ANDROID_SDK_ROOT=/usr/local/Cellar/android-sdk/24.4.1_1

->Check environment variable ANT_ROOT
  ->Search for environment variable ANT_ROOT...
    ->ANT_ROOT is found : /usr/local/opt/ant/bin


A backup file "/Users/dennis/.bash_profile.backup2" is created for "/Users/dennis/.bash_profile".

Please execute command: "source /Users/dennis/.bash_profile" to make added system variables take effect

셋업과정은 별고 없고 필요한 툴들을 찾아서 환경변수 혹은 PATH에 등록해주는것이 주요 목적입니다. 저의 경우에는 .bash_profile에 다음과 같은 환경변수가 등록되었습니다.

# Add environment variable COCOS_CONSOLE_ROOT for cocos2d-x
export COCOS_CONSOLE_ROOT=/Users/dennis/cocos2d-x/tools/cocos2d-console/bin
export PATH=$COCOS_CONSOLE_ROOT:$PATH

# Add environment variable COCOS_X_ROOT for cocos2d-x
export COCOS_X_ROOT=/Users/dennis
export PATH=$COCOS_X_ROOT:$PATH

# Add environment variable COCOS_TEMPLATES_ROOT for cocos2d-x
export COCOS_TEMPLATES_ROOT=/Users/dennis/cocos2d-x/templates
export PATH=$COCOS_TEMPLATES_ROOT:$PATH

# Add environment variable NDK_ROOT for cocos2d-x
export NDK_ROOT=/usr/local/Cellar/android-ndk/r13b
export PATH=$NDK_ROOT:$PATH

# Add environment variable ANDROID_SDK_ROOT for cocos2d-x
export ANDROID_SDK_ROOT=/usr/local/Cellar/android-sdk/24.4.1_1
export PATH=$ANDROID_SDK_ROOT:$PATH
export PATH=$ANDROID_SDK_ROOT/tools:$ANDROID_SDK_ROOT/platform-tools:$PATH

이후에 저기서 말해준대로 source 명령을 사용하여 추가된 환경변수를 적용 하도록 합시다.

$ source ~/.bash_profile

이제 cocos 명령이 정상 동작하는지 테스트를 해봅시다. 최초 실행시에 사용 정보를 자기네들 서버에 전송하는것을 허용할지 물어오는데 저는 No를 선택하였습니다. 어쨌든 문제없이 명령이 실행된다면 준비는 완료된 것입니다.

$ cocos 
Cocos collects data when the command-line tools are used for development. This data is examined in the aggregate only and is used to continually innovate and improve Cocos products. This data is anonymous and includes, but is not limited to, a unique hardware identifier, version number our software and information on which tools and/or services in Cocos products are being used and how they are being used. We take your privacy seriously and we do not share or sell any of this data. You can opt-out from sharing this data with us, but by sharing you help contribute to growth of Cocos.

Do you agree to sent the data? [Y]es, [N]o
N

/Users/dennis/cocos2d-x/tools/cocos2d-console/bin/cocos.py 2.2 - cocos console: A command line tool for Cocos2d-x.

Available commands:
	run              Compiles, deploy and run project on the target.
	gen-libs         Generate prebuilt libs of engine. The libs will be placed in 'prebuilt' folder of the engine root path.
	luacompile       Encrypt and/or compile lua files.
	deploy           Compile and deploy a project to a device/simulator.
	package          Manage package for cocos.
	compile          Compile projects to binary.
	gen-simulator    Generate Cocos Simulator.
	new              Creates a new project.
	jscompile        Compile and/or compress js files.
	gen-templates    Generate templates for Cocos Framework.

Available arguments:
	-h, --help			Show this help information.
	-v, --version			Show the version of this command tool.
	--ol ['en', 'zh', 'zh_tr']	Specify the language of output messages.

Example:
	cocos new --help
	cocos run --help

4. 프로젝트 생성

이제 터미널에서 cocos 명령을 사용하여 MyGame이라는 이름의 새로운 프로젝트를 생성해보도록 하겠습니다. 언어(-l)은 js로 패키지명(-p)는 kr.pe.theeye.mygame 으로 설정하였습니다.

$ cocos new MyGame -l js -p kr.pr.theeye.mygame
> Copy template into /Users/dennis/Documents/Project/MyGame
> Copying directory from cocos root directory...
> Copying files from template directory...
> Copying Cocos2d-x files...
> Rename project name from 'HelloJavascript' to 'MyGame'
> Replace the project name from 'HelloJavascript' to 'MyGame'
> Replace the project package name from 'org.cocos2dx.hellojavascript' to 'kr.pe.theeye.mygame'
> Replace the Mac bundle id from 'org.cocos2dx.hellojavascript' to 'kr.pe.theeye.mygame'
> Replace the iOS bundle id from 'org.cocos2dx.hellojavascript' to 'kr.pe.theeye.mygame'

이렇게 하면 프로젝트가 생성되고 프로젝트 디렉토리 내부로 들어가서 다음의 명령을 통해 바로 웹브라우저로 실행해볼 수 있습니다.

$ cocos run -p web
Building mode: debug
Deploying mode: debug
Starting application.
Try start server on 127.0.0.1:8000
Serving HTTP on 127.0.0.1, port 8000 ...

문제 없이 프로젝트가 생성되었다면 다음과 같은 화면을 볼 수 있습니다.

5. IntelliJ를 통해 프로젝트 관리하기

IntelliJ를 이용하여 프로젝트를 관리한다는건 사실 별다른게 있지는 않습니다. 그냥 IntelliJ로 프로젝트를 열면 알아서 자동완성을 포함한 프로젝트 구동에 필요한 모든것이 갖춰지게 됩니다.

Import Porject를 선택해도 되지만 그냥 Open으로 기존에 생성했던 MyGame 프로젝트를 열어보겠습니다.

MyGame을 찾아서 OK를 누르게 되면 프로젝트가 열리고 Indexing 과정을 거쳐 개발을 할 수 있는 환경이 자동으로 구축됩니다.

프로젝트 루트의 index.html을 마우스 우클릭하여 Run을 실행하게 되면 IntelliJ가 임의의 포트를 사용하여 프로젝트를 실행해 주게 됩니다.

참고 : http://blog.revivalx.com/2014/06/21/setting-up-your-cocos2d-js-environment/

macOS Sierra 기준 Homebrew를 이용하여 APM 설치하기

macos-sierra-logo

이번에는 새로 출시된 macOS 시에라에서 Apache, PHP, MySQL을 설치하여 서비스로 구동하는 과정을 정리해보겠습니다. 이 모든작업들 역시 Homebrew를 사용하면 손쉽게 해낼 수 있습니다. 우선 이 글은 Homebrew가 정상적으로 설치되어있는 맥이 준비되어있다고 가정하고 작성되었습니다.

$ brew tap homebrew/dupes
$ brew tap homebrew/php
$ brew tap homebrew/apache
$ brew update

우선 설치할 것들에 대한 준비를 위해 tap 명령을 사용하여 별도의 저장소를 추가하도록 합니다. 이 명령은 Homebrew의 master 저장소에 없는 패키지들을 사용할 수 있도록 해줍니다.

MariaDB 설치

MySQL 대신에 제가 선호하는 MariaDB를 설치하도록 하겠습니다. 다음의 명령을 사용하여 매우 간단하게 설치할 수 있습니다.

$ brew install mariadb

설치가 완료되면 다음의 명령을 수행하여 초기에 필요한 기본 디비 구성을 할 수 있습니다.

$ mysql_install_db

이제 준비가 끝났으니 MariaDB를 서비스 형태로 구동해 보겠습니다.

$ brew services start mariadb

여기까지만 진행하면 익명 상태로 mysql 명령을 사용하여 자유롭게 사용이 가능한 상태가 됩니다만 보안에 취약한 상태가 됩니다. 물론 개인 맥북에서 사용하고 계신 상태라면 크게 문제될 것은 없습니다만 mysql_secure_installation 명령을 사용하면 손쉽게 root 비밀번호를 포함한 보안 상태의 설정을 변경할 수 있습니다.

$ mysql_secure_installation
Enter current password for root (enter for none): 
OK, successfully used password, moving on...

Set root password? [Y/n] Y
New password: 
Re-enter new password: 
Password updated successfully!
Reloading privilege tables..
 ... Success!

Remove anonymous users? [Y/n] Y
 ... Success!

Disallow root login remotely? [Y/n] Y
 ... Success!

Remove test database and access to it? [Y/n] Y
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Reload privilege tables now? [Y/n] Y
 ... Success!

Cleaning up...

All done!  If you've completed all of the above steps, your MariaDB
installation should now be secure.

Thanks for using MariaDB!

이제 mysql 명령을 사용하여 내가 결정한 비밀번호로 정상적으로 root 계정에 접속이 되는지 확인을 해봅시다.

$ mysql -uroot -p
Enter password: 
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 19
Server version: 10.1.18-MariaDB Homebrew

Copyright (c) 2000, 2016, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]>

Apache 설치하기

macOS 시에라에는 이미 아파치 2.4 버전이 기본 설치되어있습니다. 하지만 지금 설치하려는 Homebrew 패키지들에 의해서 관리하기에 복잡함이 생기므로 기본 설치된 아파치 2.4는 꺼두고 새로운 아파치를 설치해보도록 하겠습니다.

$ sudo apachectl stop
$ sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist

위와 같은 명령으로 기본 설치되어있는 아파치를 더이상 실행되지 않도록 변경할 수 있습니다. 이번에는 새로운 새로운 아파치 2.4 버전을 Homebrew를 이용하여 설치한 뒤 서비스로 구동하는 방법을 알아보겠습니다.

$ brew install httpd24 --with-privileged-ports --with-http2
$ sudo brew services start httpd24

간단하게 설치가 완료되었습니다. 위에서 보여지는 –with-privileged-ports 옵션은 1024 이하의 낮은 숫자의 시스템 포트를 사용하기 위해서 사용하는 옵션입니다. 이 옵션을 사용하여 80번 포트를 사용할 수 있으며 8080과 같은 포트를 사용하실 경우에는 굳이 이 옵션은 필요없습니다. 80번 포트를 사용하여 구동할 경우 보실 수 있듯이 brew services 명령 앞에 sudo를 붙이는것을 볼 수 있습니다.

아파치가 정상적으로 설치되었다면 사용하시는 브라우저에서 localhost로 접속하여 다음과 같은 화면이 뜨는것을 확인하실 수 있습니다.

install-apm-on-macos-sierra01

PHP 설치하기

이제 PHP를 설치해 보도록 하겠습니다. 선호하는 PHP 버전은 다양하게 있겠지만 저의 경우는 5.6을 설치해보도록 하겠습니다. brew search php 명령을 사용하여 사용가능한 PHP 버전을 검색해볼 수 있습니다. 이글을 쓰는 시점에 사용가능한 버전은 5.5 / 5.6 / 7.0 / 7.1 입니다.

$ brew install php56 --with-apache

조금 빌드 시간이 소요되겠지만 설치가 완료되면 바로 사용할 수 있는건 아니고 아파치에 몇가지 설정을 추가해 주어야 합니다.

Apache에 PHP 설정 추가하기

아파치 설정파일은 2.4 버전의 경우에는 /usr/local/etc/apache2/2.4 에서 찾을 수 있습니다. 본인이 선호하시는 텍스트 에디터를 사용하여 /usr/local/etc/apache2/2.4/httpd.conf 를 열어서 다음의 내용을 찾아봅니다.

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

위의 내용을 찾으셨다면 다음과 같이 변경을 해주시기 바랍니다. DirectoryIndex 에 값을 추가하였고 FilesMatch 항목을 추가하였습니다.

<IfModule dir_module>
    DirectoryIndex index.php index.html
</IfModule>

<FilesMatch \.php

gt; SetHandler application/x-httpd-php </FilesMatch>

이제 아파치를 재시작 하겠습니다.

$ sudo brew services restart httpd24
Password:
Stopping `httpd24`... (might take a while)
==> Successfully stopped `httpd24` (label: homebrew.mxcl.httpd24)
==> Successfully started `httpd24` (label: homebrew.mxcl.httpd24)

이제 PHP가 정상적으로 구동중인지 확인을 해봐야겠지요. 다음과 같이 PHP 테스트 결과를 출력하는 페이지를 만들어 줍니다. 여기서 알 수 있듯이 기본적으로 아파치 기본 도큐먼트 디렉토리는 /usr/local/var/www/htdocs 입니다.

$ echo "<?php phpinfo();" > /usr/local/var/www/htdocs/index.php

이제 다시 한번 브라우저에서 localhost에 접속해보도록 하겠습니다.

install-apm-on-macos-sierra02

정상적으로 phpinfo가 실행된것을 볼 수 있습니다. 조금 밑으로 내려보시면 MySQL(MariaDB) 역시 정상적으로 연동이 되어있는것을 확인해 볼 수 있습니다.

install-apm-on-macos-sierra03

다 좋은데 date 쪽 항목에서 다음과 같은 경고가 뜨고 있는것을 볼 수 있습니다.

install-apm-on-macos-sierra04

시스템의 타임존 설정이 제대로 되어있지 않다는것인데요. 이렇게 된 김에 이부분의 설정도 해보도록 하겠습니다. php.ini 파일을 수정해야 하는데 /usr/local/etc/php/5.6 안에 있습니다. Date 항목을 찾아서 date.timezone의 내용이 주석처리 되어있는데 다음과 같이 수정해주시면 됩니다.

[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
date.timezone = Asia/Seoul

이제 준비는 완료되었고 마지막으로 한번 더 아파치를 재시작 해주시면 됩니다.

$ sudo brew services restart httpd24
Password:
Stopping `httpd24`... (might take a while)
==> Successfully stopped `httpd24` (label: homebrew.mxcl.httpd24)
==> Successfully started `httpd24` (label: homebrew.mxcl.httpd24)