애플의 도도한 업데이트

Programming/Xcode 2016.09.29 20:39

이번에 Xcode가 7에서 8로 업데이트되면서, Swift가 2.2에서 2.3과 3.0으로 converting을 해야 빌드가 가능하다. 프로그래밍 언어의 변경은 호환을 유지하기 어렵다는 것은 알지만, 너무 개발자들을 혹사하는 것은 아닌가 싶다. 2.x로 넘어가면서는 어느 정도 정착이 되나 싶었는데… 


이번에 프로젝트 심사를 요청하는 과정에서 바이너리를 재전송하라는 내용을 전달받았다. 아래 내용은 기존에 plist에 설정하지 않았다면 벨리데이션 체크에서도 걸러내지 못한다. 앱스토어에 올려줘야 확인이 가능한 부분이다.



애플에서 전달한 내용 >

-----------------

This app attempts to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data.

이 응용 프로그램은 사용 설명 없이 개인 정보 보호에 민감한 데이터에 접근을 시도합니다. 해당 데이터를 사용하는 설명과 함께 NSPhotoLibraryUsageDescription 키를 앱의 Info.plist에 포함해야 합니다. 

-----------------


기존에는 앨범에 접근을 허용하는 메시지를 개발자가 임의로 처리하지 않았지만 Xcode8(iOS10)에서는 iOS에서 기본 메시지는 예전과 같이 노출하고 그 하단에 어떤 이유에서 허용을 요청하는지를 명시적으로 설명해야 한다. (기존에도 있었지만, 권장이었지 필수 설정은 아니었음) 


Xcode8에서 NSPhotoLibraryUsageDescription키가 없어서 에러가 발생하는 것을 확인했다. 기본 접근 허용 description이 노출되기에 키만 입력하고 별도로 description을 넣지 않았었는데 이게 문제가 되어 위와 같은 메시지를 애플에서 전달했던 것이다. description을 넣지 않아도 빌드는 제대로 되며 벨리데이션 체크에서도 성공으로 처리되었기에 문제가 없는 것으로 인지하고 있었는데 이런 함정이 있을 줄이야. 


NSPhotoLibraryUsageDescription 키와 이에 대응하는 description를 넣어서 ipa파일을 올려주니 정상적으로 처리가 되었다. 이 밖에도 개인 정보에 관련한 권한 설정이 강화되어 선택이 아니라 필수가 되었다. 따라서 plist에 키와 함께 description을 꼭 작성해야 한다. 자칫 놓치기 쉬운 부분이니 개발자들은 참고하시라.

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

Xcode 기본 단축키

Programming/Xcode 2016.01.11 14:50



xcode7_cheat_sheet.pdf


저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

OS X El Capitan & Xcode7 beta 버전

Programming/Objective-C 2015.07.02 15:38



애플이 개발자들을 위해 내놓는 beta 버전은 일정 부분 잠재적 문제가 있음을 고려하고 사용해야 한다. 그러나 문제의 성격에서 개발자들의 편의에는 점점 소홀해진다는 생각을 지울 수가 없다.


OS X El Capitan을 업데이트하고 여러 가지 문제가 발생한다. 가장 큰 문제는 텍스트입력 필드에서 자음과 모음 조합이 이루어지지 않아서 메모장 같은 애플리케이션을 이용해서 문장을 작성하고 붙여넣기를 해야 하는 불편함이다. 영어는 당연히 문제가 없겠으나 한글과 같이 조합이 필요한 언어에서는 짜증이 나는 버그다. 이 문제는 최근에 올려진 beta2 버전에서도 여전히 고쳐지지 않았다.


두 번째 문제는 OS X El Capitan를 설치하면 기존에 사용하던 Xcode6 버전이 실행되지 않는다. OS X El Capitan를 설치할 경우 무조건 Xcode7 beta를 설치해야 한다. 이로 인하여 새로운 문제가 발생한다. Xcode7에서는 iOS 8.4 버전과 8.0등 몇몇 버전을 지원하지 않는다. 누락된 해당 버전 기기는 테스트 기기로 사용할 수가 없는 것이다. 


이 문제는 기존 Xcode6버전 패키지에 있는 버전별 폴더를 복사해서 아래 경로와 같이 Xcode7 내에 있는 동일한 폴더에 붙여넣기를 하는 것으로 해결할 수가 있다.

경로 : /Applications/Xcode-beta.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport


이러한 문제는 애플에서 내놓은 beta 버전이 더는 개발자들을 위한 버전이 아닐 수 있다는 인식을 심어 주기에 충분하다. 애플이 장기적인 안목에서 개발자들과 바람직한 협업(?!)을 유지하려면 일반인에게 공개되는 정식 버전의 점유율만큼, 개발자들의 beta 버전 설치율에도 신경 써야 하지 않을까.


보탬.

OS X El Capitan에서 Xcode 6 버전이 실행되지 않을 경우 아래와 같은 명령어를 터미널에서 실행하면 Xcode6 버전을 실행할 있습니다. Xcode를 종료하면 다시 명령어를 입력해야하니 임시적으로 사용할 수 있는 방법이다.


/Applications/Xcode.app/Contents/MacOS/Xcode </dev/null &>/dev/null &



저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Git]SourceTree에서 특정 파일 커밋에서 제외시키기

Programming/Git&SourceTree 2014.11.16 15:51

이번 프로젝트를 진행하면서 SourceTree를 처음 접해보게 되었다. 제대로 활용하면 적은 노력으로 많은 도움을 받을 수 있을 것 같아서 하나하나 기록할 예정이다. SourceTree를 이용해서 Git을 사용하다 보면 커밋하지 않아도 되는 불필요한 파일이 있다. 대표적인 파일이 .DS_Store 이다. 


SourceTree에서는 이러한 파일을 커밋에서 무시할 수 있도록 설정을 변경할 수 있다. 간단하게 .gitignore 파일 수정을 통해서 .DS_Store 파일을 커밋에서 제외하는 방법은 아래와 같다.


오른쪽 상단에 있는 설정 아이콘을 클릭하여 설정 창을 연다.




Advanced 탭을 선택하면 상단에 Repository-specific ignore list 파일을 확인할 수 있다. Edit를 클릭한다.






편집 화면에서 하단에 */.DS_Store 을 추가한다.

기준 폴더의 위치에 따라서 하위 폴더에 생성되는 .DS_Store 파일이라면 ../.DS_Store 형식으로 디렉토리 구조로 대응하면 된다.



저장하면 앞으로 해당 폴더에서 .DS_Store 파일이 수정이 되더라도 커밋 대상에서 제외되기 때문에 앞으로는 Working Copy 항목에 포함되지 않는다.






저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

요세미티와 iOS8을 이용해 디바이스 동영상 캡처하기

Programming/Objective-C 2014.09.25 10:55

iOS8 업데이트와 함께 앱스토어에서 앱의 프리뷰 영상을 업로드 할 수 있도록 되었습니다. 기존에는 이러한 앱 영상을 만들려면 시뮬레이터를 이용한 녹화 방법 이외에 딱히 효과적인 방법을 찾기 어려웠습니다. 더욱이 디바이스 전용 하드웨어를 사용하는 앱의 경우에는 난감한 부분이었습니다. 그러나 요세미티의 QuickTime Player에서 디바이스 화면을 녹화할 수 있는 기능을 지원합니다. 


https://developer.apple.com/app-store/app-previews/


아래 링크가 좀 더 이해하기 쉽겠네요.

http://www.macworld.co.uk/how-to/iphone/create-video-for-your-app-on-app-store-3532435/


설명 드리면, 요세미티 베타 버전을 업데이트 하셨다면, 

1. 디바이스를 USB로 맥과 연결하고 QuickTime Player를 실행합니다.

2. 파일->새로운 동영상 녹화 선택

3. 동영상 화면에서 위 사진과 같이 녹화 버튼 옆에 화살표를 클릭.

4. 연결된 디바이스 중에 하나를 선택

5. 녹화

6. 끝.




저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

iOS bitly.com을 통한 url 단축 코드

Programming/Objective-C 2013.05.29 08:12

url 링크 스트링을 단축해주는 서비스들 중에 트위터에서 많이 사용되는 Bitly를 통한 url 단축 방법은 다음과 같다.


1. https://bitly.com/ 사이트에서 회원 가입을 한다. (페이스북이나 트위터가 로그인 되어 있으면 해당 계정으로 가입할 수 있음).

2. 오른쪽 상단 내 계정을 클릭, Settings 화면으로 이동하여 ADVANCED 탭을 선택.

3. 맨 아래 Legacy API Key에서 Show legacy API Key 를 클릭.

4. Login과 API Key를 복사해 둔다.


Objective-C 코드 :


