새로 나오는 코로나 SDK 책 표지 디자인 공모

오는 2월 MobiDojo studio 의 Michelle Fernandez가 Corona Game Development Beginner's Guide라는 책을 출판 할 예정입니다.
현재 출판을 위한 집필은 모두 완성된 상태이며 단지 표지 디자인을 고민 중입니다.
1월 28일까지 이 책에 쓰일 표지 디자인을 공모합니다.
채택이 되면 아래와 같은 혜택이 있습니다.
1) 표지 디자인이 책에 사용되어질 겁니다.
2) 출판 되면 책 두권을 무료로 드립니다.
3) $100 의 상금을 받게 됩니다.
4) Corona SDK PRO 1년 사용권

이 외에 표지 디자인에 사용되지는 않지만 별도로 두명의 작품을 더 선정해서 Packt Game Library의 연회원으로 가입 시켜 드립니다.
이 연회원비는 $120 인데 이 비용을 지불할 필요없이 연회원이 되실 겁니다.

응모하실 작품은 photography@packtpub.com 으로 보내 주시면 됩니다.
보내실 작품은 아래 사항을 따라 주시면 됩니다.
1. 300dpi 해상도
2. 최소 너비 7인치 높이 5인치 (최대 길이는 제한 없음)
3. CMYK 칼라 모드
4. JPEG 파일 (채택이 되면 TIFF나 .PSK 파일을 주셔야 합니다.)
5. 파일 사이즈 2MB 이하

심사위원은 Ms. Fernandez와 팀원들이 할 겁니다.
예술적인 부분과 게임을 연상시키는 visual impact를 볼 겁니다.
물론 코로나도 연상되어야 하겠죠.

Deadline은 2012년 1월 28일  입니다.
참고로 이 링크1, 링크2 는 예전에 코로나 아이콘 콘테스트 등의 링크 입니다.

시간이 얼마 없지만 도전하고 싶은 분들 그리고 도전하실 분들 건투를 빕니다.

앵그리버드 (Angry Bird) 게임 만들기

아래 동영상은 영국 Brighton에서 진행된 Corona SDK 데모 중  Seb Lee-Delisle 가 30분만에 앵그리버드 같은 게임 만드는 방법이란 주제로 진행한 내용입니다.
도움이 될 것 같아 공유합니다.

그동안 작업하던 Fire Man이라는 게임이 안드로이드 마켓에 올라 갔습니다.

아직 Lite 버전이라 부족한 부분이 많습니다.
무료이니까요 Fire Man 많이 다운 받아 주시구요.
안되는 기능 있으면 많이 알려 주세요.
점점 더 완성도 있는 게임이 될 수 있도록 도와 주세요. ^^
(안드로이드 마켓의 게임 카테고리에 있는데 한국에서 다운 받을 수 있죠???)

Fireman이 세계를 돌아 다니면서 유적지에 붙은 화재를 진화한다는 Story입니다.
지금은 Italy 한곳만 돼 있구요. 곧 USA,China,India 도 업그레이드 될 겁니다.
Korea도 나올 거구요.

아이폰 앱스토어 용으로도 곧 나올 겁니다.
(지금 테스트 중 입니다. 아마존의 Kindle Fire용으로도 나올 예정이구요.)




유튜브에 올라온 게임 설명 동영상입니다. 참고하세요.

참고로 안드로이드 마켓에서 NOWBYTE로 검색하시거나  링크를 클릭하시면 제가 만든 앱들을 보실 수 있습니다.

이 글은 Implementing Facebook Single Sing-On 으로 올라온 Corona SDK 튜토리얼을 번역한 글입니다.
이번주에 Corona SDK에서 새로 추가된 주요 기능에 대한 튜토리얼은 Game Center Integration, ScrollView Widget, Facebook Single Sign-On 이렇게 세가지 입니다.
오늘 facebook Single Sign-On을 다루면 모두 다 소화하고 가는 거네요.

Implementing Facebook Single Sign-On
Jonathan Beebe

