반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

etc./SEO

SEO 활용으로 홈페이지 마케팅 효과 높이기 1

2012. 1. 5. 23:49 | Posted by 솔웅


반응형
SEO는 Search Engine Optimization 의 약자로 우리나라 말로는 검색엔진 최적화라고 합니다.

즉 만든 홈페이지를 구글이나 네이버 같은 유명 검색엔진에서 검색 했을 때 상위에 링크되도록 하는 방법입니다.
내 홈페이지를 찾기 쉽게 만들면 좀 더 많은 사람들이 와서 볼 수 있을 테니까요.

이 SEO에 대해 좀 알아 보겠습니다.

기본적으로 구글같은 Search Engine들은 웹페이지 내에 있는 텍스트를 기반으로 검색에 이용합니다.
즉 이미지만 있다던가 플래시로만 돼 있으면 그만큼 검색엔진에 노출 되는데 불리 할 수 있습니다.

* Search Engine Spider
검색엔진은 자신들의 고객(검색엔진에 와서 필요한 정보를 검색하는 유저)에게 좀 더 정확한 정보를 제공하기 위해 나름대로의 방법을 이용합니다.
그 나름대로의 방법을 사용하는 것이 Search Engine Spider 로봇 입니다. 웹과 관련해서는 나름대로 표준이 있습니다. 그러므로 기본적으로 Search Engine Spider가 이용하는 공통된 기능이 있습니다.
그 기본적인 기능은
1. Link와 Website 의 info를 찾는다.
2. Website Content 정보를 찾는다.
3. 모은 모든 info를 search engine database에 저장한다.
=> 해당 웹 사이트의 name 알고리즘에 따라 Rank 한다.

홈페이지 제작자로서 생각할 수 있는 optimization에는 두가지가 있습니다.
1. On Page Optimization
웹 페이지 내에서 검색엔진에 노출되도록 최적화 하는 기술입니다.
- <title> tag가 얼마나 유용한지
- <title> tag가 내용과 얼마나 연관이 있는지
- <meta> tag를 어떻게 사용했는지
- <header> tag를 어떻게 사용했는지
- url은 어떤지 ...

2. Off Page Optimization
- Article Marketing
- 유튜브 채널을 통한 마케팅
- facebook, twitter를 통한 마케팅
- blogging
- Social bookmarking website
- 포럼에 글 올리기
- Web Directories 에 웹사이트 submit 하기 등등

홈페이지를 만들게 되면 대개 이 on/off page optimization을 모두 이용하게 됩니다.

검색엔진은 다 아시는 대로 keyword 로 Research 를 합니다.
- Search Engine은 유저가 입력한 키워드에 가장 적합한 키워드를 찾는다
- 정확한 키워드를 넣어야 한다.
- Search Engine에 자주 사용되는 주요 키워드들을 알 수 있는 관련 툴 들이 있다.
  wordtracker.com , keyworddiscovery.com
  google keyword research tools

이러한 툴 들에는 유료툴과 무료툴이 있습니다.
우선 키워드 고르는 방법부터 간단히 알아본 후 google keyword research tool 사용법을 알아보겠습니다.

키워드 리서치 프로세스
1- 홈페이지 관련해서 떠오르는 키워드를 적는다.
2- 떠오른 키워드들에 대한 카테고리를 만든다.
3- 생각한 키워드를 찾기 위해 키워드 툴을 이용해 검색한다.
4- 모든 키워드들을 다운로드 받는다.
5- 키워드들을 정리하고 그 중에 Best를 찾는다.

best keyword를 찾기 위해  google keyword research tools 을 이용해 보겠습니다.
일단 지금 저는 HTML5를 배우고 있으니까요. HTML5 tutorial 이라는 키워드로 검색해 보겠습니다.

1. 구글에서 Keyword Tool - Google Adwards를 찾아 들어간다.


2. Word or Phrase 에 자신이 만든 홈페이지 관련한 단어를 넣고 Search 버튼을 누른다.


3. 나온 정보를 모두 다운로드 받는다. (Download-All을 선택한다.)


이렇게 하면 해당 자료를 csv형식의 파일로 받으실 수 있습니다.

한가지 팁은 홈페이지의 각 페이지마다 다른 키워드를 사용하면 더 효과적입니다.
그러려면 이 작업을 여러번 해야 되겠죠?
아니면 한번에 여러 키워드를 넣고 검색해 봐도 되겠지만.. 왠지 저는 각 키워드마다 따로 작업하고 싶어지더라구요.

