HowFastAll

2D Game Framework (Engine) 만들기 – tutorial with SDL

5. SDL Animation

Tim Jones | January 29th, 2008 | 111 comments

The last tutorial we took our chance at making a Tic-Tac-Toe game. Hopefully most of you were successful in getting it to work. If not, don't fret, you'll get the hang of all of this eventually.

이전 학습에서 우리는 tic- tac - toe 게임 제작 기회를 가졌습니다. 대부분은 작업이 성공적으로 되었습니다. 그렇지 않다면, 걱정하지 마세요, 당신은 결국이 모든 익히게 될 것이다.

In this tutorial we are going to take our hand at SDL Animation. As before, we'll be building on top of the previous SDL lessons (but not including the Tic Tac Toe one). So lets get started.

이 학습에서 우리는 SDL 애니메이션에서 우리의 손을 잡고 갈 수 있습니다. 이전으로, 지난 SDL 강의 (하지만 Tic Tac Toe도 포함 않 하고) 위에 구축 할겁니다. 자 시작되었습니다.

We'll be creating a new class to handle Animation, and in the next tutorial we will create a class to handle Entities. Please keep in mind that these two things are separate,
and while I know they could be one class,
I don't wish to take that approach. So please hold back your criticism.

우리는 애니메이션을 처리하는 새 클래스를 만들 것이다, 그리고 다음 학습에서 우리는 Entity를 처리하는 클래스를 생성합니다. 명심하세요, 이 두 가지는 별도이며,
나는 그들이 하나의 클래스가 될 수 있는 것을 알지만,
난 그 (접근)방법을 사용하지 않길 원합니다. 그러니 비판을 참아 주시기 바랍니다.