Corona SDK 의 Facebook Single Sign-On 기능은 iOS와 Android 모바일 디바이스에서 가능합니다. (그리고 만들기에 안드로이드 쪽이 사용이 훨씬 간편합니다.)
이 기능은 Corona Build 2011.707 이후 버전에서만 지원 됩니다.
오늘 날짜 기준으로 Corona에서는 Build 2011.704를 무료 배포 버전으로 오픈했기 때문에 유료 구매자가 아니면 707 버전이 공개될 때까지 기다리셔야 됩니다.

***** Your Facebook App

우선 여러분의 앱을 Facebook에 등록해야 합니다.
그러면 여러분은 App ID를 받으실 수 있습니다. 그 이후에 앞으로 진행하는 일들을 하실 수 있습니다.
아래 링크를 따라가서 여러분의 앱을 등록 하세요.

https://developers.facebook.com/apps

저도 이 부분은 등록을 한적이 한번도 없어서요 자세히 설명을 드리지는 못하겠네요.

우선 위 링크로 가면 이 화면이 나옵니다. (facebook에 로그인을 안 했으면 로그인 하라는 화면부터 나올 겁니다.)

Create New App 버튼을 누르면 App Display Name 과 App Namespace를 넣으라는 화면이 나옵니다.

오른쪽에 ?에 마우스를 올려 놓으시면 그게 뭔지 설명이 나옵니다.

그리고 동의란을 체크하고 Continue버튼을 누릅니다.

다시한면 Security Check를 위한 화면이 나오고 해당 텍스트를 입력 한 다음에 submit을 누르면....

이렇게 핸드폰 번호나 신용카드로 인증과정을 사전에 거쳐야 다음 사항을 진행 할 수 있다고 나옵니다.
그 다음 과정은 진행해 보지 않았습니다.
지금 회사라서 주말에 집에서 차근차근 해 봐야겠습니다.

일단 이 과정들을 모두 거쳐서 햅이 등록됐다고 치고 다음 단계를 보겠습니다.


앱이 등록된 후 Native iOS App 이나 Native Android App를 체크해야 합니다.

iOS앱에서는 iOS Bundle ID가 Corona를 빌드한 provisioning profile과 같아야 합니다. 그리고 iPhone App Store ID 란에 여러분의 iTunes App ID를 넣어야 합니다. 여러분의 앱이 iTunesConnect 포탈에 추가 됐으면 여러분의 앱에 App Store ID가 부여 됐을 겁니다. (앱을 업로드하기 이전에도 받을 수 있습니다.)

아직 여러분의 앱이 iTunes App ID가 없다면 다른 iTunes App ID를 쓰셔도 됩니다. 하지만 나중에 앱이 ID를 받게 되면 곧바로 바꾸셔야 합니다.

제대로 된 bundle ID와 정확한 iTunes ID를 입력하는 것은 아주 중요합니다. 그렇지 않으면 여러분 앱에 Facebook을 implementation 하지 못합니다.

***** build.settings
이 부분은 iOS에만 해당 되는 것입니다. 안드로이드용 앱에는 build.settings에 아무것도 할 필요가 없습니다.

iOS는 CFBundleURLTypes키를 넣어야 합니다. 그 안에 CFBundleURLSchemes 키를 넣기 위해서요.
아래 샘플 코드가 있습니다.
settings = {
    iphone = {
        plist = {
            UIApplicationExitsOnSuspend = false,
            CFBundleURLTypes =
            {
                {
                    CFBundleURLSchemes =
                    {
                        "fbXXXXXXXXXXXXXX",
                    }
                }
            }
        }
    }
}
괄호가 너무 복잡하게 돼 있죠? 그냥 이거 복사해서 쓰세요.

디폴트로 UIAppLicationExitsOnSuspend는 기본으로 false로 세팅돼 있습니다.  그래서 이 부분을 명시하지 않아도 false로 세팅됩니다.
위에 굳이 false로 선언한 것은 만약 이것이 false가 아니면 작동하지 않기 때문에 그것을 remind하기 위해 넣었습니다.
"fbXXXXXXXXXXXXXX 부분에 X표시들은 여러분의 Facebook App ID를 넣으셔야 할 부분입니다.
이 CFBundleURLSchemes에 더 많은 URL schemes를 넣으실 수 있습니다.
CFBundleURLSchemes =
{
    "fb1234567890",
    "YourCustomScheme",
    "AndAnotherOne"
}