-(NSString *)shortenedURL:(NSString *)url{
      NSString *bitLyLogin = @"yourLogin";
      NSString *bitLyAPIKey = @"yourAPIKey";
      NSString *shortenedURL = [NSString stringWithContentsOfURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://api.bit.ly/v3/shorten?login=%@&apikey=%@&longUrl=%@&format=txt", bitLyLogin, bitLyAPIKey, url]] encoding:NSUTF8StringEncoding error:nil];
      
      return shortenedURL;
}


복사한 Login 스트링과 API Key를 넣으면 사용가능하다.


주의할 것은 Legacy API Key에서 API Key를 Reset하면 기존 API Key로는 사용할 수 없으므로 초기 설정된 값을 사용하거나

Reset한 API Key를 받아서 사용하도록 하자.


Facebook이나 Twitter로 가입을 한 경우, 초기 비밀번호를 설정해야 Bitly를 사용하는데 불편함이 없다. 위 코드로 링크를 단축할 경우 Bitly 사이트에서 단축한 원래의 url과 단축된 url을 확인할 수 있다. 또한, 해당 url로 얼마나 클릭이 이루어졌는지도 그래프로 확인이 가능하다.

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

iPhone, iPad : iOS font list

Programming/Objective-C 2012.10.05 17:26


iPhone 4.2

iPad 4.2
Font Families: 40Font Families: 57
Academy Engraved LET
 AcademyEngravedLetPlain
American Typewriter
AmericanTypewriterAmericanTypewriter
AmericanTypewriter-BoldAmericanTypewriter-Bold
Apple Color Emoji
AppleColorEmojiAppleColorEmoji
AppleGothic
AppleGothicAppleGothic
Arial
ArialMTArialMT
Arial-ItalicMTArial-ItalicMT
Arial-BoldMTArial-BoldMT
Arial-BoldItalicMTArial-BoldItalicMT
Arial Hebrew
ArialHebrewArialHebrew
ArialHebrew-BoldArialHebrew-Bold
Arial Rounded MT Bold
ArialRoundedMTBoldArialRoundedMTBold
Bangla Sangam MN
BanglaSangamMNBanglaSangamMN
BanglaSangamMN-BoldBanglaSangamMN-Bold
Baskerville
BaskervilleBaskerville
Baskerville-ItalicBaskerville-Italic
Baskerville-BoldBaskerville-Bold
Baskerville-BoldItalicBaskerville-BoldItalic
Bodoni 72
 BodoniSvtyTwoITCTT-Book
 BodoniSvtyTwoITCTT-BookIta
 BodoniSvtyTwoITCTT-Bold
Bodoni 72 Oldstyle
 BodoniSvtyTwoOSITCTT-Book
 BodoniSvtyTwoOSITCTT-BookIt
 BodoniSvtyTwoOSITCTT-Bold
Bodoni 72 Smallcaps
 BodoniSvtyTwoSCITCTT-Book
Bodoni Ornaments
 BodoniOrnamentsITCTT
Bradley Hand
 BradleyHandITCTT-Bold
Chalkboard SE
ChalkboardSE-RegularChalkboardSE-Regular
ChalkboardSE-BoldChalkboardSE-Bold
Chalkduster
 Chalkduster
Cochin
CochinCochin
Cochin-ItalicCochin-Italic
Cochin-BoldCochin-Bold
Cochin-BoldItalicCochin-BoldItalic
Copperplate
 Copperplate
 Copperplate-Bold
Courier
CourierCourier
Courier-ObliqueCourier-Oblique
Courier-BoldCourier-Bold
Courier-BoldObliqueCourier-BoldOblique
Courier New
CourierNewPSMTCourierNewPSMT
CourierNewPS-ItalicMTCourierNewPS-ItalicMT
CourierNewPS-BoldMTCourierNewPS-BoldMT
CourierNewPS-BoldItalicMTCourierNewPS-BoldItalicMT
DB LCD Temp
DBLCDTempBlackDBLCDTempBlack
Devanagari Sangam MN
DevanagariSangamMNDevanagariSangamMN
DevanagariSangamMN-BoldDevanagariSangamMN-Bold
Didot
 Didot
 Didot-Italic
 Didot-Bold
Futura
Futura-MediumFutura-Medium
Futura-MediumItalicFutura-MediumItalic
Futura-CondensedExtraBoldFutura-CondensedExtraBold
Geeza Pro
GeezaProGeezaPro
GeezaPro-BoldGeezaPro-Bold
Georgia
GeorgiaGeorgia
Georgia-ItalicGeorgia-Italic
Georgia-BoldGeorgia-Bold
Georgia-BoldItalicGeorgia-BoldItalic
Gill Sans
 GillSans
 GillSans-Italic
 GillSans-Bold
 GillSans-BoldItalic
Gujarati Sangam MN
GujaratiSangamMNGujaratiSangamMN
GujaratiSangamMN-BoldGujaratiSangamMN-Bold
Gurmukhi MN
GurmukhiMNGurmukhiMN
GurmukhiMN-BoldGurmukhiMN-Bold
Heiti J
STHeitiJ-LightSTHeitiJ-Light
STHeitiJ-MediumSTHeitiJ-Medium
Heiti K
STHeitiK-LightSTHeitiK-Light
STHeitiK-MediumSTHeitiK-Medium
Heiti SC
STHeitiSC-LightSTHeitiSC-Light
STHeitiSC-MediumSTHeitiSC-Medium
Heiti TC
STHeitiTC-LightSTHeitiTC-Light
STHeitiTC-MediumSTHeitiTC-Medium
Helvetica
HelveticaHelvetica
Helvetica-ObliqueHelvetica-Oblique
Helvetica-BoldHelvetica-Bold
Helvetica-BoldObliqueHelvetica-BoldOblique
Helvetica Neue
HelveticaNeueHelveticaNeue
HelveticaNeue-ItalicHelveticaNeue-Italic
HelveticaNeue-BoldHelveticaNeue-Bold
HelveticaNeue-BoldItalicHelveticaNeue-BoldItalic
Hiragino Kaku Gothic ProN
HiraKakuProN-W3HiraKakuProN-W3
HiraKakuProN-W6HiraKakuProN-W6
Hiragino Min ProN
 HiraMinProN-W3
 HiraMinProN-W6
Hoefler Text
 HoeflerText-Regular
 HoeflerText-Italic
 HoeflerText-Black
 HoeflerText-BlackItalic
Kailasa
KailasaKailasa
Kailasa-BoldKailasa-Bold
Kannada Sangam MN
KannadaSangamMNKannadaSangamMN
KannadaSangamMN-BoldKannadaSangamMN-Bold
Malayalam Sangam MN
MalayalamSangamMNMalayalamSangamMN
MalayalamSangamMN-BoldMalayalamSangamMN-Bold
Marker Felt
MarkerFelt-ThinMarkerFelt-Thin
MarkerFelt-WideMarkerFelt-Wide
Optima
 Optima-Regular
 Optima-Italic
 Optima-Bold
 Optima-BoldItalic
Oriya Sangam MN
OriyaSangamMNOriyaSangamMN
OriyaSangamMN-BoldOriyaSangamMN-Bold
Palatino
Palatino-RomanPalatino-Roman
Palatino-ItalicPalatino-Italic
Palatino-BoldPalatino-Bold
Palatino-BoldItalicPalatino-BoldItalic
Papyrus
 Papyrus
Party LET
 PartyLetPlain
Sinhala Sangam MN
SinhalaSangamMNSinhalaSangamMN
SinhalaSangamMN-BoldSinhalaSangamMN-Bold
Snell Roundhand
SnellRoundhandSnellRoundhand
SnellRoundhand-BoldSnellRoundhand-Bold
Tamil Sangam MN
TamilSangamMNTamilSangamMN
TamilSangamMN-BoldTamilSangamMN-Bold
Telugu Sangam MN
TeluguSangamMNTeluguSangamMN
TeluguSangamMN-BoldTeluguSangamMN-Bold
Thonburi
 Thonburi
 Thonburi-Bold
Times New Roman
TimesNewRomanPSMTTimesNewRomanPSMT
TimesNewRomanPS-ItalicMTTimesNewRomanPS-ItalicMT
TimesNewRomanPS-BoldMTTimesNewRomanPS-BoldMT
TimesNewRomanPS-BoldItalicMTTimesNewRomanPS-BoldItalicMT
Trebuchet MS
TrebuchetMSTrebuchetMS
TrebuchetMS-ItalicTrebuchetMS-Italic
TrebuchetMS-BoldTrebuchetMS-Bold
Trebuchet-BoldItalicTrebuchet-BoldItalic
Verdana
VerdanaVerdana
Verdana-ItalicVerdana-Italic
Verdana-BoldVerdana-Bold
Verdana-BoldItalicVerdana-BoldItalic
Zapf Dingbats
 ZapfDingbatsITC
Zapfino
ZapfinoZapfino

출처 : http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

iOS icon 파일명 및 크기

Programming/Objective-C 2012.09.05 00:39

이미지(px)

파일명

사용처

요구상태기타
512x512iTunesArtworkAd Hoc iTunes

선택적 필요

파일은 png 형식이어야 함, 그러나 이름에서는 .png 확장 제외
57x57Icon.png아이폰/아이팟 터치 앱스토어와 홈 화면필요<없음>
114x114Icon@2x.pngiPhone 4 고해상 홈 화면선택적 필요

< 없음>

72x72Icon-72.png

iPad 호환 홈 화면

선택적 필요

< 없음>

29x29Icon-Small.png

Spotlight와 설정

선택적 필요<없음>
50x50Icon-Small-50.pngiPad 호환 Spotlight설정된 bundle이 있다면 필요, 아니면 선택적 필요<없음>
58x58Icon-Small@2x.png

Spotlight와 iPhone 4 고해상도

설정된 bundle이 있다면 필요, 아니면 선택적 필요<없음>

스샷: 320 x 480 (1~4장)


Splash:

Default.png : 320 x 480

Default@2x.png : 640 x 960

+

iPhone5 해상도 지원 이미지 : 640 x 1136


저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

Release build에서 NSLog 무효화

Programming/Objective-C 2012.08.31 15:14

prefix header에 아래 코드 삽입.

Release 빌드할 때 무효화 자동 처리.


#ifndef __OPTIMIZE__

#define NSLog(...) NSLog(__VA_ARGS__)

#else

#define NSLog(...) {}

#endif

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

NSDate to String

Programming/Objective-C 2012.07.23 19:45

PatternResult (in a particular locale)
yyyy.MM.dd G 'at' HH:mm:ss zzz1996.07.10 AD at 15:08:56 PDT
EEE, MMM d, ''yyWed, July 10, '96
h:mm a12:08 PM
hh 'o''clock' a, zzzz12 o'clock PM, Pacific Daylight Time
K:mm a, z0:00 PM, PST
yyyyy.MMMM.dd GGG hh:mm aaa01996.July.10 AD 12:08 PM




-(void) date1{
      // output : 7/23/12
      NSDate *today = [NSDate dateWithTimeIntervalSinceNow:0];
      NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
      [dateFormat setDateStyle:NSDateFormatterShortStyle];
      NSString *dateString = [dateFormat stringFromDate:today];
      NSLog(@"date1 : %@", dateString);
}

-(void) date2{
      // output : 07/23/2012 07:36PM
      NSDate *today = [NSDate date];
      NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
      [dateFormat setDateFormat:@"MM/dd/yyyy hh:mma"];
      NSString *dateString = [dateFormat stringFromDate:today];
      NSLog(@"date2 : %@", dateString);
      
}
-(void) date3{
      // output : Monday July 23, 2012
      NSDate *today = [NSDate date];
      NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
      [dateFormat setDateFormat:@"EEEE MMMM d, YYYY"];
      NSString *dateString = [dateFormat stringFromDate:today];
      NSLog(@"date3 : %@", dateString);
}

-(void) date4{
      // output : 7:38 PM, GMT+09:00
      NSDate *today = [NSDate date];
      NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
      [dateFormat setDateFormat:@"h:mm a, zzz"];
      NSString *dateString = [dateFormat stringFromDate:today];
      NSLog(@"date4 : %@", dateString);
}

-(void) date5{
      // output : 월요일 7월 23, 2012
      NSDate *date = [NSDate date];
      NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
      [dateFormat setDateFormat:@"EEEE MMMM d, YYYY"];
      [dateFormat setLocale:[[NSLocale alloc] initWithLocaleIdentifier:@"ko_kr"]];
      NSString *dateString = [dateFormat stringFromDate:date];
      NSLog(@"date5 : %@", dateString);
}


저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

becomeFirstResponder, resignFirstResponder 애니메이션 duration time 설정

Programming/Objective-C 2012.07.22 04:48

UITextField 를 터치하면 나타나거나 사라지는 keypad의 애니메이션 속도를 조정하기 위해서는 아래와 같은 방법을 사용할 수 있다.



[UIView animateWithDuration:0.3 animations:^{
                  [inputText becomeFirstResponder];
            }];

[UIView animateWithDuration:0.3 animations:^{
                  [inputText resignFirstResponder];
            }];


애니메이션 종료 시점에 처리해야하는 부분이 있으면 간단하게 아래와 같이 처리할 수도 있다. (delegate 메소드를 사용하는 것을 권장.)


[UIView animateWithDuration:0.3 animations:^{
                  [inputText becomeFirstResponder];      
            } completion:^(BOOL finished) {
                  // 애니메이션 종료후 처리
            }];



애니메이션 없이 바로 나타나게 하려면 UIView animate duration time을 0으로 설정하면 된다. 



저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

iOS의 SQLite-FMDB 사용

Programming/Objective-C 2012.04.27 10:29

iOS에서 데이터를 저장하는 방식 중에는 크게 번들 plist 파일에 저장하는 방법과 SQLite로 db방식으로 저장하는 방법이 있다. plist는 파일 형식으로 저장하는 방법, SQLite는 db 형식으로 저장하는 방법으로 이해할 수 있는데 SQLite를 사용하기 위해서는 db를 쓰고 읽는 기능을 하기 위해서는 적지 않은 코드를 작성해야하는 번거로움이 있다. 이를 해결하고자 FMDB라는 Wrapper library를 GitHub에서 배포하고 있다. 정리 차원에서 일본 블로거 포스트 내용을 번역하여 정리해 본다.


1. FMDB 란?

FMDB는 SQLite를 iOS의 Objective-C에서 사용하기 편하도록 Wrapper Library를 GitHub에서 공개하고 있다. 

https://github.com/ccgus/fmdb


인터페이스는 JDBC 또는 ADO.NET에 가깝다. 따라서, 이것을 사용한 적이 있으면 원활하게 이해할 수 있을 것이다.



2. FMDB 준비

먼저 FMDB를 이용하고 싶은 프로젝트에 SQLite 라이브러리를 추가한다. 

1. Xcode 왼쪽 창의 탐색창에서 프로젝트를 선택 

2. 오른쪽 창에 PROJECT와 TARGET이 표시되며 TARGET을 선택

3. 오른쪽 창, 상단 탭에서 Build Phases 선택

4. 빌드에 대한 설정 항목이 표시되는데 그 중에서 Link Binary With Libraries를 선택

5. Link Binary With Libraries 왼쪽 아래에 +를 클릭

6. Choose framework and libraries add :라는 메시지가 표시되고

7. 검색을 통해서 프레임워크와 라이브러리 목록에서 libsqlite3.0.dylib 선택 

8. 대화 상자 오른쪽 아래 Add 버튼을 클릭


그 다음으로 FMDB 소스를 프로젝트에 추가한다.

1. FMDB 프로젝트 페이지에서 ZIP 파일을 내려 받는다.

2. 압축을 풀고 src 폴더에서 fmdb.m 파일을 제외하고 프로젝트에 import

3. 



3. 데이터베이스 만들기 및 open / close

데이터베이스를 제공하는 경우 미리 만든 데이터베이스 파일을 프로젝트 리소스에 통합하고 그 것을 복사하거나 SQLite를 생성해야한다. iOS 애플리케이션 작업 영역에 app.db라는 데이터베이스 파일을 생성하는 경우는 다음과 같이 처리한다.


NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString *dir = [paths objectAtIndex : 0]; FMDatabase *db = [FMDatabase databaseWithPath:[dir stringByAppendingPathComponent:@"app.db"]]; NSLog(@"%@", db); [db open]; [db close];

databaseWithPath 메소드에 파일의 경로를 지정하여 파일이 기존에 존재하면 참조하고 없을 경우에는 새로 만들고 연결된 FMDatabase 인스턴스를 반환한다.


데이터베이스 작업을 시작하면 이 인스턴스에 대한 open 메소드를 호출한다. 종료는 close 메소드, close를 호출하면 데이터베이스를 닫고 변경된 내용을 파일에 저장한다. 


4. CREATE

테이블 생성은 다음과 같다.


NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *dir = [paths objectAtIndex : 0];
FMDatabase *db = [FMDatabase databaseWithPath:[dir stringByAppendingPathComponent:@"app.db"]];
NSString *sql = @"CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT);";
[db open];
[db executeUpdate:sql];
[db close];


FMDatabase - executeUpdate 메소드에 CREATE 문장을 지정하여 작업을 수행한다. SQLite는 IF NOT EXISTS에 대응하고, 이 것을 붙이면 테이블이 존재하지 않을 때만 생성 해주기 때문에 편리하다.


5. INSERT

행을 추가하는 것은 다음과 같다.


NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *dir = [paths objectAtIndex : 0];
FMDatabase *db = [FMDatabase databaseWithPath:[dir stringByAppendingPathComponent:@"app.db"]];
NSString *sql = @"INSERT INTO users (name) VALUES (?)";

[db open];
[db executeUpdate:sql, @"이름" ];
[db close];


executeUpdate는 Prepared Statement에 대응하고 있다. SQL 문장에서 ?를 작성한 매개변수 부분에 가변 인자를 할당한다.



6. DELETE

행 삭제는 다음과 같다.


NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *dir = [paths objectAtIndex : 0];
FMDatabase *db = [FMDatabase databaseWithPath:[dir stringByAppendingPathComponent:@"app.db"]];

NSString *sql = @"DELETE FROM users WHERE id =?";
[db open];
[db executeUpdate:sql, [NSNumber numberWithInteger:14]];
[db close];


7. SELECT

데이터 선택은 다음과 같다.


NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *dir = [paths objectAtIndex : 0];
FMDatabase *db = [FMDatabase databaseWithPath:[dir stringByAppendingPathComponent:@"app.db"]];

NSString *sql = @"SELECT id, name FROM users;";
[db open];

FMResultSet *results = [db executeQuery:sql];
NSMutableArray *users = [[NSMutableArray alloc] initWithCapacity:0];

while ([results next])
{
      User *user = [[User alloc] init];
      user.userId = [results intForColumnIndex:0];
      user.name = [results stringForColumnIndex:2];
      [users addObject:user];
}

[db close];


FMDatabase - executeQuery 처리 결과를 FMResultSet 인스턴스로 반환한다.

FMResultSet - next를 호출하여 가져온 행을 순차적으로 불러온다. 행이 있는 경우 YES, 끝이면 NO를 반환하므로 이 메소드를 호출하는 while 조건문을 통해서 모든 행이 열거된다.



8. 트랜잭션

SQLite는 암묵적으로 트랜잭션 제어를 한다. 평상시에는 문제가 없지만 대량의 INSERT를 실행하면 그때마다 BEGIN ~ COMMIT이 실행되기 때문에 속도가 크게 저하된다. 이러한 작업을 수행하려면 대상 구간을 명시적으로 트랜잭션 처리하는 것이 좋다.


FMDB가 명시적으로 트랜잭션 FMDatabase - beginTransaction 메서드에서 시작되고 commit으로 종료된다. 오류 등으로 처리 전의 상태로 되돌리려면 rollback 메소드를 실행한다.


NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *dir = [paths objectAtIndex : 0];
FMDatabase *db = [FMDatabase databaseWithPath:[dir stringByAppendingPathComponent:@"app.db"]];

NSString *sql = @"SELECT id, name FROM users;";
[db open];

FMResultSet *results = [db executeQuery:sql];
NSMutableArray *users = [NSMutableArray array];

while ([results next])
{
      User *user = [[User alloc] init];
      user.userId = [results intForColumnIndex:0];
      user.name = [results stringForColumnIndex:2];
      NSLog(@"%@", user.name);
      [users addObject:user];
}

[db close];


// Transaction
sql = @"INSERT INTO users (name) VALUES (?)";

[db open];
[db beginTransaction];

BOOL isSucceeded = YES;
for( User* user in users )
{
      NSLog(@"name:%@", user.name);
      if( ![db executeUpdate:sql, user.name] )
      {
isSucceeded = NO;
break;
      }
}

if( isSucceeded )
{
      [db commit];
}
else
{
      [db rollback];
}

[db close];

명시적 트랜잭션을 실행하는 동안에는 데이터베이스 전체가 잠긴다. 따라서 구간 내에서 새로운 데이터베이스를 open하면 응답 없음으로 간주한다.



9. 형식

FMDB를 이용하여 데이터를 취득, 설정하는 형식에 대한 정리.


데이터를 취득하기 위해서는 FMDatabase - executeQuery의 결과로 반환된 FMResultSet 인스턴스 메소드를 사용한다. 메소드 이름은 typeForColumn 또는 typeForColumnIndex 다. 각 컬럼 이름과 위치 인덱스 값을 얻을 수 있다.


예를 들어, stringForColumn에 "name"을 지정했다면 name 문자열(TEXT)의 컬럼을 가져온다. intForColumnIndex:4를 지정하면 SELECT 문을 검색할 4 번째 정수(INTEGER)를 얻을 수 있다. 대표적인 데이터 형식 대응은 아래와 같다.


SQLite

Objective-C 

검색 메소드 

 TEXT

NSString 

stringForColumn, stringForColumnIndex 

INTEGER 

int 

intForColumn, intForColumnIndex 

BOOL 

BOOL 

boolForColumn, boolForColumnIndex 

REAL 

double 

doubleForColumn, doubleForColumnIndex 

DATETIME (INTEGER, REAL, TEXT)

NSDate 

dateForColumn, dateForColumnIndex 

BLOB 

NSData 

dataForColumn, dataForColumnIndex 


FMDatabase - executeQuery로 지정하는 매개변수는 런타임에 유형검사를 한다. TEXT면 NSString, INTEGER면 NSNumber로 대응하며 잘 못된 형식을 지정하면 런타임 에러를 발생시킨다.


데이터 취득의 경우,  FMResultSet이 Objective-C의 변환을 담당하지만 설정시에 변환은 직접 해야한다. 변환 대응은 아래와 같다.


 SQLite

Objective-C 

변환 방법 

 TEXT

NSString 

변환 불필요 

INTEGER 

NSInteger 

NSNumber - numberWithInt 

BOOL 

BOOL 

NSNumber - numberWithBool 

REAL 

double 

NSNumber - numberWithDouble 

DATETIME (INTEGER, REAL, TEXT) 

NSDate 

변환 불필요 

BLOB 

NSData 

변환 불필요. 


SQLite의 날짜 형식은 다음과 같이 정의되어 있다. (Datatypes In SQLite Version 3 에서 인용).


TEXT as ISO8601 strings (“YYYY-MM-DD HH:MM:SS.SSS”).

REAL as Julian day numbers, the number of days since noon in Greenwich on November 24, 4714 B.C. according to the proleptic Gregorian calendar.

INTEGER as Unix Time, the number of seconds since 1970-01-01 00:00:00 UTC.


DATETIME은 고유의 형식이 있는 것은 아니고 TEXT, REAL, INTEGER를 사용한다. SQLite 클라이언트는 TEXT 밖에 허용하지 않으며 System.Data.SQLite과 같이 연결 문자열 DATETIME 형식의 해석 방법을 선택할 수 있다. 

FMDB의 경우 내부적으로 Unix Timestamp에서 운용하고 있으므로 형식을 정의할 때 INTEGER로 하면 좋다. 



10. Lita(데이터베이스 관리 프로그램)

FMDB를 이용한 데이터베이스 작업을 했을 때 그 결과가 어떻게 반영되었는지 확인하고 싶을 때가 있다. 또한 애플리케이션에서 사용하는 SQL 문을 검토하기 위해 실제 데이터베이스에 대해 SQL을 실행하고 싶은 경우도 많다. 이럴 때 사용하면 유용한 AIR 애플리케이션이 바로 Lita 다.


Lita – SQLite Administration Tool


iPhone 시뮬레이터를 통해 SQLite 데이터베이스를 생성한 경우, Mac의 다음 위치에 파일이 생성된다.

/Users/사용자이름/Library/Application Support/iPhone Simulator/5.0/Applications/애플리케이션 ID/Documents


만들어진 파일을 Lita에서 열고 애플리케이션이 데이터베이스 작업을 행한 후, Lita에서 갱신하면 저장된 데이터의 변경을 쉽게 할 수 있다. 





저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

iOS XML parser NSXMLParser[2]

Programming/Objective-C 2012.04.21 19:11

이전 포스트에서는 NSXMLParser를 사용할 때 호출되는 기본적인 델리게이트 메소드들을 살펴보았다. 이번에는 각 element및 attribute 값들을 객체를 이용하여 저장해 본다. 저장 방식은 iOS5 programming cookbook 샘플소스를 수정해서 사용했다.


먼저 사용할 xml 데이터는 아래와 같은 형식이다.

<?xml version="1.0" encoding="UTF-8"?>
<root>
      <person id="1">
            <firstName>Anthony</firstName>
            <lastName>Robbins</lastName>
            <age>51</age>
      </person>

      <person id="2">
            <firstName>Richard</firstName>
            <lastName>Branson</lastName>
            <age>61</age>
      </person>
</root>


아래는 개별 element들을 저장하기 위한 클래스다. XML 트리형식의 구조로 상위 element 데이터에 접근할 수 있도록 parent라는 자신과 같은 객체 형식의 참조 속성을 포함하고 있다. 단순히 참조하는 형태이기 때문에 weak로 생성한다.


XMLElement.h

#import <Foundation/Foundation.h>

@interface XMLElement : NSObject

@property (nonatomic, strong) NSString *name;
@property (nonatomic, strong) NSString *text;
@property (nonatomic, strong) NSDictionary *attributes;
@property (nonatomic, strong) NSMutableArray *subElements;
@property (nonatomic, weak) XMLElement *parent;

@end


XMLElement.m

#import "XMLElement.h"

@implementation XMLElement

@synthesize name;
@synthesize text;
@synthesize attributes;
@synthesize subElements;
@synthesize parent;

- (NSMutableArray *) subElements{
  if (subElements == nil){
    subElements = [[NSMutableArray alloc] init];
  }
  return subElements;
}

@end


subElements 최초 참조시 객체가 생성되지 않았을 때는 생성해서 return하도록 처리되어 있다. 

아래는 메인 델리게이트 클래스다.


#import <UIKit/UIKit.h>

@class XMLElement;

@interface Parsing_XML_with_NSXMLParserAppDelegate
           : UIResponder <UIApplicationDelegate, NSXMLParserDelegate>

@property (nonatomic, strong) UIWindow *window;
@property (nonatomic, strong) NSXMLParser *xmlParser;
@property (nonatomic, strong) XMLElement *rootElement;
@property (nonatomic, strong) XMLElement *currentElementPointer;

@end



#import "Parsing_XML_with_NSXMLParserAppDelegate.h"
#import "XMLElement.h"

@implementation Parsing_XML_with_NSXMLParserAppDelegate

@synthesize window = _window;
@synthesize xmlParser;
@synthesize rootElement;
@synthesize currentElementPointer;

- (void)parserDidStartDocument:(NSXMLParser *)parser{
      self.rootElement = nil;
      self.currentElementPointer = nil;
}

- (void)parserDidEndDocument:(NSXMLParser *)parser{
      self.currentElementPointer = nil;
}

- (void)        parser:(NSXMLParser *)parser 
       didStartElement:(NSString *)elementName 
          namespaceURI:(NSString *)namespaceURI
         qualifiedName:(NSString *)qName
            attributes:(NSDictionary *)attributeDict{
  
      if (self.rootElement == nil){
            /* 루트 element가 생성되지 않았을 때 */
            
            self.rootElement = [[XMLElement alloc] init];
            self.currentElementPointer = self.rootElement;
      } else {
            /* 루트 element가 있을 때 새로운 XMLElement 객체를 만들고 현재 참조 element를 parent로
             새로 만들어진 element를 현재 참조 element로 연결 */
            
            XMLElement *newElement = [[XMLElement alloc] init];
            newElement.parent = self.currentElementPointer;
            [self.currentElementPointer.subElements addObject:newElement];
            self.currentElementPointer = newElement;
      }

      self.currentElementPointer.name = elementName;
      self.currentElementPointer.attributes = attributeDict;
  
}

- (void)        parser:(NSXMLParser *)parser
         didEndElement:(NSString *)elementName
          namespaceURI:(NSString *)namespaceURI
         qualifiedName:(NSString *)qName{
      
      /* element를 빠져 나올 때 현재 XMLElement에서 parent로 참조하고 있는 element를
       현재 참조로 대입 */
      self.currentElementPointer = self.currentElementPointer.parent;
  
}

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string{
  
      self.currentElementPointer.text = string;

}

- (BOOL)            application:(UIApplication *)application 
  didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{

      NSString *xmlFilePath = [[NSBundle mainBundle] pathForResource:@"MyXML"
                                                          ofType:@"xml"];

      NSData *xml = [[NSData alloc] initWithContentsOfFile:xmlFilePath];

      self.xmlParser = [[NSXMLParser alloc] initWithData:xml];
      
      self.xmlParser.delegate = self;

      if ([self.xmlParser parse]){
            NSLog(@"The XML is parsed.");
            XMLElement *element;
            XMLElement *subElement;
            for(element in self.rootElement.subElements){
                  NSLog(@"person ID : %@", [element.attributes objectForKey:@"id"]);
                  for(subElement in element.subElements){
                        NSLog(@"\t%@ : %@", subElement.name, subElement.text);
                  }
            }
      } else{
            NSLog(@"Failed to parse the XML");
      }
  
      self.window = [[UIWindow alloc] initWithFrame:
                 [[UIScreen mainScreen] bounds]];

      self.window.backgroundColor = [UIColor whiteColor];
      [self.window makeKeyAndVisible];
      return YES;
}
@end


위 코드에서 가장 핵심이 되는 부분은 아래 부분이다. 새로은 element를 생성한 후, 생성된 element객체 parent를 현재 참조하고 있는 element로 설정한다. 이는 현재 element 에서 자식 element가 새롭게 생성되어 연결되는 과정을 보여준다. 새로은 element를 addObject로 추가하고 마지막으로는 새롭게 생성된 element를 현재 element에 대입하여 새롭게 생성된 element가 현재 element가 되도록 처리해 준다. 

XMLElement *newElement = [[XMLElement alloc] init]; newElement.parent = self.currentElementPointer; [self.currentElementPointer.subElements addObject:newElement]; self.currentElementPointer = newElement;


다음은 출력된 결과다.


The XML is parsed.
person ID : 1
	firstName : Anthony
	lastName : Robbins
	age : 51
person ID : 2
	firstName : Richard
	lastName : Branson
	age : 61












저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

iOS XML parser NSXMLParser[1]

Programming/Objective-C 2012.04.20 00:43

iOS에서 사용할 수 있는 XML 파서가 꽤 많다. 대체적으로 메모리 사용량이나 속도면에서 TBXML을 많이 사용하는 듯 하다. 무료도 제공되는 라이브러리가 성능면에서는 좋은 것 같은데... 문제는 iOS의 빠른 업데이트를 따라가려면 좀 시간이 걸린다는 것... TBXML에서는 아직 xCode에서 업데이트 된 ARC(Automatic Reference Counting)를 지원하지 않는 것 같아서 일단 기본 제공되는 NSXMLParser 사용법 부터 정리해 보기로 한다.


NSXMLParser도 delegate 메소드를 통해서 element의 값들에 접근할 수 있다. iOS를 공부하면서 가장 이해하기 어려웠던 부분이 바로 delegate 메소드 호출방식이었다. 전혀 속도면에서 도움이 될 것 같지 않은 방법을 채택하고 있는지라 초기에는 왜 이렇게 해야만하는지에 대한 의문에 사로잡혀 있다보니 한 없이 복잡하고 어려웠다. 아무튼 공부는 이해가 안되면 그냥 정신줄을 놓고 외워서 받아들이는 편이 정신 건강에 좋다.


본론으로 들어가서... 본인도 틈틈히 개인적으로 공부하는 차원에서 정리하고 있기 때문에 내용에서 오류가 발견될 수도 있다. 오류가 있으면 알려주시면 좋겠다. 


NSXMLParser는 parse 메소드에 메시지를 전달하면 delegate로 연결된 객체에서 처리해 놓은 일련의 메소드들을 호출하면서 파싱을 진행한다. 아래는 NSXMLParser가 파싱을 하면서 실행되는 메소드들의 순서다.


NSXMLParser 객체 parse 메소드 호출 후,

1. parserDidStartDocument

2. didStartElement

3. foundCharacters

4. didEndElement

5. parserDidEndDocument


이 과정에서 오류가 발견되면 parseErrorOccurred 메소드가 호출된다.


아래는 샘플로 활용할 xml 내용이다.


<?xml version="1.0" encoding="UTF-8"?> <catalog> <book id="bk101"> <author>Gambardella, Matthew</author> <title>XML Developer's Guide</title> <genre>Computer</genre> <price>44.95</price> <publish_date>2000-10-01</publish_date> <description>An in-depth look at creating applications with XML.</description> </book> </catalog>


일단 번들에 있는 xml 데이터를 불러와서 파싱을 시작한다.

NSString *path = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"sample.xml"];
    NSData *data = [NSData dataWithContentsOfFile:path];
    
    self.xmlParser = [[NSXMLParser alloc] initWithData:data];
    self.xmlParser.delegate = self;
    if([self.xmlParser parse]){
        NSLog(@"The XML is Parsed.");
        
    }else {
        NSLog(@"Failed to parse the XML");
    }

