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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

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  (0) 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
Corona SDK/샘플 코드 분석

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

2012. 1. 3. 12:07 | Posted by 솔웅


반응형
오늘은 Corona SDK 로 만든 돈 넣고 돈 먹기 게임을 공부해 보겠습니다.
예전에 장터에 가면 사발이 세개 있고 그 중 한개에 구슬이나 주사위를 넣은 다음 막 돌린 다음 그 주사위가 어디에 있는지 알아 맞추는 놀이가 있었죠?
야바위라고 어른들이 그러셨는데....

Carlos Yanez 라는 개발자가 이 야바위를 모바일 애플리케이션으로 개발 했습니다. Corona SDK로요.
그리고 그 소스를 공유했습니다.

제가 보기엔 아주 프로그램이 알차게 잘 돼 있는 것 같습니다.
이 소스코드를 분석하면 아주 공부가 잘 될 것 같습니다.
(그리고 이 야바위 게임이 전 세계적으로 있었나 보네요. 몰랐는데......)

아래 각 게임 화면들을 캡쳐 했습니다.

이걸 게임 개발 하기 전에 개발자가 받은 Story Board 라고 생각을 해 보죠.
아주 훌륭한 기획자라면 이렇게 디자인까지 다 된 스토리보드를 개발자에게 줄 거예요.
그런데 너무 그런거까지 기대하지 마세요. 디자인 까지는 안 되더라도 모바일 이미지 내 objects 배치해서 주는 기획자도 드물거예요.
그냥 볼펜으로 끄적인 스토리 보드만 줘도 감지덕지죠.
안 에 들어가는 Objects 들하고 있게 될 Event 들 하고 그 이벤트로 인해 진행되는 object 들의 behavior 만 잘 정리 되면 되죠 뭐.

하여간 아래 내용은 세계에서 최고로 개발자에게 편하게 기획하는 기획자가 만든 앱의 스토리보드라고 생각해 봐요 우리.

1. 첫 화면


Objects (객체들)

:  bg 배경이미지, title 게임 제목,  playBtn 플레이 버튼, creditsBtn 크레딧 버튼

Events/Behavior (이벤트)

: playBtn 누르면 현재화면 중 배경만 남고 모두 없어짐 -> 게임 화면으로 옮김

  현재 화면 객체들 왼쪽으로 slide 되면서 없어질 것

: creditsBtn 누르면 Credits를 보여 줌

  플레이와 크레디트 버튼 없어지고 크레디트 이미지가 왼쪽에서 slide 되면서 나옴


2. Credit 화면 (Credit 버튼 누르면 나옴)



Objects

: Credits 이미지

  나머지 bg와 title은 이전화면에서 없어지지 않고 그대로 있음

: Events/Behavior

  Credits 이미지를 클릭하면 이미지가 왼쪽으로 사라짐

  1번 화면이 다시 나옴


3. 게임 화면



objects

: bg 배경화면 그대로

: bank 왼쪽 상단 숫자, 처음엔 5자가 표시 됨

: bankText BANK 이미지

: ball

: s1/s2/s3 shell 3개

: buttonBar 밑에 진한 사각형

: msg 좌측 하단에 메세지, 처음에 Click Bet to start 가 표시 됨

: betBtn 게임 시작 버튼


Events/Behavior

betBtn 버튼에 tab 리스너를 담.

betBtn을 누르면

- Bank 숫자에서 -1을 함

- betBtn 리스너를 Remove 함

- msg 텍스트를 없앰

- 위로 올라간 shell 이 ball 을 덮음

- shell 을 총 5번 움직임. 움직임 속도는 600으로 함. 랜덤하게 움직임


4. Shell 이 다 움직이고 User 의 선택을 기다리는 화면, 선택한 후 화면





objects

: 게임 화면이므로 3번 게임화면과 똑 같음

Event/Behavior

: msg는 Click where the ball is 를 표시함

: 각 shell 에 리스너를 담

: 어떤 Shell 을 클릭해도 공이 있는 Shell이 올라감

: 공이 있는 Shell 을 클릭하면 bank+2를 해 줌, msg는 Correct! Click Bet to play again 을 표시해 줌

: 공이 없는 Shell 을 클릭하면 msg는 Wrong! Click Bet to play again을 해 줌

: betBtn 에 다시 리스너를 담,

: bank 가 0점이면 alert() 화면을 띄움


5. Game Over 화면 (Alert)



Objects
: alert 이미지
Event/Behavior
: msg는 표시 안 함
: alert 이미지에 리스너를 담
  클릭하면 게임을 재 시작 함


자 여기까지가 바로 세계에서 제일 훌륭한 기획자가 만든 스토리 보드 입니다.
기획에서 이정도만 해주면 개발자는 아주 편하겠죠?