Test, test, test!
이렇게 세팅하면 facebook 싱글 사인 온 작업을 할 수 있습니다.
하지만 반드시 테스트를 해 보는건 기본이죠.

facebook.login()함수를 call했을 때 Facebook app이 디바이스에 인스톨 돼 있으면 그것이 나올 겁니다. 그리고나서 당신의 앱을 인증하라고 나올 겁니다. (아직 한번도 인증과정을 거치지 않았다면요)
facebook앱이 없다면 웹브라우저가 실행 될 겁니다. 그리고 유저가 로그인 과정을 다 거치면 다시 원래 앱으로 돌아 올 겁니다.
(이 과정에서 UIApplicationExitsOnSuspend 에 false로 선언되어 있어야 제대로 동작합니다.)

자 여기까지가 Facebook Single Sign-On 을 implemation하는 과정입니다.
facebook쪽 등록하는 부분하고 Corona SDK에서 iPhone인 경우 build.setting에 등록하는 부분이 좀 작업을 해야 하네요.
반면에 안드로이드 쪽은 Facebook쪽에만 등록을 시키면 그 다음엔 별다른 세팅 없이 진행 시킬 수 있나 봅니다.

여기까지 완료 됐으면 이제 facebook single sign on 을 할 기본 환경이 갖춰진 것이구요.
이제 여러분이 코딩하면서 facebook을 이용하면 됩니다.

여기를 클릭하시면 위와같이 Corona SDK의 facebook관련 API를 보실 수 있구요.

SampleCode-Networking-facebook으로 가시면 위와같은 샘플 앱이 있습니다.

이 부분은 나중에 자세히 다뤄 보겠습니다.

Basically JavaScript is for dynamic display in Web Programming.
In HTML5 Not only JavaScript but also CSS has excellent dynamic display functions.

One of the Thing is below webkit-transition.

-webkit-transition

HTML5 는 JavaScript와 CSS와 협력해서 여러 효과를 냅니다.
주로 JavaScript 가 동적인 효과를 주는데 사용되는데요. 이제 CSS에서도 이런 동적인 효과를 줄 수 있습니다. webkit 중에 transition을 사용하시면 됩니다.

Just Click the Right and Left Button then you can see it.
왼쪽 오른쪽 버튼을 눌러보세요.



Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)


The Red rectangle below is moving smoothly with using webkit-transition.
아래 사각형은 아주 자연스럽게 움직이죠?
Animation 효과도 줄수 있고 게임에서도 이용할 수 있지 않을까요?

아래 소스코드가 있습니다. 다운 받아 가세요.
Download the source code below.

Tutorial: Game Center Integration (iOS)
Jonathan Beebe

iOS의 게임센터를 이용할 수 있는 기능이 daily build 2012.725에 포함 됐습니다.
이 iOS 의 Game Center를 어떻게 이용해야 하는지 살펴보겠습니다.
이번에 선보인 iOS Game Center 이용 기능은 기존의 gameNetwork API의 연장입니다.

iOS Game Center를 이용하기 위해 Apple side에서 어떤 일을 해야 하고 (iTunes Connect), 코로나에서는 어떤 셋업이 필요한지 그리고 여러분의 앱에서 이 기능을 제대로 이용하려면 어떻게 해야 되는지에 대해 간단히 알아보겠습니다.

Game Center는 다른 game networks(OpenFeint, Papaya)와 비교해서 좀 다른식으로 적용해야 합니다. build.settings와 System Event 파트를 다룰 때 이 부분을 이야기 하겠습니다.

***** iTunes Connect
Link: Visit the iTunes Connect Portal