그 다음은 받은 csv파일을 엽니다.

이 CSV 파일에는 구글에서 유저들이 입력 키워드와 관련되서 가장 많이 검색했던 키워드들을 알 수 있습니다. 그리고 경쟁력이 있고 없는 키워드들도 알 수 있구요.

아주 유용한 정보죠?

홈페이지가 Global Market을 대상으로 한다면 Global Monthly Searches 정보를 봐야겠고 지역을 중심으로 한다면 Local Monthly Searches 정보를 봐야 할 겁니다.

검색할 때  English로 할 수도 있고 Korean으로 할 수도 있으니까 이것도 미리 생각해 두시고 검색하셔야 합니다.

그리고 나서 csv에 있는 키워드들 중 상관 없는 키워드들은 지워나갑니다.
남은 키워드들 중 좀 더 효율적인 키워드들을 모아 놓고 각 페이지별로 키워드들을 집어 넣습니다.

이 키워드들을 집어 넣는 곳은 HTML 소스코드 내에 <title><meta><header><alt><a><h1>~<h6> 등이 있습니다.

다음 시간엔 On Page Optimization을 공부하면서 이 태그들에 대해 좀 더 자세히 살펴 보겠습니다.
반응형
저작자표시 비영리 동일조건 (새창열림)

'etc. > SEO' 카테고리의 다른 글

[SEO] 안드로이드 앱 개발자가 저지르기 쉬운 10가지 실수  (0) 2013.09.19
SEO 홈페이지 마케팅 총정리 ***  (1) 2012.01.13
SEO 홈페이지 마케팅 - Off Page Optimization 4  (0) 2012.01.12
SEO 홈페이지 마케팅 - Off Page Optimization 3  (0) 2012.01.12
SEO 홈페이지 마케팅 - Off Page Optimization 2  (2) 2012.01.11
SEO 홈페이지 마케팅 - Off Page Optimization 1  (4) 2012.01.08
SEO 활용으로 홈페이지 마케팅 효과 높이기 3  (0) 2012.01.07
SEO 활용으로 홈페이지 마케팅 효과 높이기 2  (0) 2012.01.06
Corona SDK/Corona Doc

CoronaSDK 2011.715 버전 Email, SMS 기능 추가

2012. 1. 4. 20:10 | Posted by 솔웅


반응형
크리스마스 이브날 Build Up 된 CoronaSDK 2011.715 버전에서 Email, SMS 보내는 기능이 추가 됐습니다.

CoronaSDK의 단점인 Mobile Native 기능 사용에 많은 제한이 있었는데 하나 둘 지원을 해 주고 있습니다.

이 기능은 배포버전이 아니라 최신 Build 버전이기 때문에 유료 가입자만 사용할 수 있습니다.
CoronaSDK 2011.715 버전을 다운 받아서 upgrade 해야 하는데 유료 가입자만 이 것을 다운 받을 수 있거든요.

이메일과 문자메세지 보내는 기능 API를 살펴 보겠습니다.

기본 신택스는 아래와 같습니다.
native.showPopup(name)
native.showPopup(name, options)

샘플을 보겠습니다.

local options =
{
   to = "john.doe@somewhere.com",
   subject = "My High Score",
   body = "I scored over 9000!!! Can you do better?",
   attachment = { baseDir=system.DocumentsDirectory, filename="Screenshot.png", type="image" },
}
native.showPopup("mail", options)

options를 보면 들어가 있는 요소들은 받는이,메일제목,본문, 첨부 등이 있습니다.
만약에 메일 본문에서 HTML을 사용 가능하도록 하려면 아래와 같이 하면 됩니다.

local options =
{
   to = { "john.doe@somewhere.com", "jane.doe@somewhere.com" },
   cc = { "john.smith@somewhere.com", "jane.smith@somewhere.com" },
   subject = "My High Score",
   isBodyHtml = true,
   body = "<html><body>I scored over <b>9000</b>!!! Can you do better?</body></html>",
   attachment =
   {
      { baseDir=system.DocumentsDirectory, filename="Screenshot.png", type="image" },
      { baseDir=system.ResourceDirectory, filename="MyLogo.png", type="image" },
   },
}
native.showPopup("mail", options)

