IT 기술 따라잡기

$.mogile.changePage(toPage,options) method 로 페이지 이동하기

2012. 10. 13. 05:44 | Posted by 솔웅

$.mogile.changePage(toPage,options) method

이전 글에서 HTML 페이지내에서 링크를 거는 간단한 방법을 보여드렸습니다. 이 링크는 두개의 윈도우간의 transition을 가능하게 하죠. 그 윈도우가 같은 HTML 페이지 안에 있던 아니면 다른 HTML 안에 있던 상관없습니다.

이 두개의 윈도우간 transition을 좀 manage 하고 싶은 경우에 어떻게 할까요? jQuery Mobile 은 이를 위해 $.mobile.changePage (toPage, options)를 제공하고 있습니다. 이름에서 알 수 있듯이 이것은 $.mobile object 상에 정의된 changePage () 메소드 입니다.

toPage parameter (required)는 여러분이 display 하기를 원하는 윈도우나 페이지를 말하는 겁니다. options parameter (optional)는 이 윈도우를 display 하기 위해 사용되는 옵션들을 가리키는 객체입니다.

$.mobile.changePage (toPage, options) method parameters

Parameter	Signification
toPage	Indicates the window or the URL of the page you want displayed. - For a window, it is a jQuery class object (eg $("#win2") to display the window with this id). In this case, the window must already exist in the DOM. - For a URL, it is a string (eg "index2.html"). In this case, the first window in the file is displayed.
options. transition	One of the values slide, slideup, slidedown, pop, fade or flip, corresponding to the transition effect between the two windows (slide by default). See details below.
options. reverse	If true, specifies to reverse the direction of the transition effect. Default false.
options. changeHash	Indicates whether the URL in the address bar should be changed to reflect the URL of the new page or window displayed (if changeHash is true, default), or must retain the old value (if changeHash is false).
options. pageContainer	jQuery class object indicating the element within which the new window will be displayed. Default $.mobile.pageContainer.
options. data	The data option is an object or a string, corresponding to transmitted parameters. - If using a string, it must be of the form name1=value1&name2=value2 ..., each name is the name of a parameter, and value the corresponding value encoded in UTF-8. - If you use an object, jQuery Mobile itself encodes UTF-8 each value, and sends the server a string of the form name1=value1&name2=value2 etc.
options. type	Method describing how to transmit parameters ("post" or "get"). The default is "get".
options. reloadPage	If true, specifies to reload the window in the DOM, each viewing the page. Default false (the window is loaded into the DOM at the first display and is used as is). This option is only used if the argument toPage refers to a URL (the window is loaded by jQuery Mobile with Ajax).
options. showLoadMsg	Boolean indicating to display the message saying that an HTML page is being loaded. The message is described in $.mobile.loadingMessage ("loading" by default).

Possible values of the data-transition attribute

data-transition	Signification
slide	Moving from one window to another by a horizontal movement from right to left. This is the default.
slideup	The second window appears at the bottom, gradually covering the first.
slidedown	The second window appears at the top, gradually covering the first.
pop	The second window is the center of the first, widening to cover it.
fade	The first window disappears by reducing its opacity (from 1 to 0), while the second appears through an increase in opacity (from 0 to 1).
flip	The second window appears with a rotation effect on a vertical axis, and by removing the first window.

링크를 클릭했을 때 $.mobile.changePage ()과 jQuery Mobile 이 만든 href attribute 사이에는 어떤 일이 일어 날까요? 어떤게 더 우선일까요?

헛갈릴 필요가 없는게요 jQuery Mobile은 자바스크립트 코드에서 어떤 일이 발생할 때는 <a> link의 href attribute에 "#" value를 할당하라고 하거든요. 링크 내의 href="#"는 jQuery Mobile에게 일반적인 프로세스로 진행하지 않을거라고 얘기하는 거거든요. (그러니까 이럴 경우에는 자바스크립트 내에 있는 우리의 코드가 우선으로 적용되게 되는 겁니다.)

$.mobile.changePage (toPage, options) method를 사용한 아래 샘플들을 보세요.

Display a window in the same HTML page

하나의 HTML 페이지에 두개의 윈도우가 있다고 가정하죠. 첫번째 윈도우에서 두번째 윈도우로 움직이고 싶구요 이것을 $.mobile.changePage () method를 사용해서 링크를 관리할 겁니다. (링크의 href attribute를 사용하는 대신에요.)

