반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
제가 예전에 써핑하다가 받은 소스입니다.
누가 만든 로직인지도 모르겠네요.

하옇든간 자기가 힘들게 만든 소스를 여러 사람들과 조건없이 공유하는 개발자분들께 감사드립니다.

오늘 살펴볼 앱은요.
앱을 시작하면 위에서 녹색 공이 떨어집니다.
그리고 화면을 Drag 하면 선이 그려집니다.
녹색 공이 그 선에 떨어지면 튀어 나가게 돼 있습니다.

일단 소스 부터 볼까요?

local physics = require ("physics")
physics.start(true)
physics.setGravity(0, 1)
 
-- Ball rolls on Line
 
local ball = display.newCircle( 0, 0, 25)
ball:setFillColor(0, 255, 0)
ball.x = display.contentWidth/2
ball.y = 0
 
physics.addBody(ball, {bounce=1.1, radius = 25, friction=1})

-- Draw a line

local i = 1
local tempLine
local ractgangle_hit = {}
local prevX , prevY
local function runTouch(event)
  if(event.phase=="began") then
    if(tempLine==nil) then
      tempLine=display.newLine(event.x, event.y, event.x, event.y)
 
-- Random Colors for line
 
      r = math.random (0, 255)
      g = math.random ( 0, 255)
      b = math.random (0, 255 )
      tempLine:setColor(r,g, b)
 
      prevX = event.x
      prevY = event.y
    end
  elseif(event.phase=="moved") then
    tempLine:append(event.x,event.y-2)
    tempLine.width=tempLine.width+0.8
    ractgangle_hit[i] = display.newLine(prevX, prevY, event.x, event.y)
    ractgangle_hit[i]:setColor(r,g, b)
    ractgangle_hit[i].width = 5
 
-- Creates physic joints for line (Turn on draw mode to see the effects)
 
    local Width = ractgangle_hit[i].width * 0.6
    local Height = ractgangle_hit[i].height * 0.2
 
-- Physic body for the line shape
 
    local lineShape = {-Width,-Height,Width,-Height,Width,Height,-Width,Height}
 
    physics.addBody(ractgangle_hit[i], "static", { bounce = -1, density=0.3, friction=0.7, shape = lineShape})
    prevX = event.x
    prevY = event.y
    i = i + 1
  elseif(event.phase=="ended") then
    tempLine.parent.remove(tempLine)
    tempLine=nil
  end
end

Runtime:addEventListener("touch", runTouch)

우선 Physics를 이용하기 위해 require하고 start 시킨 후 중력은 아래로 1을 주었습니다.
기본이 9.8인데 1로 주었으니 풍선처럼 아주 가볍게 그리고 천천히 떨어지겠네요.
그리고 25픽셀이 반지름인 녹색공을 만들고 위치는 상단 가운데로 주었습니다.
이 ball에 addBody를 했구요. 그 body 크기는 반지름이 25픽셀로 녹색 원과 크기가 같고 bounce와 friction 도 조금 주었습니다.

여기까지만 하면 녹색볼이 위에서 아래로 천천히 떨어질 겁니다.
정말 Corona SDK의 물리엔진은 아주 강력합니다.

그 다음은 여러 변수들을 선언했습니다.
맨 밑에 Runtime touch리스너가 있고 이 리스너는 runTouch함수를 호출합니다.
그러니까 앱이 시작할 때부터 이 runTouch 함수는 실행 될 겁니다.

이제 그 함수를 볼까요?
일단 touch가 시작되고 tempLine이 nil 일 경우 tempLine에 현재 위치로 라인을 그립니다.
시작점과 끝점 모두 현재 위치가 됩니다.
그리고 r,g,b 변수에 랜덤한 rgb값을 넣고 아까 그린 선에 그 랜덤한 색을 넣습니다.
그리고 현재의 위치를 prevX,prevY에 넣습니다.
그 다음에 touch 가 moved일 경우 즉 드래그가 진행중일 경우에는요.
선을 더 합니다. (append) 그리고 선을 그리는데요. 시작점은 아까 began 일때의 위치가 되고 끝위치는 현재가 됩니다.

다음엔 이 그려진 Line에 physics.addBody를 할 수 있도록 Width,Height공간만큼 구간을 잡구요 이것을 addBody에 shape로 집어 넣습니다.
그리고 다시 prevX,prevY에 현재 위치를 넣습니다.

드래그하던 손을 떼면 ended 부분이 실행 되는데요.
tempLine을 remove하고 nil을 만듭니다.

자 여기 까지가 소스코드를 모두 분석한 내용입니다.

이제 앱을 실행하면 녹색 공이 떨어지고 여러분이 그은 선에 그 공이 맞으면 튀게 될 겁니다.

이 앱은 그 자체로 완성된 게임은 아니지만 그 기본 로직을 활용하면 많은 곳에서 유용하게 사용할 수 있을 것 같습니다.

반응형


