16. 화면에 문자 표시

이번 시간에는 화면에 게임 이름을 표시해 보겠습니다.

Text와 Font를 선언해 주는데, 모두 AndEngine library에 있는 class를 선택합니다.

assets 폴더 안에 font 폴더를 만들고 사용하시고자하는 폰트 파일을 넣어줍니다.

onCreateResources() 메서드 안에 조금 전에 만든 font 폴더을 기본 폴더로 정의해 줍니다.

그림, 소리, 음악 파일들을 정의해 놓은 catch 구문안에 폰트도 정의해 줍니다.(참고로 Color는 android.graphics의 것을 선택합니다.)

onCreateScene() 메서드 안에 위와 같이 작성해 줍니다.

앱을 실행해 보면 위와 같이 게이 이름이 위에 표시되는 것을 확인하실 수 있습니다.

안드로이드 스튜디오 소스

assets

완성된 게임

1) Animal Cards

2) Finger Runner

15. 배경 음악

이번 시간에는 배경 음악을 구현해 보겠습니다. 배경 음악 구현은 이전 시간에 했던 사운드 구현과 거의 비슷하므로 쉽게 따라하실 수 있을 것 같습니다. 소리 효과 구현을 위해 구현해 놓은 mfx 폴더에 사용하시고자 하는 배경 음악 파일을 복사해 넣습니다.

먼저 music을 선언해 줍니다.

onCreateResoures() 메서드 안에 음악 파일들을 위한 기본 폴더를 정의해 주고 사용할 음악 파일도 폴더 안에 복사해 줍니다.

engineOptions에 음악을 추가해 줍니다.

onCreateResources() 메서드 안 사운드 파일 들을 정의했던 catch/try 문 안에 music 파일도 정의해 줍니다.

onCreateScene() 메서드에 위와 같이 작성해 scene이 만들어지면 배경 음악이 재생 되도록 해줍니다.

안드로이드 스튜디오 소스

완성된 게임

1) Animal Cards

2) Finger Runner

14. 소리 효과 구현

이번 시간에는 소리 효과를 추가해 보겠습니다. 동물 카드를 뒤집을 때 해당 동물 소리가 나도록 구현해 보고자 합니다.

assets 폴더 아래에 소리와 음악 파일들을 담을 디렉토리를 만들어 주고 사용하고자하는 파일들을 넣어 줍니다. 참고로 책에는 ogg 파일을 공식적으로 지원한다고 되어 있는데 mp3도 문제 없이 잘 재생이 되었습니다. 하지만 일부 wav 파일은 재생이 안 되는 문제가 있어 지난 시간에 소개해 드린 audacity 소프트 웨어를 이용해 ogg로 변환해 사용했습니다.

Sound를 선언해주고 engineOptions 에 사운드를 추가해 줍니다.

onCreateResources() 메서드 안에 조금 전에 만든 기본 sound folder를 지정해 줍니다. 각각의 동물 소리도 try/catch 구문 안에 작성해 줍니다.

onAreaTouched() 메서드 안에 위와 같이 작성해 주면 카드 터치시 해당 동물 소리가 재생됩니다.

다음 시간에는 배경음악을 구현해 보겠습니다.

안드로이드 스튜디오 소스

완성된 게임

1) Animal Cards

2) Finger Runner

13. 소리/음악 파일 다운로드 및 처리 툴

게임에서 소리 및 음악도 많은 부분을 차지 합니다. 그래서 무료 소리 및 음악 파일을 다운 받을 수 있는 사이트를 몇 곳 소개해 드리겠습니다.

무료 소리 및 음악 다운로드 사이트

1) zapsplat : 무료로는 10분에 파일 3개까지만 다운로드 가능하기 때문에 작업하면서 필요한 파일들은 미리 다운 받아 놓고 작업하시다가 10분 후 또 받고 이런씩으로 사용하시면 됩니다.

2) cc mixter

3) freesound

4) Free Sound Effects

다운 받은 소리들을 사용하다보면 특정 부분만 잘라서 사용한다 던가 편집이 필요한 일이 생기는데 이럴 때 사용할 수 있는 무료 오디오 소프트웨어도 소개해 드리겠습니다.

Audacity

다음 시간에는 소리 및 음악 파일을 게임에 적용시켜 보겠습니다.

완성된 게임

1) Animal Cards

2) Finger Runner