이제 이 것을 토대로 Flow Chart 도 만들어 보고 Use Case 도 만들어보고 나름대로 함수(클래스) 설계도 해 보세요.

아마 그러면 실력향상에 아주 도움이 될 겁니다.

다음 시간엔 이 스토리 보드를 가지고 소스 코딩을 해 보겠습니다.

반응형
저작자표시 비영리 동일조건

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

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

HTML5 Form 공부하기 -2-

2012. 1. 2. 08:24 | Posted by 솔웅


반응형
이전 글에 이어서 계속 HTML5 의 Form 에 대해 알아보겠습니다.

*** type="color"
이 기능도 아주 매력적인 기능입니다.
색을 유저가 고를 수 있게 도와주는 기능인데요. 단지 HTML의 Input 태그에서 type만 color로 해주면 됩니다. 너무 간단한데 아직까지는 Opera에서만 지원이 되나봐요.
어제 코드에 아래 코드를 추가해 주세요.
            <label for="background-color">Choose a calor for background(Opera 11 only) :</label>
            <input id="background-color" type="color" /> <br/>


이렇게 유저가 색을 고를 수 있구요. Other를 누르면 좀 더 다양한 색을 고를 수 있습니다.

*** type="range"
이 기능은 한정된 숫자 범위 중에 유저가 입력 없이 Drag나 Touch 로 숫자를 선택할 수 있는 기능입니다.
일반 웹페이지에서도 사용할 수 있겠지만 모바일에서 훨씬 유용하게 사용될 수 있을 것 같네요.
<label >Forget about writing, just slide.</label>
 <input type="range" min="1" max="10" step="1" value="1"/><br/>


number type 과 같이 미니멈,맥스멈, step을 설정할 수 있습니다. 물론 대부분의 input 에서 지원되는 value 도 지정할 수 있구요.
위 화면은 오페라 브라우저 입니다. 다른 브라우저들에서는 다르게 나올 수 있습니다. HTML5가 지원이 안 되는 브라우저에서는 안 나올 수도 있구요.
모바일에서는 안드로이드, 아이폰 모두 HTML5 를 지원하니까 다 제대로 나올 겁니다.

*** type="file"
파일 업로드 할 때 사용할 수 있습니다.
여러 파일을 한꺼번에 업로드 하는 것 을 지원 하려면 multiple을 사용하시면 됩니다.
실제로 업로드(서버로)를 하려면 Server side script 언어인 PHP,JSP,ASP 등을 사용해야 합니다.
<input type="file" name="multiplefieldupload" multiple /><br/>


*** datalist
사용자에게 여러 리스트 중에서 하나를 선택하도록 할 때 datalist 를 이용합니다.
이 경우 <input > 태그의 type은 text 이지만 이외에 list="aaa" 라고 따로 리스트를 지정해 줍니다.
그리고 <datalist id="aaa">로 datalist 태그를 만들고 그 안에 원하는 리스트를 넣으면 됩니다.
그리고 유저가 리스트 중 하나를 선택하면 이 값을 받아서 display 할 수도 있습니다.
예전에는 모두 javascript로 작성했는데 HTML내에서 아주 간단하게 처리할 수 있네요.
아래 코드를 넣어 보세요.
<label> <h6>요즘 인터넷에 떠도는 이명박 대통령이나 친인척 관련 비리 루머들이 있습니다. <br/>
                여러분은 이중 어느것이 진실이고 실제로 어느것이 이명박 대통령과 관계가 있다고 생각하시나요? :

</h6>
            <input type="text" name="mbbiri" list="mbbiri"/>
                <datalist id="mbbiri">
                    <option value="주가조작BBK실소유주">
                    <option value="내곡동사저비리">
                    <option value="부산저축은행비리">
                    <option value="4대강 비리">
                    <option value="인천공항매각비리">
                    <option value="삼화저축은행비리">
                    <option value="모두다 관련이 있다">
                    <option value="아무것도 관련이 없다">
                </datalist>
            </label> <br>
            <label> You have entered:
                <output onforminput="this.value=mbbiri.value" />
            </label><p>


브라우저에서 실행합니다.

유저가 textbox를 선택하면 프로그램적으로 얘기하면 이 textbox가 활성화 되면 이렇게 리스트가 출력 됩니다.




그리고 유저가 이 리스트 중 아무거나 선택을 하면 그 선택한 값을 이렇게 출력 할 수도 있습니다.

조금 정치적인 예문이었죠?

인터넷 뉴스 보면 나오니까... 들은 얘기들인데... 내 생각은 말 못하겠어요... ^^

그래서 급하게 '아무 말 못하겠다'를 하나 더 만들어서 그걸 선택해 버렸네요.

쫄지 말아야 되는데... :)

아 그리고 론스타 비리, 디도스 부정선거 비리도 있는데 깜빡했다.. 아쉽네...