[self.xmlParser parse] 메소드를 호출하여 파싱을 시작하면 처음으로 호출되는 메소드는 parserDidStartDocument 

-(void) parserDidStartDocument:(NSXMLParser *)parser{
      NSLog(@"parserDidStartDocument");
      // tab 처리를 위한 전역 변수
      tabString = [NSMutableString new];
}

그리고 순차적으로 element들을 탐색하기 시작한다. 각 element에 접근할 때마다 아래 메소드가 실행된다.


-(void) parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName 
                                          namespaceURI:(NSString *)namespaceURI 
                                          qualifiedName:(NSString *)qName 
                                          attributes:(NSDictionary *)attributeDict{
      tabString = [[tabString stringByAppendingString:@"\t"] mutableCopy];
      NSLog(@"%@", [tabString stringByAppendingString:elementName]);
      
}

elementName가 각 element명이다. 여기서는 NSLog 쓸 때 tab을 하나씩 추가하여 들여쓰기를 한다.  해당 노드의 attribute들은 NSDictionary형으로 attributeDict을 참조해서 사용하면 된다.


그 다음으로 실행되는 것이 아래 메소드다.


-(void) parser:(NSXMLParser *)parser foundCharacters:(NSString *)string{
      NSLog(@"%@", [tabString stringByAppendingString:string]);
}

didStartElement 메소드에서 접근한 element의 value 값을 확인할 수 있다. 그 다음으로는 element의 값까지 접근했으니 element가 닫히는 부분이다. 여기서는 일단 elementName을 출력하고 tabString의 끝에 있는 '\t'을 하나씩 제거하여 들여쓰기를 전 단계로 되돌린다.


-(void) parser:(NSXMLParser *)parser didEndElement:(NSString *)elementName 
                                          namespaceURI:(NSString *)namespaceURI 
                                          qualifiedName:(NSString *)qName{
      NSLog(@"%@", [tabString stringByAppendingString:elementName]);
      tabString = [[tabString substringToIndex:[tabString length]-1] mutableCopy];
}

 

이렇게 뎁스 안쪽으로 탐색을 하여 값을 참조하고 밖으로 나오면서 최종 root element를 닫으면 아래 메소드가 실행되고 parsing을 종료하게 된다. 


-(void) parserDidEndDocument:(NSXMLParser *)parser{
      NSLog(@"parserDidEndDocument");
      tabString = nil;
}


output 결과 >

parserDidStartDocument
	catalog
	
   
		book
		
      
			author
			Gambardella, Matthew
			author
		
      
			title
			XML Developer's Guide
			title
		
      
			genre
			Computer
			genre
		
      
			price
			44.95
			price
		
      
			publish_date
			2000-10-01
			publish_date
		
      
			description
			An in-depth look at creating applications 
      with XML.
			description
		
   
		book
	

	catalog
parserDidEndDocument
The XML is Parsed.


element value가 없는 것들도 메소드는 실행되기 때문에 줄 내림이 생기는 것을 알 수 있다. 