이 샘플에서는 받는이 이외에 참조인까지 넣었습니다. 그리고 isBodyHtml = true 를 해서 본문에 html 태그를 사용할 수 있도록 했습니다.

문자메세지 보내는 샘플은 아래와 같습니다.

local options =
{
   body = "I scored over 9000!!! Can you do better?"
}
native.showPopup("sms", options)

문자메세지 내용은 body에 넣으면 됩니다.
이러면 팝업윈도우에 주소록이 나와서 고를 수 있게 해 준다고 합니다.

그리고 여러명에게 보낼 때는 아래와 같이 하면 됩니다.

local options =
{
   to = { "1234567890", "9876543210" },
   body = "I scored over 9000!!! Can you do better?"
}
native.showPopup("sms", options)

각 파라미터에 대해 자세히 살펴보면 아래와 같습니다.

Parameters:

name
"mail"과 "sms" 둘 중 하나가 올 수 있습니다.

options
옵션들 입니다. 이 옵션들 중 사용하고 싶은 것만 사용하시면 됩니다.


메일과 관련해서는 아래의 프로퍼트들이 지원됩니다.

    options.to : 받는이의 이메일 주소. 한 개 이상 올 수 있습니다.
    options.cc : 참조인 이메일 주소. 한 개 이상 올 수 있습니다.
    options.bcc : 숨은 참조인 이메일 주소. 한 개 이상 올 수 있습니다.
    options.attachment : 첨부. 형식은 { baseDir=, filename= [, type=] }입니다. type 프로퍼티에는 "image" 같은 MIME type을 사용합니다. 여러 첨부 파일을 보내려면 이 테이블의 배열을 만들어야 합니다.
    options.body : 이메일의 내용입니다.
    options.isBodyHtml : true 나 false 값이 올 수 있으며 이메일 내용에 html 태그를 사용할 수 있는지 여부를 정해 줍니다. 디폴트로는 일반 텍스트(html을 사용하지 않는 경우)를 지원합니다.
    options.subject : 이메일 제목 입니다.

sms 와 관련해서는 아래와 같은 property들이 지원 됩니다.

    options.to : 받는이의 전화번호 입니다. 한 개 이상 사용할 수 있습니다.
    options.body : 문자메세지 내용입니다.

Returns:

result
result 값이 false 이면 popup 사용이 불가능하다는 것이거나 해당 기계에서 해당 기능을 사용할 수 없다는 것 입니다.

===== o ===== o ===== o ===== o ====== o ===== o=====
이메일과 sms 를 native.showPopup 을 사용해서 call 을 하면 전화기에서 지원하는 이메일과 문자보내기 화면이 뜰 겁니다. 옵션을 넣으면 그 옵션들이 해당 칸에 들어가게 됩니다.
옵션이 들어가도 유저들이 이를 수정할 수 있습니다. 그 부분은 coronasdk 앱이 아니라 해당 전화기의 앱이니까요.

sms 는 140문자 까지 됩니다. 모바일을 보면 sms 이외에 mms라는 기능도 있던데 이 기능은 아직 따로 지원이 안 되는 것 같습니다.

한번 더 언급하는데요. 이 기능은 CoronaSDK 2011.715 버전 이후에서 사용 가능합니다. 그리고 이 버전은 유료 가입자만 다운 받을 수 있구요.
그래서 아직까지는 유료 가입자만 이 기능을 이용할 수 있습니다.
무료로 SDK를 다운 받아서 연습하시는 분들은 이 버전이 공개될 때까지 기다리셔야 합니다.
아마 조만간 공개 되겠죠.
반응형
저작자표시 비영리 동일조건 (새창열림)

'Corona SDK > Corona Doc' 카테고리의 다른 글

New Game Center Request APIs  (4) 2012.01.29
New Native Web and Video API’s 소개  (4) 2012.01.25
Facebook Single Sign-On  (2) 2012.01.21
Game Center Integration (iOS)  (2) 2012.01.20
New, More Flexible ScrollView Widget  (5) 2012.01.15
화면 전환 Storyboard API 개요  (0) 2011.12.10
Corona SDK 프로그래밍 테크닉 4 - Corona DOC 마지막 강좌 -  (4) 2011.11.11
Corona SDK 프로그래밍 테크닉 3  (0) 2011.11.10
Corona SDK 프로그래밍 테크닉 2  (2) 2011.11.09
Corona SDK 프로그래밍 테크닉 1  (1) 2011.11.08
Corona SDK/샘플 코드 분석