Game Center를 이용하기 위해 Apple 쪽에서 해야 할 일에 대해서는 자세히 언급하지는 않겠습니다.
간단히 말해서 여러분은 여러분의 앱에서 Game Center 기능을 이용하기 위해 우선 Leaderboard(high score boards)와 Achievements 를 생성해야 합니다.
또한 개개의 Leaderboard와 Achievement ID도 할당해 줘야 합니다.

1. Manage Your Application 링크를 클릭

2. 여러분의 앱 아이콘을 클릭

3. 오른쪽에 있는 파란색의 Manage Game Center 버튼을 클릭

4. Enable 버튼을 클릭

5. Leaderboard 와 Achievements 부분에 있는 Edit(Set up) 을 클릭

6. Leaderboards와 Achievements를 추가

7. 각각의 Leaderboard ID와 Achievement ID

물론 여러분의 게임에 Achievements(혹은 Leaderboard)를 넣고 싶지 않다면 이 부분은 그냥 지나가셔도 됩니다.

***** build.settings

주목:이 파트는 여러분들이 Game Center를 이용하려고 하던지 OpenFeint와 Game Center를 동시에 이용하려고 하던지 어떤 경우에도 아주 중요합니다.
만약 여러분이 OpenFeint를 사용하지 않고 오직  Game Center만 사용하려고 한다면 코로나에 openfeint 컴포넌트를 앱에서 빼내 버리고 컴파일 하라고 알려줘야 합니다.

그 방법은 아래와 같이 components 테이블에 빈 대괄호만 넣어 주면 됩니다.
settings =
{
    iphone =
    {
        components = {}
    }
}

OpenFeint와 Game Center 를 모두 사용하시려면 openfeint 컴포넌트를 사용할 거라고 build.settings에서 확실히 알려 줘야 합니다.
settings =
{
    iphone =
    {
        components = { "openfeint" }
    }
}

build.settings와 관련해서 알아야 할 또 하나는 Leaderboards 와 Achievements를 셋업하지 않고 테스트만 하고자 할 경우 여러분은 GKTapper Xcode 샘플을 이용해서 구현 할 수 있습니다.
그러기 위해서는 아래와 같이 하시면 됩니다.
settings =
{
    iphone =
    {
        plist =
        {
            CFBundleIdentifier = "com.appledts.GKTapper",  -- temporary line for testing!
        },
        components = {}
    }
}

***** System Events and initCallback
일반적으로 gameNetwork.init()은 main.lua 처음 시작할 때 불려 집니다. 그리고 앱이 끝날 때까지 다시 불려질 일은 없습니다. Game Center를 이용하는 방법은 이 gameNetwork.init()과 비교해서 크게 두가지 다른 점이 있습니다.
Game Center는 iOS안의 system-wide 프로세스입니다. 유저들은 앱이 suspend될 때마다 Game Center에서 로그 아웃 됩니다. 그래서 앱이 applicationStart 시스템 이벤트를 Receive 받을 때마다 gameNetwork.init()을 불러야 할 겁니다. 이것이 첫번째 다른 점 입니다.
두번째 다른 점은 init request가 마무리 됐을 때 한번 불려지는 initCallback 함수 입니다.

아래 소스는 network 제공자로 Game Center를 사용할 때 gameNetwork.init()을 어떻게 사용해야 하는지를 보여주는 코드입니다.

local gameNetwork = require "gameNetwork"
local loggedIntoGC = false

-- called after the "init" request has completed
local function initCallback( event )
    if event.data then
        loggedIntoGC = true
        native.showAlert( "Success!", "User has logged into Game Center", { "OK" } )
    else
        loggedIntoGC = false
        native.showAlert( "Fail", "User is not logged into Game Center", { "OK" } )
    end
end

-- function to listen for system events
local function onSystemEvent( event )
    if event.type == "applicationStart" then
        gameNetwork.init( "gamecenter", initCallback )
        return true
    end
end
Runtime:addEventListener( "system", onSystemEvent )

initCallback 리스너 함수를 보면 event 테이블에는 한개의 프로퍼티 event.data 가 있습니다. 이것은 Game Center 에 로그인이 성공하면 true가 되고 실패하면 nil이 됩니다.
유저가 로그인 상태가 아닐 경우 체크해서 어떤 핸들링을 할 수가 있습니다.
좀 더 자세한 사실은 gameNetwork.init() documentation 를 보세요.