반응형
아래 스크립트를 아용하면 됩니다.

  <script>

      var draw = function () {

          var canvas = document.getElementById("canvas");

 

          //canvas 컨텍스트가 존재하면 canvas 지원하는 브라우저

          if (canvas.getContext) {

              //구현

          }

          else { //canvas 컨텍스트가 존재하지 않으면 canvas 지원하지 않는 브라우저

              alert(" 브라우저는 캔버스를 지원하지 않습니다.");

          }

      }

  </script>


HTML5를 지원하지 않는 브라우저가 아직 많이 있으니까 혹시 HTML5개발하려면 구현부분에 HTML5를 사용하고 alert부분에는 일반 HTML을 사용해야 할 것 같습니다.



반응형

앱 화면 Screen Capture하기

2011. 12. 29. 04:26 | Posted by 솔웅


반응형
오랜만에 Corona SDK Tip을 공부합니다.

예전 텍스트, 이미지, 모양 표시하기... 2 에서 이런게 있다는 설명만 하고 넘어갔는데요.
오늘 예제와 함께 자세히 다뤄 볼께요.

display.setStatusBar( display.HiddenStatusBar )
 
-- Fill the screen with a green rectangle
local rect = display.newRect(0, 0, display.contentWidth, display.contentHeight)
rect:setFillColor(0, 255, 0)
 
-- Draw a circle on the screen
local circle = display.newCircle(155, 100, 36)
circle:setFillColor(255, 0, 0)
 
-- Capture the screen
local screenCap = display.captureScreen( true )
 
-- Remove the objects from the screen
rect:removeSelf()
circle:removeSelf()
 
-- Scale the screen capture, now on the screen, to half it's size
screenCap:scale(.5,.5)
 
-- Alert the user to look in the library (device)
-- or on the desktop (simulator) for the screen capture
local alert = native.showAlert( "Success", "Screen Capture Saved to Library", { "OK" } )
이 앱을 실행하면 위 화면이 실행되고 아래 화면이 캡쳐 됩니다.

왜 그런지 소스를 보실까요?
첫째줄은 아이폰에서 status 바를 없앱니다.
그 다음엔 커다란 녹색 사각형을 그리고 그 다음에 빨간 원을 그립니다.
녹색 사각형은 화면에 꽉 차게 그려집니다.
그 다음 display.captureScreen(true)를 해서 스크린을 캡쳐합니다.
(true)를 했으니까 이 파일은 디바이스 안에 이미지 파일로 저장됩니다.
그리고 사각형과 원을 screen에서 없앱니다.
그리고 아까 캡쳐한 것을 반 크기로 줄여서 화면에 표시합니다.
맨 마지막엔 제대로 스크린 캡쳐가 됐다는 Alert 메세지를 뿌립니다.

즉 이 앱은 꽉찬 녹색 사각형과 큰 원을 캡쳐한 후 두 사각형과 원을 지우고 절반크기로 다시 화면에 보여주는 앱입니다.

여기서 사각형과 원을 removeSelf()한 부분을 주석처리한 다음에 실행해 보세요.

그럼 이렇게 나올 겁니다.
보시다시피 캡쳐 전 도형들이 사라지지 않고 나와서 전체가 녹색 사각형이고 빨간 원도 좀 큽니다. 그리고 그 위에 캡쳐한 이미지를 절반크기로 올려 놓은 화면입니다.

간단하지만 때에 따라서는 아주 유용하겠죠?
display.captureScreen( false ) 하면 디바이스에는 저장되지 않습니다.
이것을 true로 할 경우
아이폰 같은 경우는 Photo Albums에 자동으로 저장이 되구요.
안드로이드는 build.settings에 아래와 같이 퍼미션을 주어야 합니다.
settings =
{
   androidPermissions =
   {
       "android.permission.WRITE_EXTERNAL_STORAGE"
   },
}
그리고 시뮬레이터는 컴퓨터 바탕화면에 캡쳐된 화면을 저장합니다.
(윈도우에서는 MyPictures\Corona Simulator" 디렉토리에 저장이 될 겁니다.)
저장된 파일은 png형식이고 이름은 Picture#.png이렇게 나갑니다.
10000개까지 가능합니다.


이 화면처럼 버튼을 누르면 화면을 캡쳐하도록 만들어 볼까요?
display.setStatusBar(display.HiddenStatusBar)
local background = display.newImage('background.png')
local captureButton = display.newImage('captureButton.png')

captureButton:setReferencePoint(display.CenterReferencePoint)
captureButton.x = display.contentWidth * 0.5
captureButton.y = display.contentHeight * 0.5

function captureButton:tap(e)
    local screenshot = display.captureScreen(true)
    -- Show Image in Photo Library
    media.show(media.PhotoLibrary)
end
captureButton:addEventListener("tap", captureButton)

이 소스처럼 button이미지에 리스너를 달아서 tap할 경우 display.captureScreen(true)를 하도록 하면 됩니다.
간단하죠?

샘플 파일은 아래에 있습니다.





반응형