돈 넣고 돈 먹기(야바위) 모바일 게임 만들기 2

2012. 1. 4. 03:05 | Posted by 솔웅


반응형
어제 세계 최고의 기획자로 부터 야바위 게임 스토리 보드를 전달 받았습니다.
기획자가 너무 훌륭해서 스토리 보드만 가지고도 충분히 코딩을 할 수가 있겠네요. ^^
기획자로부터 자세히 설명을 듣고 이렇게 스토리보드 까지 받았습니다.

이제 프로그래머는 나름대로 objects 들과 함수들에 대한 설계를 했을 테고 또 Flow Chart 를 그려서 어떻게 앱이 진행될지 그려 보았을 겁니다.

좀 더 완벽하게 준비하는 스타일의 개발자라면 Use Case 도 한번 정리 해 봤겠죠...
물론 이 내용들은 하나의 문서에 정리 돼 있겠구요.

이제 코딩을 시작하겠습니다.

display.setStatusBar(display.HiddenStatusBar)
-- Graphics-- [Background]
local bg = display.newImage('bg.png')

일단 아이폰에서 status bar 를 안보이도록 하구요.
백그라운드 이미지는 앱이 시작하면서 끝날때까지 유지 되니까 함수(function) 내가 아니라 이렇게 앱 시작하면서 display를 해 놓습니다.

그 다음엔 각 objects를 담을 변수들을 만듭니다.

-- [Title View]
local title; local playBtn; local creditsBtn; local titleView

여긴 게임 첫 화면에 나올 objects를 정리했습니다.
게임 제목과 플레이 버튼,크레딧 버튼이구요. 이 첫 화면 객체들을 담을 그룹으로 titleView를 사용할 겁니다.

-- [Credits]
local creditsView -- 첫 화면에서 나올 credit 이미지가 들어갈 변수입니다.

-- [Bank Credits]
local bank; local bankText

게임 화면에서 좌측 상단에 들어갈 숫자(bank)와 이미지(bankText) 변수 입니다.

-- [Shells]
local s1; local s2; local s3; local shells;

3개 shell에 대한 변수 이구요. 이 3개 shell 들을 담을 로컬그룹 변수 shells입니다.

-- [Ball]
local ball -- ball 이미지를 담을 변수입니다.
-- [Button Bar]
local buttonBar -- 아래 진한 색 네모를 표시할 이미지를 담을 변수입니다.
-- [Bet Button]
local betBtn     -- 게임 시작 버튼 이미지를 담을 변수 입니다.
-- [Message Text]
local msg        -- 왼쪽 아래 안내 문구를 담을 변수 입니다.
-- [GameView]
local gameView  -- Game 화면에 있는 모든 변수
-- [Alert]
local alert-- alert 이미지 담을 변수
local moveSpeed = 600  -- shell 움직이는 스피드
local totalMoves = 5      -- shell 움직이는 횟수

자 여기까지 야바위 게임에서 사용할 모든 objects에 대한 변수를 선언했습니다.
세계최고의 기획자가 스토리보드에서 언급한 모든 객체를 생성했구요.
또 프로그래머가 화면 전환할 때 사용하기 위해 각 화면별 objects들의 localGroup으로 사용할 변수들도 선언했습니다.
그리고 스피드,움직이는 횟수같은 개념적인 객체에 대한 변수까지 다 선언했습니다.
변수의 갯수가 총 20개네요.
20개의 objects들이 이 게임을 만들어 나갈겁니다.
출연자들이죠. 주연도 있고 조연도 있고...
이제 스토리보드 대로 (시나리오대로) 움직임을 만들 차례입니다.

그러기 위해 함수(메소드)를 선언합니다.

-- Functions
local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local placeBet = {}
local randomShellMove = {}
local checkMovesLeft = {}
local revealBall = {}
local alert = {}

이 앱에서는 총 10개의 메소드가 사용됩니다.

-- Main Function
function Main()
    title = display.newImage('title.png', display.contentCenterX - 123, 40)
    playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY - 10)
    creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 45)
    titleView = display.newGroup(title, playBtn, creditsBtn)
  
    startButtonListeners('add')
end

