CoronaSDK에서 Image출력

2014. 1. 20. 1:00

프로젝트 다운로드

이미지 출력

1. 단순한 방법으로 화면에 이미지출력
   local bg1 = display.newImage("images/bg.png")
   bg1.x = 0
   bg1.y = 0
   이미지 출력의 기준 위치가 , 로드한 이미지의 중앙으로 되어 있기 때문에 이렇게 하면 아래처럼 화면이 왼쪽과 위로 치우치게 된다.
   

    이미지 출력이 왼쪽과 위쪽이 잘려있다.
   
   
   때문에 아래처럼 코드를 바꿔줘야 한다.
   bg1.x = bg1.width/2
   bg1.y = bg1.height/2 
2. 하지만 시작 위치 조정 필요성
   Config.lua에서 width = 720,  height = 1280, scale = "letterbox" 으로 했기 때문에 위의 조정만으로 이미지는 0,0 위치에서 출력이 된다.
   하지만 View->View AS->iPad Retina로 바꿔보면
   아래처럼 이미지가 출력 위치가 변하는 것을 볼 수 있다.
   

    왼쪽에서 오른쪽이 많이 공간이 떠 있다.
   이렇게 되는 이유는 iPad Retina의 화면 크기보다 셋팅한 720X1280이 작기 때문에 Corona에서 center 배치를 하면서 시작위치를 조정했기 때문이다.
   
   
   이 조정된 수치를 구하려면 아래 함수를 호출한다.
   local __OX = display.screenOriginX;
   local __OY = display.screenOriginY;
   
   
   그래서 아래처럼 값을 가감해 주면 된다.
   bg1.x = bg1.width/2 + __OX
   bg1.y = bg1.height/2 + __OY
   
   
   또는
   아래처럼 config.lua를 조정해 자동으로 위치조정하지 않고 무조건 왼쪽,위로 시작점을 조정하는 방법도 있다.
   xAlign = "left",               -- 기본은 center
   yAlign = "top",              -- 기본은 center
   
   

• 여기서 display.screenOriginX 에 대해서 심화 학습
  Config.lua 에서 아래와 같이 설정했다고 하자.
  width = 320,
  height = 480,
  그리고 View As -> iPhone ( iPhone 3 )를 선택하면
  iPhone 3의 해상도가 320, 480 이기 때문에
  screenOriginX = 0 , screenOriginY = 0 이 나온다.

• 기기별 해상도에 대한 정보는 아래 참고
  http://jmnote.com/wiki/스마트폰_해상도,_화면비율
  
  
  값을 아래와 같이 조정해 보자
  width = 340,
  height = 480,
  
  
  View As -> iPhone ( iPhone 3 )를 선택하면
  screenOriginX = 0 , screenOriginY = -15 이 나온다.
  
  
  340의 해상도에 맞춰서 화면 출력 영역이 자동 조정되고(이미지 확대) , Height는 510으로 조정되며(포토샵등의 툴에서 이미지를 320,480으로 만들어서 X를 340으로 조정하면 Y는 510으로 늘어남을 확인 가능 또는320:480=340:x 로 값을 구할것) 480의 초과값인 30이 상하로 나누어져서 -15로 표시되는 것이다.
  
  
  View As -> iPhone 4 를 선택하면 iPhone 4 의 경우 640, 960 즉 iPhone 3의 딱 2배 크기를 가지기에 동일하게 screenOriginY = -15 값이 나온다.
  
  
  View As -> iPhone 5를 선택하면 iPhone 5의 해상도는 640,1136 이기에
  640 : 1136 = 340 : x 로 계산하면 x는 603.5가 나온다.
  이때 width가 640이기에 2배수가 되고 y도 2배수하면 1206이 되고 , 1136 해상도에 부족분은 130이며 이 값을2로 나누면 -61.5 가 된다.
  screenOriginY 를 출력해 보면 -61.5를 확인 할 수 있다.
  
  

• 이때 화면 출력 영역의 실제 크기를 얻으려면 display.actualContentWidth , display.actualContentHeight 값을 가져오면 된다.
  
  
  위의 마지막 경우에서 actualContentHeight 를 출력해 보면 603이라고 출력됨을 확인 가능하다.