***** Game Center Request
Game Center를 사용할 때 아래 열거한 것들을 gameNetwork.request()와 함께 사용될 수 있습니다.
    •    setHighScore
    •    loadScores
    •    loadLocalPlayer
    •    loadPlayers
    •    loadFriends
    •    loadAchievements
    •    unlockAchievement
    •    resetAchievements
    •    loadAchievementDescriptions
    •    loadFriendRequestMaxNumberOfRecipients
    •    loadLeaderboardCategories

보다 자세한 용도를 보려면 gameNetwork.init() documentation 를보세요.
대부분의 위 request들은 요청한 데이터를 받기 위한 리스너를 가질 수 있습니다.
Game Center request(요청) 들에서 가장 헛갈리는 부분은 이 이벤트 테이블을 통해서 어떤 데이터가 당신의 callback 리스너에 전달 되느냐 입니다. 다시 한번 말씀드리자면 보다 자세한 사항은 gameNetwork.init() documentation 나 Official Game Kit Documentation 안의 해당 페이지를 통해 알아 볼 수 있습니다.
만약에 fail일 경우 JSON 스트링을 통해 event table에 encode됩니다. 그리고 전화기의 native alert으로 전화기 화면에 표시 됩니다. 아래 샘플 예제를 참조하세요.
local gameNetwork = require "gameNetwork"
local json = require "json"

-- callback listener for Game Center requests
local function requestCallback( event )
    if event.type == "loadFriends" then
        local data = json.encode( event.data )
       
        -- show encoded json string via native alert
        native.showAlert( "event.data", data, { "OK" } )
    end
end

gameNetwork.request( "loadFriends", { listener=requestCallback } )

***** Corona GCTapper Sample
이상으로 GameCenter의 아주 기본적인 사항들을 살펴 봤습니다.
Corona SDK에서는 Apple의 GKTapper Xcode Sample 을 수정해서 Corona에서 사용할 수 있도록 했습니다.
아래 링크를 클릭하시면 그것을 이용한 샘플 코드를 받아 보실 수 있습니다.
View the Corona Game Center Sample Project on Github

위 내용 원본은  Corona SDK 웹싸이트에있습니다.
http://blog.anscamobile.com/2012/01/tutorial-game-center-integration-ios/

오늘은 iOS Game Center를 사용하기 위한 기초 지식을 공부했구요.
다음엔 위에 다운 받은 샘플 파일을 분석할 생각입니다.

One of the fabulous service from Google is Google map.
You can put the google map on your Web page with HTML5 geolocation.

HTML5를 이용하면 PC나 모바일용 웹페이지에 구글 맵을 서비스 할 수 있습니다.
아래 예제는 샘플인데요.
Show Position 버튼을 누르면 현재 위치가 지도에 표시됩니다.
(위치정보는 사용자가 공유를 허락해야 합니다.)

Click the Show Position button then your location will be displayed on the map.
(You need to allow share your location on your browser)
Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Working well (O)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)

It is working well on all browsers in my Laptop.
You can download sample file below.
인터넷 익스플로러에서도 잘 작동을 하네요.
아래 샘플 파일 올립니다.

블로그 폭이 좁아서 MAP/Satelate 를 선택하는 버튼이 가려졌습니다.
위 파일을 다운 받으시면 전체 화면을 보실 수 있습니다.
지도 화면과 위성화면 둘 다 선택해서 보실 수 있어요.

Hey guys welcome to HTML5 tutorial of Google Presentation.
Today I am going to show you Sample codes of HTML5 Tags.
You can see 10 tags (the red tags below) and how to use those tags. 

아래 코드는 HTML5 에서 사용하는 Tag들에 대한 사용예를 보여주는 코드입니다.<header>,<hgroup>,<nav>,<section>,<article>,<aside>,<figure>,<figcaption>,<footer>,<time datetime="">이렇게 10개의 코드를 가지고 만들었습니다.