첫번째 함수는 Main()함수입니다.
이 소스코드 맨 마지막을 보시면 이 메인 함수를 호출합니다.
Main() 부분이죠. 그러니까 이 앱은 이 Main()부터 시작합니다.
그러니까 첫화면에 display될 제목과 플레이/credit 버튼을 화면에 그립니다.
그리고 이 title화면의 객체들을 titleView라는 localGroup으로 그룹화 합니다.
(여기서 bg는 빠졌습니다. 왜냐하면 bg는 모든 화면에 다 등장할 거거든요.)

그리고 startButtonListeners()라는 함수에 add라는 인수를 전달하면서 호출합니다.

function startButtonListeners(action)
    if(action == 'add') then
        playBtn:addEventListener('tap', showGameView)
        creditsBtn:addEventListener('tap', showCredits)
    else
        playBtn:removeEventListener('tap', showGameView)
        creditsBtn:removeEventListener('tap', showCredits)
    end
end

메인에서 호출된 함수인데요.
메인에서 add를 인수로 던졌죠?
안에 내용을 보니까 add가 인수일 경우에는 플레이버튼과 크레딧 버튼에 리스너를 답니다.
플레이버튼을 누르면 showGameView() 함수를 실행하고 크레딧버튼을 누르면 showCredits() 함수를 실행하게 됩니다.
만약 인수가 add가 아니라면 이 두 리스너를 remove합니다.

우선 크레딧 버튼을 눌렀을 때 실행될 showCredits() 함수를 보겠습니다.

function showCredits:tap(e)
    playBtn.isVisible = false
    creditsBtn.isVisible = false
    creditsView = display.newImage('credits.png')
    transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end})
end

메인함수에서 크레딧 버튼을 누르면 실행되는 함수입니다.
처음에 플레이 버튼과 크레딧 버튼을 안 보이도록 만듭니다.
그리고 creditsView 이미지를 만들구요. 이 이미지를 transition합니다.
0.3초동안 왼쪽에서부터 서서히 나올 겁니다.
이미지가 다 나오면 이 이미지에 리스너를 답니다.
이 creditsView 이미지를 클릭하면 hideCredits() 함수가 실행 됩니다.

function hideCredits:tap(e)
    playBtn.isVisible = true
    creditsBtn.isVisible = true
    transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end

크레딧 이미지를 클릭하면 실행되는 함수 입니다.
아까 안 보이도록 했던 플레이버튼과 크레딧 버튼을 모두 다시 보이도록 합니다.
creditsView를 transition.to를 이용해서 왼쪽으로 사라지도록 합니다.
다 사라지면 아까 만들었던 creditsView에 대한 리스너를 remove합니다.

여기까지가 첫 화면에서 크레딧 버튼을 누르고 나서 다시 원래 화면으로 돌아오기 까지 진행시키는 함수들 입니다.

다음엔 첫 화면에서 플레이 버튼을 누르면 실행되는 showGameView() 함수입니다.
본격적으로 게임이 시작 되는 부분입니다.

function showGameView:tap(e)
    transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})
    -- [Bank Credits]
    bank = display.newText('5', 18, 5, native.systemFontBold, 14)
    bank:setTextColor(234, 170, 12)
    bankText = display.newImage('bankText.png', 7.5, 25)

    -- [Ball]
    ball = display.newImage('ball.png', 228, 142)
  
    -- [Shells]
    s1 = display.newImage('shell.png', 50, 114)
    s2 = display.newImage('shell.png', 195, 84)
    s2.name = 's2'
    s3 = display.newImage('shell.png', 340, 114)
    shells = display.newGroup(s1, s2, s3)
  
    -- [Button Bar]
    buttonBar = display.newImage('buttonBar.png', 0, 270)
    msg = display.newText('Click Bet to start', 1, 307, native.systemFont, 9)
    betBtn = display.newImage('betBtn.png', 223, 275)
  
    betBtn:addEventListener('tap', placeBet)
  
    gameView = display.newGroup(bank, bankText, ball, shells, buttonBar, msg, betBtn)
end

