[React Native] 동킹콩 모바일 게임 만들기

in #kr5 years ago

이번에는 리액트 네이티브모바일 게임을 만들어 보겠습니다. 이미 잘 만들어진 게임 샘플 코드를 가져와서 빌드하는 과정이라서 어렵지는 않습니다. 매우 간단합니다.

최근에 출시되는 모바일 게임은 대부분 unity로 개발되어 있습니다. 하지만 리액트 네이티브로도 모바일 게임 개발이 가능합니다. react-native-game-engine를 설치하면 리액트 네이티브에서 모바일 게임을 만들수 있습니다.

이런 게임을 만들 수 있습니다. 추억 돋네요. ㅎㅎ

출처: https://github.com/bberak/react-native-donkey-kong


* * *

React Native 프로젝트 생성하기

먼저, my-donkey-kong-game이라는 프로젝트 폴더를 생성합니다.

$ expo-cli init my-donkey-kong-game

expo-cliexpo 설치 가이드 문서를 참고하여 설치해주세요.

  1. Choose a template에서 blank를 선택합니다.
  2. Choose which workflow to use에서 managed(default)를 선택합니다.
  3. 마지막으로 expo.name에 앱 이름을 입력합니다. 저는 "My Donkey Kong Game" 이라고 입력하였습니다.
  4. 엔터를 입력하면 프로젝트 생성이 시작됩니다. 필요한 모듈을 다운로드하고 설치하는데 시간이 조금 소요됩니다.

 

DonkeyKong 모듈 설치하기

프로젝트 폴더 생성이 완료되면, react-native-donkey-kong를 설치합니다. react-native-donkey-kong는 이미 완성되어 있는 게임 모듈입니다.

$ cd my-donkey-kong-game
$ npm install --save react-native-donkey-kong
$ npm install

 

마지막으로 App.js를 수정합니다.

import React, { Component } from "react";
import DonkeyKong from "react-native-donkey-kong";

export default class App extends Component {
  render() {
    return <DonkeyKong />;
  }
}
  • react-native-donkey-kong에서 DonkeyKongimport 합니다.
  • 그리고 render()함수에서 <DonkeyKong/>return 해주면 끝입니다.

 

게임 실행하기

이제 게임 앱을 실행합니다.

$ npm start

 

아래는 실제 빌드되어 실행한 게임 화면입니다.

 

터치를 슬라이드하면 케릭이 움직입니다.
키패드 방식이 아니라서 조작하기가 매우 어렵네요.

여기까지 읽어주셔서 감사합니다.

Sort:  

짱짱맨 호출에 응답하였습니다.

3.1 운동 100주년을 기념하여 북이오는 인터넷에 돌아다니는 많은 문헌의 오류를 수정, 정성스럽게 다국어 버전의 디지털 문서로 출간하였습니다.

3·1 독립선언서 바로가기

널리 공유되기를 희망하며, 참여에 감사를 드립니다.

제일 밑에다가 새로 번역한 2019년 한국 대표인들 이름 적어놓으면 좋겠습니다.
역사 정신은 이어가는 거니깐요. ㅎㅎㅎㅎ 감사합니다.

저번에는 맥용으로 쓰셔서 실망했습니다. ㅋㅋㅋㅋ 우연이겠죠? 이번에는 windows 유저들도 개발 가능하면 좋겠습니다. 차별은 노노. ㅎㅎㅎ

우..우연입니다.ㅎㅎ 혹시 유로보틱스님은 윈도우에서 개발하시나요?

제가 생각하기에 개발 할때는 윈도우 보다는 리눅스, 리눅스보다는 맥OS가 짱 입니다. 파이썬이나 노드 개발할때 윈도우는 개발환경 셋팅하는게 너무 힘들어요. 일단 윈도우에는 도커(Docker) 설치가 안되네요. ㅠ

참고로, 맥에서 개발하기 전에는 윈도우 노트북에 우분투를 설치해서 사용했었어요. 하지만, 역시 개발할때는 mac이 진리입니다.

다행이네요. 사실 늘 그문제에 부딪치다 보니깐 곧 맥 구입할려고 합니다. ㅎㅎㅎㅎ ㅇㅅㅇa 일단은 현재상황에서 최선의 개발 하겠습니다.

정말 개발환경은 한번 맥으로 하면 다시 윈도로 못돌아갈만큼 맥이 좋습니다ㅠㅠ 어차피 오픈소스를 쓰게 되면 환경이 다 리눅스/유닉스 기반인데 맥도 유닉스기반이다보니 환경의 거의 비슷해서. 컴은 맥이 정말 좋은 것 같아요. 폰은 전 아이폰쓰다가 안드로이드 다시 아무 문제없이 쓰고 지금도 아이폰 미련없는데 컴은 못돌아갑니다ㅠㅠ

우와 대략은 알고 있었는데 그 정도일 줄이야 ㅋㅋㅋㅋ

곰돌이가 @blockchainstudio님의 소중한 댓글에 $0.014을 보팅해서 $0.009을 살려드리고 가요. 곰돌이가 지금까지 총 3157번 $37.906을 보팅해서 $39.388을 구했습니다. @gomdory 곰도뤼~

윈도우 스토어에서 우분투 앱 설치해서 사용해보셨나요? 예전에 윈도우에서 이거 설치해서 개발했던 기억이 있네요. ㅎㅎ

오오. 그런 게 있군요. ㅇ_ㅇ 한 번 해보겠습니다. ㅎㅎㅎㅎ

곰돌이가 @urobotics님의 소중한 댓글에 $0.017을 보팅해서 $0.006을 살려드리고 가요. 곰돌이가 지금까지 총 3065번 $37.001을 보팅해서 $38.177을 구했습니다. @gomdory 곰도뤼~

곰돌이 고맙습니다. ㅎㅎ

곰돌이가 @anpigon님의 소중한 댓글에 $0.018을 보팅해서 $0.005을 살려드리고 가요. 곰돌이가 지금까지 총 3062번 $36.959을 보팅해서 $38.150을 구했습니다. @gomdory 곰도뤼~

유니티로 이런 유사한 거 튜토리얼로 만들어 봤는데 은근 재미있는 것 같아요.
튜토리얼로 슈팅 게임이였나 의외로 유니티 엔진이 좋아서 복잡한 코딩은 거의 안하고 대부분 엔진에서 해결해 주니깐 재밌더군요.

유니티로 만들면 복잡한 코딩이 필요없군요. 유티니로 만드는게 시간적으로 더 효율적이겠어요. ㅋ
나중에 게임도 한번 개발해보고 싶어요.

와우~ 신기하네요~

웹에서 이제 고전 게임도 원활하게 돌아가고 대단한듯 싶네여 :)

Hi @anpigon!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 2.919 which ranks you at #11450 across all Steem accounts.
Your rank has not changed in the last three days.

In our last Algorithmic Curation Round, consisting of 208 contributions, your post is ranked at #95.

Evaluation of your UA score:
  • Only a few people are following you, try to convince more people with good work.
  • The readers like your work!
  • Good user engagement!

Feel free to join our @steem-ua Discord server

오 게임까지!!! +.+ 싱기방기합니다, 추억의 게임 소환:))

감사합니다. 신기방기합니다.~

와 요건 언제 정말 해봐야겠어요ㅎㅎ 감사합니다.

요즘 모바일 게임을 만들고 싶어서 자료를 조금 찾아보고 있어요. ㅋ

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70597.89
ETH 3559.60
USDT 1.00
SBD 4.77