이제 해야할 일은 각 element와 attribute에 접근하여 값을 확인할 수 있으니 이것을 나름의 데이터에 저장해서 활용하면 된다. 다음 포스트에서는 참조된 데이터를 저장하여 사용하는 부분을 추가하도록 하겠다.



저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

형식이 있는 문자열이 사용할 수 있는 토큰

Programming/Objective-C 2012.04.10 13:20

Objective-C에서 형식이 있는 문자열이 사용할 수 있는 토큰

심벌표시
 %@ id
 %d, %D, %ilong
 %u, %Uunsigned long
 %hishort
 %huunsigned short
 %qilong long
 %quunsigned long
 %x, %X16진법으로 표시한 unsigned long
 %o, %O8진법으로 표시한 unsigned long
 %f, %e, %E, %g, %Gdouble
 %cASCII 문자인 unsigned char
 %C유니코드 문자인 unichar
 %schar* (ASCII 문자들. NULL로 끝을 나타내는 C 문자열)
 %Sunichar* (유니코드 문자들. NULL로 끝을 나타내는 C 문자열)
 %pvoid* (0x로 시작하는 16진법으로 표시한 주소)
 %%% 문자



저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

UIColor 매크로(RGB, RGBA, HTML)

Programming/Objective-C 2012.04.04 17:49


#define RGB(r, g, b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1]

#define RGBA(r, g, b, a) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a]

#define HTML(rgb) RGB((double)(rgb >> 16 & 0xff), (double)(rgb >> 8 & 0xff), (double)(rgb & 0xff))

//////////////////////////////////////////////////////////////////////

// Code without the macro

  msgLabel.textColor = [UIColor colorWithRed:255/255.0 green:251/255.0 blue:204/255.0 alpha:1];

// Or like this...

  msgLabel.textColor = [UIColor colorWithRed:1.0 green:.98 blue:.8 alpha:1];

 

// Code with macro

      msgLabel.textColor = RGB(255, 251, 204);

[label setTextColor:HTML(0xff0000)];


참고 : http://iphonedevelopertips.com/cocoa/uicolor-macros.html









저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

Starling 이미지 로드 및 scale & rotation

Programming/Framework 2012.01.12 10:52

package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.display.Button;
	import starling.display.Image;
	import starling.textures.Texture;
	import starling.events.Touch;
	import starling.events.TouchEvent;
	import starling.events.TouchPhase;
	import starling.animation.Tween;
	import starling.animation.Transitions;
	import starling.utils.deg2rad;
	import starling.display.DisplayObject;
	import starling.text.TextField;
    import starling.utils.HAlign;
    import starling.utils.VAlign;
    
    import utils.TouchSheet;
	
	import flash.geom.Rectangle;
	import flash.geom.Point;
	import flash.display.Bitmap;
	import flash.net.URLRequest;
	import flash.display.Loader;
	import flash.events.Event;

	public class Demo extends Sprite {

		private var _loader:Loader;
		private var _image:Image;
		private var _posText:TextField;
		private var _sheet:TouchSheet;
		
		public function Demo() {
			_loader = new Loader();
			_loader.load(new URLRequest("http://cfile24.uf.tistory.com/image/11252E424F0ADA1C069349"));
			_loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, onLoadedHandler);
		}

		
		private function onLoadedHandler(e:flash.events.Event):void{
			var bitmap:Bitmap = _loader.content as Bitmap;
			var texture:Texture = Texture.fromBitmap(bitmap);
			_image = new Image(texture);
			
			
			 var description:String = 
                "- touch and drag to move the images \n" +
                "- pinch with 2 fingers to scale and rotate \n" +
                "- double tap brings an image to the front \n" +
                "- use Ctrl/Cmd & Shift to simulate multi-touch";
            
            var infoText:TextField = new TextField(300, 75, description);
            infoText.x = 10;
			infoText.y = 35;
			infoText.fontSize = 12;
			infoText.color = 0x999999;
            infoText.vAlign = VAlign.TOP;
            infoText.hAlign = HAlign.LEFT;
            addChild(infoText);
			
			_sheet = new TouchSheet(_image);
			_sheet.scaleX = 0.2;
			_sheet.scaleY = 0.2;
			setAlignCenter(_sheet);
			_sheet.addEventListener(TouchEvent.TOUCH, onTouchHandler);
			addChild(_sheet);
			
			_posText = new TextField(400, 480, "");
			_posText.x = 10;
			_posText.y = 105;
			_posText.fontSize = 12;
			_posText.color = 0xBBBBBB;
            _posText.vAlign = VAlign.TOP;
            _posText.hAlign = HAlign.LEFT;
			_posText.touchable = false;
            addChild(_posText);
			
			stage.addEventListener(starling.events.Event.RESIZE, onResizeHandler);
			
		}
		
		private function onTouchHandler(e:TouchEvent):void{
			var touches:Vector.<Touch> = e.getTouches(_sheet);
			_posText.text = "_sheet.x : "+_sheet.x+"\n"+
							"_sheet.y : "+_sheet.y+"\n"+
							"_sheet.width  : "+_sheet.width+"\n"+
							"_sheet.height : "+_sheet.height;
			
			var len:int = touches.length;
			for(var i:int=0;i<len;i++){
				var touch:Touch = touches[i];
				var currentPoint:Point = touch.getLocation(_sheet);
				var previousPoint:Point = touch.getPreviousLocation(_sheet);
				_posText.text +="\n\n"+"touches["+i+"]========================\n"+
								"previousGlobalX : "+touch.previousGlobalX+"\n"+
								"previousGlobalY : "+touch.previousGlobalY+"\n"+
								"globalX : "+touch.globalX+"\n"+
								"globalY : "+touch.globalY+"\n"+
								"getLocation().x : "+currentPoint.x+"\n"+
								"getLocation().y : "+currentPoint.y+"\n"+
								"getPreviousLocation().x : "+previousPoint.x+"\n"+
								"getPreviousLocation().y : "+previousPoint.y;
			}
			
		}
		
		private function onResizeHandler(e:starling.events.Event):void{
			
		}

		private function setAlignCenter(inTarget:DisplayObject):void{
			inTarget.x = stage.stageWidth >> 1;
			inTarget.y = stage.stageHeight >> 1;
		}

		public override function dispose():void {
			super.dispose();
		}
	}
}

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-10] 터치 이벤트와 Touch 클래스

Programming/Framework 2012.01.10 14:39
Starling은 손가락의 조작이나 마우스 조작 모두 동일한 이벤트( TouchEvent )로 취급한다. Flash Player의 마우스 이벤트와는 달리 이벤트 종류는 TouchEvent.TOUCH 하나 뿐이다. 따라서 클릭 및 이동 등의 조작 상태는 이벤트에 포함되어 있는 Touch 객체 속성에서 판단하게 되어 있다.

Starling의 모든 표시 객체(Sprite, Stage, Quad, …)는 TouchEvent을 처리할 수 있다. 단, Button 클래스는 내부적으로 터치 이벤트를 triggered 이벤트로 변환하고 있기 때문에 자신의 리스너를 추가하는 것은 주의가 필요하다. 또한 표시 객체 자신이나 부모 개체 touchable 속성이 false의 경우는 TouchEvent를 받을 수 없다.

아무튼 Starling에서 터치 작업을 처리하려면 우선 표시 객체에 TouchEvent.TOUCH 이벤트 리스너를 추가해야 한다. 아래는 샘플이다.

import starling.events.TouchEvent;
myImage.addEventListener(TouchEvent.TOUCH,onTouch);

private function onTouch(e:TouchEvent):void {
trace(e.target);
}

Starling의 이벤트는 표시 목록에 버블링하기 위해 아래의 계층 객체에서 이벤트도 검색할 수 있다. (참고:사양에서는 계층의 위에서 아래로 전파하지만 지금의 구현에서는 Stage에서 이벤트를 받을 수도 있는 것 같다.)

샘플에서 사용하는 target 속​​성과 currentTarget 속​​성 사용법은 Flash Player 표준 이벤트와 동일하다. 기타 TouchEvent에는 다음과 같은 속성도 있다. 모든 읽기 전용이다.

ctrlKey : 이벤트가 발생할 때 Ctrl 키가 눌리고 있었는지 나타내는
shiftKey : 이벤트 발생시 Shift 키가 눌리고 있었는지 나타내는
timestamp : 터치가 시작된 이후의 시간(초)
touches : 사용 가능한 Touch 객체의 벡터

마지막 touches은 이벤트와 관련된 하나 이상의 Touch 객체의 벡터다. Touch 객체는 이벤트 발생시킨 손가락이나 마우스 조작 정보를 보유하고 있다.


Touch 객체 가져오기
TouchEvent에는 Touch 객체를 취득하기 위한 메소드가 포함되어 있다. 멀티 터치를 사용하지 않는 경우 getTouch()메소드에서 Touch 객체를 얻을 수 있다. (멀티 터치의 경우는 후술)

private function onTouch(e:TouchEvent):void {
var touch:Touch = e.getTouch(stage);
if (touch) {
  trace(e.target, touch.target);
}
}

getTouch() 메소드의 첫 번째 인수는 검색할 Touch 객체를 좁히려는 조건이다. 작업의 대상이 된 표시 객체가 인수로 지정된 오브젝트와 일치하는 또는 인수 계층 아래에​​ 포함된 경우, getTouch()는 값을 반환한다. 실제 작업의 대상은 Touch 객체 취득 후에 target 속​​성에서 볼 수 있다. (작업의 대상과 이벤트의 대상은 반드시 일치하지 않는다는 것에 유의)

Touch객체는 target 이외에도 작업을 식별하는 특성이 몇 가지가 더 있다.

target : 터치 조작의 대상이 된 표시 객체
id : 터치를 식별하는 숫자
timestamp : 터치 조작 시간 (터치 시작으로부터 초)


TouchPhase
위에서 이야기한 것처럼, Touch 객체는 작업 상태를 나타내는 속성이 있다. 속성 이름은 phase다.

phase : 현재 터치 상황

phase 속성에 설정 가능한 값은 TouchPhases 클래스에 정의되어 있다. 자주 사용되는 값은 다음 세 가지다.

BEGAN : 손가락이 화면에 접한 또는 마우스 버튼이 눌러진
MOVED : 손가락이 화면을 이동하거나 마우스 버튼이 눌러진 상태 이동
ENDED : 손가락이 화면에서 떨어진 또는 마우스 버튼에서 떨어진

BEGAN이 한 번, MOVED가 0 이상 반복되고, ENDED가 한 번 발생하는 것이 기본적인 흐름이다.다음과 같은 상태도 있다.

STATIONARY : 손가락 또는 마우스가 이전 프레임에서 이동

일반적으로 이 상태에서는 이벤트가 발생되지 않아야하지만, 멀티 터치를 취급하는 경우에는 STATIONARY가 포함될 수 있다.마지막으로 마우스 이용 때만 나타나는 상태다.

HOVER : 마우스 버튼이 눌러지지 않은 상태에서 표시 객체에 포인터가 있을 때

손가락으로 (지금까지) 접하지 않고 포인터를 이동시킬 수 없기 때문에 OVER는 있어도 HOVER는 없다는 것이다.


포인터 위치 가져오기
Touch 객체는 스테이지의 현재 위치와 이전 위치 속성을 가지고 있다. 다음 네 가지다. 형태는 모두 Number.

globalX : 스테이지 좌표를 기준으로 한 현재의 손가락 (포인터)의 x 좌표
globalY : 스테이지 좌표를 기준으로 한 현재의 손가락 (포인터)의 y 좌표
previousGlobalX : 스테이지 좌표를 기준으로 이전의 손가락 (포인터)의 x 좌표
previousGlobalY : 스테이지 좌표를 기준으로 이전의 손가락 (포인터)의 y 좌표

그러나 대부분의 경우 다른 좌표계에서의 위치를​​ 계산하게 될 것이다. 그래서, Touch 클래스에는 위의 속성 값을 특정 객체를 기준으로 한 좌표로 변환하는 메소드를 제공 한다.

public function getLocation(space:DisplayObject):Point
public function getPreviousLocation(space:DisplayObject):Point

이 두 메소드는 인수 객체의 좌표를 기준으로 한 현재의 위치 또는 마지막 위치를 반환한다.아래는 Touch 객체의 위치 정보를 사용하는 샘플이다.

var touch:Touch = event.getTouch(this, TouchPhase.MOVED);
if (touch) {
// 부모 개체를 기준으로 이동 거리를 계산하는
var currentPos:Point = touch.getLocation(parent);
var previousPos:Point = touch.getPreviousLocation(parent);
var delta:Point = currentPos.subtract(previousPos);

// 객체의 위치를​​ 변경
x += delta.x;
y += delta.y;
}

getTouch() 메소드의 두 번째 인수는 원하는 상태를 지정할 수 있다. 위의 예제에서는 손가락 이동 정보를 취급하기 위하여 TouchPhase.MOVED를 지정하고 있다.


더블 클릭의 사용 방법
Touch 객체를 통해 더블 클릭을 감지할 수 있도록 tapCount 속성이 있다. 이 속성을 사용하여 더블 클릭에 해당하는 코드를 작성한 것이 아래의 예제다.

touch = event.getTouch(this, TouchPhase.ENDED);
if (touch & & touch.tapCount == 2) parent.addChild (this);

작동 상태가 ENDED의 Touch 객체가 존재하며 탭 횟수가 2 회인 경우를 검색하고 있다.멀티 터치Starling은 멀티 터치도 지원한다. 멀티 터치를 처리하려면 Starling 객체에 다음과 같이 설정한다.

mStarling.simulateMultitouch = true;

이 상태에서 실제로 멀티 터치를 하면 터치 때마다 Touch 객체가 만들어진다. 그리고 TouchEvent에 전달된다. TouchEvent에서 여러 Touch 개체를 가져오려면 getTouches() 메소드를 사용한다. 아래는 그 예제다.

var touches:Vector.<Touch>=touchEvent.getTouches(this); 


반환 값은 Touch 벡터다. getTouch()뿐만 아니라 두 번째 인수로 원하는 상태를 지정할 수 있다.참고로 Ctrl 키를 사용하여 데스크탑 환경에서도 멀티 터치를 시뮬레이션할 수 있게 되어 있다. 물론 실제 터치 디바이스에서는 손가락으로 조작하면 된다.

원본 : http://cuaoar.jp/2012/01/starling-touch.html