지난번에도 썼었는데..

학생은 하라는 공부하고 직장인들은 경제를 위해서 열심히 일해야 합니다.

그리고 국민들은 열심히 정치에 참여해야 합니다.   ^^


이 기능도 오페라 브라우저에서는 잘 됩니다. 그런데 다른 브라우저에서는 잘 되는지 모르겠네요. 제가 테스트하던 크롬에서는 안되네요.


***  placeholder

input box를 보면 미리 연한 글씨로 글자가 쓰여져 있는 경우가 있습니다. 유저가 그 textbox를 클릭하면 이 연한 글자는 지워지고 유저가 원하는 글자를 입력할 수 있게 되는데요. 이 연한 글자(guide)가 나오도록 하는 것이 placeholder 입니다.

<input type="text" placeholder="Type Anything"> <p>

보시면 맨 아래 input box에 Type Anything이라는 글자가 미리 나와 있죠?


*** Required

회원가입을 하다보면 id, password 같은 것들은 필수 입력 항목입니다.

이 필수 입력항목을 넣지 않고 버튼을 누르면 이 입력 항목을 넣으라는 메세지가 나오죠?

예전에는 이것을 모두 JavaScript로 했는데 HTML5에서는 자체적으로 이 기능을 제공하고 있습니다.


방금 전 placeholder 했던 tag에 required 를 넣어 보세요.

<input type="text" placeholder="Type Anything" required> <p>


이렇게 Required 를 한 input box에 아무것도 안 넣고 버튼을 누르면 값을 넣으라고 메세지가 나옵니다.


브라우저 마다 똑 같이 나오는 것은 아닙니다. 처음 것은 Opera 이고 두번째 것은 Chrome 입니다. 기능은 제공하지만 모양이나 문구는 다르게 나옵니다.


*** date,time,month,week

유저에게 날짜등을 입력받을 때 달력이 뜨게 하는 기능이 있습니다.

아직까지는 이 기능 구현할 때 아주 복잡한 자바스크립트를 사용합니다.

하지만 HTML5에서는 아주 간단하게 이런 기능을 구현할 수 있습니다.

다만 이것도 오페라 브라우저에서만 지원이 되는 것 같습니다.

<label> Choose a date :
            <input type="date"/>
            </label><br/>
            <label> Choose a time :
            <input type="time"/>
            </label><br/>
            <label> Choose a month :
            <input type="month"/>
            </label><br/>
            <label> Choose a week :
            <input type="week"/>
            </label><br/>


이렇게 해당 칸을 클릭하면 달력이 뜹니다. 그냥 단지 type="date" 했을 뿐인데 아주 근사한 달력이 제공 되네요. (오페라에서만.. 아직 까지는...)


보시다 시피 date 타입은 연월일, month 타입은 연월 그리고 week 타입은 선택한 주가 1년중 몇번째 주인지가 나옵니다.

time은 1~24시간이 표시됩니다. 분단위로 위아래로 움직일 수 있고 직접 type 도 가능합니다.


여기까지 HTML5이 Form 에 대해서 알아 봤습니다.


그럼.. 새해 복 많이 받으세요....

반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Storage 4 - Application Cache -  (0) 2012.01.11
HTML5 Storage 3 - IndexedDB -  (0) 2012.01.10
HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10
HTML5 Storage 1 - Web Storage -  (2) 2012.01.10
HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
WEB_APP/HTML5

HTML5 Form 공부하기 -1-

2012. 1. 2. 06:01 | Posted by 솔웅


반응형
HTML 5 의 Semantic 관련 태그 공부에 이어서 Form 관련 Tag에 대해 공부하겠습니다.
Form 은 웹페이지에서 아이디 비밀번호를 넣고 버튼을 누르면 로그인이 되는 부분.
그리고 회원가입할 때 이름,주소, 전화번호 뭐 이런거 넣을 때 버튼 누르면 회원가입이 되는 부분.
뭐 이렇게 유저가 데이터를 Type하고 그 데이터를 서버에 보내서 어떤 일을 처리할 수 있도록 하는 부분의 처음에 HTML 웹페이지의 Form에서 이뤄집니다.

일단 이것을 사용하려면 HTML의 <body> </body> 태그 사이에 <form> </form> Tag를 사용해서 구현합니다.

서버로 보내려면 <form > 태그 안에 정보 보낼 목적지가 들어가야 되고 그 목적지에서 PHP나 ASP 같은 Server side script 언어로 서버에 데이터를 보내는 등의 작업이 이뤄져야 하는데요.

이 부분은 여기서 공부하는 HTML5와는 다른 부분이라서 이 글에서는 HTML5 내의 <input> 태그의 종류(Type)에 대해서만 다루겠습니다.
이전 HTML보다 훨씬 진보된 여러 기능이 HTML5에서 지원 됩니다.
우선 아래와 같이 html을 작성 하세요.
<!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Form</title>
    <meta charset="utf-8"/>