12. 카드 짝 맞추기

이번 시간에는 카드를 뒤집어 짝이 맞으면(같은 동물 카드) 카드가 오픈된 상태를 유지하고, 짝이 맞지 않으면 카드를 모두 다시 뒤집어 뒷면이 보이도록 구현해 보겠습니다.

카드 짝이 맞는 상태인지를 보여주는 boolean과 짝이 맞는 카드롤 제외하고 오픈된 카드 수를 보여 주는 변수를 선언해 줍니다.

게임 시작시 관련 변수를 초기화하는 메서드를 만들고 카드 짝 맞은 상태, 오픈된 카드 수…등 관련 변수들을 초기화해 줍니다.

처음 뒤집은 카드와 다음 뒤집은 카드를 식별하기 위해 2개의 String을 선언해 줍니다.

카드 sprite에 위와 같이 작성 후

onCreateScene() 메서드 안에 있는 scene은 삭제하고 전역 변수로 선언해 줍니다.

짝이 맞은 카드를 제외한 모든 카드를 뒷면으로 뒤집는 closeAll() 메서드를 위와 같이 구현해 줍니다. 여기서 카드를 뒤집을 때 0.2초 지연 시키도록 코딩을한 이유는 만약 짝이 안 맞는 두번째 카드를 열었을 때 지연 시간을 안 주면 컴퓨터는 매우 빠르기 때문에 카드가 안 열리는 것 처럼 보입니다.(0.2f -> 0f 로 변경해서 확인해 보세요.) 그리고 일반적으로 Java에서 시간을 지연시킬 때 Thread를 사용하는데, AndEngine에서는 Thread를 이용해서는 작동을 안 하므로 위 방법을 활용해 시간 지연을 구현하면 됩니다. 그리고 AndEngine은 scene을 만들 때 중복 attachChild는 매우 엄격하고(에러 발생), detachChild는 너그럽기 때문에 중복 attachChild가 발생하지 않도록 주의 합니다.

다음 시간에는 소리와 음악에 대해 알려 드리겠습니다.

안드로이드 스튜디오 소스

완성된 게임

1) Animal Cards

2) Finger Runner

11. 카드 랜덤 배치

이번 시간에는 지난 시간에 랜덤으로 생성한 값들을 가지고 카드를 랜덤하게 배치해 보겠습니다.

onCreateScene() 메서드 안에 카드 위치와 각 동물 카드의 위치를 선언해 줍니다.(각 값의 의미는 이후에 설명 드리겠습니다.)

카드의 초기 위치를 화면 밖으로 초기화해 줍니다.

카드를 4장 사용할때 카드를 놓을 위치를 정해 줍니다.

각 카드 위치의 값은 위와 같습니다.

for 문을 이용해 지난 시간에 랜덤으로 구한 수들(배열)을 가지고 카드들의 위치를 정의해 줍니다.

for 문을 이용해 카드 sprite에 카드 위치를 적용해 줍니다.

카드 뒷면을 scene에 붙이는 것은 잠시 주석 처리를 하고 앱을 여러번 실행해 보면 동물 카드가 랜덤한 위치에 배치되는 것을 확인하실 수 있습니다.

다음 시간에는 배치된 카드들을 눌러서 뒤집고 같은 카드 2장이 열리면 카드가 열린 상태를 유지하고, 다른 카드 2장이 열리면 카드를 다시 뒤집어 카드 뒷면이 보이도록 구현해 보겠습니다.

안드로이드 스튜디오 소스

완성된 게임

1) Animal Cards

2) Finger Runner

10. 카드 연속으로 뒤집기

이번 시간에는 카드를 연속으로 뒤집어 보겠습니다.

카드 상태를 보여 주는 boolean을 선언해 줍니다.

onCreateScene() 메서드 안에 카드 뒷면을 붙일 때 카드 상태도 뒷면으로 초기화 해 줍니다. 지금은 for문을 사용할 필요는 없지만 나중에 카드를 여러장 사용할 것이므로 미리 for문을 이용해 카드 앞면/뒷면 상태를 초기화 했습니다.

터치시 동작을 if문을 이용해 다르게 구현 후 앱을 실행해 보면 카드 터치시 앞면/뒷면이 계속해서 바뀌는 것을 확인하실 수 있습니다.