Use the $. Mobile.changePage () method to display a window in the same HTML page

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>

<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>

  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>

</body>

</html>

<script>

$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ($("#win2"));

});

</script>

Window 2 에는 win2 라는 id 가 있습니다. 이것은 jQuery class 객체 $("#win2")로 다뤄질 수 있습니다. link attributes의 href="#" 와 click event (instead of vclick)의 용도를 잘 생각해 보세요. (이 이벤트는 link 에 position 돼 있어서 click 을 사용한 겁니다. 자세한 내용은 이전 글을 보세요.)

Display a window in another HTML page

이제는 두번째 윈도우가 다른 HTML 페이지에 있을 경우입니다. 두번째 윈도우를 보기위해 $.mobile.changePage () method를 사용합니다. 이 메소드의 첫번째 파라미터로 HTML 페이지의 URL 을 넣습니다.

Use the $.mobile.changePage () method to display a window in a new HTML page

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>

<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>

  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>

</body>

</html>

<script>

$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ("index2.html");

});

</script>

Index2.html file

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>

  <div data-role=content>

    <p> Window content 2</p>

  </div>

</div>

</body>

</html>

결과는 이전 예제와 거의 같습니다. 첫번째 링크에서는 약간 다를겁니다. 왜냐하면 처음에는 그 HTML 페이지가 로드되지 않았을 것이기 때문에요. 아마 속도가 느리면 두번째 윈도우가 열릴 때까지 Loading 이라는 메세지가 뜰 겁니다.

만약 index2.html file안에 여러개의 윈도우가 있다면? 이럴 경우에는 첫번째 윈도우면 DOM 에 적재 됩니다. 다른 윈도우들은 접근하지 못하는 상황이 됩니다.

Transmit data when displaying the window

만약에 첫번째 윈도우가 두번째 윈도우에 어떤 정보를 전달해야 될 경우를 가정해 보죠. 이것은 $.mobile.changePage () call의 data option을 사용하게 됩니다. 이렇게 되면 두번째 윈도우에 파라미터를 전달할 수가 있습니다.

Use the $.mobile.changePage () method to transmit information

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>

</body>

</html>

<script>

$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ("action.php", 

  {

    data : { fname : "Eric", lname : "Sarrion" }

  });

});

</script>

Display the new window (action.php file)

<?
  $fname = $_REQUEST["fname"];
  $lname = $_REQUEST["lname"];
  $fname= utf8_decode ($fname);
  $lname= utf8_decode ($lname);

  $html = "";
  $html .= "<div data-role=page data-add-back-btn=true>";
  $html .=   "<div data-role=header>";
  $html .=     "<h1>Window 2</h1>";
  $html .=   "</div>";
  $html .=   "<div data-role=content>";
  $html .=   "<p>Window content 2</p>";
  $html .=   "<p>First name : $fname</p>";
  $html .=   "<p>Last name : $lname</p>";
  $html .=   "</div>";
  $html .= "</div>";
  echo utf8_encode ($html);
?>

아래 이미지를 보시면 두번째 윈도우에 파라미터가 display 되고 있습니다.

Modify the transition to display the window

지금 까지는 두 윈도우간 이동시 디폴트 transition 만 사용했습니다. jQuery Mobile은 $.mobile.changePage () call에서 transition option을 사용해서 특정 transition을 설정할 수 있는 기능을 제공합니다.

이전 예제에 transition option을 추가 하겠습니다.

Use slideup to transition between the two windows

$.mobile.changePage ("action.php", 

{

  data : { fname : "Eric", lname : "Sarrion" },

  transition : "slideup"

});

두번째 윈도우가 나타날 때 이전과는 다르게 나타날 겁니다.

Create a window and then dynamically display when a click occurs

HTML 안에 이미 만들어진 윈도우를 display 하는 대신에 링크를 클릭하면 $.mobile.changePage () method로 dynamic 하게 새로운 윈도우를 만들어서 display 하고 싶습니다.

Creating window dynamically

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>

</body>

</html>

<script>

var html = "";

html += "<div data-role=page id=win2 data-add-back-btn=true>";

html +=   "<div data-role=header>";

html +=     "<h1>Window 2</h1>";

html +=   "</div>"

html +=   "<div data-role=content>";

html +=     "<p> Window content 2 </p>";

html +=   "</div>";

html += "</div>";

$(html).insertAfter ("#home");

$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ($("#win2"));

});

</script>