Create two new files (I am sure you are seeing a pattern now, hopefully),
called CAnimation.h and CAnimation.cpp. Eventually, our CEntity class will inherit this class,
but for now we'll be testing through an object we create later.
And before we get started add the include directive within CApp.h (before #include "CEvent.h" is just fine).

 CAnimation.h 및 CAnimation.cpp라고 불리는, (잘하면 당신이 이제 패턴을 본다고 확신한다)
두 개의 새로운 파일 을 만듭니다. 결국, 우리 CEntity 클래스는 이 클래스를 상속된다,
지금 우리가 나중에 만들 개체를 통해 테스트됩니다.
그리고 우리가 CApp.h 내에 포함 지시문을 추가 시작하기 전에 ("CEvent.h"를 포함하기 전에 하면 잘됩니다.)

Now open up CAnimation.h and let’s start coding. Add the following basic class structure to your file.
지금 CAnimation.h를 열고 시작 코딩 수 있습니다. 파일에 다음 기본 클래스 구조를 추가합니다.

Now, open up CAnimation.cpp and add this code:

이제 CAnimation.cpp을 열고 다음 코드를 추가합니다

Some explanation on what this class is all about now.
There is one basic element of animation that
we need to handle, that is the current frame of the animation.

이 클래스는 현재에 대한 모든 내용에 대한 일부 설명입니다.
애니메이션 중 하나가 기본 요소가 있다,
우리가 처리하는 것이 필요한, 그것은 애니메이션의 현재 프레임입니다.

Take the Yoshi image below for example (we'll be using him in this tutorial).
You'll notice (that ?) we have 8 frames of Yoshi on one image.
Each frame would then be labeled 0, 1, 2 from Top to Bottom.
예제를 위해 아래 요시 이미지를 받아라 (우리는 이 튜토리얼에서 그것을 사용됩니다.)
당신이 알 수 있듯이 우리는 하나의 이미지에 요시의 8 프레임이 있다.
각 프레임은 이제 위로부터 아래로 0, 1, 2로 명명 될 것이다.

Remember the second tutorial where we create a function to draw part of an image?
Well, if we take that function in conjunction with the frame of the animation, voila!
기억하나? /두 번째 학습/ 어디서 /우리가 함수를 만들다 /이미지의 일부를 그리는
음,/  그 기능을 맡게 된다면 / 애니메이션의 프레임으로 연결하여!/ 짜잔

So the first variable I want you to see is CurrentFrame.
This is the current frame of the animation that we are going to draw on the screen.
Whatever value it has, will determine what part of the surface we will draw to the screen.

그래서/ 첫변수 /내가 보고 싶은 것은 /CurrentFrame이다.

이것은 /우리가 화면에 그릴 려고 하는 것은/ 애니메이션의 현재 프레임입니다.

그것이 어떤 값을 가지던/, 우리가 화면에 그리기 위해/ 표면의 어떤 부분인지를 결정해야 한다.

So, when we call our draw function, we would do something like this :

그래서, 우리가 그리기 함수를 호출했을 때, /우리는 이 같은 것을 해야 한다

Since our Yoshi is really 64 x 64 pixels, that's the width and height we will grab,
and is also how we grab the frame.

우리의 요시는 64 X 64 픽셀 이다,/ 즉 우리가 알아내야 하는 것은 너비와 높이이다.

그리고 우리가 프레임을 잡아 방법이다..

Look at the image below for an illustration.

그림은 보세요 / 아래 삽화를

CurrentFrame(0), (0, 0) / CurrentFrame(1), (0, 64) / CurrentFrame(2), (0, 128)

When the CurrentFrame increases by 1, we jump down 64 pixels (the height of Yoshi's frame),

and draw that frame.
1씩 현재 프레임 증가하면, 우리는 64 픽셀 (요시의 프레임의 높이), 아래로 건너뛰어(뛰어 내려서)

그 프레임을 그립니다.

The other part of this class is that we need to know how many frames this animation is,
thus the MaxFrames.
The last vital part to know is how many frames per second, or rather,
how fast this animation is going to display.
In order to determine that we find use this bit of code found in the OnAnimate function.

이 클래스의 다른 부분은 우리가 이 애니메이션 얼마나 많은 프레임인지를 알아야 한다,
그것이 MaxFrames.
알아야 하는 마지막으로 중요한 부분은 초당 얼마나 많은 프레임 , 또는,
얼마나 빠르게 이 애니메이션이 표시되는지 이다.
우리가 OnAnimate 함수에서 발견된 코드의  조각을 사용하여 찾는 것은 결정하기 위해서다.

By taking the Old Time in milliseconds plus the desired frame rate,
we can check it against how long the SDL has been running.
So, for example, we just started our program.
 
밀리 초로 오래된 시간 더해서 원하는 프레임 속도를 얻어서,
우리는 SDL이 얼마나 오랫동안 실행되는지에 대해 그것을 확인 하 실 수 있습니다.
그래서, 예를 들어, 우리는 우리의 프로그램을 시작했다.

SDL_GetTicks is 0, and OldTime is 0. Our desired frame rate is 1 frame per second.
So FrameRate = 1000 (milliseconds). So, is 0 + 1000 greater than 0?
No, thus we will skip over the function and wait.

SDL_GetTicks은 0이며, OldTime은 0입니다. 우리의 원하는 프레임 속도는 초당 1 프레임입니다.
그럼 프레임 속도 = 1000 (밀리 초). 그래서, 0 + 1000 이 0보다 크냐?
아니요, 따라서 우리는 이 함수를 통해 생략하고 기다릴 것입니다.

But once 0 + 1000 is less than SDL_GetTicks, that must mean 1 second has passed.
So we increment the frame, and then reset OldTime to the current time, and start over.

하지만 일단 0 + 1000이 SDL_GetTicks보다 작다는 것은 일초가 경과했다는 것을 의미합니다.
그래서 우리는 프레임을 증가시키고, 다음 OldTime를 현재 시간으로 재설정하고 다시 시작한다.

The next interesting tid bit is Oscillate and FrameInc.
Not that I wanted to confuse anyone by adding this,
but I feel it's necessary for certain things later on.

다음으로 흥미롭게 TID 비트가 진동하고 FrameInc입니다.
이것을 추가하여 사람을 혼란스럽게 하려고 하지 않는다,
그것이 나중에 특정 것을 위해 필요하다고 느낀다.

Basically, when the Oscillate flag is true, the animation will increase frames, and then decrease frames.
If we had an animation with 10 frames, it would do something like this:

기본적으로, 진동 값이 설정 되었으면, 애니메이션 프레임을 증가하고,그런 다음 프레임을 줄입니다.
우리가 10 프레임이 있는 애니메이션이 있다면, 그것은 이렇게 할 것입니다 :

0 1 2 3 4 5 6 7 8 9 8 7 6 5 4 3 2 1 2 ...

You see, it goes up to 9, and then decreases back down to 0, and so on.
There are some interesting uses for this, but we'll get into that in other lessons.

당신이 보는 것은, 9까지 올라간 후 아래 0으로 다시 줄어 든다, 기타 등등.

이것을 사용하는 것은 몇 가지 흥미로운 것이지만, 우리는 다른 수업에 들어 갑니다.

So how does this work? Take a look at the OnAnimate function.

어떻게 이것이 작동합니까? OnAnimate 함수를 한 번 보세요.

Bug Fix: There was an error with placing CurrentFrame += FrameInc;
after the if statement, it should have been placed before the if statement.
What would happen is if the animation had MaxFrames = 0,
it would still increase the CurrentFrame to 1.
Thanks Alexander Mangel for helping find this bug!

버그 수정 : CurrentFrame + = FrameInc 배치와 함께 오류가 발생했습니다,
if 문 뒤에, 그것은 if 문 앞에 위치하고 있어야 합니다.
어떤 일이 발생하는 것은, 애니메이션이 MaxFrames = 0을 갖게 되면,
여전히 1까지 Current Frame를 증가할 수 있다.
알렉산더 망겔에게 버그를 찾을 수 있도록 도와 주셔서 감사한다!

We already know what the OldTime and such do, but what about the rest?
For now, look at the else statement of the Oscillate if statement.
You'll notice we're simply checking if the CurrentFrame has exceeded the Max Frames.
If it has, reset back to 0.
Pretty simple. Then below that, outside of the block, we increase to the next frame.
우리는 이미 Old Time와 같은 일을 알아요, 하지만 나머지는 어때?
지금, if문장의 진동의 다른 문장보세요.
당신은 Current Frame는 최대 프레임을 초과 있다면 우리가 간단하게 확인하고 알 수 있습니다.
그것이 있다면, 다시 0으로 다시 설정합니다.
아주 간단. 그런 다음, 아래 블록의 외부, 우리는 다음 프레임으로 증가한다.

Now, the more confusing part is the Oscillate if statement.
This is where the FrameInc variable comes in.
Basically, the FrameInc is set to 1 or -1, depending on how we are increasing or decreasing the frames.
Remember, Oscillating causes the frames to go from 0 to 9 back to 0.
So if the FrameInc is greater than 0, we are increasing the frames, otherwise we are decreasing frames.
The innermost if statements basically inverse the FrameInc if we reached the end of 0, or MaxFrames.
이제 더 혼란 부분은 if문장 진동입니다.
이것은 FrameInc 변수는 기본적으로 들어오면
어디 FrameInc가 우리가 증가하거나 프레임을 감소하는 방법에 따라 1 또는 -1로 설정됩니다.
기억할것은, 진동설정는 0에서 9 다시 0로 이동 프레임을 발생합니다.
FrameInc가 0보다 크면, 우리는 프레임을 증가하고, 그렇지 않으면 프레임을 감소한다.
우리가 0의 끝에,, 또는 MaxFrames에 도달하면 FrameInc을 문장은 기본적 뒤집는다.

Now that that is all taken care of, let’s put this class into action.

이제 그 모든 것을 다루기 위해, 움직임에 이 클래스를 넣는다.

Create a new CAnimation object within CApp.h:

CApp.h 내에 새 CAnimation 개체를 만듭니다 :

Now, let’s set the MaxFrames, add this to CApp_OnInit:

이제 MaxFrames를 설정할 수 있습니다, ​​CApp_OnInit에 추가 :

If you want to see your animation Oscillate, set this:

당신이 애니메이션 진동보고 싶다면, 이것을 설정

Okay, now to make our animation loop, add this to CApp_OnLoop:

자, 이제 애니메이션 루프를 만들기 위해, CApp_OnLoop에 추가 :

Now, the last thing, to make it actually animate; add this to CApp_OnRender:

이제, 마지막으로 ,실제로 애니메이션 만들기 위해 ; CApp_OnRender에 이것을 추가해라 :

Now try compiling, and watch your Yoshi workout!

Make sure you replace the myimage.bmp with the Yoshi image.

이제 컴파일하려고, 그리고 요시의 운동을 조심하세요!
당신이 요시 이미지로 myimage.bmp을 교체했는지 확인하십시오.