다음은 여러개의 동물 카드 중 일부만 랜덤으로 사용하는 기능을 구현해 보겠습니다. 지금까지 사용하던 사자 외에 원숭이와 돼지도 추가해 총 3가지 동물 카드를 사용하겠습니다.

위 메서드를 이용하면 여러개의 숫자중 몇개만 뽑아 낼 수 있습니다.(예를 들면 로또 처럼 45까지 숫자 중에 6개를 무작위로 선택)

onCreateScene() 메서드에 위와 같이 작성하고 앱을 실행해 로그를 확인해보면,

위와 같이 0~2까지 숫자중 2개가 랜덤으로 뽑아지는 것을 확인해 보실 수 있습니다. 이것을 이용해 3가지 동물 중 2개만 사용할 수 있습니다.

선택한 2가지 동물 카드 각 2장 총 4장의 카드를 화면에 랜덤 위치에 배치해 보겠습니다.

위는 랜덤한 숫자 배열을 생성하는 메서드인데, 말로 설명하는 것보다는 실행해서 보여드리는게 설명하기 쉬울 것 같습니다.(제가 이과 출신이라 설명이 약해서 죄송합니다.ㅠㅠ)

사용할 카드 수를 결정하고(여기서는 4장)

onCreateScene() 메서드 안에 위와 같이 작성 후 로그 창을 확인해 보시면

앱을 여러번 실행 시켜 보면 위와 같이 랜덤한 숫자 배열이 만들어지는 것을 확인하실 수 있습니다.

다음 시간에는 이렇게 만든 랜덤 값들을 이용해 카드를 랜덤한 위치에 배치해 보겠습니다.

안드로이드 스튜디오 소스

완성된 게임

1) Animal Cards

2) Finger Runner

9. 카드 뒤집기

먼저 동물 이미지를 붙여 놓고 카드 뒷면만 붙였다 없앴다하는 방법으로 카드 뒤집는 것을 구현하겠습니다. 여기까지 따라 오신분들은 동물 이미지를 화면에 붙이는 것을 직접하실 수 있을 것 같아 따라 설명은 생략하겠습니다.

여러 동물 카드를 사용할 예정이므로 이미지 영역은 배열로 선언해 줍니다.

카드 클릭을 구현하기 위해 Sprite를 선언해 줍니다. 카드 짝 맞추기 게임이므로 카드는 쌍으로 존재하기 때문에 앞면 뒤면 각각 2개씩 선언해 줍니다.

onCreateScene() 메서드에 sprite, 터치에 대해 작성해 주면 카드 뒷면을 눌렀을 때 카드 앞면으로 바뀌는 것을 확인하실 수 있습니다.

다음 시간에는 카드를 연속이로 뒤집을 수 있도록 해보겠습니다.

안드로이드 스튜디오 소스

완성된 게임

1) Animal Cards

2) Finger Runner

패키지 네임 변경

패키지 네임 변경시 마지막에 글자만 변경이되는데 아래와 같이 ‘Compact Middle Packages’ 체크 해제를 해주면 중간의 패키지 네임도 변경이 가능합니다.

톱니 바퀴를 눌러 ‘Compact Middle Packages’ 체크 해제

‘Refactor’ -> ‘Rename’ 선택

‘Rename package’ 클릭

패키지 네임 변경 후 ‘Refactor’를 눌러 주면 패키지 네임이 변경 됩니다.

8. 카드 뒷면 화면에 표시하기

본격적으로 카드 짝 맞추기 게임을 만들기 위해 배경화면 위에 카드 뒷면을 표시해 보겠습니다.

먼저 카드 뒷면으로 사용할 이미지 영역을 선언해 줍니다.

onCreateResources() 메서드에 카드 뒷면 이미지를 추가하기 위해 bitmapTextureAtlas를 더 크게 만들어 주고, 카드 뒷면 이미지 영역을 정의해 줍니다.

bitmapTextureAtlas는 위와 같이 배경화면 옆에 카드 뒷면이 추가가 된 것입니다. 앞으로 추가 되는 이미지들도 계속 덧 붙여 주시면 됩니다.

마지막으로 onCreateScene() 메서드에 카드 뒷면을 붙여주세요.

앱을 실행해 보면 바탕화면 위에 카드 뒷면이 보이실 것입니다.

안드로이드 스튜디오 소스

완성된 게임

1) Animal Cards

2) Finger Runner