12's 디굴 라이프

In this guide, you will learn how to set up scrolling images using the Scroller Object. This object is useful for creating automatically backgrounds, images that move only when your player might move, simple special effects like ocean waves and generally breathe some life into your scene. The following topics are covered in this tutorial:

이번 가이드는, Scroller Object 를 사용하여 이미지를 스크롤링 하는 방법을 배우게 될 것입니다. 이 오브젝트는 백그라운드를 자동적으로 생성하는데 유용하며, 당신의 플레이어가 움직일때만 이미지가 움직이거나, 파도나 당신의 신에 생기를 불어넣어 주는게 간단하고 특별한 이펙트로 가능합니다. 다음과 같은 내용이 튜토리얼에 나와 있습니다.

Importing images (.jpg or .png)

ImageMaps

Using the Image Builder

Scroller Objects

Basic scene editing

Level Datablocks editor

Testing

To get started, run the editor and click on the "Create a new ImageMap" button. Navigate to the directory containing the scroller art you want to use. The most effective scrollers use an image format containing an alpha channel, like a .png. However, .jpg files are supported as well:

시작은, 에디터를 시작하고 “Create a new ImageMap” 버튼을 클릭합니다. 사용하려는 scroller art 가 있는 디렉토리로 이동합니다. 가장 효과적인 scroller 는 png 같은 알파 채널을 포함하는 이미지 형식을 사용합니다. 그러나 jpg 파일도 지원 합니다.

(click to enlarge)

Anytime you add a new image to your project you should open the new imageMap in the Image Builder to turn off Filter Mode and disable the Filter Pad option. Without doing this, there is a good chance your scrollers will contain huge white blocks to pad the extents size. It is also important to note that you cannot use CELL mode for scrollers:

언제든지 당신은 새로운 이미지를 프로젝트에 추가시 필터 모드를 해체 하고 필터 패드 옵션을 비활성화 시킨 상태로 새 imageMap 을 만들어야 합니다. 이렇게 하지 않으면, 당신의 스크롤러에는 보기 좋게 거대한 하얀색 블록의 패드가 확장되어 있을겁니다. 당신이 Scroller 에서 CELL 모드를 사용할 수 없는거 또한 중요합니다.

(click to enlarge)

Your Static Sprites section should now contain the new imageMaps. Do not forget to open the Edit Level Datablocks dialog and add your new ImageMap to the scene. Now that you have the image, you can create a scroller in the scene.

당신의 static sprite 영역은 이제 새로운 imagemap을 포함 합니다. Level Datablocks 박스를 열고 새로운 Imagemap 을 씬에 추가하는걸 잊지 마세요.  이제 당신의 이미지는, 씬에 Scroller 로 만들 수 있습니다.

(click to enlarge)

Typically, a scroller object is used to represent a level in motion, such as a moving backdrop or clouds moving in a sky. Rather than adding a static or animated sprite to the scene, you will add the object from the Scrollers section of the Create tab. You will notice that every static sprite (non-animated) is added to the list of available scrollers. If you hover the mouse over each, it will be very obvious which were created with seamless scrolling in mind:

일반적으로, scroller 오브젝트는 움직임의 레벨을 나타내는데 사용되며, 움직이는 배경이나 하늘에 움직이는 구름이 여기에 해당합니다. 씬 에 Static 또는 Animated Sprite 오브젝트를 추가하는 것보단, Create tab 의 scroller 영역으로부터 오브젝트를 추가 해야 합니다. 당신은 모든 static sprite (애니메이션이 없는) 는 scroller 로 추가 하는 게 가능한걸 알아야 합니다. 각각 마우스를 위에 올리면, 생각했던 대로 스크롤 되고 있을 거라 생각합니다.

Locate the preview representing your scroller, then drag it to your scene. Without modifying the default settings, the new object will look and act like any static image.

당신의 scroller 를 미리보기 에서 찾은 후, 씬 에 드래그 합니다. 기본 설정에서 수정 없이, static 이미지 처럼 새로운 오브젝트가 표시 됩니다.

(click to enlarge)

For this example, an isolated static image in the middle of the scene is not ideal. Like any other sprite, you can stretch the scroller box until it covers the camera (plus a little more):

이 예제의 경우, 씬에 한 가운데 고립된 static 이미지는 적합하지 않습니다. 다른 sprite 와 마찬가지로, 카메라 영역까지 scroller 박스를 늘리는게 가능합니다(조금 더 추가).

(click to enlarge)