header는 제목을 나타낼 때 사용하고 한 페이지에서 여러번 사용할 수 있습니다.
nav는 메뉴이고 section은 범위를 구분지을 때 사용합니다.
article은 내용 aside는 옆쪽에 표시되는 내용에 사용합니다.
figure는 image를 표시할 때사용하고 figcaption은 그 이미지에 대한 설명(제목)을 나타냅니다.
그리고 footer는 꼬리글이구요. time datetime은 날짜를 나타낼때 사용합니다

You can download sample html file below.
아래 소스 파일 올립니다.

어제 Martin Luther King jr 목사를 기념하는 날이었습니다.
공휴일이죠.

1963년도 워싱턴 D.C. 링컨기념관 앞에서 한 그 유명한 연설도 사실은 Rosa Parks 라고 하는 한 여인의 작은 저항에서부터 시작 됐습니다.
버스에 백인석 흑인석 따로 있었고 백인이 서있자 흑인석 앞자리에 앉아있던 Parks 에게 버스 운전수가 흑인석 뒷자리로 가라고 했습니다.
1955년 알라마바주의 몽고메리라는 도시에서 있었던 이야기입니다.
Parks는 운전수의 지시를 거부했고 이 운전수는 Parks를 체포해서 경찰에 넘겼습니다.
(당시에는 운전수에게도 흑인 체포권이 있었나 봅니다.)
이 Parks의 멘토였던 Nixon(시민운동가)은 이것을 이슈화해서 부정의를 몰아 내기로 결심했고 당시 26세였던 젊은 Martin Luther King jr 목사에게 도움을 요청했습니다.
킹목사는 이후 계속 흑인 인권운동을 위해서 싸웠고 63년 미국의 수도 워싱턴D.C 링컨기념관 앞에서 역사적으로 가장 많은 인원인 25만명이 모인 가운데 그 유명한 'I have a dream' 연설을 했습니다.
같은해 킹목사가 연설한 곳에서 얼마 안 떨어진 미국 국회의사당에서 segregation (분리) 정책을 폐기했고 이듬히 킹 목사는 노벨 평화상을 받았습니다.

그리고 50여년 후 미국에서는 흑인 대통령이 탄생했습니다. 킹목사가 연설한 링컨기념관에서 걸어서 5분 거리밖에 안되는 백악관에서 미국을 운영하고 있습니다.

Rosa Parks 라고 하는 한 여인이 부당한 대우를 거부하고 체포당한 것으로 시작했습니다.
미국의 흑인차별정책이 폐기되고 한 목사에게 노벨 평화상이 주어지고 그리고 당시에는 도저히 상상도 할 수 없었던 미국 흑인 대통령이 탄생 된 것이요.

한국 사회에도 이런 부조리와 부정의가 많습니다.
그리고 Rosa Parks 같은 작은 저항들이 많이 일어나고 있습니다.

그리고 우리사회는 조만간 훌륭한 사회가 될 겁니다.

아래 우리사회의 부조리와 부정의 중 한가지가 신문에 실렸길래 같이 공유합니다.

그리고 아래 코드를 복사해서 넣으시면(HTML 안에) 여러분의 블로그에도 이 인포그래픽을 넣을 수 있습니다. (출처는 한겨례신문입니다.)

아래 코드를 복사하면 여러분 블로그에도 이 인포그래픽을 넣으실 수 있습니다.

Google provide excellent stuffs for HTML5 developer and one of the thing is that Speech Input API.
Just Click the microphone image and speak out any word then Google get and display the word in the text field.
One and big limitation is that it is working only on Google Chrome browser.

iPhone 의 Siri 가 나오는 바람에 그 신선함이 팍 꺾였지만 처음 이 기능을 보고 전 아주 신선한 충격을 받았어요.
이제 조만간 터치가 아니라 음성으로 기기를 제어할 수 있는 프로그램을 나도 만들 수가 있겠구나......
아래 텍스트 필드 옆에 있는 마이크 이미지를 클릭하고 말을 하면(아직 영어만 지원) 구글에서 그 말을 알아듣고 텍스트 필드에 추가 합니다.
지금은 오직 구글 크롬 브라우저에서만 작동합니다.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            -  Not Working (X) 
Safari 5.1.2                             -  Not Working (X) 
FireFox 9.0.1                          - Not Working (X)