실제 게임화면으로 넘어오면 처음에 실행되는게 이전 화면의 객체들을 없애는 작업입니다.
아까 첫 화면 객체들은 titleView라는 localGroup으로 그룹화를 했었습니다.
transition.to를 이용해서 이 titleView를 왼쪽으로 이동시키고 다 이동되면 startButtonListener에 rmv라는 인수를 전달하면서 실행시킵니다.
startButtonListener는 아까 add를 인수로 전달하면서 불렀던 함수인데요.
인수가 add가 아니면 첫 화면의 플레이버튼하고 크레딧 버튼의 리스너를 remove하도록 돼 있었습니다.
그러니까 첫화면의 객체들을 사라지게 하고 이 객체들에 할당된 리스너들도 다 remove 한 겁니다.
그 다음으로는 text를 출력할 bank를 만들고 위치시켜주고 색도 지정합니다.
그리고 bankText 이미지도 지정된 위치에 display합니다.
다음은 ball 이미지를 지정된 위치에 display하구요. shell 3개를 나란히 display합니다.
여기서 ball이 들어가 있게 될 shell은 별도로 name을 s2라고 할당합니다.
그리고 이 shell들을 shells라는 변수에 그룹화 시켜 놓습니다.
다음에 하단에 buttonBar를 표시하고 msg Text를 표시합니다.
그리고 betBtn을 표시하고 이 이미지에 리스너를 답니다.
이 이미지를 누르면 paceBet() 함수가 실행됩니다.
맨 마지막에는 이 게임 화면에 있는 모든 objects를 gameView변수로 그룹화 합니다.
나중에 화면전환 할 때 사용하기 위해서 입니다.


function placeBet:tap(e)  
    -- Place Bet
    bank.text = bank.text - 1;
    -- Remove Button Listener
    betBtn:removeEventListener('tap', placeBet)
    -- Change Msg
    msg.text = ''
    -- Reset Total Moves
    totalMoves = 5
    -- Hide Ball
    transition.to(s2, {time = moveSpeed, y = s2.y + 30, onComplete = randomShellMove})
end

betBtn을 누르면 실행 될 placeBet()함수입니다.
이 함수에서는 bank.text를 -1해서 다시 display합니다.
그리고 betBtn이미지의 리스너를 remove합니다.
다음으로는 msg.text를 아무것도 표시하지 않도록 고치구요.
shell이 몇번 움직일지 그 숫자를 다시 지정합니다.
(지금은 초기 설정값이랑 같은데 만약에 점점 더 움직이는 횟수를 늘리고 싶으면 이 부분에서 코딩해 주면 됩니다.)
다음은 s2를 아래로 내립니다. 그러면 공을 덮어서 안 보이게 됩니다.
완료 되면 randomShellMove() 함수가 호출 됩니다.

function randomShellMove()
    local randm = math.floor(math.random() * 2) + 1
  
    local shell1 = shells[randm]
    local shell2
  
    if(shell1 ~= 3) then
        shell2 = shells[randm + 1]
    elseif(shell1 ~= 1) then
        shell2 = shells[randm - 1]
    end
  
    ball.isVisible = false
  
    totalMoves = totalMoves -1
  
    transition.to(shell1, {time = moveSpeed, x = shell2.x, y = shell2.y})
    transition.to(shell2, {time = moveSpeed, x = shell1.x, y = shell1.y, onComplete = checkMovesLeft})
end

여기는 3개의 shell을 움직이는 로직입니다.
아마 이 앱에서의 핵심 부분일 겁니다.
이 로직은 여러분이 연구해 보세요.
이것보다 더 좋은 로직을 생각해 보셔도 되구요.
이 로직에 대한 해석은 생략하겠습니다.
하여간 로직대로 shell3개를 5회 움직입니다. 이때 ball은 안보이도록 하구요.
shell2가 다 움직이면 checkMovesLeft()를 호출합니다.

function checkMovesLeft()
    if(totalMoves > 0) then
        randomShellMove()
    else
        s1:addEventListener('tap', revealBall)
        s2:addEventListener('tap', revealBall)
        s3:addEventListener('tap', revealBall)
      
        -- Change Msg
        msg.text = 'Click where the ball is'
        msg:setReferencePoint(display.TopLeftReferencePoint)
        msg.x = -20
    end
end

이 함수에서는 totalMoves를 먼저 체크합니다. 0이 아니면 randomShellMove()함수를 다시 호출합니다. 이렇게 해서 총 5번 randomShellMove()함수가 실행 될 겁니다.
totalMoves가 0 이면 각 shell에 모두 리스너를 답니다.
tap 하면 revealBall함수가 실행되도록이요.
그리고 msg.text는 Click where the ball is 로 바꿔 주시고 그 위치를 바로 잡아 줍니다.