When multiple scroller objects are layered onto each other, the level will take on a sense of depth. Scrollers in the background will move slower, contain less detail and typically look more expansive. Scrollers in the foreground will move faster and look crisper:

여러 scroller 오브젝트가 레이어에 각각 서로 곂쳐 있을 때 깊이의 감각에 걸립니다. 배경에 Scroller 는 느린 이동으로, 적은 세부사항을 포함하고 일반적으로 더 광대해 보입니다.

(click to enlarge)

Currently, the images are not actually scrolling. Activating the scrolling effect is as simple as modifying a single field. You will find the scroller specific settings at the very top of the Edit tab. Nothing complex is needed to simulate motion. The stock field values and their descriptions are shown below:

현재, 이미지는 실제로 scorolling 되지 않습니다. scroll 효과를 활성화 하는 것은 하나의 필드를 수정 하기만 하면 됩니다. 당신은 Edit tab 에 가장 위에 있는 scroller 특성 설정을 찾을 수 있습니다. 복잡한 경우에는 simulate motion 이 필요합니다. Stock 필드 값과 설명은 다음과 같습니다.           

 

Image Map - The imageMap sprite used for scrolling.
scrolling 하기 위한 imageMap sprite.

Use SourceRect - Toggles source rectangle functionality. Source rectangles are used to isolate a section of a single image and render only that. If your image represents a single sprite, you probably do not need to use this. If you have multiple scroller images in a single file, you will use this to split them apart. This is mainly an optimization.
소스 사각형 기능으로 전환합니다. 소스 사각형은 단일 이미지 부분을 처리하고 그것을 렌더링 하는데 사용됩니다. 이미지가 하나의 sprite 를 대표하는 경우, 당신은 아마 이것을 사용하지 않아도 됩니다. 하나의 파일에 여러 scroller 이미지를 가지고 있다면 그들을 분리 분할 해야 합니다. 이것은 주로 최적화에 이용됩니다.

Source Rect - Coordinates and dimensions of the source rectangle within an image.
좌표와 이미지 내에서 소스 사각형 크기

Repeat - Controls how many times an image is rendered in a single scroll box
이미지를 하나의 scroll 상자에 몇번 이나 표시할지 설정 합니다.

X - Represents the horizontal repetition
    가로로 반복 제공하는 횟수

Y - Represents the vertical repetition
    세로로 반복 제공하는 횟수

Scroll Speed - Controls how fast the image will automatically scroll
이미지가 얼마나 빠르게 자동으로 scroll 할지 설정합니다.

X - Side to side scrolling speed. Positive value will scroll right to left, negative will scroll left to right
사이드에서 사이드로 scrolling 합니다. + 값일 경우 오른쪽에서 왼쪽으로, - 값일 경우 왼쪽에서 오른쪽으로 이동합니다.

Y - Vertical scrolling speed. Positive value will scroll bottom to top, negative will scroll top to bottom
세로로 scrolling 합니다. + 값일 경우 아래에서 위로, - 값일 경우 위에서 아래로 이동합니다.

Scroll Position - Sets the position of the texture on the object
오브젝트의 텍스처의 위치를 설정합니다.

X - The horizontal position of the texture
텍스처의 가로 위치

Y - The vertical position of the texture
텍스처의 세로 위치

The order in which you toggle multiple scroller layers is up to you. In the following example, the layer furthest from the camera is modified first. When Scroll Speed X is set to 25, the image will begin scrolling from right to left at 25 units per update:

여러 개의 scroller 레이어를 전환하는 순서는 당신에게 달려 있습니다. 다음 예제에서는 카메라에서 레이어가 멀리 있을수록 먼저 수정 됩니다. Scroll x 스피드가 25일 때, 이미지는 오른쪽에서 왼쪽으로 업데이트당 25 유닛씩 이동 합니다.

(click to enlarge)

In real life, objects closer to you will always scroll faster. The same effect should be applied to an iTorque 2D game. In this example, the closer object's Scroll speed X is set to 40. Again, the results are immediately shown.

현실에서, 당신에게 가까운 오브젝트는 항상 빠르게 scroll 합니다. 도일한 효과를 iTorque2d  게임에 적용시켜야 합니다. 이 예제에서는 근처에 있는 scroll x speed의 값을 40으로 설정합니다. 다시 말하지만, 결과는 즉시 표시 됩니다.

(click to enlarge)

This example only uses horizontal scrolling, but the same process can be applied to vertical scrolling images or combined axis. If you run the game, you will be presented with your final scrolling scene:

이 예제에서는 수평 scroll 을 사용하지만 같은 방식으로 수직 scroll 이미지 또는 결합 축에 적용 할 수 있습니다. 게임을 실행 하면, 당신은 씬에 최종적으로 scrolling 하여 나타납니다.

(click to enlarge)

(click to enlarge)

(click to enlarge)

In addition to the scrolling speed, two important properties you should experiment with are the Repeat X andRepeat Y. These two fields control how many times an image is rendered inside of the scroller's boundaries. Both fields are located in the Repeat section:

scrolling 스피드에 추가적으로, 당신이 실험해야 할 두 가지 중요한 속성은 Repeat X 와 Repeat Y 입니다. 이 두 필드는 이미지가 scroller 의 경계의 안쪽에 렌더링 되어 몇번 이나 제어 할 수 있습니다. 두 필드는 반복 세션에 있습니다.

The default values for these fields are 1. This results in your image repeating a single time horizontally and vertically. This is a one to one comparison with the default imageMap used to create the scroller object:

이러한 필드에 대한 기본값은 1 입니다. 결과적으로 당신의 이미지는 단일 시간 동안 수평과 수직으로 반복합니다. 이것은 imageMap 은 scroller 오브젝트를 만드는데 사용되는 기본과 1:1 비교 입니다.

(click to enlarge)

When you start changing these values, you will affect how many times that image is shown in the box while scrolling. Only change the values that would actually make sense according to your art and scroll rate. For example, the image below is only intended to scroll left and right. Thus, only the Repeat X value should be modified to increase or decrease the repeat pattern:

당신이 시작과 동시에 값을 바꾸게 되면,  박스에 스크롤 하는동안 몇번에 걸쳐 보여지게 될 것입니다. 오로지 이 값을 바꿈으로써 실제로 당신의 아트와 스크롤 속도를 감각에 따라 바꿀 수 있습니다. 예를 들어, 아래에 있는 이미지는 오로지 왼쪽과 오른쪽 으로만 스크롤 합니다. 그러므로, 오로지 Repeat X 값은 repeat 패턴을 증가 또는 감소 하는 변화를 줍니다.

Repeat X is 4

(click to enlarge)

Changing the Repeat Y setting will result in undesirable effects. Again, the following example should only scroll horizontally. The art was not set up to handle vertical scrolling, so increasing the Repeat Y will result in a weird stacking render:

Repeat Y 값을 변경하면 원치 않는 효과가 나타나게 됩니다. 다시 말해,  다음 예제는 오로지 수평으로 스크롤 됩니다. 현재 아트는 수직 스크롤을 처리하도록 설정되지 않았으며, Repeat Y 값을 증가하게 되면 이상한 렌더링이 보이게 됩니다.

Repeat Y is 2

(click to enlarge)

Changing a repeat pattern is most commonly used for fixing a stretched scroller object. The scroller images shown in this tutorial have a resolution of 512x128. When the scroller is added to the scene, it retains those values. In the following screenshot, a scroller has been stretched to 2048 width.

반복 패턴을 변경하는 것은 가장 일반적으로 늘어진 scroller 개체를 고정하는데 사용됩니다. 이 튜토리얼에 보여지는 scroller 이미지는 512*128 의 해상도로 되어 있습니다. scroller 를 씬에 추가하면, 값을 유지하게 될 것입니다. 다음 스크린샷은, scroller 의 너비를 2048 로 늘였습니다.


(click to enlarge)

To fix this problem, just perform some simple math. 2048 is four times larger than 512, so logically you can change the Repeat X scroller property to fix the stretching. This way, you can use the large object scale and retain the original resolution:

이 문제를 해결하기 위해, 간단한 수학을 필요로 합니다. 2048 은 512 에 비해 4배 긴 시간으로, 로직적으로 Repeat X 프로퍼티를 바꿈으로써 늘어지는 현상을 해결 할 수 있습니다. 이런 방법으로, 큰 개체 규모를 사용하여 원본 해상도를 유지 할 수 있습니다.

(click to enlarge)

 This concludes the introduction to scrolling in iTorque 2D. The scroller object is multi-purpose and extremely flexible. You can even modify scrolling properties from script, giving you even greater control of your levels at runtime.

이것으로 iTorque2D 의 스크롤에 대한 소개를 마칩니다. 스크롤러 오브젝트는 다목적으로 사용되며 매우 융통성  있습니다. 스크립트로 스크롤 프로퍼티 수정이 가능하며, 런타임에서 보다 더 쉽게 제어가 가능합니다.