이럴 경우에 insertAfter (selector) jQuery method를 사용해서 표현하시면 됩니다. (DOM 안에 첫번째 윈도우에 이어서 만들어진 윈도우가 삽입되겠죠. 그 다음에 링크를 누르면 그 새로운 윈도우가 display 되는 겁니다.)

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

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

window (화면) 들의 event 들 관리하기 (0)	2012.10.20
다른 메소드들과 프로퍼티들 보기 (0)	2012.10.19
Dialog windows 사용하기 (0)	2012.10.17
윈도우 생성 과정 이해하기 (0)	2012.10.16
$.mobile.loadPage (url, options) method 사용하기 (0)	2012.10.15
링크 관련 jQuery Mobile 내부 flow 알아보기 2 (0)	2012.10.09
링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0)	2012.10.08
두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0)	2012.10.04
컴포넌트에 이벤트 생성하고 사용하기 (0)	2012.10.04
컴포넌트에 메소드 추가하기 (0)	2012.10.04

Corona SDK/Corona SDK News

iOS 6, Game Center, and Landscape orientation

2012. 10. 12. 19:54 | Posted by 솔웅

Posted on October 9, 2012. Written by Walter

iOS6의 landscape/Game Center orientation issue 와 관련 코로나에서 많은 개선을 했다는 것을 말씀 드리게 되서 기쁩니다. 이 개선된 사항들은 Corona daily build 930에서 사용하실 수 있습니다.