function revealBall:tap(e)
    -- Remove Shell Mouse Listeners
    s1:removeEventListener('tap', revealBall)
    s2:removeEventListener('tap', revealBall)
    s3:removeEventListener('tap', revealBall)
  
    -- Move Ball to correct position
    ball.x = s2.x + 75
    ball.y = s2.y + 150
    ball.isVisible = true
  
    -- Give credits if correct guess
  
    if(e.target.name == 's2') then
        bank.text = bank.text + 2
        -- Change Msg
        msg.text = 'Correct! Click Bet to play again'
        msg:setReferencePoint(display.TopLeftReferencePoint)
        msg.x = -20
    else
        msg.text = 'Wrong! Click Bet to play again'
        msg:setReferencePoint(display.TopLeftReferencePoint)
        msg.x = -20
    end

    -- Reveal Ball
    transition.to(s2, {time = moveSpeed, y = s2.y - 30})
  
    -- Add Bet button listener
    betBtn:addEventListener('tap', placeBet)
  
    -- Check for bank credits
    if(bank.text == '0') then
        betBtn:removeEventListener('tap', placeBet)
            alert()
    end
end

이 함수에서는 호출되면 일단 3개 shell에 할당된 리스너를 모두 remove합니다.
그리고 ball의 위치를 두번째 shell 즉 s2 안으로 위치시키고 이 볼이 보일 수 있게 합니다.
터치한 shell이 s2이면 즉 ball이 있는 shell이면 msg.text를 Correct! Click Bet to play again 으로 표시하고 그 위치를 바로 잡습니다. 그리고 s2가  아니면 Wrong! Click Bet to play again 을 표시하고 그 위치를 잡습니다.
그리고 s2를 transition.to를 이용해서 위로 올립니다. 그러면 ball이 나오겠죠?
이제 게임을 다시 시작할 수 있도록 betBtn에 리스너를 다시 달아줍니다.
만약 bank.text가 0 이면 그 리스너를 다시 없애고 alert() 함수를 실행합니다.

function alert()
    alert = display.newImage('alert.png')
    alert:setReferencePoint(display.CenterReferencePoint)
    alert.x = display.contentCenterX
    alert.y = display.contentCenterY
    transition.from(alert, {time = 300, xScale = 0.3, yScale = 0.3})
  
    msg.text = ''
  
    alert:addEventListener('tap', restart)
end

이 함수에서는 alert이미지를 transition.from을 이용해서 display하구요.
msg.text를 아무것도 표시 안 합니다.
그리고 이 alert이미지에 리스너를 달아서 tap하면 restart()함수가 실행되도록 합니다.

function restart()
    display.remove(gameView)
    gameView = nil
    display.remove(alert)
    alert = nil
  
    Main()
end
이 함수에서는 게임화면에 있는 모든 객체들(gameView)을 remove합니다.
그리고 alert화면도 remove합니다.
그리고 Main()을 실행시켜 게임을 다시 시작하도록 합니다.

Main()
이 부분은 앱이 처음 시작할 때 Main()을 호출하는 부분입니다.

이번엔 야바위게임을 같이 살펴봤습니다.
게임 설계가 아주 모범적으로 잘 돼 있는것 같습니다.

저도 이 모범적인 설계를 배우고 싶어서 공부 자료로 사용했습니다.
코딩이 아주 깔끔하네요.

아래 원래 소스 파일이 있습니다.

source.zip

반응형
저작자표시 비영리 동일조건 (새창열림)

'Corona SDK > 샘플 코드 분석' 카테고리의 다른 글

animation chain 소스 분석 해 보기 03  (0) 2013.08.11
animation chain 소스 분석 해 보기 02  (1) 2013.07.22
animation chain 소스 분석 해 보기 01  (0) 2013.07.15
코로나로 뱀 기어디니는 효과 내기  (0) 2012.02.28
간단하게 눈발 흩날리는 느낌 주기  (2) 2012.02.16
돈 넣고 돈 먹기(야바위) 모바일 게임 만들기 1  (2) 2012.01.03
내가 그린 선으로 떨어지는 공 받아내기  (2) 2011.12.31
Corona SDK 화면전환 API (Story Board)  (4) 2011.12.23
Level 별 Lock 기능 걸고 푸는 법  (0) 2011.12.15
벽돌 깨기 게임 만들기 -3  (1) 2011.12.01

티스토리툴바