SW정리: corona sdk 에서 tiled 사용하기 11

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

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

11 – Animated Characters (애니메이션된 캐릭터들)

Difficulty: Beginner

Duration: 30 minutes

Description:

This tutorial is an extension to the previous tutorial so if you haven’t done that one yet please do so now. In this tutorial we will see how easy it is to give our player some basic animations. This is not the only way this can be achieved, this is just the way I am showing here, if you have a better way please email me.

Step 1: Getting your map(맵가져오기)

We will be using the exact same map we created in the last tutorial, so go ahead and make of a copy of that project now as we need the code as well.

특별한 내용 없음

You can download the map here.

Step 2: Creating the animation assets (애니메이션 asset 생성 하기)

For the animations I have borrowed some fairly well knows ones I found on the internet, I think you’ll recognise them. However I am sad to see our little “guy.png” go, I’m sure he will come back later on.

You can download all the the animation tileset here.

You will need to add the tileset into Lime in the normal way. The tile width is "20" and the height is "30"

아래와 같은 이미지를 tileset에 로드해서 사용할 수 있다.

Step 3: Creating your player(플레이어 생성 하기)

The player creation will be a little different then before, rather than creating it via the use of an Object you will be doing it completely in Tiled so firstly remove your Player Object for the map.

Now add all the properties you had before – “IsPlayer” and the Physics properties that were added through code – directly to the first tile in the player tileset so that it looks like this:

타일셋에 IsPlayer 프로퍼티 넣고, 위치만 시키면 된니다.

Now place that tile somewhere on the map in the layer that you want the player to be in based on the Z-Depth.

You now need to go into your main.lua file and replace the Object listener function – onPlayerSpawnObject – with this property listener instead. All it does it store off a reference to your Player Sprite so that we can access it later.

그리고 기존 코드를 수정하여 아래와 같이 player를 만듭니다. onPlayerSpawnObject 부분 코드는 삭제합니다.

local onPlayerProperty = function(property, type, object)
    player = object.sprite
end
map:addPropertyListener("IsPlayer", onPlayerProperty)

With that now in you should be able to run your game and get your new player image moving around, naturally there are still no animations though.

The next step is to add a new JUMPING state like so:

local STATE_JUMPING = "Jumping"

And then make sure you set in in the jump function like the rest of the states:

player.state = STATE_JUMPING

Step 4: Creating the animation properties (애니메이션 프로퍼티 생성하기)

The animations properties are probably the trickiest part of this, not that hard themselves just a little fiddly. For this to work we need to set up animation sequences for each of our states, IDLE, WALKING and JUMPING. In a full game you would want lots more states as well as tween-states such as JUMP_LAUNCH, JUMP_IN_AIR and JUMP_LAND but we are trying to keep things simple here.

The following image shows the animation properties that you will need on your player tile. I have temporarily removed all the other properties that we set previously just to make the screenshot clearer but please remember that you do need those.

아래와 같이 설정하면 되나 아래 사진은 오래된거라 tmx파일에서 아래와 같이 나오도록 해야합니다.

As you can see I have the all important “IsAnimated” property as well as a “sequences” property listing (without spaces) our three animation sequences. For each sequence I have then set up a property with the various settings needed.

Step 5: Adding the code(코드 넣기)

The actual code to bring all this to life is really simple, all I have done is added the following two lines of code to the end of each of the main HUD event handlers:

핸들러에 "amin"+상태가 붙어서 => animIdle 이 되면 frame상태가 바뀌는 방식을 사용합니다. ".."은 string을 붙일때 사용합니다.

player:setSequence"anim" .. player.state)
player:play()

All this does is prepare the animation sequence based on the player state and then play it.

I’ve also added the following code to the first part of the if statement in the onCollision handler so that when the player hits the ground they revert back to the IDLE state.

if player.state == STATE_JUMPING then
    player.state = STATE_IDLE
    player:setSequence"anim" .. player.state)
    player:play()
end

And finally I added the following code right at the end of main.lua just to set the initial state:

player.state = STATE_IDLE
player:setSequence"anim" .. player.state)
player:play()

Step 6: Run your game (게임 실행하기)

If you run your game now your player be able to walk left and right as well as jump when you press the appropriate buttons. However he always faces the same direction, we can fix that now very easily. Simply place the following line of code in moveLeft and moveRight event handlers immediately after setting the players direction:

player.xScale = player.direction

This is a simple little trick to flip your sprite.

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") 이걸 이용하세요

9. PlayerSpawn 만들기 : object layer사용 tool을 이용하여 위치 설정 Type을 PlayerSpawn 프로퍼티 playerImage=? 추가 후 코드 추가 map:addObjectListener("PlayerSpawn", onObject)

10. 물리세계를 만들려면 object layer 에 객체를 추가한뒤 type Body로 하면됩니다. 프로퍼티 bodyType=static 추가

11. 물리세계 정보를 런타임에 디버깅 Map>>Map Properties : Physics:DrawMode=hybrid?debug?normal 선택함

12. 물리세계 원형으로 처리하려면 프로퍼티 radius=? 추가함

13. Jump동작을 넣으려면 Groud일때만 점프 되도록 코드 추가하고 map에 Ground처리 해야함 object layer에 넣으려면 Object Type Body, IsGround, BodyType=static 이 되도록 해주고, 타일에 넣어주려면 HasBody, IsGround, bodyType=static 이 되도록 해줍니다.

14. HUD 컨트롤러는 ui.newButton 버튼을 이용해서 만듭니다.

SW정리

2015년 6월 26일 금요일

corona sdk 에서 tiled 사용하기 11 – Animated Characters