처음 저희가 이 문제에 접근할 때 물리학자들이 자연의 forces들을 unify 하기 위한 접금 자세와 같은 자세였습니다. 최대한 일반적인 해결책을 찾으려고 애를 썼죠. 이 iOS6와 이슈와 관련한 해결책을 찾으면서 iOS5와 iOS 4.3 버전도 같이 동시에 테스트 해 가면서 일반적인 해결법을 찾으로겨 노력했습니다. 그래서 약간 stopgap 문제 같은게 생기기도 했었죠. ( #3 in last week’s FAQ)

개인적으로 그 stopgap 이 마음에 들지 않았습니다. 그래서 지난주에 팀에게 다른 방법을 찾아 보라고 부탁했고 좀 더 나은 방법을 찾아보자고 제안했습니다. 금요일 이전에 새롭게 전략을 만들었고 이대로 하면 훨씬 나아질 것이라고 생각했습니다.

이 새 전략은 거의 외과수술 수준의 작업을 해야 하는 작업입니다. 저희들이 무엇을 하는가 하면 이 workaround 가 오직 iOS 6 에서만 일어나도록 하는 겁니다. 이 현상은 iPhone 과 iPod Touch에서만 일어나거든요. -iPad에서는 이러한 현상이 일어나지 않습니다. -

저희들이 해야 할 일은 여러분의 info.plist에 special key 인 ‘CoronaUseIOS6LandscapeOnlyWorkaround’ 를 추가 하는 겁니다. 저희들이 이름을 조금 복잡하고 unfriendly하게 만들었는데요 애플이 다음버전에서는 이 버그를 해결하기를 바라는 마음에서 그렇게 지었습니다.

이 기능을 사용하시려면 build.settings 파일에 special ‘plist’ section을 추가하시면 됩니다.

settings =
{
	orientation =
	{
		default = "landscapeRight",
		supported =
		{
			"landscapeRight",
			"landscapeLeft",
		},
	},
	iphone =
	{
		plist =
		{
			CoronaUseIOS6LandscapeOnlyWorkaround = true,
		},
	}
}


             
          

(NOTE: 만약 이전의 workaround를 사용하신다면 여러분은 portrait 세팅을 remove 하셔야 합니다. 그리고 content key 도 remove 하셔야 됩니다. 그렇게 하지 않으시려면 그냥 위의 코드를 사용하시면 됩니다.)

이건 기본적으로 여러분 앱이 landscape 앱이라는 것을 코로나에 알려주는 겁니다. 그러면 이 special workaround를 activate 하고 싶다는 것을 얘기하는 것이죠. 이 workaround는 iOS 6 에서 돌아가는 iPhone 이나 iPod Touch 에서만 작동할 겁니다. iOS 5 에는 GameCenter bug 가 없습니다. 그러니까 거기서는 여러분의 landscape 앱이 제대로 잘 작동할 겁니다.

이제 마지막 문제가 있습니다. iOS 6 에서 돌아가는 iPad 의 photo picker 이슈 입니다. 만약에 여러분이 landscape 앱을 가지고 있다면 이 이슈가 발생할 겁니다. 이 부분은 다음 daily build 에서 해결책을 적용할 예정입니다.

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

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

코로나 - Higher standard를 향하여 (2)	2012.11.14
코로나에서의 Android Notification 그리고 cross-platform development (2)	2012.11.14
코로나 새 public version release 소식 (0)	2012.11.13
EA 사 코로나로 만든 게임 출시 소식 (0)	2012.11.09
안드로이드 오디오 + new Widgets + a teaser 들 개선 소식 (0)	2012.11.02
안드로이드관련 수정된 사항 (alert box 등등) (0)	2012.10.11
Corona daily build 928 에 적용될 사항들 공지 (Storyboard, widget) (0)	2012.10.11
More Updates: iOS 6, NOOK HD, CoronaGeek Hangout (0)	2012.10.09
11월에 나올 새로운 NOOK HD 와 관련한 소식 (0)	2012.10.04
Kindle Fire HD와 NOOK HD, 그리고 구글 맵 사용에 대해 (0)	2012.09.28

Corona SDK/Corona SDK TIPs

Sprite Sheet 활용하기 (Advanced)

2012. 10. 12. 05:54 | Posted by 솔웅

Posted on October 9, 2012. Written by Brent Sorrentino

오늘의 게스트 Tutorial은 Omid Abourai 입니다. 인디 게임 개발자 이며 ArdenKid 라는 별명을 가지고 있습니다. 그는 2년여간 코로나 SDK 를 가지고 개발을 했으며 곧 그가 주도한 첫 게임인 "Balloon Bazooka"를 릴리즈 할 예정입니다. 그의 블로그는 www.ardentkid.com 입니다.

Basic Sprite Sheets

만약 지난주의 를 animation tutorial 놓치셨다면 그것 부터 보세요. 이 튜토리얼은 지난주 튜토리얼의 basic sprite methods 의 연장선에 있는 겁니다.

Sprite sheet는 CPU 의 부담을 덜어준다는 면에서 아주 훌륭한 기술입니다. 그런데 그냥 vector animation 과 비교해서 단점이 있는 것도 사실입니다. 예를 들어 메모리를 많이 잡아먹는다든지 앱 크기가 커진다든지 하는 것들이요. (애플의 경우 20메가가 넘으면 wifi로 다운로드 받으라고 하는데 저희는 한 앱이 20메가를 넘지 않도록 작업을 하고 있습니다.)

그리고 예를 들어 한 캐릭터가 옷을 갈아입고 악세사리를 바꾸고 할 경우는 어떨까요? 우리의 캐릭터를 각 옷별로 또 악세사리별로 중복해서 만든다면 sprite sheet 를 쓰는 잇점이 줄어들겠죠. 이럴 경우 처음부터 부분 부분 별로 만들어서 활용한다면 적은 이미지 용량으로 훨씬 많은 효과를 낼 수 있을 겁니다.

이 튜토리얼은 그 이슈와 관련해서 가능한 해결법을 다룰 겁니다. 비밀은 코딩과 애니메이션 간에 좀 더 긴밀한 관계를 만드는 겁니다.

조만간 발매될 Balloon Bazooka 앱에서 사용했던 kid 관련 스프라이트 쉬트를 샘플로 시작해 보겠습니다.

이 sheet 는 코로나의 basic sprite animation에 맞게 디자인 됐습니다. 이미지를 로드한 다음 sequence들을 셋업하고 원하는 sequence들을 play 하는 방식이죠. 좀 더 진보된 테크닉을 원하신다면 아래 내용을 말씀해 드리고 싶습니다. 그런데 일단 우선은 이 basic methods가 익숙해지셔야 합니다.

Splitting the Animation Elements

우리는 화면에서 동시에 같은 sprite 표현을 사용하는 여러 kids 를 만들겁니다. 우리는 그들에게 다양한 옷과 살 색 등등을 적용할 겁니다. 다행히도 프로그램적으로 비쥬얼 property들을 tweening 함으로서 비슷한 애니메이션들을 만들 수 있습니다. 프로그램으로 scale, rotation, translation 등을 다야하게 적용할 수 있습니다. (우선 편의상 이번에는 팔은 가만히 있고 발만 움직이는 걸로 한번 만들어 보겠습니다.)

먼저 이 kid를 토막을 내겠습니다. color 별로 따로 만들고 나중에 이것들을 합칠께요. 이 작업을 하기 위한 새로운 image sheet 는 아래와 같을 겁니다.

이 new sheet 의 file size 가 225KB 에서 109KB로 줄어들었습니다. 그러면서도 다양하게 의상과 피부색을 조합할 수 있게 됐죠. 50%가 넘게 파일 사이즈를 줄였고 우리고 표현하고 싶은 다양한 kid 들을 표현할 수 있게 됐습니다.

이제 이 각각의 element들을 코드안에 individual sprite 로 정의 하겠습니다.

-- DECLARE CHARACTER SEQUENCES (MOST ARE JUST STATIC CHERRY-PICKED FRAMES!)
local sequenceData = { 
  { name="beachboy_hat_yellow", frames={1} },
  { name="beachboy_body_dark", frames={34} },
  { name="beachboy_shorts_red", frames={42} },
  { name="beachboy_arm_dark", frames={ 5,12,15,19,23,26 }, loopDirection="bounce" },
  { name="beachboy_foot_dark", frames={47} }
}

-- CREATE A DISPLAY GROUP FOR THE CHARACTER
local beachboy = display.newGroup()

-- CREATE BODY PARTS AS SPRITES
local hat = display.newSprite( sheet, sequenceData )
      hat:setSequence( "beachboy_hat_yellow" )
local body = display.newSprite( sheet, sequenceData )
      body:setSequence( "beachboy_body_dark" )
local shorts = display.newSprite( sheet, sequenceData )
      shorts:setSequence( "beachboy_shorts_red" )
local rightArm = display.newSprite( sheet, sequenceData )
      rightArm:setSequence( "beachboy_arm_dark" )
local leftArm = display.newSprite( sheet, sequenceData )
      leftArm:setSequence( "beachboy_arm_dark" )
local rightFoot = display.newSprite( sheet, sequenceData )
      rightFoot:setSequence( "beachboy_foot_dark" )
local leftFoot = display.newSprite( sheet, sequenceData )
      leftFoot:setSequence( "beachboy_foot_dark" )

-- POSITION PARTS & ORIENT L/R SIDES WITH SCALING
shorts.x, shorts.y = 0, 15
leftArm.x, leftArm.y = -20, -18
leftArm.xScale = -1  --flip 'leftArm' horizontally
-- etc...

-- INSERT ELEMENTS INTO THE DISPLAY GROUP, ORDERED BOTTOM TO TOP
beachboy:insert(leftFoot)
beachboy:insert(rightFoot)
beachboy:insert(shorts)
-- etc...

-- STORE REFERENCES TO EACH ELEMENT
beachboy["feet"] = {leftFoot, rightFoot}
beachboy["shorts"] = shorts
beachboy["body"] = body
-- etc...



            

          

Animating the Elements

이 모든 element들이 제자리를 잡고 여러분의 캐릭터가 show up 하면 이제 그 캐릭터의 발 움직임을 줘서 애니메이션을 만들 수가 있습니다.

--WALK SEQUENCE
function beachboy:walk()

  local feet = self.feet

  --CLEAR EXISTING TRANSITIONS IF RUNNING
  if not ( self.currentTransitions ) then self.currentTransitions = {} end  --add container table if not present
  local currTrans = self.currentTransitions
  local tot = #currTrans
  for i = tot,1,-1 do  --loop backwards through transitions and clear each one
    if (currTrans[i]) then transition.cancel(currTrans[i]) ; currTrans[i] = nil end
  end

  local t = 500  --WALK CYCLE TIMING
  local dist = 160  --FOOT MOVEMENT DISTANCE
  local ease = easing.inOutQuad  --FOR A NATURAL SWINGING MOTION

  --RECURSIVE ANIMATION FUNCTION
  local function anim()
    for i = 1,#feet do
      currTrans[i] = transition.to(feet[i], {y=dist, time=t, transition=ease, onComplete=function()
        currTrans[i] = transition.to(feet[i], {y=0, time=t, transition=ease, onComplete=function()
          anim()
        end})
      end})
    end
  end

  --START THE ANIMATION
  anim()

end



             
          

이제 우리만의 Runtime animation code 를 call 하고 있죠? 우리는 이 튜토리얼에서 계속 반복되는 transition들을 사용하고 있습니다. 여기서 팔도 발하고 같이 어울리게 애니메이션을 주고 싶다면 여기서 조금 더 작업을 해야 합니다. (이 부분은 따로 다루지는 않겠습니다.)

이제 같은 메모리로 여러 color들을 표현할 수 있게 됐습니다.

“Tinting” the Elements

여기서 각 파트별로 programatic tinting을 사용해서 color 까지도 코딩으로 넣을 수가 있습니다. 이것은 코로나의 setFillColor() method를 사용하면 됩니다. 우선 모든 부분을 흰색으로 만듭니다. 아래 샘플 이미지가 있습니다.

아래에 코딩으로 어떻게 sprite object들에 tint를 하는지에 대한 예제가 있습니다.

-- ACCESS EACH ELEMENT FROM THE CONTAINER TABLE BY INDEX NAME
beachboy.hat:setFillColor(252, 206, 0)
beachboy.body:setFillColor(126, 79, 33)
beachboy.shorts:setFillColor(220, 0, 0)
beachboy.feet[1]:setFillColor(126, 79, 33)  --access 'leftFoot' by position within 'feet' table
beachboy.feet[2]:setFillColor(126, 79, 33)  --access 'rightFoot' by position within 'feet' table
-- etc...


              
          

이제 원하는 색을 넣을 수도 있고 랜덤하게 색을 넣을 수도 있습니다. 여러분 마음대로 하시면 됩니다. 단지 다른 animation sequence 될 때마다 색을 넣어야 하는 작업을 해야 되겠죠. 그리고 캐릭터가 움직이면서 좀 더 CPU 를 잡아 먹을 겁니다. 그리고 한 객체에 한가지 색만 넣을 수 있겠죠. 줄무늬 옷이나 뭐 그런거는 좀 힘듭니다. 흰색과 회색을 사용해서 조금 sprite 한 느낌은 줄 수 있겠죠.

In Summary

해 보니까 이 방법은 요즘 대부분의 모바일 디바이스에서 사용하는 예외적인 방법이더라구요. 이 방법을 사용하면 texture memory를 훨씬 줄일 수 있습니다. 우리는 이 beachboy 캐릭터의 용량을 225 KB에서 109 KB로 줄였었습니다. 그리고 마지막 방법까지 하면 12KB 로 95%나 줄일 수 있었습니다.

그리고 또 다른 효과는 각 파트별로 다른 애니메이션 효과를 줄 수 있게 된 겁니다. 팔 하나만 움직이게 할 수도 있고 두 팔을 다 움직이게 할 수도 있구요 또 더 나아가서는 펀치나 킥하는 장면도 넣을 수 있겠죠.

그리고 각 character element 별로 tint/color 를 할 수가 있어서요 아주 다양한 캐릭터를 만들어 낼 수 있게 됐습니다.

이렇게 dynamically-optimized sprite sheet 를 사용하면 아주 다양하고 훌륭한 효과를 낼 수가 있습니다. 그리고 여러분의 코딩에 따라서 한정된 이미지로 개성있는 캐릭터를 계속 만들어 낼 수 있구요.

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

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

코로나로 MySQL 로부터 JSON Data 받아서 사용하기 (0)	2012.11.23
원하는 애니메이션 효과 내기 -Library- (0)	2012.11.14
Lua 의 퍼포먼스 향상을 위해 알아두어야 할 것 들 (0)	2012.11.07
수요일의 FAQ : Lua 프로그래밍 팁들 (0)	2012.11.02
FAQ Wednesday: Display Objects (0)	2012.10.26
FAQ Wednesday: iOS 6 버그들 (0)	2012.10.09
FAQ Wednesday: iOS Builds, API Docs, and Android (0)	2012.09.28
FAQ Wednesday: iPhone 5 와 iOS 6 (0)	2012.09.21
FAQ Wednesday: native.newTextField and native.newTextBox Events (0)	2012.09.13
선그리기 기초 부터 (2)	2012.09.09

1 ··· 381 382 383 384 385 386 387 ··· 518

IT 기술 따라잡기

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

$.mogile.changePage(toPage,options) method 로 페이지 이동하기

Display a window in the same HTML page

Display a window in another HTML page

Transmit data when displaying the window

Modify the transition to display the window

Create a window and then dynamically display when a click occurs

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

iOS 6, Game Center, and Landscape orientation

iOS 6, Game Center, and Landscape orientation

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

Sprite Sheet 활용하기 (Advanced)

Dynamically-Optimized Sprite Sheets

Basic Sprite Sheets

Splitting the Animation Elements

Animating the Elements

“Tinting” the Elements

In Summary

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

티스토리툴바