2015년 6월 20일 토요일

corona sdk 에서 tiled 사용하기 05 – Adding Life Through Animation



https://github.com/anthonymoralez/lime-tutorials/tree/master/tutorial-05

NOTE: This tutorial is copied from the original at OutlawGameTools.com

05 – Adding Life Through Animation (애니메이션을 통해서 생명 넣기)

Difficulty: Beginner
Duration: 15 minutes
Description:
Currently Lime has two ways of supporting animated tiles, the first is very simple using frame based animations and the second method is still very simple but requires a little more work from the developer to get working, but because of this you get more control and flexibility.
By the end of this tutorial you will be able to use both methods in your maps.

Step 1: Creating your properties (프로퍼티 생성)

To have a simple animated tile you only need to add two properties, the first – IsAnimated – will simply tell Lime that this tile should be animated and the second – frameCount – tells it how many tiles to include.
You can also adjust the loopCount and startFrame if you want to.
간단하게 애니메이션 시키려면 아래와 같이 2개의 속성을 넣으면 됩니다.
Animation Properties
For my map I have once again decided to use the little red brick but you could of course use any other tiles in any tileset.
여기서는 지난번에 사용한 빨간색 벽돌을 사용했는데, 그건 당신만의 다른것을 사용해도 됩니다. 지난시간에 타일셋을 저장했기 때분에 import해주고 작성하면 됩니다.
frameTime 항목을 사용하면 에러가 발생하여 아래와 같이 수정하였습니
local sequenceData = {
name="animation1",
start=self.startFrame,
count=(self.frameCount or (tileSet.tileCount - self.startFrame)),
loopCount=self.loopCount,
-- time add
time=(self.frameTime or 1000)
-- time end
}
self.sprite = display.newSprite(tileSet.imageSheet, sequenceData)
-- If the tile has a "frameTime" then create a single sequence allowing it to be time based, otherwise it will just be frame based.
--if self.frameTime then
-- sprite.add( self.spriteSet, "DEFAULT", 1, self.frameCount, self.frameTime or 1000, self.loopCount)
-- self.sprite:setSequence("DEFAULT")
--end

Step 2: Adding your tile (타일을 넣기)

Now that you have created the properties for your first animated tile you just need to add the tile to a layer just like any other.
프로퍼티를 추가했으면 해당타일이 맵에 나오도록 합니다.
Tile In Map

Step 3: Run your game (게임을 실행시키세요)

With the animation running in your game you will notice that it is very fast, that is because currently it is frame based rather than time based, but for simple animations this might still be useful. The next section will explain time based animations.
실행시키면 애니메이션이 빨리도는데 frame count 만큼 다음 이미지를 표시하게 됩니다.
시간 기준 애니메이션은 다음에 하도록 하겠습니다.
Animated Map

Step 4: More advanced usage (더 진보된 사용법)

Currently you are stuck with your tile only having one possible animation, wouldn’t it be great if you could use Corona animation sequences with them? Yea I thought so too so here you go.
앞에서는 한가지 애니메이션만 되는 단순한 방법이었습니다.
다음은 코로나 애니메이션 sequences를 이용하는 방법입니다.
To use sequences you need a couple more properties set on your tile, you can also remove the frameCount property as it is no longer needed.

First off you will need to create a sequences property which will list all the animation sequences this tile should have. They should be seperated with a comma and contain no whitespace.
For each sequence listed you will need to create a property with the same name. As you can see in the following image I have created two sequences, each sequence can have a number of properties specified such as frameCount=3 and time=1000, please note the use of commas again as well as equals signs and also no whitespace.

secuences를 사용하기 위해서 기존에 있던 frameCount를 제거하고 아래와 이미지와 같이 입력합니다. 주의할껀 아래와 같이 꼭 맞춰서 써야합니다. 공백없이 ","로 구분자를 해서 사용합니다.
More Properties
If you run your game now you will notice something, your animation no longer plays. That is because you must tell Lime to play your animations, giving you more control over them.
이렇게해서 실행하면 화면에 아무 동작도 안됩니다. 아래 작업을 더해야 합니다.

Step 5: Dealing with the new animations (새로운 애니메이션을 가지고 다루기)

Now that you have your sequences set up you are ready to test them in game and just like the Properties tutorial we now need to get access to our animated tiles. Then after we have it we can prepare the animation and start playing it.
-- We first need to get access to the layer our tile is on, the name is specified in Tiled
local layer = map:getTileLayer("Tile Layer 1")

-- Make sure we actually have a layer
if(layer) then
    -- Get all the tiles on this layer
    local tiles = layer.tiles
    -- Loop through our tiles
    for i=1, #tiles, 1 do
        -- Check if the tile is animated (note the capitalization)
        if(tiles[i].IsAnimated) then
            -- Store off a copy of the tile
            local tile = tiles[i]
            -- Check if the tile has a property named "animation1"
            if(tile.animation1) then
                -- Prepare it through the sprite
                tile.sprite:prepare("animation1")
                -- Now finally play it
                tile.sprite:play()
            end
        end
    end
end
위와 같이 하면 동작이 안됩니다. 함수가 바뀐거 같습니다.
tile.sprite:prepare("animation1")=> tile.sprite:setSequence("animation1")
그리고 Step4에서 프로퍼티와 값을 "animation1","animation2" 값을 "frameCount=3,time=3000" 이런식으로 입력하였습니다. 문서가 오래된건지 현재 코로나 버전(v2015.2646)에서는 아래 참조와 같이 해야합니다.
https://docs.coronalabs.com/guide/media/spriteAnimation/index.html
따라서 start=1,count=8,time=800 이런값들로 넣어야 합니다.
즉 맵파일 tmx을 editer로 열었을때 이런형태로 들어가야 합니다.
<property name="animation1" value="start=2,count=8,time=1000"/>


Resources:
Completed Project: git clone https://github.com/anthonymoralez/lime-tutorials


꼭 알아두세요.
1. lime은 프로젝트 최상위 폴더에 lime폴더 통째로 복사해서 넣습니다.
2. Layer는 높은쪽이 위쪽 레이어입니다.
3. Tiled에서 tileset의 프로퍼티는 이름과 값으로 구성됩니다.
4. 화면에 보이게한뒤 물리 설정을 해야합니다. local visual = lime.createVisual(map) => local physical = lime.buildPhysical(map)
5. 타일셋에 물리 객체는 HasBody로 합니다.
6. 타일셋 import/export로 현재 저장된 프로퍼티를 다른 맵파일(tmx)과 쉽게 공유할 수 있습니다.
7. 타일을 간단하게 애니메이션 시키는 방법,IsAnimated, frameCount=?,frameTime 이 있지만 오류 발생합니다. 사용 하려면 코드 수정해야 합니다.
8. 타일 에니메이션 또다른 방법은 IsAnimated tile.sprite:setSequence("animation1") 이걸 이용하세요


댓글 없음:

댓글 쓰기