</head>
<body>
    <form>
        <fieldset>
            <legend> This is the Web Form of HTML5. </legend>
          
        </fieldset>
    </form>
</body>
</html>


우선 <form></form>태그로 감싸고 그 사이에 <fieldset>과<legend> 로 내용이 들어갈 테두리와 그 제목을 넣습니다.

이제부터 이 <legend></legend> 밑에 코드들을 넣어 가면서 공부하겠습니다.
우선 아주 기본적인 요소인 <label> 태그와 <input> 태그 중에서 type이 text 인 것 과 email 인 것을 넣어 보겠습니다.

그리고 </fieldset> 바로 위에는 버튼을 넣겠습니다.

            <label name="name"> Name</label>
            <input name="name" type="text" /> <br/>
            <label name="email"> Email </label>
            <input name="email" type="email" /> <br/>


<input type="submit" value="Enter" />

이 코드를 넣으면 아래와 같이 됩니다.


위에는 Opera 브라우저에서 본 화면이고 아래는 Chrome 브라우저에서 본 겁니다.
나중에 배울 date와 color type 등은 아직까지 Opera에서만 지원이 되는 것 같더라구요.
그래서 아마 Opera 브라우저 화면으로 테스트를 진행하시면 좋을 겁니다.

여기서 label은 그냥 글자 써 넣을 때 사용하는 것이고 input 태그의 type 이 text 인 것은 user로부터 입력을 받기 위한 것입니다. text type 은 user 가 아무것이나 입력할 수 있도록 허용합니다.
반면에 type 이  email 인 경우에는 email 형식이 아닐 경우 즉 중간에 @이 들어가야 되고 그 이후는 도메인 주소가 되야되고 하는 그런 형식에 위배되면 메세지를 띄웁니다.


예전에는 이런것들을 모두 JavaScript에서 했는데 이제는 그냥 HTML5에서 다 처리해 줍니다.

마찬가지로 blog,숫자,전화번호에 대한 type 들도 따로 있습니다.

            <label name="blog"> Blog </label>
            <input name="blog" type="url" /> <br/>
            <label name="number"> Number </label>
            <input type="number" value="1900" min="1900" max = "2200"/><br/>
            <label name="phone"> Phone </label>
            <input id="phone" type="tel" /><br/>