Fore more Details Click it. 
좀더 자세한 사항은 여기를 클릭 하세요. 

You can get sample source code here.
샘플 코드 입니다. 다운 받아서 사용하시면 됩니다.

 

오늘은 2012.721 버전 이후부터 적용된 ScrollView Widget 에 대해 알아 보겠습니다.

그러니 이 기능을 직접 테스트 해 보시려면 2012.721 버전 이상되는 Corona SDK를 설치 하셔야 합니다.

확인해 보니까 지금 일반에 공개된 버전은 2011.704 버전이네요.
유료 사용자가 아닌 경우는 일반에 공개된 이후에 사용하실 수 있을 겁니다.

아래 내용의 원본은 여기 입니다.
그리고 자세한 API를 보시려면 여기를 클릭하시면 됩니다.

그럼 이번에 새로 추가된 기능에 대해 알아보겠습니다.

About Widgets

코로나의 위젯 API는 간단히 여러 플랫폼에 적용되는 코딩을 위해 만들어 졌습니다. 간단한 몇줄의 코드로 버튼, 탭 바, 슬라이더, Picker Wheel, Lists, 스크롤 되는 콘텐트 등을 스크롤 뷰 위젯에 덧 붙일 수 있는 기능을 제공합니다.
모바일 기기는 그 크기가 제한되어 있기 때문에 어느 기종이나 앱에 스크롤 되는 기능이 많이 필요합니다. 코로나에서는 이러한 기능을  scrollView Widget 에서 제공 합니다.

Basic Usage

스크롤 뷰 위젯의 가장 기본적인 이용법은 단지 몇개의 파라미터들을 정하고 디스플레이할 객체를 만들고 그 객체를 스크롤 뷰에 넣으면 됩니다.
아래에 그 예제가 있습니다.

local widget = require "widget"
local scroller = widget.newScrollView{
    width = 320,
    height = 480,
    scrollWidth = 700,
    scrollHeight = 1000
}

local obj = display.newImage( "myobject.png" )
obj.x = 400
obj.y = 500

scroller:insert( obj )

코드를 한번 보겠습니다.
- 첫번째로 widget을 require 합니다.
- 파라미터를 정합니다. 320,480은 아이폰의 해상도 입니다.
- scrollWidth,scrollHeight 파라미터는 스크롤뷰가 어디까지 스크롤 되는지를 정해 줍니다. 이 값은 어떤 객체가 주어지느냐에 따라 자

동적으로 늘어날 겁니다.
- 객체를 생성하고 위치를 설정합니다.
- 이 객체를 스크롤 뷰에 넣습니다.
이것이 스크롤 뷰를 사용하는 가장 기본적인 방법입니다.

위 코드만 가지고도 (이미지 파일만 있다면) 기본적인 스크롤 기능을 구현할 수 있습니다.

위 아래로 움직이지 않고 옆으로 움직이도록 하려면 아래 코드를 덧붙이기만 하면 됩니다.
scroller.content.verticalScrollDisabled = true
디폴트는 아래 코드 입니다.
scroller.content.horizontalScrollDisabled = true

Clipping the Width and Height

스크롤 뷰가 화면 전체를 차지하지 않고 일부분만 차지하도록 하려면 어떻게 할까요?
현재로서는 bitmap mask를 사용하는 방법 밖에는 없습니다.
이 방법도 코로나 개발팀에서 아주 간단히 코딩할 수 있도록 신경을 썼다고 합니다.
특정 크기로 스크롤 뷰를 만들기 위해 비트맵 마스크를 사용하려면 간단히 그 크기(width,height)를 정하는 파라미터를 세팅하고  해당하는 비트맵 마스크를 만듭니다. 그리고 그 비트맵 마스크의 파일 이름으로 maskFile 파라미터를 사용합니다.

    local widget = require "widget"
 
    local list = widget.newTableView{
        width = 320,
        height = 410,
        maskFile = "mask320x410.png"
    }
