코로나 SDK를 사용하여 그래픽 조작
Corona SDK에서 그래픽을 생성, 조작 및 관리하는 핵심 구성 요소는 표시 객체입니다. 이 객체를 사용하여 파일의 이미지를 표시 할 수있을뿐만 아니라 이미지를 그룹화 할 수도 있습니다. 이를 통해 한 번에 화면에서 전체 그래픽 세트를 이동하고 서로 위에 그래픽을 배치 할 수 있습니다.
이 튜토리얼에서는 디스플레이 그룹을 사용하여 프로젝트의 그래픽 객체를 구성하는 기본 사항을 학습합니다. 이것은 두 개의 서로 다른 레이어를 생성하여 시연 할 것입니다. 하나는 일반 스크린을 나타내고 다른 하나는 모달 레이어를 나타냅니다. 그래픽을 레이어하는 것 외에도 전이 오브젝트를 사용하여 모달 그룹 전체를 이동합니다.
참고 : 이 자습서를 수행하려면 image1.png 및 image2.png 이미지가 필요합니다. 선택하는 모든 이미지가 될 수 있지만 100 픽셀 x 100 픽셀의 이미지가있는 경우이 자습서가 가장 효과적입니다. 이렇게하면 이미지에 어떤 일이 일어나고 있는지 쉽게 볼 수 있습니다.
시작하기 위해 main.lua라는 새 파일을 열고 코드 작성을 시작합니다.
displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;이 코드 섹션은 우리의 ui 라이브러리를 설정하고 displayMain, displayFirst 및 displaySecond라는 표시 그룹을 통해 선언합니다. 우리는 이것을 사용하여 그래픽을 먼저 겹쳐서 옮깁니다. global_move_x 변수는 움직임을 볼 수 있도록 디스플레이 너비의 20 %로 설정됩니다.
함수 setupScreen () displayMain : insert (displayFirst); displayMain : insert (displaySecond); displayFirst : toFront (); displaySecond : toFront (); 로컬 배경 = display.newImage ( "image1.png", 0,0); displayFirst : 삽입 (배경); 로컬 배경 = display.newImage ( "image2.png", 0,0); displaySecond : 삽입 (배경); 종료setupScreen 함수는 디스플레이 그룹을 주 디스플레이 그룹에 추가하는 방법을 보여줍니다. 우리는 또한 toFront () 함수를 사용하여 서로 다른 그래픽 레이어를 설정합니다. 마지막으로 선언 된 레이어 위에 원하는 레이어가 있습니다.
이 예제에서는 기본적으로 displayFirst를 displaySecond 그룹 아래로 기본 설정하므로 displayFirst를 앞쪽으로 이동할 필요는 없지만 각 표시 그룹을 명시 적으로 겹겹이 만드는 습관을 갖는 것이 좋습니다. 대부분의 프로젝트는 두 개 이상의 레이어로 끝납니다.
또한 각 그룹에 이미지를 추가했습니다. 앱을 시작하면 두 번째 이미지가 첫 번째 이미지 위에 있어야합니다.
function screenLayer () displayFirst : toFront (); 종료우리는 이미 displayFirst 그룹 위에 displaySecond 그룹으로 그래픽을 겹쳐 봤습니다. 이 함수는 displayFirst를 앞쪽으로 이동시킵니다.
function moveOne () displaySecond.x = displaySecond.x + global_move_x; 종료moveOne 함수는 두 번째 이미지를 화면 너비의 20 %만큼 오른쪽으로 이동시킵니다. 이 함수를 호출하면 displaySecond 그룹이 displayFirst 그룹 뒤에 있습니다.
function moveTwo () displayMain.x = displayMain.x + global_move_x; 종료moveTwo 함수는 두 이미지를 화면 너비의 20 %만큼 오른쪽으로 이동합니다. 그러나 각 그룹을 개별적으로 이동하는 대신 displayMain 그룹을 사용하여 두 그룹을 동시에 이동합니다. 이것은 여러 디스플레이 그룹을 포함하는 디스플레이 그룹을 사용하여 한 번에 많은 그래픽을 조작 할 수있는 좋은 예입니다.
setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);이 마지막 코드는 이러한 기능을 실행할 때 어떤 일이 발생하는지 보여줍니다. timer.performWithDelay 함수를 사용하여 앱이 시작된 후 매 순간 함수를 실행합니다. 이 함수에 익숙하지 않은 경우 첫 번째 변수는 지연 시간 (밀리 초)이고 두 번째 변수는 지연 후 실행하려는 함수입니다.
앱을 실행하면 image1.png 상단에 image2.png가 있어야합니다. screenLayer 함수는 발사하여 image1.png을 앞쪽으로 가져옵니다. moveOne 함수는 image1.png 아래에서 image2.png를 이동하고 moveTwo 함수는 마지막으로 실행되어 두 이미지를 동시에 이동합니다.
이 그룹들 각각에는 수십 개의 이미지가있을 수 있음을 기억하는 것이 중요합니다. 그리고 moveTwo 함수가 한 줄의 코드로 두 이미지를 이동 시켰 듯이 그룹 내의 모든 이미지는 그룹에 주어진 명령을 사용합니다.
기술적으로, displayMain 그룹은 디스플레이 그룹과 그 안에 포함 된 이미지를 모두 가질 수 있습니다. 그러나 displayMain과 같은 일부 그룹은 더 나은 조직을 만들기 위해 이미지가없는 다른 그룹의 컨테이너 역할을하는 것이 좋습니다.
이 자습서에서는 표시 객체를 사용합니다. 표시 객체에 대해 자세히 알아보십시오.