blog는 인터넷 주소 규칙에 맞게 써야 합니다. 그렇지 않으면 위 화면 같이 메세지가 뜹니다. (http://coronasdk.tistory.com 이렇게 완벽하게 쳐 넣어야 합니다.)
그런데 오페라에서는 앞에 http://가 없으면 자동으로 넣어 주기도 하더라구요.
HTML5가 모든 브라우저에서 동일하게 적용되지 않기 때문에 이런 부분은 주의를 하셔야 합니다.
Mobile에서는 거의 모든 브라우저가 HTML5를 지원하기 때문에 제약이 덜 하겠지만요....
일단 type 이 blog 인 것은 웹 주소 형식을 체크해 주도록 되 있구요.
다음 number와 tel 은 모바일 웹을 개발 할 때 유용할 겁니다.
이곳 input box를 유저가 선택하면 모바일에서는 숫자 입력키보드나 전화번호 입력 키보드가 뜨게 될 테니까요.
number 는minimum 값과 maximum 값을 지정할 수도 있구요. 1단위로 넘어갈지 2단위로 넘어갈지 아니면 10씩 넘어갈지 정하는 step 이라는 인수도 있습니다.
type이 tel 이면 설명 드렸듯이 전화번호를 입력할 거라는 의미인데 모바일 폰에서 유용하게 사용 될 수 있습니다.

오늘은 여기까지 하구요.
다음 시간에는 Opera 브라우저에서 잘 지원되고 있는 date, color type을 비롯해서 range, file 업로드 그리고 datalist 기능 등에 대해 공부 해 보겠습니다.

반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Storage 3 - IndexedDB -  (0) 2012.01.10
HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10
HTML5 Storage 1 - Web Storage -  (2) 2012.01.10
HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
WEB_APP/HTML5

HTML5 기본 Semantic Tag 들 알아보기 -3-

2012. 1. 1. 04:18 | Posted by 솔웅


반응형
오늘 HTML5 기본 Semantic Tag 알아보기 마지막 시간입니다.
나중에 또 좋은 정보를 얻으면 공부하고 여기 정리해 놓겠지만 wiredwiki의 강좌에서는 마지막 입니다.

오늘 다룰 Tag들은 <mark><progress> 입니다.
<mark> 는 의미적인 의미에서 강조를 주는 태그 입니다. 예전에 <strong>은 시각적인 의미에서 강조를 주었거든요.
<mark>를 이용한다고 더 글자가 진해지거나 하지는 않습니다. CSS를 이용해서 처리해야합니다.
그리고 <progress> 태그는 진행바입니다. 다운로드 같은거 받을 때 얼마나 진행됐는지 보여주는 겁니다.

그리고 HTML5에서 새로워진 것 중 하나가 CSS 사용법인데요.
예전엔 CSS를 사용하려면 <head> 안에 넣거나 외부파일로 만든 다음 <head> 안에서 link를 걸어야 됐습니다.
아니면 <body> 내에 있는 다른 Tag 안에서 달아주던가 했는데요.
HTML5에서는 하나의 방법이 더 생겼습니다.
<style scoped> </style> 안에 넣으면 됩니다.

 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
</head>
<body>
    <p> Welcome to <mark> HTML5 </mark> </p>
    <p> Status: <progress min="0" max="100" value="38"></progress></p>
    <style scoped>
        h1 {color:red;
            font-family:verdana;
            font-size:normal;}
    </style>
    <p>
    <h1> Page Title</h1>
    <p>
    <a href="http://html5.validator.nu/"> http://html5.validator.nu/ </a>
    <p>   
</body>
</html>

실제로 이 3개 태그를 사용한 코드입니다.
화면을 볼까요?

처음에 <mark> 처리 한 것은 배경색이 노란색으로 됐네요. 배울 때는 아무런 변화가 없다고 배웠는데... 제가 테스트하는 브라우저(크롬)에서는 <mark> 를 이용하면 이렇게 노란 배경색이 깔리나 봅니다.

그 다음의 <progress>를 이용한 거구요. 이걸 다이나믹하게 이용하려면 자바 스크립트를 사용해야 되겠죠?

그 다음에 <body> 내에서 CSS 를 적용한 겁니다.

밑에 링크는 html5가 문법적으로 잘 작성됐는지 안 됐는지 알아 볼 수 있는 싸이트 입니다.

참고하세요.

HTML,CSS,JavaScript 로 프로그래밍 할 때 제일 문제가 디버깅,테스트 인데..
지난번에 Sencha Touch 세미나 다녀와서 올린 글에 JavaScript 문법 체크해 주는 싸이트 올렸었던거 같은데요. 여긴 HTML5 입니다.

잘 되는지 한번 저도 사용해 봐야겠습니다.

이런 싸이트가 있다면 디버깅 편하게 할 수 있도록 하는 tool도 있을 것 같은데..
혹시 아시는 분 계시면.. 알려 주세요...

그럼...
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10
HTML5 Storage 1 - Web Storage -  (2) 2012.01.10
HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation  (0) 2011.12.24
WEB_APP/HTML5

HTML5 기본 Semantic Tag 들 알아보기 -2-

2012. 1. 1. 02:45 | Posted by 솔웅


반응형
오늘도 어제에 이어서 wiredwiki의 youtube 강좌를 기반으로 공부하고 정리해 보겠습니다.

오늘은 <hgroup> 과 이미지등을 표시하는 <figure> 그리고 HTML5는 아니지만 <iframe> 에 대해서 살펴 보겠습니다.

우선 <hgroup>은 <h1>~<h6> 엘리먼트들을 그룹화 하기때문에 하나 이상의 h 엘리먼트가 있어야 합니다. 이것들은 하나의 섹션으로 그룹화 됩니다.
<figure>는 이미지 등을 표현합니다. 그리고 <iframe>은 브라우저 내에 또 다른 브라우저를 갖을 수 있도록 합니다.


그림도 들어가고 iframe도 들어가고 하니까 한 화면에 다 나오질 않네요.
우선 이 화면엔  이전 글 소스에서 <article> 태그를 모두 지워버리고 <hgroup>을 사용했습니다.
그리고 그 안에 <figure> 태그를 사용했구요.


그리고 이 화면에서는 <iframe>을 사용해서 naver와 yahoo를 불러왔습니다.

아래 코드를 보시죠.

 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
</head>
<body>
    <header>
        <span style="color:red;font-style:italic;font-family:verdana;">
        Start HTML5 with Dougy </span>
        <hr/>
    </header>
    <aside style="font-size:larger;font-style:italic;color:blue;float:right;width:130px">
        Welcome to the world of HTML5 which opens you various possibilities for making
        the web more accessible and easy to use.
    </aside>
    <nav>
        <a href="html5syntax.html"> HTML5 syntax </a> |
        <a href="html5forms.html"> HTML5 Forms </a> |
        <a href="csscheats.html"> Css CheateCodes </a> |
        <a href="http://coronasdk.tistory.com"> My Blog </a>
    </nav>
    <hgroup>
        <h1> Sunrise at Sandy Hooks </h1>
        <figure>
            <img src="depart.jpg" width="200">
        </figure>
        <h2> Montauk is too far from here. </h2>
        <figure>
            <img src="drag.jpg" width="100">
        </figure>
    </hgroup>
    <p> This is the dummy website which i have created to show you guys how the new HTML5 elements works</p>
    <p> If you want to know for Corona SDK mobile application development tool
        then come to <a href="http://coronasdk.tistory.com"> My Blog. </a></p>
    <iframe src="http://www.naver.com" width="400" height="150"> </iframe><br>
    <iframe src="http://www.yahoo.com" width="400" height="150"> </iframe><br>
    <footer>
        &copy; 2011 Douglas All Right Reserved
    </footer>
</body>
<html>

대 부분 지난 글들과 같습니다.
다른 점은 지난 소스에 있던 <article> 대신 <hgroup>을 사용했는데요. 그것은 <h1>~<h6> 엘리먼트들을 그룹화하기 위해서 입니다.

이 <hgroup> 안에 <figure> 태그가 있는데요. 이것은 그 안에 이미지가 나올거라는 것을 알려 줍니다.

<footer> 바로 위에 보면 <iframe> 태그가 나오죠? 이건 전혀 새로운 건 아닙니다. 10년전에도 사용했었던 기능이니까요. 브라우저 안에 새로운 브라우저를 만들어서 그 안에 웹페이지를 표시할 수 있도록 만든겁니다.
처음것은 naver.com이 나오고 두번째 것은 yahoo.com이 나옵니다.
외부 싸이트뿐만 아니라 내부 웹페이지도 넣을 수 있습니다.

웬일인지 이 iframe은 많이 사용하지 않은 것 같네요.

다음시간에도 HTML5에 집중해서 새로운 태그들을 살펴 보겠습니다.
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Storage 1 - Web Storage -  (2) 2012.01.10
HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation  (0) 2011.12.24
HTML5 Canvas 이용하기 - 03 -  (0) 2011.12.24
WEB_APP/HTML5

HTML5 기본 Semantic Tag 들 알아보기 -1-

2012. 1. 1. 02:26 | Posted by 솔웅


반응형
그동안 Youtube의 Bucky 강좌를 보면서 정리했는데요. Bucky가 그동안 올린 강좌를 다 정리해 버렸네요. (HTML5관련해서요.)
우리의 Bucky가 계속 올리고 있으니까 새로운거 올리면 저도 공부하고 또 여기에 정리해 넣을께요.
오늘은 Bucky가 올릴때까지 다른 Tutorial을 한번 볼려구요.
제가 찾은건 wiredwiki 가 올린 강좌입니다.

기본적인 HTML5의 Tag들을 살펴 보겠습니다.
<header><aside><nav><article><section><footer> 태그를 이용해서 화면을 구성해 봤습니다.


위 화면을 만들었습니다.
우선 Header로 맨 위 빨간 글을 표현했고 aside로 오른쪽 side에 있는 글들을 지정했습니다.
다음 nav로 메뉴들을 만들었고 article 로 두개의 section을 감싸서 큰제목 작은 제목의 글들을 넣었습니다. 그리고 footer로 저작권 표시를 했구요.

소스 코드를 볼까요?

 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
</head>
<body>
    <header>
        <span style="color:red;font-style:italic;font-family:verdana;">
        Start HTML5 with Dougy </span>
        <hr/>
    </header>
    <aside style="font-size:larger;font-style:italic;color:blue;float:right;width:130px">
        Welcome to the world of HTML5 which opens you various possibilities for making
        the web more accessible and easy to use.
    </aside>
    <nav>
        <a href="html5syntax.html"> HTML5 syntax </a> |
        <a href="html5forms.html"> HTML5 Forms </a> |
        <a href="csscheats.html"> Css CheateCodes </a> |
        <a href="http://coronasdk.tistory.com"> My Blog </a>
    </nav>
    <article>
        <section>
            <h1> Sunrise at Sandy Hooks </h1>
            <p> Come to Sandy Hooks to see the first sunrize of 2012..... Wow
                Sunrize at Atlantic Ocean. cool...</p>
        </section>
        <section>
            <h2> Montauk is too far from here. </h2>
            <p> It is for 2:30 distance from my place. </p>
        </section>
    </article>
    <footer>
        &copy; 2011 Douglas All Right Reserved
    </footer>
</body>
<html>

어차피 오늘은 복습하는 과정이니까 옛날 배웠던 것을 다시 떠올리면서 분석해 보죠.
<!doctype html>은 이 문서는 HTML5를 사용하겠다는 신호입니다 대소문자 구분은 없습니다.
그 다음 <head>에 title과 메타태그를 넣었습니다.
그 아래에 있는 body 태그 사이에 있는 내용들이 브라우저에 표시될 것들입니다.
<header>를 보면 그 안에 내용을 <span>으로 감쌌죠? 이건 HTML5에서 새로 나온건 아니고 이전부터 있었던 겁니다 <div>와 함께 자주 사용되는건데요. 여기서는 <header>안의 내용에 따로 CSS를 적용하기 위해서 사용했습니다.

지금까지는 주로 외부에 css 파일이 있고 <head> 안에서 이 css파일을 <link>걸어서 사용했었는데요. 여기선 주로 html 안의 tag에 직접 걸겠습니다.
일단 css가 아니라 HTML5를 배우는 거니까 거기에 Focus를 맞추는 겁니다.
<hr/>도 HTML5는 아니고 그 이전부터 있었던 것으로 선을 긋는 겁니다.

그 다음엔 <aside> 를 썼는데요. tag 안에 CSS를 보면 float:right이 있습니다. 그래서 그 안의 내용이 브라우저에서 오른쪽에 정렬 됩니다.

다음 nav 태그에서는 각종 링크를 걸어 줬구요.

그리고 <article>에는 두개의 <section>을 넣었습니다. 이 section 안에 Main Contents들이 들어갔구요.

맨 마지막에 <footer>가 들어갔습니다.
&copy; 라는게 있는데 이건 원문자 C를 말하는 겁니다.

이렇게 다시 HTML5의 기본 Semantic Tag들인 <header><aside><nav><article><section><footer> 들을 사용해 봤습니다.

다음엔 이 외에 다른 HTML5 Tag들을 배워보겠습니다.
Bucky의 강좌는 CSS, JavaScript 와 함께 진행이 되서 Dynamic한 효과를 보는데 좋고 이 wiredwiki 의 강좌는 HTML5에 집중돼 있어서 또 좋네요.

둘 다 열심히 공부해야겠어요.

그럼.....

반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation  (0) 2011.12.24
HTML5 Canvas 이용하기 - 03 -  (0) 2011.12.24
HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자  (0) 2011.12.22
Corona SDK/샘플 코드 분석

내가 그린 선으로 떨어지는 공 받아내기

2011. 12. 31. 02:42 | Posted by 솔웅


반응형
제가 예전에 써핑하다가 받은 소스입니다.
누가 만든 로직인지도 모르겠네요.

하옇든간 자기가 힘들게 만든 소스를 여러 사람들과 조건없이 공유하는 개발자분들께 감사드립니다.

오늘 살펴볼 앱은요.
앱을 시작하면 위에서 녹색 공이 떨어집니다.
그리고 화면을 Drag 하면 선이 그려집니다.
녹색 공이 그 선에 떨어지면 튀어 나가게 돼 있습니다.

일단 소스 부터 볼까요?

local physics = require ("physics")
physics.start(true)
physics.setGravity(0, 1)
 
-- Ball rolls on Line
 
local ball = display.newCircle( 0, 0, 25)
ball:setFillColor(0, 255, 0)
ball.x = display.contentWidth/2
ball.y = 0
 
physics.addBody(ball, {bounce=1.1, radius = 25, friction=1})

-- Draw a line

local i = 1
local tempLine
local ractgangle_hit = {}
local prevX , prevY
local function runTouch(event)
  if(event.phase=="began") then
    if(tempLine==nil) then
      tempLine=display.newLine(event.x, event.y, event.x, event.y)
 
-- Random Colors for line
 
      r = math.random (0, 255)
      g = math.random ( 0, 255)
      b = math.random (0, 255 )
      tempLine:setColor(r,g, b)
 
      prevX = event.x
      prevY = event.y
    end
  elseif(event.phase=="moved") then
    tempLine:append(event.x,event.y-2)
    tempLine.width=tempLine.width+0.8
    ractgangle_hit[i] = display.newLine(prevX, prevY, event.x, event.y)
    ractgangle_hit[i]:setColor(r,g, b)
    ractgangle_hit[i].width = 5
 
-- Creates physic joints for line (Turn on draw mode to see the effects)
 
    local Width = ractgangle_hit[i].width * 0.6
    local Height = ractgangle_hit[i].height * 0.2
 
-- Physic body for the line shape
 
    local lineShape = {-Width,-Height,Width,-Height,Width,Height,-Width,Height}
 
    physics.addBody(ractgangle_hit[i], "static", { bounce = -1, density=0.3, friction=0.7, shape = lineShape})
    prevX = event.x
    prevY = event.y
    i = i + 1
  elseif(event.phase=="ended") then
    tempLine.parent.remove(tempLine)
    tempLine=nil
  end
end

Runtime:addEventListener("touch", runTouch)

우선 Physics를 이용하기 위해 require하고 start 시킨 후 중력은 아래로 1을 주었습니다.
기본이 9.8인데 1로 주었으니 풍선처럼 아주 가볍게 그리고 천천히 떨어지겠네요.
그리고 25픽셀이 반지름인 녹색공을 만들고 위치는 상단 가운데로 주었습니다.
이 ball에 addBody를 했구요. 그 body 크기는 반지름이 25픽셀로 녹색 원과 크기가 같고 bounce와 friction 도 조금 주었습니다.

여기까지만 하면 녹색볼이 위에서 아래로 천천히 떨어질 겁니다.
정말 Corona SDK의 물리엔진은 아주 강력합니다.

그 다음은 여러 변수들을 선언했습니다.
맨 밑에 Runtime touch리스너가 있고 이 리스너는 runTouch함수를 호출합니다.
그러니까 앱이 시작할 때부터 이 runTouch 함수는 실행 될 겁니다.

이제 그 함수를 볼까요?
일단 touch가 시작되고 tempLine이 nil 일 경우 tempLine에 현재 위치로 라인을 그립니다.
시작점과 끝점 모두 현재 위치가 됩니다.
그리고 r,g,b 변수에 랜덤한 rgb값을 넣고 아까 그린 선에 그 랜덤한 색을 넣습니다.
그리고 현재의 위치를 prevX,prevY에 넣습니다.
그 다음에 touch 가 moved일 경우 즉 드래그가 진행중일 경우에는요.
선을 더 합니다. (append) 그리고 선을 그리는데요. 시작점은 아까 began 일때의 위치가 되고 끝위치는 현재가 됩니다.

다음엔 이 그려진 Line에 physics.addBody를 할 수 있도록 Width,Height공간만큼 구간을 잡구요 이것을 addBody에 shape로 집어 넣습니다.
그리고 다시 prevX,prevY에 현재 위치를 넣습니다.

드래그하던 손을 떼면 ended 부분이 실행 되는데요.
tempLine을 remove하고 nil을 만듭니다.

자 여기 까지가 소스코드를 모두 분석한 내용입니다.

이제 앱을 실행하면 녹색 공이 떨어지고 여러분이 그은 선에 그 공이 맞으면 튀게 될 겁니다.

이 앱은 그 자체로 완성된 게임은 아니지만 그 기본 로직을 활용하면 많은 곳에서 유용하게 사용할 수 있을 것 같습니다.

반응형
저작자표시 비영리 동일조건

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

animation chain 소스 분석 해 보기 01  (0) 2013.07.15
코로나로 뱀 기어디니는 효과 내기  (0) 2012.02.28
간단하게 눈발 흩날리는 느낌 주기  (2) 2012.02.16
돈 넣고 돈 먹기(야바위) 모바일 게임 만들기 2  (11) 2012.01.04
돈 넣고 돈 먹기(야바위) 모바일 게임 만들기 1  (2) 2012.01.03
Corona SDK 화면전환 API (Story Board)  (4) 2011.12.23
Level 별 Lock 기능 걸고 푸는 법  (0) 2011.12.15
벽돌 깨기 게임 만들기 -3  (1) 2011.12.01
벽돌 깨기 게임 만들기 -2  (2) 2011.11.30
벽돌 깨기 게임 만들기 -1  (3) 2011.11.29
WEB_APP/TIPs

브라우저가 캔버스 지원 유무 판단하기

2011. 12. 30. 23:38 | Posted by 솔웅


반응형
아래 스크립트를 아용하면 됩니다.

  <script>

      var draw = function () {

          var canvas = document.getElementById("canvas");

 

          //canvas의 컨텍스트가 존재하면 canvas를 지원하는 브라우저

          if (canvas.getContext) {

              //구현

          }

          else { //canvas의 컨텍스트가 존재하지 않으면 canvas를 지원하지 않는 브라우저

              alert("이 브라우저는 캔버스를 지원하지 않습니다.");

          }

      }

  </script>


HTML5를 지원하지 않는 브라우저가 아직 많이 있으니까 혹시 HTML5개발하려면 구현부분에 HTML5를 사용하고 alert부분에는 일반 HTML을 사용해야 할 것 같습니다.



반응형
저작자표시 비영리 동일조건

'WEB_APP > TIPs' 카테고리의 다른 글

JSON 파일 만드는데 도움 주는 툴  (0) 2012.08.20
iOS 웹클립에 관한 팁  (0) 2012.06.25
Data Architect와 Data Modeling Architect 에 대한 메모  (0) 2012.06.25
Responsive WEB (반응형 웹) 맛보기  (0) 2012.06.13
User Agent Switcher 소개  (0) 2012.06.12
Entity Relationship Modeling  (0) 2012.06.10
3D 관련 툴 블랜더(blender)  (0) 2012.02.01
HTML5, JavaScript 관련 툴들 소개  (0) 2012.01.31
웹앱 (WEB APP) 관련 메모 정리  (0) 2011.12.11
WEB APP 시작하기...  (0) 2011.12.05

티스토리툴바