위 예제는 테이블 뷰에 사용했구요, 스크롤 뷰에서도 똑같이 사용하시면 됩니다.

Buttons and Touchable Objects

주로 ScrollView 에 버튼 같이 터치 리스너를 받아 들이는 object(객체)들을 넣는 방법을 알아볼 겁니다.
스크롤 하기 위해 터치할 때하고 버튼을 누를 때 터치하고 구별해야 쓸모있는 스크롤뷰가 될 수 있겠죠?

이 기능을 사용하려면 takeFocus()를 사용하시면 됩니다.

local widget = require "widget"
local scroller = widget.newScrollView{
    width = 320,
    height = 480,
    scrollWidth = 700,
    scrollHeight = 1000
}

-- event listener for button widget
local function onButtonEvent( event )
    if event.phase == "moved" then
        local dx = math.abs( event.x - event.xStart )
        local dy = math.abs( event.y - event.yStart )
       
        -- if finger drags button more than 5 pixels, pass focus to scrollView
        if dx > 5 or dy > 5 then
            scroller:takeFocus( event )
        end
   
    elseif event.phase == "release" then

        print( "Button pushed." )
    end

    return true
end

local button = widget.newButton{
    label = "My Button"
    top = 300,
    left = 300,
    onEvent = onButtonEvent
}

scroller:insert( button )

위와 같이 버튼을 만들고 이 버튼을 scroller 에 insert를 합니다.

그리고 리스너 이벤트 함수인 onButtonEvent 에서 takeFocus를 구현해 주면 됩니다.
이벤트가 moved 일 때 5픽셀 이상 움직이면 scroller 에 포커스를 맞추고 그렇지 않고 손가락을 떼면 버튼에 포커스를 맞추게 됩니다.

Scroll Events
스크롤 뷰 이벤트의 기본 파라미터에는 아래와 같은 것들이 있습니다.
event.name - 항상 scrollEvent 입니다.
event.target - 실제 이벤트가 할당된 스크롤뷰 위젯에 대한 레퍼런스 입니다.
event.type - beganScroll, endedScroll,movingToTopLimit,movingToBottomLimit,movingToLeftLimit, movingToRightLimit 가 있습니다.
Limit 를 설정하게 되면 그 숫자에 따라 스크롤 뷰가 끝에 다다랐을 때 탄력있게 움직이게 됩니다.

Further Reading and Resources

이 기능들을 자세히 보려면 CoronaSDK의 샘플 코드 중 Interface 폴더에 ㅇㅆ는 WedgetDemo를 보시면 됩니다.
이 기능들은 최근에 발표된 화면(Scene) 전환 API인 Storyboard API와 어울려서 사용할 수도 있습니다.

그럼 샘플코드인 WidgetDemo 앱을 살펴 보겠습니다.

첫번째는 테이블 뷰입니다. (안드로이드에서는 리스트 뷰라고 합니다.)
손가락으로 터치후 움직이면 아래위로 리스트들이 보입니다.
그리고 특정 Row를 터치하면 그 로우에 해당하는 화면으로 넘어갑니다.

여기서 back 버튼을 누르면 이전 테이블 뷰(리스트 뷰) 화면으로 넘어갑니다.
이 소스를 보면 최근에 발표된 storyboard 기능을 사용해서 화면을 넘기고 있습니다.

나중에 이 소스를 분석하면 아주 좋은 공부가 되겠네요.

아래 탭을 보시면 테이블 뷰 이외에 scrollView 와 Other 가 있습니다.

스크롤 뷰를 누르면 이 화면이 나옵니다.
상하 좌우로 움직이면 이미지가 스크롤 됩니다.

그리고 others를 누르면 위 화면과 같이 Slide Bar 와 Date Picker 가 나옵니다.
아주 좋은 샘플이네요.

오늘은 최근에 새로 발표된 Corona SDK 의 Scroll View Widget 에 대해 알아봤습니다.