package {
	import starling.events.Event;
	import starling.events.Touch;
	import starling.events.TouchEvent;
	import starling.events.TouchPhase;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.display.Image;
	import starling.textures.Texture;
	import starling.display.DisplayObject;
	import starling.animation.Tween;
	import starling.animation.Transitions;
	import starling.utils.deg2rad;
	import flash.display.Bitmap;
	import flash.geom.Point;


	public class Demo extends Sprite {

		[Embed(source="icon128.png")]
		private var MyBitmap:Class;
		
		private var myButton:Image;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}


		private function onAddedToStage(e:Event):void {
			var myBitmap:Bitmap = new MyBitmap() as Bitmap;
			var myTexture:Texture = Texture.fromBitmap(myBitmap);
			
			myButton = new Image(myTexture);
			myButton.addEventListener(TouchEvent.TOUCH, onTouchHandler);
			
			myButton.pivotX = myButton.width >> 1;
			myButton.pivotY = myButton.height >> 1;
			addChild(myButton);
			setAlign(myButton);

		}
		
		private function onTouchHandler(e:TouchEvent):void{
			var touch:Touch = e.getTouch(myButton);
			if(touch){
				switch(touch.phase){
					case TouchPhase.BEGAN : myButton.setVertexColor(0, 0xFF6600);
											myButton.setVertexColor(1, 0xFF6600);
											myButton.setVertexColor(2, 0xFF6600);
											myButton.setVertexColor(3, 0xFF6600);
					break;
					case TouchPhase.MOVED : 
					break;
					case TouchPhase.ENDED : myButton.setVertexColor(0, 0xFFFFFF);
											myButton.setVertexColor(1, 0xFFFFFF);
											myButton.setVertexColor(2, 0xFFFFFF);
											myButton.setVertexColor(3, 0xFFFFFF);
				}
			}
			
			
			/*
			touch = e.getTouch(myButton, TouchPhase.MOVED);   
			if (touch) {        
					// 부모 개체를 기준으로 이동 거리를 계산하는      
					 var currentPos:Point = touch.getLocation(parent);      
					 var previousPos:Point = touch.getPreviousLocation(parent);     
					 var delta:Point = currentPos.subtract(previousPos);        
			 
					// 객체의 위치를​​ 변경     
					 myButton.x +=  delta.x;     
					 myButton.y +=  delta.y; 
			}
			*/
			
			touch = e.getTouch(this, TouchPhase.ENDED); 
			if (touch && touch.tapCount == 2){
				rotationToTween(0.6, 90, Transitions.EASE_OUT_BOUNCE);
			}
			
			var touches:Vector.<Touch> = e.getTouches(stage); 
			if(touches.length == 2){
				var firstPos:Point = touches[0].getLocation(parent);      
				var secondPos:Point = touches[1].getLocation(parent);  
				var distance:Number = Point.distance(firstPos, secondPos);

				scaleToTween(0.2, distance*0.01, Transitions.EASE_OUT);
			}else{
				touch = e.getTouch(this, TouchPhase.MOVED); 
				if (touch){
					moveToTween(0.14, touch.globalX, touch.globalY, Transitions.EASE_OUT);
				}
			}
			
		}
		
		private function rotationToTween(inTime:Number, inRot:int, inEase:String):void{
			var tween:Tween = new Tween(myButton, inTime, inEase);
			tween.animate("rotation", myButton.rotation+deg2rad(inRot));
			Starling.juggler.add(tween);
		}
		
		private function moveToTween(inTime:Number, inX:int, inY:int, inEase:String):void{
			var tween:Tween = new Tween(myButton, inTime, inEase);
			tween.moveTo(inX, inY);
			Starling.juggler.add(tween);
		}
		
		private function scaleToTween(inTime:Number, inScale:Number, inEase:String):void{
			var tween:Tween = new Tween(myButton, inTime, inEase);
			tween.scaleTo(inScale);
			Starling.juggler.add(tween);
		}

		private function setAlign(inTarget:DisplayObject):void {
			inTarget.x = stage.stageWidth >> 1;
			inTarget.y = stage.stageHeight >> 1;
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-09] Starling의 Button 클래스 사용

Programming/Framework 2012.01.09 11:22
Starling은 버튼을 쉽게 구현할 수 있도록 Button 클래스가 포함되어 있다. Button 클래스는 DisplayObjectContainer 클래스의 서브 클래스다. 따라서 모든 표시 객체를 자식으로 가질 수 있지만 보통은 스킨 이미지와 제목을 표시한다. 그리고 버튼 클릭을 알리는 기능이 있다.

아래가 Button의 생성자다. 첫 번째 인수는 버튼에 대한 스킨이 되는 텍스처이고 옵션으로, 두 번째 인수에 제목을, 3번 째 인수에는 누를 때 표시할 텍스처를 지정할 수 있다.
Button(upState:Texture, text:String = "", downState:Texture=null)

Flash Professional에서 만든 버튼과 달리, "오버" 스킨은 지정할 수 없다. 아마도 이것은 터치 장치의 이용을 전제로 하고 있기 때문이라고 생각된다.

버튼을 클릭하면 (또는 탭하면) triggered라는 이벤트가 발생한다. 클릭시 실행하고 싶은 처리는 triggered 이벤트 리스너 함수에 작성한다. 아래는 그 예제다. 텍스처 포함 관련 부분은 여러번 나왔기 때문에 생략한다.
import starling.display.Button;
	import starling.events.Event;

	private var myButton:Button;

	private function onAddedToStage(e:Event):void {
		var myBitmap:Bitmap = new MyBitmap  ;
		var myTexture:Texture = Texture.fromBitmap(myBitmap);

		// 텍스처를 지정하여 단추의 객체를 생성
		myButton = new Button(myTexture);

		// triggered 이벤트 수신기를 추가
		myButton.addEventListener(Event.TRIGgered, onTriggered);
	}

	private function onTriggered(e:Event):void {
		// 이벤트를 발생 개체를 가져
		trace(e.target);
	}

Staring 이벤트는 Flash Player의 이벤트처럼 버블링(표시 목록 계층 간에 전파, 자식에서 부모 방향으로만 지원) 하는 여러 버튼을 사용할 때는 triggered 이벤트를 부모 객체에서 처리하는 것도 가능하다.


스킨 지정
Starling 버튼은 터치하면 (또는 버튼에 마우스가 눌러진 상태가 되면), 버튼의 표시 크기가 조금 작아진다. 손가락을 떼면 원래 크기로 돌아간다. 이 것은 버튼에 표준 텍스처 하나만 지정된 경우의 동작이다. 버튼을 눌린 상태에 해당하는 텍스처를 지정하면 텍스처가 작아지는 대신 스킨이 바뀐다.

이 두 텍스처는 생성자에 지정할 수 있지만 나중에 속성에서도 설정할 수 있다. 아래가 속성 목록이다.

upState : 버튼이 터치되지 않은 상태로 표시되는 텍스처
downState : 버튼이 터치되는 상태로 표시되는 텍스처
scaleWhenDown : 터치되어있는 상태 텍스처의 표시 비율

upState과 downState가 각 상태로 표시하는 텍스처를 설정하는 속성이다. (upState는 생성자에서 지정 필수) 성능의 관점에서 어느 텍스처도 같은 텍스처 아틀라스에 있는 것이 바람직할 것이다. 마지막 scaleWhenDown는 0에서 1 사이의 숫자를 지정한다. 이 값은 downState = null의 경우에만 사용할 수 있다.

위에서도 썼지만, 단순한 장식 추가가 필요한 경우, 2 개의 텍스처 이외에도 항시 표시 객체를 추가할 수 있다. 만약 동작을 변경하려면, 커스텀 버튼 클래스를 만드는 편이 빠를지도 모른다.


텍스트 표시
Starling의 버튼은 텍스처로 지정한 이미지에 텍스트를 표시할 수 있다. 텍스트는 생성자에서 지정하거나 인스턴스 생성 후, text 속성에 설정한다. textBounds 속성을 사용하여 텍스트의 위치를​​ 지정할 수도 있다.

text : 버튼에 표시되는 텍스트
textBounds : 텍스트 표시 영역을 Rectangle로 지정

텍스트 표시에 사용할 글꼴의 모양을 설정하는 속성도 있다. 거의 TextField의 경우와 동일하다.

fontName : 텍스트 표시에 사용할 글꼴 이름
fontSize : 텍스트 표시에 사용할 글꼴의 크기
fontColor : 글꼴 색상
fontBold : 글꼴을 굵게 표시 여부를 지정

포함된 글꼴과 비트맵 글꼴을 사용할 수 있다.


버튼 비활성화
버튼을 사용할 수 없는 상태라면 enabled 속성의 값을 false로 적용한다.

enabled : 버튼을 사용할 수 있는지 여부를 지정
alphaWhenDisabled : 버튼이 비활성화 때 알파 값

기본적으로 단추를 비활성화하면 버튼의 표시가 반투명하게 된다. 그 때 사용되는 알파 값은 alphaWhenDisabled에 설정된 값이다.


원본 : http://cuaoar.jp/2012/01/starling-button.html




package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.display.Button;
	import starling.textures.Texture;
	import starling.display.DisplayObject;
	import flash.geom.Rectangle;
	import flash.display.Bitmap;

	public class Demo extends Sprite {

		[Embed(source="icon128.png")]
		private var MyBitmap:Class;
		
		private var myButton:Button;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}


		private function onAddedToStage(e:Event):void {
			var myBitmap:Bitmap = new MyBitmap() as Bitmap;
			var myTexture:Texture = Texture.fromBitmap(myBitmap);

			// 텍스처를 지정하여 단추의 객체를 생성
			myButton = new Button(myTexture);
			
			// 터치 상태일 때, 텍스처의 표시 비율
			myButton.scaleWhenDown = 0.95;
			
			myButton.fontColor = 0xFFFFFF;
			myButton.fontBold = true;
			myButton.fontSize = 24;
			myButton.text = "BUTTON";
			myButton.textBounds = new Rectangle(myButton.width-60>>1, 85, 60, 30);
			
			// 
			addChild(myButton);
			setAlign(myButton);
			
			// triggered 이벤트 수신기를 추가
			myButton.addEventListener(Event.TRIGGERED, onTriggered);
		}

		private function onTriggered(e:Event):void {
			// 이벤트를 발생 개체를 가져
			trace(e.target);
			myButton.fontColor = Math.random()*0xFFFFFF;
		}

		private function setAlign(inTarget:DisplayObject):void {
			inTarget.x = stage.stageWidth - inTarget.width >> 1;
			inTarget.y = stage.stageHeight - inTarget.height >> 1;
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-08] Starling에서 TextFiled의 사용

Programming/Framework 2012.01.09 10:27
Starling에서는 문자를 표시하기 위해 TextField 라는 클래스가 제공하고 있다. 글꼴 종류, 크기, 색상, 위치 등을 지정하여 텍스트를 화면에 표시할 수 있다.

그렇다고해도, GPU에서 직접 글꼴을 취급할 수는 없다. 사실, 뒤에서 Flash Player의 TextFiled를 사용하여 CPU에서 그린 것을 비트맵화 하여 GPU에 업로드하는 형식으로 사용한다. 즉, Starling의 TextField가 제공하는 것은 주어진 텍스트 및 글꼴에서 동적으로 텍스처를 생성하는 기능인 것이다. 따라서 커서가 표시되는 입력 텍스트와 같이 문자를 선택하는 등의 작업은 할 수 없다.(비트맵이므로)

또한, 동적으로 생성할 이유가 없는 텍스트는 TextField를 사용하는 것보다는 사전에 텍스처로 준비하여 사용하는 것이 효율적이다.


TextField 인스턴스 생성
아래는 TextField의 ​​생성자 정의를 보여준다. 표시 영역의 너비와 높이, 표시할 텍스트의 3개의 인수가 필요하다.
TextField (width:int, height:int, text:String, fontName:String = "Verdana", fontSize:Number=12,
  color:uint=0x0, bold:Boolean=false);
//

어떤 값을 나중에 변경할 수 있지만 효율 측면에서 너비와 높이를 바꾸지 않는 것이 좋다. 아래는 Hello World를 표시하는 예제다. 글꼴 크기와 색상을 인스턴스 생성 후에 지정하고 있다.
import starling.text.TextField;

	private var myTextField:TextField;

	private function onAddedToStage(e:Event):void {
		// TextField 인스턴스를 생성
		myTextField = new TextField(160,80,"Hello World");

		// TextField 인스턴스에 속성을 지정
		myTextField.fontSize = 16;
		myTextField.color = 0x993333;
		myTextField.border = true;

		addChild(myTextField);
	}

border 속성 값을 true로 하면 TextField 영역을 눈으로 확인할 수 있기 때문에 개발시 유용하다. Starling의 TextField에는 지정된 너비와 높이에서 텍스트를 초과하지 않게 글꼴 크기를 자동 조정하는 편리한 기능이 있다.
myTextField.autoScale = true;

TextField 객체의 autoScale 속성을 true로 설정하면 전체 텍스트 표시가 글꼴 크기 지정보다 우선한다. Starling 유용한 클래스 Starling은 색상을 지정하는 Color라는 유용한 클래스가 있다. TextField의 color 속성의 지정에 사용할 수 있다.
import starling.utils.Color;
 
myTextField.color = Color.AQUA;

또한 텍스트 배치 값을 가진 클래스도 있다. 세로 배치는 HAlign, 가로 배치는 VAligin 다.
import starling.utils.HAlign ;
import starling.utils.VAlign ;
 
// TextField의 ​​왼쪽을 기준으로 문자를 배치
myTextField.hAlign = HAlign.LEFT;
myTextField.vAlign = VAlign.TOP;

HAlign에 정의되어 있는 값은 LEFT, CENTER, RIGHT 이렇게 3 종류이고 VAlign에 정의되어 있는 값은, TOP, CENTER, BOTTOM 이렇게 3 종류다. 글꼴 포함 Starling의 TextField에서 포함된 TrueType 글꼴 이용이 가능하다. 글꼴을 포함하면 표시 결과가 실행 환경에 의존하지 않기 때문에 권장한다. 다음은 글꼴 포함된 샘플이다. Ubuntu라는 글꼴을 포함하고 있다.
[Embed(source="Ubuntu-R.ttf",embedAsCFF="false", fontFamily="Ubuntu")]
	private static const UbuntuRegular:Class;

	private function onAddedToStage(e:Event):void {
		myTextField = new TextField(160,80,"Hello World"," Ubuntu ",16);
		myTextField.color = 0x993333;
		addChild(myTextField);
	}

Embed 지정 시에는 embedAsCFF 계정은 필수다. 비트맵 글꼴 사용 Starling의 TextField에서 비트맵 글꼴을 사용할 수 있다. 비트맵 글꼴은 문자를 비트맵으로 내보낸 것이다. 개별 문자 파일의 위치 정보 등은 별도 XML 형식으로 작성한다. XML 파일은 다음과 같은 형식으로되어 있다. 기본 정보, 문자 코드와 텍스처 관련, 그리고 옵션으로 커닝 정보다.

  
  
  
    
  
  
    
    
  
   
    
  


이러한 비트맵 글꼴 정보는 BitmapFont 클래스에 로드한다. 다음은 그 절차다. 먼저 각각의 파일을 포함한다. 여기는 텍스처 아틀라스와 동일한 절차다.
[Embed (source="desyrel.png")]
private static const DesyrelTexture:Class;
 
[Embed (source = "desyrel.fnt"mimeType = "application / octet - stream")]
private static const DesyrelXml:Class;
다음 BitmapFont 객체를 생성한다.
import starling.text.BitmapFont;
	import starling.textures.Texture;

	private function onAddedToStage(e:Event):void {
		
		// 비트맵 글꼴로드
		var texture:Texture = Texture.fromBitmap(new DesyrelTexture);
		
		// 문자 정보 가져오기
		var xml:XML = XML(new DesyrelXml);

		// BitmapFont 인스턴스 생성
		var myBitmapFont:BitmapFont = new BitmapFont(texture,xml);

		//... 앞으로는 아래에 계속
	}

생성한 BitmapFont객체는 사용하기 전에 registerBitmapFont() 메소드를 통해서 TextField 클래스에 등록한다. (registerBitmapFont()는 정적 메서드다) 그 후, TextField의 ​​fontName 속성에 비트맵 글꼴의 이름을 설정하면 표시된다. 글꼴 이름은 BitmapFont 객체의 name 속성에서 가져올 수 있다.
import starling.text.TextField;
	private function onAddedToStage(e:Event):void {
		//... 위에서 계속

		// TextField 클래스 비트맵 글꼴을 등록
		TextField.registerBitmapFont(myBitmapFont);

		// TextField 인스턴스를 생성;
		myTextField = new TextField(300,150,"Hello World");

		// 비트맵 폰트의 폰트 이름을 설정
		myTextField.fontName = myBitmapFont.name;

		addChild(myTextField);
	}

필요하지 않은 비트맵 글꼴은 unregisterBitmapFont() 메소드로 등록을 삭제할 수 있다. 인수에는 삭제할 글꼴 이름을 지정한다. 이 때 삭제된 BitmapFont 대해 dispose()가 실행된다. 이것을 피하고 싶은 경우에는 두 번째 인수에 false를 지정한다.
TextField.unregisterBitmapFont (myBitmapFont.name, false );

비트맵 글꼴 텍스처는 독립적인 파일이 아닌 일반 텍스처 아틀라스와 함께 파일에 추가하는 형태로 사용할 수 있다. 이는 텍스처 전환을 줄일 수 있다. 비트맵 글꼴 표시 설정 비트맵 글꼴을 제작시의 크기로 표시하고 싶을 때는 TextField 객체의 fontSize 속성 BitmapFont.NATIVE_SIZE를 지정한다.
// 비트맵 글꼴의 원래 크기로 보기
myTextField.fontSize = BitmapFont.NATIVE_SIZE ;

또한 비트맵 글꼴을 제작시 모양으로 표시하고 싶을 때는 TextField 객체의 fontSize 속성 Color.WHITE을 지정한다.
// 비트맵 글꼴 텍스처 그대로보기
myTextField.color = Color.WHITE ;

color 속성의 기본 값은 아무 것도 지정하지 않으면 검은색 텍스트가 렌더링된다. 마지막으로 비트맵 글꼴의 제작에는 다음과 같은 것을 권장하고 있다.

Windows : Bitmap Font Generator (Angel Code : 무료)
Mac OS : Glyph Designer (71squared : 유료)


원본 : http://cuaoar.jp/2011/12/starling-textfiled.html




package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.text.TextField;

	public class Demo extends Sprite {

		private var _myTextField:TextField;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {

			// TextField 인스턴스를 생성

			var len:int = 50;
			for (var i:int = 0; i<len; i++) {
				var myTextField = new TextField(160,80,"Hello World 한글" + i);

				// TextField 인스턴스에 속성을 지정
				myTextField.fontSize = 16;
				myTextField.color = Math.random()*0xFF0000+i;
				myTextField.border = true;

				addChild(myTextField);

				myTextField.x = stage.stageWidth >> 1;
				myTextField.y = stage.stageHeight >> 1;

				myTextField.alpha =  0.20;
				myTextField.rotation = i;
			}

			_myTextField = new TextField(160,80,"Hello World");
			_myTextField.fontSize = 24;
			_myTextField.color = 0xFFFFFF;
			//_myTextField.border = true;
			
			addChild(_myTextField);
			setAlign(_myTextField);

		}

		private function setAlign(inTarget:TextField):void {
			inTarget.x = stage.stageWidth - inTarget.width >> 1;
			inTarget.y = stage.stageHeight - inTarget.height >> 1;
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}

 
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-05] Tween 클래스를 이용한 애니메이션

Programming/Framework 2012.01.08 02:57
이전 포스트에서 EnterFrame 이벤트를 사용하여 애니메이션을 구현하는 방법을 소개했다. 이번에는 Tween 클래스를 사용하는 방법이다. Tween을 사용한 경우의 특징 중 하나는 애니메이션의 시간을 초 단위로 지정하는 것이다. Tween은 지정된 시간이 지나는 과정에서 표시 객체의 속성 값, 예를 들어 x좌표를 최종 값에 도달하기까지 순차적으로 변화시킨다.

코드는 다음과 같다. 먼저 Tween 생성자에서 대상 객체와 시간을 지정하여 다음 animate() 메소드를 사용하여 변화하는 속성의 이름과 마지막 값을 설정한다. 여러 특성을 변화시키는 경우 animate()를 계속해서 부르면 된다. 

// myObject을 2 초 걸쳐 가로 50px, 세로 80px 이동하는 애니메이션 지정
var myTween:Tween = New Tween(myObject, 2.0); 
myTween.animate( "x", myObject.x + 50); 
myTween.animate( "y", myObject.y + 80); 


아래 예제는 onAddedToStage() 리스너 함수에 적용한 것이다. 사각형을 4초에 걸쳐 (0,0)에서 (220, 380) 좌표로 이동시키는 것이다.

package {
	import starling.animation.Tween;
	import starling.core.Starling;
	import starling.display.Quad;
	import starling.events.Event;

	private function onAddedToStage(e:Event):void {
		myQuad = new Quad(100,100);
		myQuad.color = 0x00FF00;

		// Tween 객체의 생성
		var myTween:Tween = new Tween(myQuad,4.0);

		// 변화시키는 속성 지정
		myTween.moveTo(220, 380);

		// Juggler에 Tween 객체를 추가하려면
		Starling.juggler.add(myTween);
	}
}


이 샘플에서는 animate() 메소드 대신 moveTo() 메소드를 사용했다. moveTo()는 x좌표와 y좌표를 동시에 이동 시킬 때 유용한 방법이다. 그 외에도 비슷한 방법으로 비율을 바꾸는 scaleTo()와 alpha를 바꾸는 fadeTo() 등이 제공되고 있다. 각도를 바꾸는 방법은 아직 없기 때문에 회전할 때는 animate()를 사용한다.

import starling.utils.deg2rad;
 
var myTween:Tween = new Tween (object, 2.0);
myTween.scaleTo(2);
myTween.fadeTo(0);
myTween.animate( "rotation", deg2rad (45));
Starling.juggler.add(myTween);

위 예제에서 사용한 deg2rad()는 각도를 라디안으로 변환하는 함수다. Starling 프레임워크에서 지원. Juggler 클래스 위 예제에서 살펴보면 Tween 인스턴스에 필요한 설정을 한 후, Tween 인스턴스를 Starling의 juggler이라는 속성에 추가했다. 이는 애니메이션의 시작을 알리는 신호라고 보면 된다. Juggler은 객체의 "시간을 진행하는" 클래스다.
그러나 IAnimatable이라는 인터페이스를 상속하는 객체에만 적용이 된다. Tween은 IAnimatable을 상속하고 있다. Juggler는 객체를 전달하면 해당 객체의 시간을 진행한다. 그리고 객체에 대해 지정된 시간이 지나면 객체에 대한 참조를 자동으로 해제한다. 그런데 Juggler는 delayCall()이라는 메소드가 있다. 이 것은 임의의 함수를 지정한 시간이 지나면 호출하도록 Juggler에게 지시하는 것이다. 호출 함수에 인수를 전달할 수도 있다.
아래는 1초 후에 myFunc()함수를 호출하면서 "Hello"라는 인수를 전달하는 예제다.

Starling.juggler.delayCall (myFunc, 1.0, "Hello");
 
private function myFunc (message:String):void{
  trace (message);
}

애니메이션의 시간과 함수의 실행 시점을 같은 Juggler을 통해서 관리함으로써 양자를 완벽하게 동기화시킬 수 있어 편리하다. Juggler 객체는 Starling 클래스를 제공하기 위해 일반적으로 이 것을 사용하여 애니메이션을 시작하면 충분하다. 단, 애니메이션을 개별적으로 제어하고 싶은 경우에는 Juggler 객체를 생성하는 것이 유용할 수 있겠다.
Juggler 객체를 직접 관리하는 경우 EnterFrame 이벤트에 대한 advanceTime() 메소드를 호출하도록 한다. 또한 dispose()에서 리소스 해제 처리가 필요할지도 모른다. easing 함수 지정 Tween에는 여분의 함수를 지정할 수 있다. easing 함수의 종류는 생성자의 3 번째 인수로 전달한다. 기본 값은 linear다. 생성자에서 설정한 easing 함수는 애니메이션이 시작한 이후에는 변경할 수 없다. Tween 객체의 transition 속성에서 값을 참조만 가능하다.

import starling.animation.Transitions;
var myTween:Tween = new Tween (myQuad, 4, Transitions.EASE_OUT_BOUNCE );
위 예제에서는 easing 함수 easeOutBounce를 지정하고 있다. 여기에 지정 가능한 값은 Transitions 플래스에 정의되어 있다.
아래는 Starling 저자의 사이트에 게재되어 있는 easing 함수의 동작 그래프다. 참고.



섬세한 조정은 허용하지 않는다. 이 점은 Edge 및 Flex와 같다. Tween 진행 상태 알림 Tween은 애니메이션의 시작, 진행, 종료를 알리는 함수를 설정할 수 있다. AS2의 이벤트 핸들러와 비슷하게 사용한다. 구체적인 함수 이름은 각각 onStart(), onUpdate(), onComplete()다. onStart()와 onComplete()는 한 번씩, onUpdate()는 업데이트 프레임 수만큼 실행한다. 아래는 3개의 함수를 설정한 예다.

private function onAddedToStage(e:Event):void {
		myQuad = new Quad(100,100);
		myQuad.color = 0x00FF00;

		var myTween:Tween = new Tween(myQuad,4,Transitions.EASE_OUT_BOUNCE);
		myTween.moveTo(220, 380);
		Starling.juggler.add(myTween);

		myTween.onStart = onStart;
		myTween.onUpdate = onProgress;
		myTween.onComplete = onComplete;

		addChild(myQuad);
	}

	private function onStart():void {
		trace("트윈이 시작되었습니다");
	}
	private function onProgress():void {
		trace("트윈 실행 중");
	}
	private function onComplete():void {
		trace("트윈이 완료되었습니다");
	}

애니메이션의 전처리와 후처리를 실시하고 싶은 경우에는 도움이 될 것이다. 다음에는 Starling의 텍스처의 사용법을 소개한다.

원문 : http://cuaoar.jp/2011/12/tween-starling.html



package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Quad;
	import starling.utils.deg2rad;
	import starling.display.Sprite;
	import starling.animation.Tween;
	import starling.animation.Transitions;

	public class Demo extends Sprite {
		private var myQuad:Quad;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {

			myQuad = new Quad(100,100);
			myQuad.setVertexColor(0, 0xFFFF00);
			myQuad.setVertexColor(1, 0xFF0000);
			myQuad.setVertexColor(2, 0x00FF00);
			myQuad.setVertexColor(3, 0x0000FF);
			
			myQuad.pivotX = myQuad.width >> 1;
			myQuad.pivotY = myQuad.height >> 1;

			// Tween 객체의 생성
			var myTween:Tween = new Tween(myQuad, 2.0, Transitions.EASE_IN_OUT);

			// 변화시키는 속성 지정
			myTween.moveTo(stage.stageWidth >> 1, stage.stageHeight >> 1);

			// Juggler에 Tween 객체를 추가하려면
			Starling.juggler.add(myTween);
			Starling.juggler.delayCall(myFunc, 2.0);


			addChild(myQuad);

		}	
		
		private function myFunc():void{
			var myTween:Tween = new Tween(myQuad,4.0, Transitions.EASE_OUT_ELASTIC);
			myTween.animate( "rotation", myQuad.rotation+deg2rad(90));
			myTween.onStart = onStartHandler;
			myTween.onUpdate = onUpdateHandler;
			myTween.onComplete = onCompleteHandler;
			Starling.juggler.add(myTween);
		}

		private function onStartHandler():void{
			var myTween:Tween = new Tween(myQuad,4.0, Transitions.EASE_OUT_ELASTIC);
			if(myQuad.scaleX == 2.0){
				myTween.scaleTo(1);
			}else{
				myTween.scaleTo(2);
			}
			
			Starling.juggler.add(myTween);
		}
		
		private function onUpdateHandler():void{
			trace("트윈 실행 중");
		}
		
		private function onCompleteHandler():void{
			myFunc();
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-04] EnterFrame 이벤트를 이용한 애니메이션

Programming/Framework 2012.01.08 00:12
이번에는 이전 포스트에서 소개한 코드를 기반으로 사각형을 이동시켜본다. EnterFrame 이벤트를 사용한다. Starling의 표기 객체는 Flash Player 표시 객체와 같게, EnterFrame 이벤트를 지원한다. 따라서 EnterFrame 이벤트 수신기를 추가하면 새로운 프레임을 볼 때마다 리스너 함수가 실행된다. Starling의 이벤트 방식과 리스너 등록 방법도 FlashPlayer 표시 목록과 거의 동일하다.

이번에 소개하는 방법은 기존의 Flash 컨텐츠를 재사용하기 쉬운 방법이다. 이번 예제에서는 그라데이션으로 사각형에 색을 채우고 회전시켜 본다. Quad 클래스는 정점마다 색을 지정하는 메소드가 있어서 편리하다. 메소드는 setVertexColor() 이다. setVertexColor()의 첫 번째 인자는 정점의 번호다. 번호는 0부터 시작하여 왼쪽, 오른쪽 위 및 왼쪽 아래 오른쪽 아래 정점이다. 두 번째 인수는 색상을 지정한다.

// myQuad.color = 0xABCDEF; 대신 다음을 작성 
myQuad.setVertexColor (0, 0x000000); 
myQuad.setVertexColor (1, 0xFF0000); 
myQuad.setVertexColor (2, 0x00FF00); 
myQuad.setVertexColor (3, 0x0000FF); 


이렇게 지정하면 나머지는 자동으로 각 정점 사이의 픽셀의 색이 보완되기 때문에 사각형에 그라데이션이 입혀진다.


EnterFrame 이벤트 리스너 사용

본론으로 돌아가서 EnterFrame 이벤트 리스너를 추가하는 방법이다. 사용하는 Event 클래스가 Starling 프레이워크에 포함된 클래스라는 점에 주의가 필요하다. 그러나 지금까지 AS3의 이벤트 처리 코드를 구현해 봤다면 별 어려움 없이 사용할 수 있을 것이다. (리스너 함수 삭제 타이밍이 약간 다르다 : 아래)
아래는 EnterFrame 이벤트를 사용하여 프레임마다 사각형을 회전시키는 샘플이다. 이전 예제의 onAddedStage()를 수정한 것이다.
private function onAddedToStage(e:Event):void {
// Quad의 인스턴스를 생성
myQuad = new Quad(200,200);
 
// 각 정점의 색상을 지정 myQuad.setVertexColor(0,0x000000);
myQuad.setVertexColor(1,0xFF0000);
myQuad.setVertexColor(2,0x00FF00);
myQuad.setVertexColor(3,0x0000FF);

// Quad의 인스턴스를 중앙에 표시;
myQuad.x = stage.stageWidth - myQuad.width >> 1;
myQuad.y = stage.stageHeight - myQuad.height >> 1;

// Sprite에 Quad 인스턴스를 추가
addChild(myQuad);

// EnterFrame 이벤트 리스너 추가
myQuad.addEventListener( Event.ENTER_FRAME , onEnterFrame);
}

private function onEnterFrame(e:Event):void {
// Quad의 인스턴스를 회전
if (e.currentTarget as Quad) {
   myQuad.rotation += .01; }
}

프레임마다 rotation 값을 0.01씩 증가시키고 있기 때문에 위 코드를 실행하면 사각형이 시계 방향으로 회전한다. 이 때 회전의 중심점은 사각형의 왼쪽 상단 모서리가 된다. Starling 표시 객체에는 기준점을 지정하기 위한 속성 pivotX과 pivotY가 있다. 이들을 사용하면 사각형 내의 임의의 점을 기준으로 회전시킬 수 있다. pivotX와 pivotY의 초기값은 모두 0이다. 즉, 표시 객체의 기본 등록 포인트는 왼쪽 모서리가 된다. 여기서는 기준점을 사각형의 중심으로 변경해 보자.
// 기준점을 Quad 인스턴스의 중심으로 설정
myQuad.pivotX = myQuad.width >> 1;
myQuad.pivotY = myQuad.height >> 1;

이렇게 기준점을 변경하면 표시 위치의 기준도 다르기 때문에 표시 위치가 어긋난다. 이번 예에서는 사각형의 폭과 높이의 절반인 100 픽셀씩 왼쪽과 위로 이동한다.
// Quad의 인스턴스를 중앙에 표시
myQuad.x = (stage.stageWidth - myQuad.width >> 1) + myQuad.pivotX;
myQuad.y = (stage.stageHeight - myQuad.height >> 1) + myQuad.pivotY;

myQuad.pivotX = myQuad.width >> 1 이므로, 아래와 같이 축약할 수가 있을 것이다.
// Quad의 인스턴스를 중앙에 표시
myQuad.x = stage.stageWidth >> 1;
myQuad.y = stage.stageHeight >> 1;

이상으로 화면의 중앙에 위치하는 사각형을 중심점을 기준으로 회전해봤다.


자원의 개방(메모리 해제)

Starling 표시 객체에는 dispose()라는 메소드가 있다. 이는 표시 객체가 삭제되는 타이밍을 알리는 표시객체에서 사용하는 리소스를 해제하기 위한 메소드이다. Starling에서 표시 객체의 서브 클래스를 정의할 때 dispose() 실행을 잊지 않도록 한다. 그렇지 않으면 메모리 누수의 원인이 될 수도 있다.
아래 예제 코드는 dispose()를 사용하는 예다.
public override function dispose():void {			
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
myQuad.removeEventListener(Event.ENTER_FRAME, onEnterFrame);

super.dispose();
}

샘플은 이벤트 리스너를 제거하는 것이다. Starling 이벤트 리스너에 약한 참조를 사용할수 없기 때문에 삭제 타이밍에 확실히 삭제하도록 한다. 메소드의 마지막 행에서 super.dispose()를 호출한다. 이렇게 하면 객체에 addChild()로 추가된 모든 자식 객체에 대해 dispose()가 호출된다. 따라서 myQuad.dispose()는 명시적으로 기술할 필요가 없다. 기타 표시 목록에 추가되지 않은 객체가 있다면 dispose() 실행은 필수다.

또한 표시 목록에 추가할 수 없는 객체에서 리소스의 개방이 필요한 객체가 있다면 여기에 필요한 처리를 기술한다. 예를 들어, 다른 객체와 공유하는 전용 텍스처(여기서는 myTexture)를 참조하고 있다면 이 객체를 소멸한다면 myTexture.dispose()를 실행하여 myTexture가 확보한 비트맵 메모리 공간을 해제해야 한다.



원문 : http://cuaoar.jp/2011/12/enterframe-starling.html

package {
	import starling.events.Event;
	import starling.display.Quad;
	import starling.display.Sprite;

	public class Demo extends Sprite {
		private var myQuad:Quad;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {

			// Quad의 인스턴스를 생성           
			myQuad = new Quad(200,200);

			// 각 정점의 색상을 지정         
			myQuad.setVertexColor(0,0xFFFFFF);
			myQuad.setVertexColor(1,0xFF0000);
			myQuad.setVertexColor(2,0x00FF00);
			myQuad.setVertexColor(3,0x0000FF);


			// 기준점을 Quad 인스턴스의 중심으로 설정
			myQuad.pivotX = myQuad.width >> 1;
			myQuad.pivotY = myQuad.height >> 1;

			// Quad의 인스턴스를 중앙에 표시
			myQuad.x = stage.stageWidth >> 1;
			myQuad.y = stage.stageHeight >> 1;

			// Sprite에 Quad 인스턴스를 추가            
			addChild(myQuad);

			// EnterFrame 이벤트 리스너 추가            
			myQuad.addEventListener( Event.ENTER_FRAME , onEnterFrame);
		}

		private function onEnterFrame(e:Event):void {
			// Quad의 인스턴스를 회전           
			if (e.currentTarget as Quad) {
				myQuad.rotation +=  .01;
			}
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			myQuad.removeEventListener(Event.ENTER_FRAME, onEnterFrame);

			super.dispose();
		}
	}
}
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-03] Flash 컨텐츠 표시의 기본

Programming/Framework 2012.01.05 01:50
Starling은 Stage3D를 이용한 빠른 2D 드로잉을 실현하기 위해 설계된 framework이다. 이전 기사에서 개요와 간단한 사용법을 소개했다. Starling에서는 3가지 방법으로 애니메이션을 사용할 수 있다. 이 방법을 여러 번에 나눠서 소개한다. 기존의 애니메이션 방법과 비교해 보자.

개발 환경 준비
Starling의 개발 환경은 Flash Player 11과 AIR 3가 필요하다. 툴은 Flash Builer 4.6을 권장한다. Flash Professional CS5 또는 CS5.5를 사용하는 경우 다음 문서에서 소개하는 기능확장이 편리하다.
Flash Professional CS5 or CS5.5에 Flash Player 11 설정 MXP

그리고 Starling framework는 github에서 구할 수 있다.
PrimaryFeather / Starling - Framework / zipball

위 링크에서 다운로드한 zip에 포함되어 있는 SWC 파일을 경로에 추가하면 Starling 애플리케이션을 개발 할 수 있다. 또한 혼합 모드에 direct를 지정하지 않으면 제작에 성공해도 화면에 표시할 수 없다. 따라서 SWF 경우 wmode = direct를, AIR일 경우 <renderMode> direct </renderMode> 로 지정하는 것을 잊지 말아야한다.

Starling 인스턴스 생성
Starling로 렌더링하려면 먼저 Starling의 인스턴스를 생성한 다음 start() 메소드를 호출한다. 이 부분은 어떤 Starling을 개발에도 그대로 사용할 수 있다. 아래가 가장 간단한 예제이므로 사용해보자. fla 파일에서 document class로 사용하는 것이 편하다.

package{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import starling.core.Starling;

        public class StartStarling extends Sprite{
		private var myStarling:Starling;

		public function StartStarling(){
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			// Starling의 인스턴스를 생성
			myStarling = new Starling(MyStarlingSprite,stage);
			// 그리기 작업을 시작
			myStarling.start();
		}
	}
}

Starling의 생성자 첫 번째 인수는 Starling의 Sprite다. 이 Sprite의 내용이 실제 화면 그리기에 사용된다. 그리기 정보는 Flash Player의 Sprite와 마찬가지로 자식 객체의 목록 구조와 같이 유지된다. 두 번째 인수는 표기 객체의 그리기 stage다. Starling 생성자는 5개의 인수를 가지지만 3 번째 이후 인수는 기본값을 가지고 있기 때문에 일반적으로 지정할 필요가 없다. 명시적으로 소프트웨어에서 3D 렌더링을 사용하려는 경우에는 5개의 인수를 작성할 수 있다. 마지막 인수가 혼합 모드를 지정한다.

// 5 번째 째의 인수로 그리기 모드를 지정 myStarling = new Starling (Game, stage, null, null, Context3DRenderMode.SOFTWARE );

이렇게 할 경우, 어떤 환경에서도 GPU로 렌더링 되지 않고 CPU로 처리하게 된다. 만약 실행 중에 소프트웨어 렌더링으로 대체되어 있는지 확인하고 싶다면 Starling 인스턴스 context.driverInfo 속성을 통해서 확인할 수 있다. 다음은 context3DCreate 이벤트를 사용하여 Stage3D를 초기화 한 후, 소프트웨어 렌더링의 프레임 속도를 절반으로 설정하는 예를 보여준다.

stage.stage3Ds[0].addEventListener (Event.CONTEXT3D_CREATE,onContext3DCreate); private function onContext3DCreate (event : Event) : void { if (Starling.context.driverInfo.toLowerCase() indexOf ( "software ")!=- 1){ Starling.current.nativeStage.frameRate = 30; } }

Starling 런타임 오류 검사를 수행하려는 경우에는 start()를 호출하기 전에 다음 설정을 추가한다.
myStarling.enableErrorChecking = true;

그러나 오류 검사 및 성능에 미치는 영향이 크기 때문에 디버깅 이외에는 설정하지 않는 것이 좋다. 기타 Starling 클래스의 기능은 다음 기회에 소개할 예정이다. 우선 온라인 문서는 이 곳에서 확인할 수 있다. Starling @ Starling Framework Reference

사용자 정의 Sprite 만들기

(참고 : 앞으로 Sprite와 같은 클래스 이름은 설명이 없는 한 모두 Starling 프레임워크에 종속된 클래스다. 익숙해질 때까지 실수에 주의가 필요하다.)

다음은 Starling의 생성자의 첫 번째 인자로 지정하는 Sprite 사용자 정의 클래스를 만든다. 만드는 단계는, 표시 오브젝트를 작성하고 Sprite에 addChild() 메소드를 추가하는 기존의 방식과 비슷하다. Stage3D의 그리기 단위는 삼각형이지만 Starling은 삼각형 2개를 기본으로 한다. 따라서 사각형에 해당하는 Quad 클래스의 인스턴스를 표시하는 방법에서 시작한다. 아래의 샘플은 화면에 사각형을 표시하는 것을 수행한다.

package { import Starling.display.Quad; import Starling.display.Sprite; public class MyStarlingSprite extends Sprite { private var myQuad:Quad; public function MyStarlingSprite() { // Quad의 인스턴스를 생성 myQuad = new Quad(200,200); // 우선 채우기 색상을 지정 myQuad.color = 0xABCDEF; // Sprite에 Quad 인스턴스를 추가 addChild(myQuad); } } }

위 코드를 실행하면 사각형이 화면 왼쪽에 그려진다. 사각형을 화면 중앙에 표시하려면 다음과 같이 Quad의 좌표를 설정한다.

myQuad.x = stage.stageWidth - myQuad.width>> 1; myQuad.y = stage.stageHeight - myQuad.height>> 1;
단, 위의 코드는 stage 속성에 대한 액세스를 포함한다. 따라서 Sprite가 초기화가 끝나기 전에 실행되면 오류가 발생한다. 그래서 addedToStage 이벤트를 이용한다. 이 addedToStage 이벤트는 Starling 이벤트지만, Flash Player의 addedToStage 이벤트 처럼 Stage가 이용 가능하게 된 것을 알려준다.

package { import Starling.events.Event; import Starling.display.Quad; import Starling.display.Sprite; public class MyStarlingSprite extends Sprite { private var myQuad:Quad; public function MyStarlingSprite() { // addedToStage 이벤트에 대한 수신기를 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e : Event ):void { // Quad의 인스턴스를 생성 myQuad = new Quad(200,200); myQuad.color = 0xABCDEF; myQuad.x = stage.stageWidth - myQuad.width >> 1; myQuad.y = stage.stageHeight - myQuad.height >> 1; // Sprite에 Quad 인스턴스를 추가 addChild(myQuad); } } }

원문 : http://cuaoar.jp/2011/12/starling-flash.html
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-02] Starling 2D framework 소개

Programming/Framework 2012.01.04 18:25
이전 포스트에서 이야기한 내용과 같이 Stage3D의 지원을 통해서 FlashPlayer 렌더링 기술은 확실히 진화했다. 오랜만에 느껴보는 진화다. Starling 외에도 ND2D와 같은 framework가 등장하고 있으니 앞으로 여러가지 다양하고 새로운 것들이 나타날 것 같은 예감이다.(Alchemy의 이야기와 FlashPlayer에서 다중스레드 지원 이야기 등등)

이번에는 조금 더 자세하게 Starling을 소개한다.

Starling 아키텍처
Starling은 Stage3D로 구축되어 있다. Stage3D는 데스크탑 환경에서 DirectX 및 OpenGL, 모바일 환경에서는 OpenGL ES2에 구축되어 있다. 따라서 OpenGL 등이 GPU의 API를 직접 호출하기 때문에 Starling이 두 계층 사이에서 GPU를 사용할 수 있는 것이다.

1. Starling
2. Stage3D
3. OpenGL, DirectX, OpenGL ES2
3. GPU


Starling은 약 80kb 용량으로 가볍지만 이 때문에 Starling에서는 기존의 플래시 표시객체의 모든 기능이 제공되지는 않고 한정적이다. 아무래도 주로 게임 용도를 염두에 두고 설계되었기 때문이라고 생각된다.(물론 게임 이외에도 사용할 수 있다.) Starling의 이벤트 모델, 클래스 계층 구조도 기존 플래시 구조와 비슷하다. 계층의 순서는 아래와 같다.

1. starling.events.EventDispatcher
2. starling.display.DisplayObject
3. starling.display.DisplayObjectContainer

이어서 DisplayObjectContainer 아래에 Button, Sprite, TextField등이 정렬된다.
MovieClip은 조금 다르다. Image class의 서브 클래스이다. 아래와 같은 계층관계를 가지고 있다.

1. starling.display.DisplayObject
2. starling.display.Quad
3. starling.display.Image
4. starling.display.MovieClip


Image의 서브 클래스인 MovieClip은 GPU를 활용하기 위해 최적화되어 있기 때문에 기존에 타임라인 애니메이션을 좋아하는 사람은 활용도가 높다. 그리고 Quad라는 새로운 클래스가 등장했는데 Quad는 사각형 영역을 그리기 위한 클래스다.

비트맵 이미지를 표시하려면 다음과 같다.
// 비트맵을 포함
[Embed (source = "myBitmap.png")]
private static const myBitmap:Class;

// 비트맵 텍스처를 생성
var texture:Texture = Texture.fromBitmap(new myBitmap());

// 텍스터를 사용하여 이미지 객체를 생성
var image:Image = new Image(texture);

// 이미지의 표시 위치를 지정
image.x = 300;
image.y = 150;

// 이미지를 표시
addChild(image);

기존의 DisplayObject와 Starling을 동시에 사용하는 경우
Stage3D는 기존의 표시객체와 다른 레이어에 그려진다. 참고로 GPU에서는 비디오 재생을 StageVideo(FlashPlayer 10.2에서 도입) 레이어에 별도로 그려진다. 각 레이어의 관계는 아래와 같다.

1. 표시목록
2. Stage3D
3. StageVideo


각각이 독립된 레이어로 다른 레이어의 display 데이터에 직접 액세스할 수 없다. 예를 들어, StageVideo에서 재생중인 영상을 표시객체에 붙이는 것은 현재는 할 수 없다. 표시 목록과 Starling(즉 Stage3D)를 동시에 사용할 경우, 표시 목록이 레이어이므로 모든 표시 객체는 Starling의 객체 위에 표시된다. Stage3D는 프레임마다 모든 영역을 다시 그린다. 그리고 현재 버전에서는 Stage3D 객체를 투과할 수 없다. 따라서 StageVideo 위에 객체를 올리기 위해서는 Starling객체가 아닌 표시객체를 사용해야 한다.


Stage3D를 사용할 수 없는 경우
Starling의 Stage3D를 사용하려면 wmode를 direct로 지정해야 한다. wmode가 지정되지 않았거나 wmode가 다른 값으로 설정되어 있으면 런타임 오류가 발생한다. Starling은 오류가 발견되면 wmode가 올바르게 지정되지 않았다는 메시지를 출력한다. 따라서 HTML에서 플래시가 제대로 임베드 되지 않았을 경우, 쉽게 발견할 수 있다. wmode가 올바르게 지정되어 있어도 드라이버의 버전, 또는 GPU를 사용할 수 없는 경우에는 Stage3D가 SwiftShader로 대체되어 실행되기 때문에 원하는 속도를 내기 어렵다. FlashPlayer 11버전이 설치되어 있더라도 느리다면 드라이버 설치 버전이 최신인지 확인이 필요하다.

원문 : http://cuaoar.jp/2011/09/starling-actionscript-3-1.html 
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

Starling에서 resize 적용

Programming/Framework 2012.01.04 16:16
Starling를 이용하여 렌더링을 할 경우 stage의 width, height를 변경하더라도 렌더링 되고 있는 픽셀의 크기는 변경되지 않는다. 따라서 렌더링 되고 있는 Starling의 stage 사이즈를 변경하기 위해서는 아래와 같이 Starling.current.viewPort의 Rectangle 값을 변경해 줘야 한다.
package 
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
	import flash.geom.Rectangle;
    
    import starling.core.Starling;
    import flash.events.Event;

    public class Startup extends Sprite
    {
        private var mStarling:Starling;
        
        public function Startup()
        {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            
            mStarling = new Starling(Demo, stage);
            mStarling.enableErrorChecking = false;
            mStarling.start();

			stage.addEventListener(Event.RESIZE, onResizeHandler);
			addChild(new Gaze(true, "http://jasu.tistory.com"));
        }
		
		private function onResizeHandler(e:Event):void{
			var viewPortRectangle:Rectangle = new Rectangle();
			viewPortRectangle.width = stage.stageWidth;
			viewPortRectangle.height = stage.stageHeight;

			Starling.current.viewPort = viewPortRectangle;
		}
    }
}
이렇게 viewPort의 사이즈를 변경하면 resize 이벤트를 통해서 stage의 width, height 사이즈가 변경된 사이즈로 렌더링 된다. 그러나 렌더링되는 실제 해상도에는 변함이 없기 때문에 강제로 resize한 것처럼 스케일 비율이 무시된다. (stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; 로 설정을 했더라도 Starling(Stage3D)을 통해서 렌더링되는 영역은 별도) 따라서 아래와 같이 mStarling.stage의 stageWidth, stageHeight 값도 변경해야 실제 렌더링하려는 픽셀 사이즈를 확보할 수가 있다.
private function onResizeHandler(e:Event):void{
			var viewPortRectangle:Rectangle = new Rectangle();
			viewPortRectangle.width = stage.stageWidth;
			viewPortRectangle.height = stage.stageHeight;
			Starling.current.viewPort = viewPortRectangle;
 
			mStarling.stage.stageWidth = stage.stageWidth;
			mStarling.stage.stageHeight = stage.stageHeight;
		}
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

new Gaze();


U : 플래시 원본 웹 페이지 링크 버튼
F : FullScreenMode 설정 버튼 
+ : FPS 증가 버튼
- : FPS 감소 버튼







코드 사용 방법

package
{	
	import flash.display.Sprite;
	public class UseGazeSample extends Sprite {   
		public function UseGazeSample():void {

			 addChild( new Gaze(true, "http://") );	

		}
    }
}

// constructor  
public function Gaze(inFullscreenMode:Boolean=false, inOriginalUrl:String="empty"):void;

version 0.6.1
 

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

Flash Pro CS5 or CS5.5에서 플래시 플레이어 11 설정 방법

Stage3D를 사용하는 콘텐츠를 개발하려면 플래시 CS5 버전 이상에서 FP11버전을 지원할 수 있도록 확장해야 한다. 아래 링크를 통해서 손쉽게 extension할 수 있다.

MXP 설치
CS 5.5 MXP -  FP11Publish_cs55.mxp
CS 5 MXP -  FP11Publish_cs5.mxp


FP11버전을 플래시툴에 설치 했더라도 아직은 플래시툴에서 결과물을 바로 확인할 수 없다. FlashPlayer11 버전이 인스톨된 브라우저에서 확인을 해야 하는데 HTML소스에서 플래시 임베드 속성 wmode를 "direct"로 설정해야 확인이 가능하다. 위 MXP 파일을 통해서 순쉽게 설치가 가능하나 수동으로 설치해야하는 상황이라면 아래 링크를 참조.

http://blogs.adobe.com/rgalvan/2011/11/adding-fp11-support-to-flash-pro-cs5-and-cs5-5.html


저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

즐거운 만남 액션스크립트까페 컨퍼런스를 다녀와서...

Programming/Etc 2010.05.03 11:45

즐거운 만남 액션스크립트까페 6회를 다녀왔습니다. 양재 AT센터는 처음 방문이었는데 강남에서 그리 멀지 않을 곳이라 중소 규모의 컨퍼런스나 세미나를 하기에 좋은 장소라는 생각이 들더군요. 사운드나 인터넷을 지원되지 않았던 부분은 좀 아쉽지만…

매번 참가 할 때마다 느끼지만 플래시에 관심을 두시는 분들은 참 열정적이라는 생각이 듭니다. 발표를 하는 분들이나 발표를 듣는 모든 분들이 플래시 하나만으로도 공감을 소통할 수 있다는 것이 참 즐겁습니다.







1/40sec | F/1.7 | 20.0mm | ISO-100
1/30sec | F/1.7 | 20.0mm | ISO-200

1/40sec | F/1.7 | 20.0mm | ISO-100
1/30sec | F/1.7 | 20.0mm | ISO-320
1/30sec | F/1.7 | 20.0mm | ISO-160
1/30sec | F/1.7 | 20.0mm | ISO-100

그날 발표하신 저를 포함한 문군, 공씨, 우야꼬, 러브데브 수고 많았습니다. 그리고 컨퍼런스를 준비하신 스텝분들과 스텝이 아닌(?!) 언노운군도 고생 많았습니다. 그리고 즐거운 자리 더욱 즐겁고 활기차게 채워주신 참가자 모든 분들 만나서 반갑고 즐거웠습니다. ^^

1/30sec | F/1.7 | 20.0mm | ISO-160
1/80sec | F/1.7 | 20.0mm | ISO-100
사진 출처 : 액션스크립트까페 땡굴이


다음에도 이런 좋은 기회가 저에게 찾아올지는 모르겠지만(항상 이런 말을 하면서도 꾸준히 뵙게 됩니다… 쿠쿠) 저는 언제나 지식보다는 느낌을 전달하는 전달자로 남겠습니다. ^^

반가웠어요~ ^^

신고
    

설정

트랙백

댓글

NHN의 플래시 폐지 기사를 보면서...

Programming/Etc 2010.04.16 14:13
오늘 네이버에서 단계적으로 플래시를 폐지하겠다는 기사와 함께 네이버의 플래시팀이 다른 플랫폼 직무를 맏게 되었다는 소식을 접하게 되었습니다. 물론 현 시점에서 업계의 발빠른 대응이고 그 결단은 높이 평가할만 합니다. 하지만 회사의 정책이나 방침을 외부 언론에 배포할 때는 해당 기사의 내용과 방향성을 잡기 마련입니다. "문제는 바로 플래시(동영상, 게임 등을 위한 미국 어도비사의 플랫폼) 때문이었다."와 같은 내용은 그 동안 네이버가 욕을 먹어가며 플래시 개발자들을 흡수하고  각 서비스에서 적극적으로 활용했던 입장에서 표명하기에는 좋지 않은 태도입니다.

적어도 플래시가 국내 결제 서비스에 걸림돌이 되고 있는 ActiveX같이 취급해서는 안 될 일입니다. 플래시가 광고 관련된 상품으로 무분별하게 사용되면서 사용자들의 반감을 샀던 것은 사실이나, 기사 내용처럼  플래시 때문에 웹이 위협받고 있다는 식으로 표현이 되어서는 안 될 것입니다.  위 문장은 아래와 같이 정정해야 합니다. "문제는 Apple(iPhone, iPad등을 판매하는 회사)에서 Adobe의 플래시 플랫폼을 지원하지 않기 때문이다."  라고 말입니다.

플래시는 웹의 역사와 함께 발전해 왔던 플랫폼입니다. 웹 뿐만이 아니라 사용자에게 보다 편리한 UX경험을 제공하기 위해서 많은 노력을 해 왔던 플래시 개발자들이 사용자 경험에 지대한 공헌을 했다는 것은 인정하고 싶습니다.  그러한 공헌조차 인정할 수 없다면 우리나라에서 장인정신이 묻어나는 소프트웨어 전문가, UX는 탄생하기 어려울 것입니다. 

Adobe에서 앞으로 어떤 방향으로 플래시 플랫폼을 발전시켜 나갈지는 모르겠으나, 플래시 플랫폼을 사랑하고 즐겼던 한 개발자로써 플래시 플랫폼이 가져다 주었던 UX에 대한 경험적 개발론과 사용자의 사용성에 대한 고민은 꺼지지 않기를 바랍니다.

세상은 빠르게 돌아갑니다. IT계열에서 개발자로 종사하는 수 많은 사람들은 그러한 체감을 온 몸으로 받고 피를 토하며 이 길이 맞는지 확신도 없이 밤새도록 공부에 열중합니다. 어찌보면 대한민국의 IT 개발자들에게 지금 당장 필요한 것은 높은 연봉이 아니라 미래의 희망과 현재 하고 있는 일에 대한 즐거움, 그리고 열정이 아닐까요?  힘들지만 그럼에도불구하고 즐길 수 있는 최소한의 수혈이 필요한 시기입니다. NHN 플래시 개발자분들, 그리고 대한민국 IT 개발자분들 힘내시기 바랍니다.



추가 : 현재 기사에 대한 출처는 정확히 밝혀지지 않은 듯 합니다. 다만 점진적으로 플래시를 줄여 나간다는 내용이라고 하네요

네이버 다이어리 트위터의 멘션 내용 : "네이버 쉬프트 행사에서 플래시 사용을 점진적으로 줄여 나간다고 밝힌 바 있습니다. 기사 내용처럼 단기간내 플래시 사용이 중지되거나 하지는 않습니다. 기사가 좀 강하게 나온 것 같습니다"

신고
    

설정

트랙백

댓글

플래시 개발자의 관망, 그리고 준비

Programming/Etc 2010.03.01 08:23
이미 시장은 급변하고 있고 그에 따라서 환경은 많은 변화를 가져올 것입니다. 문제는 그것을 문제로 받아들이느냐 변화로 받아들이느냐 입니다. 그 동안 플래시는 이렇다 할 경쟁이 없었던 것이 사실입니다. 개발자 입장에서 이러한 변화에 능동적으로 대처할 필요가 있습니다.

국내 시장은 해외시장과 많이 다르다는 것을 알고 계실 것입니다. 변화가 있다면 그 변화에 적응할 수 있는 시간적인 여유는 충분히 있습니다. 하루 아침에 미래 가치를 판단할 수 없는 문제라는 것입니다. IT에서 주도적인 해외 기업이 게임의 룰을 다시 정하겠다는 것은 시간이 걸리더라도 그 파급효과는 있을 것입니다. 다만 그것이 곧 플래시 플랫폼의 끝을 의미하지는 않을 것입니다.

요즘의 플래시 논쟁 때문에 본인이 하고 있는 업무에 대해서 심각하게 고민하게 된다면 본인이 왜 플래시 개발을 하고 있는지 생각해 볼 필요가 있습니다. 플래시는 목적이 아니라 수단입니다. 본인이 하고 있는 업무가 플래시를 하는 개발인지, 아니면 사용성이 좋은 결과물을 만들어 내기 위해 노력하는 개발자인지 고민해 볼 필요가 있습니다.

그 동안 플래시 개발자가 만들어낸 UX 업적은 분명히 있습니다. 세상의 모든 것이 그렇듯이 기존에 하고 있던 것을 완전히 버리고 다른 것을 시작한다면 그 시작은 0%입니다. 시작에서 다른 사람보다 손해를 본다는 것입니다. 그러나 기존에 하던 것을 버리지 않고 단 5%라고 새로 시작하는 것에 적용할 수 있다면 플래시 개발을 경험하지 않은 사람이 느끼는 차이는 5%가 아니라 50%도 될 수 있을 것입니다. 

결국은 합당한 UI를 디자인하고, UX를 설계할 수 있는 플랫폼이 무엇이냐는 수단이며 결과물을 만들어 내는 것은, 결국 개발자의 철학입니다. 플래시로 개발하면서 사용성을 고민했던 노하우를 다른 플랫폼을 통해서 고민해 보는 것은 플래시 개발에도 많은 도움이 될 것이라 생각합니다.

또한 지금의 입력장치(마우스, 키보드 기타…)가 10년 후에도 그대로 사용되지는 않을 것입니다. 이미 터치스크린을 통해서 마우스가 필요 없는 디바이스가 쏟아져 나오고 있고, 키보드 또한 멀티터치를 통한 입력장치로 대체될 가능성도 배제할 수 없습니다. 이러한 환경의 변화에 능동적으로 적응하고 시장에서 살아 남기 위해서는 플랫폼을 떠나서 그에 맞는 개발도 중요합니다. 

우리가 굳이 가능성에 대하여 마음을 닫을 필요는 없습니다. 열린 마음으로 무엇이든 준비하는 자세는 중요합니다. 설령 그것이 시장에서 주도적인 역할을 수행하지 못한다고 하여도 어떤 방향으로든 도움을 줄 것이라는 믿음이 중요할 것입니다.

제가 플래시의 동향에 대해서 언급할 수 없는 이유는 그러한 능력도 부족하지만 아직 시장의 움직임이 없기 때문이기도 합니다. HTML5가 완성된 기술도 아니거니와 플래시의 화려한 그래픽 요소를 버릴 수 있다면 기존에 사용할 수 있는 다른 기술로도 충분히 기획이 가능할 것입니다. 물론 시장에서 변화의 움직임이 보인다면 이미 시장은 변했다고 판단하셔야 하겠지만 현재의 상황을 본다면 플래시는 아니라지만 그에 대한 대안을 제시하지 못하는 상황이라고 생각 됩니다. (HTML5는 현재 시점에서 플래시의 대체재가 될 수는 없습니다.)

결론적으로 말하자면 현재 논쟁이 되고 있는 시장은 관망할 필요가 있습니다. 그러나 그 관망이 자칫 무관심으로 변하지 않도록 개발자 입장에서 준비하는 자세는 필요하다는 것이 개인적인 견해입니다. 그 준비는 특정 플랫폼에 국한되지 않을 것입니다.

*  이 글은 @sexyflash 님께서 트위터를 통해서 견해를 물어보셨기에 작성합니다. 내용이 많아서 블로그를 통해서 전해 드립니다.


신고
    

설정

트랙백

댓글


티스토리 툴바