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

In this tutorial, you will be shown how to enable collision and set up responses using iTorque 2D. Whenever you need two or more objects to collide with each other and react in an appropriate manner, you will need to use the information in this guide. This can range from stopping a moving object, bouncing objects off of each other and creating custom functions based on collision types. The following topics are covered in this tutorial:

이번 튜토리얼 에서는, 충돌처리를 어떻게 활성화 하는지 그리고 iTorque2D 를 사용하여 반응처리를 어떻게 셋업 하는지 보게 됩니다. 서로 충돌하고 적절한 방식으로 반응하는 두 개 이상의 개체를 필요로 할 때, 이번 가이드의 정보가 필요 할 것입니다. 이것은 움직이는 오브젝트가 멈추는 과정까지 다양하며, 각각의 개체가 반응하는 부분과, 충돌 타입에 따라 사용자 정의 함수를 만듭니다. 다음과 같은 내용이 튜토리얼에 나와 있습니다.

Basic scene editing

Collision

Scripting

Callbacks

Collision Editor

iTorque 2D uses a proprietary physics and collision system. While not as feature rich as Box2D, it can still support your game's collision needs. You can get basic box to box collision running with only a couple mouse clicks.

iTorque2D 는 자체적인 물리와 충돌 시스템을 사용합니다. Box2D 같은 풍부한 기능은 없지만, 여전히 당신의 게임에 필요로 하는 충돌은 제공합니다. 당신은 단지 몇 번의 마우스 클릭으로 기본적인 박스에 충돌 기능을 얻을 수 있습니다.

Enabling Collision

By default, collision is disabled for a new object when you add it to a scene. This is an optimization, since not every sprite in your scene needs collision (like a backdrop). To enable collision, start by clicking on the an object in the scene. Switch to the Edit tab, then scroll down to the Collision rollout. Click the top to check boxes to enable Send Collision and Receive Collision:

기본적으로, 충돌은 새로운 오브젝트를 당신의 씬에 추가 할 때 비활성화 되어 있습니다. 이건 최적화를 위한 것으로, 모든 Sprite 들이 당신의 씬에서 충돌을 필요로 하지 않기 때문입니다(배경 같은). 충돌을 활성화 시키면, 씬에 있는 오브젝트를 클릭하여 시작합니다. Edit tab 으로 전환하고, Collision 쪽으로 스크롤을 내립니다. 위에 있는 Send Collision 과 Receive Collision 을 체크 합니다.

Collision Properties

With the exception of scripting, you will control the functionality of your object's collision via the Collision rollout. The full set of properties are shown below:

스크립트를 제외하고, 충돌 롤아웃을 통해 개체의 충돌 기능을 제어합니다. 특성의 전체 집합은 다음과 같습니다.

(click to enlarge)

Send Collision: When toggled, this will tell other object's it has collided with them.
활성화 하면, 이 오브젝트는 다른 개체에 충돌을 전할 겁니다.

Receive Collision: When toggle, this object will receive notification of collision with other objects.
활성화 하면, 이 오브젝트는 다른 개체와 충돌의 통지를 받게 될겁니다.

Send Physics: Determines whether the object's default physics response will be used when it is sending the collision.
충돌을 하게 될 때 기본적인 물리 처리를 사용 할지 여부를 결정합니다.

Receive Physics: Determines whether or not the object's default physics response will be used when it is receiving the collision.
충돌을 받게 될 때 기본적인 물리 처리를 사용 할지 여부를 결정 합니다.

Callback: When enabled, a script callback named onCollision will be triggered when this object collides with another.
활성화 하면, 이 오브젝트가 다른 것과 물리 이벤트를 발생 시킬 때(충돌?) onCollision 에 있는 스크립트 이름을 callback 하게 합니다.

§  Detection Mode: Changes the algorithm used for collision detection
충돌 검출 방식의 알고리즘을 변경 합니다.

 Full: Swept circle combined with polygon detection. The circle is generated dynamically based on the original bounding box size
Swepth circle 은 폴리곤 검사와 함께 합니다. 원형(circle) 은 기본적으로 박스 사이즈 기반으로 동적 생성됩니다.

 Circle: Swept circle only
Swept circle 만 사용합니다.

 Polygon: Polygon detection (can be modified by Collision Editor)
폴리곤 검출(Collision Editor 를 통해 수정이 가능합니다)

Custom: Allows for custom collision calculation. Currently this does nothing, but you can implement your code in the he blank function found in t2dSceneObject.cc. This function is namedt2dSceneObject::onCustomCollisionDetection
사용자 정의 충돌 검사가 가능합니다. 현재는 쓰이지 않고 있으나, t2dSceneObject.cc 에 있는 빈 함수에 코드를 구현 할 수 있습니다.
이 함수는 namedt2dSceneObject::onCustomCollisionDetection 입니다.

Circle Scale: Controls the size of the collision circle when using the Full and Circle detection modes.
Full 또는 Cicle detection 모드를 사용시 원형 충볼 범위 사이즈를 조절 합니다

Superscribe Ellipse: When enabled, the circle used in FULL mode collision will automatically scale to a size that covers the entire polygon at each point.
활성화 하면, FULL 모드 충돌에 사용되는 동그라미는 자동으로 각 지점에서 전체 다각형을 커버하는 크기로 확장이 됩니다.

Collision Response: Contains a set of default behaviors an object will perform when collision occurs.
충돌이 발생하면 객체가 수행의 기본 동작 세트를 포함 합니다.

BOUNCE: A simple, pong-style bouncing effect. The colliding object will reverse its velocity in both the X and Y, essentially going in reverse in both directions.
단순하게, 퐁(탁구?) 스타일의 튀는 효과입니다. 충돌하는 개체는 본질적으로 x와 y 방향을 반대로 가게 됩니다.

CLAMP: The colliding object slides along the surface it hits.
충돌하는 물체는 히트 표면을 따라 미끄러져(slide) 갈것입니다.

STICKY: The colliding object will stop completely.
충돌하는 물체는 완전히 멈춥니다.

KILL: The colliding object will be deleted immediately.
충돌하는 물체는 즉시 삭제 됩니다.

RIGID: The colliding object will react using built-in rigid body physics.
충돌하는 물체는 rigid body 물리의 기본을 사용하여 반응합니다.

§  Collision Layers: Controls which layers this object will collide with. By default, an object collides with all layers. If layer 0 is turned off, this object will not collide with any objects in that layer.
이 객체와 충돌하는 레이어를 제어 합니다. 기본적으로, 오브젝트는 모든 레이어에 충돌이 됩니다. 만약 레이어 0 을 끄게 되면, 이 오브젝트는 해당 레이어의 모든 오브젝트들과 충돌하지 않습니다.

Collision Groups: Similar to Collision Layers, except this is a manual organization of collision not reliant on any scene properties (like layers). This can work in conjunction with Collision Layers. For example, you can disable collision with everything except objects that exist on layer 3, layer 4 and are only in group 2. This becomes very important when you have many types of objects on screen moving at once.
충돌 레이어와 유사하나, 이것은 모든 씬 특성에 의존하지 않는 수동 모음으로 제외 됩니다. 이것은 충돌 레이어와 함께 작업 할 수 있습니다. 예를 들어, 당신은 레이어3, 4 존재에만 그룹2 에 있는 개체를 제외한 모든 충돌을 비활성화 할 수 있습니다. 스크린상에 움직이는 오브젝트들의 제어를 한번에 많이 하려 할 때 매우 중요한 부분으로 작용 할 것입니다.

In addition to the basic collision properties described previously, you can extend your object's collision functionality using the Collision Editor, messages and script callbacks.

추가적으로 기본 충돌 프로퍼티를 설명하자면, Collision Editor 의 메세지 및 스크립트 콜백을 사용하여 개체의 충돌 기능을 확장 할 수 있습니다.

Collision Editor

When you have an object selected in the scene, it is outlined by a box. This is called the bounding box, which is used as the object's default collision shape. Not every sprite you add to your scene actually uses that entire space. Many sprites you will be adding likely have abnormal shapes, such as a walking human, spaceship, flower, etc. A simple box to box collision is not always ideal.
씬에서 오브젝트를 선택 할 때, 그것은 박스 형태의 아웃 라인으로 되어 있습니다. 이것은 개체의 기본 충돌 형태로 사용되는 경계 상자라고 합니다. 당신이 추가한 스프라이트는 씬에서 실제로 모든 영역을 사용하지는 않습니다. 당신이 추가할 많은 스프라이트는 비정상적인 모양을 대부분 가지고 있으며, 걸어가는 사람, 우주선 꽃 등은 박스 같은 모양에는 적합 하지 않습니다.

This is easily fixed by using the Collision Editor. While custom shapes can consume more processor power, your game play will be more believable and intuitive. Start by selecting an object in the scene, then slick on the first button on the left:

이것은 쉽게 충돌 편집기를 사용하여 고정됩니다. 사용자 정의 모양은 상대적으로 비용이 있지만, 게임 플레이 상에서는 더 믿을만 하고 직관적일 것입니다. 씬에서 오브젝트를 선택하고, 왼쪽에서 첫 번째 버튼을 클릭합니다.

Clicking that button will activate the Collision Editor. At first, the four points you see are identical to the sprites bounding box. You can start adding notes to the box to create a custom shape that more closely resembles the art's shape.

버튼을 클릭하면 Collision Editor 가 활성화 됩니다. 첫번째로, 스프라이트와 동일한 바운딩 박스의 네가지 포인트 가 보입니다. 당신은 아트의 모양에 가깝게 커스텀하게 노트를 추가 할 수 있습니다.

BEFORE:

(click to enlarge)

BEFORE:

(click to enlarge)

Collision and Physics Messages

The four check boxes at the top of an object's collision properties define the object's participation in the collision system. Using these properties individually. For example, turning Send Collision on but leaving Receive off will result in some objects never responding to collision.
오브젝트의 충돌 속성의 상단에 있는 4개의 체크박스는 충돌 시스템에서 오브젝트의 참여를 정의 합니다. 개별적으로 이러한 속성을 사용하게 됩니다. 예를 들어, send collision 에는 반응하나 receive 에는 반응하지 않아 결과적으로 일부 오브젝트가 충돌에 반응하지 않게 됩니다.

Objects that have "Send Collision" active can be thought of as active colliders, while objects that have "receive collision" active can be thought of as passive colliders. A collision will only be detected between objects if one of the objects is an active collider and the other is a passive collider. Keep in mind that an object can both send and receive collisions.
오브젝트의 “Send Collision” 는   충돌의 활성화로 간주 할 수 있으며, 오브젝트가 “receive collision” 이 활성화 되어 있으면 충돌 받는 수동적인 오브젝트로도 생각 할수 있습니다. 오브젝트중 하나가 활성화 된 collider 이며 다른 오브젝트가 수동적 collider 인 경우에 둘 사이의 충돌이 감지 됩니다. 오브젝트는 충돌을 보내고 받을수 있다는 점에 유의 하십시오.

Send and receive physics are treated slightly differently. Send physics dictates whether or not the object's default physics response will be used when it is sending the collision. Receive physics dictates whether or not the object's default physics response will be used when it is receiving the collision.

Send 와 Receive 물리는 약간 다르게 취급됩니다. 충돌이 전달되는 경우는 직접적으로Send 물리 명령을 받거나 기본적인 물리의 반응이 있을 경우입니다. 충돌을 받는 경우는 직접적으로 Receive 물리 명령을 받거나 기본적인 물리의 반응을 받는 경우 입니다.

Callbacks

Perhaps the most powerful feature of the collision system is the callback implementation. When you enable the Callback checkbox, the engine will call a specific script function when a collision occurs. If this script function does not exist, nothing will happen. However, you can write the script function out and it will automatically execute.
아마 충돌 시스템의 가장 강력한 기능은 콜백 구현 입니다. 충돌 발생 때 콜백 확인란을 사용하면 엔진은 특정 스크립트를 호출 합니다. 이 스크립트 함수가 존재 하지 않는 경우, 아무것도 일어나지 않습니다. 그러나 스크립트 기능을 쓸수 있으면 자동으로 실행 됩니다.

In the following example, assume there is an object in your scene named "Mine". This object has collision enabled and the callback checkbox turned on.
보게될 예제는, 당신의 씬 네임을 “Mine”이라고 가정합니다. 이 오브젝트는 충돌을 사용하고 있으며 콜백 확인란이 활성화 되어 있습니다.

 

This concludes the introduction to iTorque 2D collision. While you can enable basic collision without ever touching code, you will most likely make heavy use of the onCollision callback. The tutorials in the rest of this documentation will provide examples of how to fill in the function. The instructions you learned in this guide are essential and used all throughout your development.

이것으로 iTorque 2D 충돌 소개를 마칩니다. 코드를 수정하지 않고 기본적인 충돌을 활성화 할 수 있습니다. 아마 당신은 onCollision 콜백을 가장 많이 사용하게 될 것입니다. 이 튜토리얼의 가장 마지막에 있는 문서는 함수를 어떻게 채우는지 예제를 제공합니다. 이 가이드에서 배운 내용은 필수로 개발에 전반적으로 모두 사용됩니다.

 

This tutorial will show you how to import your 2D spritesheets into an iTorque 2D project. You will learn how to set up and use animated sprites in the Game Builder. A spritesheet is a two dimensional graphic which represents your artwork. Spritesheets usually contain multiple images in single file, which is ideal for animation. The following topics are covered in this tutorial:

이번 튜토리얼은 iTorque2D 프로젝트에서 당신의 2D spritesheet 를 어떻게 임포트 하는지 보여 줄 것입니다. Game Builder 를 통해 셋업 하는 방법과 애니메이션이 되는 sprite를 어떻게 사용하는지 배우게 됩니다. Spritesheet 는 당신의 아트워크 를 나타내는 2D 그래픽 입니다. Spritesheet 는 보통 한 파일에서 여러 개의 이미지를 제공하며, 이것은 애니메이션에 이상적입니다. 다음과 같은 내용을 튜토리얼에서 설명하고 있습니다.

Importing images (.jpg or .png)

ImageMaps

Using the Image Builder

Using the Animation Builder

Basic scene editing

Level Datablocks editor

Testing

Datablocks

Note: You will see Cell and Frame used constantly throughout this document. The essential difference is that a Cell is a portion of an image that will be displayed as a Frame of an animation

이 문서 전반에 걸쳐 계속 사용하는 Cell 과 Frame 을 볼 수 있습니다. 근본적 차이는 Cell은 이미지의 부분으로 애니메이션의 Frame 으로 표시 됩니다.

Creating an animated sprite and adding it to the scene is a multi-step process, but a very simple one. The following portion of this tutorial can be applied to all your asset importing and setup. Loading the image will be the same process as a static sprite. In the Create tab, click on the "Create a new ImageMap" button. When the file browser appears, navigate to the directory containing your spritesheet and open the image.

애니메이션 Sprite 를 생성하고 씬에 추가하는 것은 여러 단계의 작업이나, 매우 간단합니다. 이 튜토리얼의 다음 부분은 당신의 모든 asset 을 추가하고 설정하는게 가능합니다. 이미지를 불러들이는 부분은 static sprite와 흡사합니다. Create tab 으로 간 다음, “Create a new ImageMap” 버튼을 누릅니다. 파일 브라우저에 접근하여, spritesheet 가 있는 디렉토리로 이동하여 이미지를 엽니다.

(click to enlarge)

After clicking Open, the new ImageMap will be added to the Static Sprites section. The reason the image contains multiple versions of the same flower is because it is an animation. This spritesheet contains separate animation frames, equally spaced for easy animation construction

클릭하여 연 다음, 새로운 ImageMap 이 Static Sprite 섹션이 추가 된걸 보게 됩니다. 여러 버전으로 제공되는 이미지가 보이는 이유는 그것이 애니메이션 이기 때문입니다. 이 spritesheet 는 별도의 애니메이션 프레임을 포함하고, 쉽게 애니메이션을 생성하기 위한 일정한 간격을 유지합니다.

Before you can create the animation, the ImageMap needs to be split into cells. Double click on the ImageMap preview to open the Image Builder. When the Image Builder appears, you will be able to view the stock values for an ImageMap. Set Image Mode to CELL, Filter Mode to NONE, and turn Filter Pad off:

당신이 애니메이션을 생성하기 전에, ImageMap 은 Cell 로 분할 해야 합니다. 더블 클릭을 하여 ImageMap 프리뷰 에서 Image Builder 로 엽니다. ImageBuilder 로 접근하게 되면, ImageMap 대한 가공된 값을 볼 수 있습니다. ImageMode 를 CELL 로 바꾸고, Filter Mode 를 NONE으로, 그리고 Filter Pad 를 끕니다.

Note: Filter padding is a shortcut used to clean up art with flaws. Edges get blurred and a fake outline is created around the image. Disable these options to get the original appearance of an image. Do this for ALL the images you load.

Filter padding 은 취약점 과 art 를 정리하는데 사용하는 단축키 입니다(3dsmax 의 xform 같은). 가장자리를 흐리게 하고 가짜 테두리를 이미지 주위에 생성합니다. 이미지의 원래 모양을 이러한 옵션 때문에 망가질 수 있습니다. 당신은 이런 모든 이미지에 대한 작업을 수행합니다.

As previously mentioned, this ImageMap needs to be in Cell format. Click on the Image Mode dropdown to display a list of options. Choose the Cell entry to split the image up into four parts. If the artist used a standard resolution and even spacing, it is simple to calculate the cell splitting.

이전에 언급했듯이, ImageMap 은 CELL 형식으로 해야합니다. 옵션 목록을 표시하는 Image Mode 의 리스트를 엽니다. 네 부분으로 이미지를 분할 하기 위해 cell 항목을 선택합니다. 아티스트가 표준 해상도 간격을 사용하게 되면, cell 분리하는게 매우 수월해 집니다.

The following example flower animation consists of 18 frames. The original image has six rows and three columns. You can convert this in the Image Builder by setting the Cell Count Y to 3 and Cell Count X to 6. Make sure your final version looks just like the following:

꽃 애니메이션은 18 프레임으로 구성되어 있습니다. 원본 이미지 여섯 행과 세 열이 있습니다. 당신은 ImageBuilder 셋팅을 Cell Count Y 는 3 Cell Count X 는 6으로 설정합니다. 최종버전은 다음과 같이 설정 될 것입니다.ㅠ

(click to enlarge)

Back in the Create tab, you should now see the final representation of the celled ImageMap. Notice it just shows one frame, which you can cycle through by clicking the numbers below the preview:

Create tab 으로 돌아와서, Cell ImageMap 의 최종 표현을 볼 수 있습니다. 첫 번째 프레임을 보여주며, 번호를 클릭하게 되면 미리보기가 순환하는걸 볼 수 있습니다.

Once the ImageMap is in cell form, an animation can be created. To do this, click on the "Create a new Animation" button. This is located right next to the button you use to create ImageMaps:

ImageMap 은 Cell 형식으로, 애니메이션을 만들 수 있습니다. 이렇게 하려면, “Create a new Animation” 을 클릭합니다. 이것은 ImageMap 을 만들 때 사용하는 버튼 옆에 위치하고 있습니다.

Image:CreateNewAnim.jpg

When the Select Material dialog appears, you will be given a list of ImageMaps to pick from. Only ImageMaps in Cell mode can be chosen. Click on the image containing your animation cells, then click on the Select button:

선택한 Material 대화 상자에 접근하면 ImageMap 의 목록을 받게 될 것입니다. Cell 모드에서 만 ImageMap을 선택 할 수 있습니다. 당신의 애니메이션 Cell 을 포함하는 이미지를 클릭한 다음 선택 버튼을 클릭합니다.

(click to enlarge)

The Animation Builder will open, allowing you to build an animation out of each cell. When creating your spritesheets, you should try to stick to a standard for animation order. For the example flower image, the animations go in order of left to right, top to bottom. You can manually add each one by double clicking the image or click the green (+) button to add them all at once.

Animation Builder 를 열면, 각각 Cell 들을 끌어 올수 있도록 열립니다. Spritesheet 를 만들대, 애니메이션 순서에 대한 표준적인 방법으로 하려 합니다. 예로 꽃 이미지의 경우, 위에서 아래로 왼족에서 오른쪽 순서로 이동합니다. 수동으로 이미지를 더블클릭하거나 녹색 (+) 단추를 통해 한번에 추가합니다.f

(click to enlarge)

Animation Builder Settings

Frames Per Second: Number of frames you want played each second (speed of the animation).
초당 움직이는 프레임 수(애니메이션 속도)

Start Frame: This is the frame you want the animation to start at.
애니메이션이 시작하길 원하는 프레임 번호.

Random: When enabled, the animation's frames will be played in a random order.
킬 경우, 플레이시 프레임이 랜덤으로 결정 됩니다.

Cycle Animation: When toggled, the animation will loop back to the beginning of the animation once the cycle completes. If this is not checked, the animation will play once and then stop on the final frame.
킬 경우, 애니메이션은 시작부분에서 루프를 다시 시작합니다. 선택 되어 있지 않으면, 최종 프레임에서 중지후 멈추게 됩니다.

Name: The name of the animation.
애니메이션의 이름

When you are finish tweaking your animation, click the Save button. Once you do so, a preview of the animation will appear under the Animated Sprites rollout in the Create tab. This visual will help you when picking animations to add to your scene:

애니메이션을 최종적으로 조정하게 되면, 저장 버튼을 누릅니다. 이렇게 되면 애니메이션의 미리보기가 생성탭에서 애니메이션 Sprite 가 아래에 나타납니다. 씬에 애니메이션을 끌어오면 추가가 됩니다.

Before you can run a game and preview your animation, open the Level Datablock Editor again. You must add the t2dImageMapDatablock for the original celled ImageMap, as well as the t2dAnimationDatablock recently created by the Animation Builder.

게임에서 실행하기 전에 그리고 애니메이션을 미리 보려할 때, Level Datablock Editor 를 다시 엽니다. 반드시 오리지날 cell ImageMap 을 t2dImageMapDatablock 추가하는거 뿐만이 아니라, Animation Builder 로 만든 t2dAnimationDatablock 에 대한 부분도 추가 해야 합니다.

(click to enlarge)

Click Apply, save your project, then run the game. You should see your new animation play. Whenever you moved the animated sprite or add a new instance, the animation will restart at the specified frame. If Cycle Animation is toggled, it will loop endlessly.

클릭 적용하여 프로젝트를 저장한 후, 게임을 실행합니다. 당신의 새로운 애니메이션이 플레이가 나타납니다. 애니메이션 Sprite 를 이동하거나 새로운 인스턴스를 추가할 때마다, 애니메이션은 지정된 프레임에서 다시 시작합니다. 사이클 애니메이션이 토글 되면, 계속 루프 하게 됩니다.

(click to enlarge)

This concludes the introduction to animated sprites. Without ever touching code, you can import your artwork using iTorque 2D's editors. This allows you to rapidly prototype levels, tweak the appearance and functionality of an animation and preview instantly. The instructions you learned in this guide are essential and used all throughout your development.

이것으로 애니메이션 Sprite 에 대한 소개를 마칩니다. 코드를 건들이지 않고 iTorque2D 의 편집기를 사용하여 아트워크를 가지고 올 수 있습니다. 빠르고 즉시 프로토 타입 수준의 개발과 애니메이션 미리보기를 즉시 볼 수 있습니다. 이 가이드에서 배운 지침은 필수로 개발에 전반적으로 사용됩니다.

This tutorial will show you how to import your 2D images into an iTorque 2D project. You will learn how to set up and use static sprites in the Game Builder. A sprite is a two dimensional graphic which represents your artwork. The following topics are covered in this tutorial:

이 튜토리얼은 iTorque2D 프로젝트에서 2D 이미지를 가져오는 방법을 보여줍니다. 당신은 GameBuilder 에서 static sprite 를 설정하고 사용하는 방법을 배웁니다. Sprite는 당신의 아트워크의 대표격2차원 그래픽 입니다. 다음과 같은 내용이 튜토리얼에 나와있습니다.

Importing images (.jpg or .png)

ImageMaps

Using the Image Builder

Basic scene editing

Level Datablocks editor

Testing

Datablocks

Creating A New ImageMap

When you want to render your artwork in iTorque 2D, it must be imported into your game and represented as an ImageMap. You can do this right from the editor, no coding required. On Windows, run TorqueGameBuilder.exe. For a Mac, run Torque Game Builder.app.

 

당신이 iTorque2D 에 아트워크를 렌더링 하고싶을 경우, 반드시 당신의 게임에 import 및 ImageMap 에 표현이 되어야 합니다. 에디터 오른편에 있으며, 코딩을 필요로 하지 않습니다. 윈도우는 TorqueGameBuilder.exe 를 맥 은 Torque Game Builder.app 를 실행합니다.

Once you are in Torque Game Builder, click on the Create tab on the right. Once the tab is open, click on the "Create a new ImageMap" button:

 

일단 Torque Game Builder 에서 오른쪽에 있는 Create 탭을 클릭합니다. Tab 을 열고, “Create a new ImageMap” 버튼을 클릭합니다.

After clicking the button, a file browser dialog will appear. Navigate to the directory containing your artwork and open the image:

 

버튼을 클릭하면 file 브라우저 다이얼로그에 접근합니다. 당신의 아트워크를 포함하고 있는 디렉토리로 이동하여 이미지를 오픈 합니다.

(click to enlarge)

This will create a new ImageMap. After opening the image, the new image will show up under the Static Sprites rollout as small preview images. If you did not modify the ImageMap, it should be named your file's name, minus the extension, plus ImageMap. For example, backgrounnd.jpg will be backgroundImageMap:

 

새로운 ImageMap 을 생성했습니다. 이미지를 오픈한 후에는, 새로운 이미지는 static sprite는 작은 미리보기 이미지로 보이게 됩니다. 만약 ImageMap 이름을 수정하지 않을경우, 파일 이름에 ‘_’ 가 붙고 추가로 ImageMap 이 붙습니다. 예시로 background.jpg 는 background_ImageMap 이라고 생성됩니다.(영문판은 왜 저렇게 적혔는지 모르겟는데.. 실제로 생성하면 번역본 처럼 생성됩니다)

Image Builder Settings

You can change the properties of an ImageMap by double clicking the preview image in the Static Sprites rollout. The Image Builder should appear. The following image represents a static sprite with a single cell, meaning it uses the FULL mode.

당신은 공개된static sprites 의 미리보기 이미지를 더블 클릭해서 ImageMap 의 프로퍼티를 바꿉니다. Image Builder 가 나타납니다. 다음 이미지는 static sprite 와 single cell(하나의 단위?) 를 나타내며, 전체 모드를 사용하는걸 의미합니다.

(click to enlarge)

Except in very specific circumstances, you will always want to set Filter Mode to NONE and make sure theFilter Pad box is unchecked. Filter padding is a shortcut used to clean up art with flaws. Edges get blurred and a fake outline is created around the image.

 

매우 구체적인 경우를 제외하고, 당신은 항상 Filter Mode 를 NONE 으로 설정하고 Filter Pad 를 체크 하지 않습니다. Filter padding 은 결함과 art 정리를 위한 손쉬운 방법입니다. 모서리를 흐리게 하는것과 가자 테두리는 이미지 주변에 생성 됩니다.

When you change the mode to CELL, you can see the full range of options provided by the Image Builder. This tends to be used for creating multiple sprites out of a single ImageMap or splitting up a cell animation:

 

모드를 CELL 로 바꾸었을 경우, Image Builder 에서 제공받는 로부터 옵션의 최대거리를 볼 수 있습니다. 이것은 하나의 ImageMap 에서 여러 개의 sprite 를 만들어 내거나 cell 애니메이션을 분할 하는데 사용됩니다.

(click to enlarge)

 Can cover up flawed art but results in worse performance.

Image Builder Properties

Name: What your ImageMap will be called in script and level datablocks.
                ImageMap 이 script 에서 불릴때나 level datablock 에서 보여지는 이름 입니다.

Image Mode: Represents how the ImageMap is rendered. FULL results in the entire image being rendered, such as a background or static sprite. CELL is used for splitting up a single image into multiple parts, which is useful for optimizations and required for animations.
ImageMap 이 어떻게 렌더링 될지 나타냅니다. FULL 의 경우 background 나 static sprite 로 취급 됩니다. CELL 은 하나의 이미지를 여러 파츠로 나뉘는데 쓰이며, 최적화와 애니메이션에 있어 유용하게 쓰입니다.

Filter Mode: Determines the blurring method for the image when rendered in the engine. Can cover up flawed art but results in worse performance. Not recommended for use.
엔진에서 렌더링 이미지에 대해서 흐리게 하는 방법을 결정합니다. 낮은 품질인 경우에는 품질을 은폐 하는데 도움이 되긴합니다. 사용하는걸 추천하지 않습니다.

Filter Pad: Used in conjunction with Filter Mode to blur the edges of an image and creates artificial padding around it.
이미지의 가장자리를 흐리게 하고 주변의 인공 패딩을 생성하는 필터 모드와 함께 사용합니다.

Prefer Speed: This flag toggles how the ImageMap data is packed and loaded. If turned on, the ImageMap will load faster but consume more memory. If unchecked, the ImageMap is more optimized for memory loading but takes longer to load.
이 플래그는 ImageMap 데이터의 포장과 로드하는 방법을 결정합니다. 켜진 경우 ImageMap 을 빠르게 로딩 하지만 더 많은 메모리를 소비하고, 꺼진 경우 읽는데 오래 걸리는 대신 메모리를 절감합니다.

Preload: When toggled, this will cause the ImageMap to load as soon as the engine starts up and parses the datablocks. This will cause your game to take longer to load, but will run faster and have to load less during game play. This is a shortcut and using Level Datablocks is a smarter solution to controlling your load times.
사용 할 경우, ImageMap 은 엔진이 시작함과 동시에 로드가 되고 datablock 들이 파싱 됩니다. 이것은 게임의 로딩을 더 오래 걸리게 할 순 있지만 빠른 게임 실행과 게임 플레이 동안의 로딩을 줄일 수 있습니다. 이것은 Level Datablock 들을 로드 시간동안 깔끔하게 제어하는데 효과적인 방법입니다.

Allow Unload: Checking this box will give the engine permission to release all image data and settings from the ImageMap during level transitions.
사용 할 경우, 레벨을 전환하는 동안 ImageMap 의 모든 이미지 데이터와 설정을 해체 하기 위해 엔진 권한을 제공합니다?

Optimised: This flag toggles an internal optimization that improves loading of textures greatly. An image must not be in LINKED mode, must be a power of 2 and must be square (16x16, 256x256, etc).
이 플래그는 크게 텍스쳐의 로딩 향상을 위해 내부 최적화를 전환합니다. 이미지가 반드시 LINKED 모드여서는 안되며, 반드시 2의 승수 의 정사각형 이여야 합니다.

Cell Mode Options: These settings control an image is split up when in CELL mode. For example, a Cell Count X setting of 6 will split the image into 6 columns. The Cell Counts are directly tied to the width and height settings. Changing one will change the other accordingly.
이 셋팅은 CELL모드의 경우 이미지의 분할을 제어 합니다. 예를 들어 Cell Count X 의 셋팅이 6 일 경우 6열로 이미지를 분할 합니다. Cell Count 는 너비와 높이 설정에 직접적인 관계가 있습니다.
하나를 변경하면 그에 따라 설정이 변경 됩니다.

Advanced Settings: The Offset and Stride settings in this section manually adjust the location of the art inside the cells. This is only useful when your source artwork does not contain evenly spaced cells.
Offset 과 Stride 셋팅은 수동으로 Cell 내부의 art 의 위치를 조정합니다. 원본 artwork 가 균등하게 cell 을 구분하지 않은 경우에만 유용합니다.

Cell Row Order: Used in conjunction with the Advanced Settings. If toggled, the settings will be applied to the ImageMap in rows. If not, it will be applied to the ImageMap in column format.
고급 설정과 함께 사용됩니다. 사용 될 경우, 행으로 ImageMap 에 적용 됩니다. 그렇지 않다면, ImageMap 은 열 형식으로 ImageMap에 적용 됩니다

Background: Opens a color picker, which allows you to change the solid color of the background for the ImageMap preview.
ImageMap 의 미리보기 배경의 색상을 변경 할수 있는 color picker 를 엽니다.

Zoom Selection: Causes you to zoom into a specific cell to more closely inspect it.
원하는 셀을 선택하여 화면에 맞게 확대 해줍니다. (CELL 모드에서 유용하군요)

Zoom: Allows you to continuously and manually zoom in on a section of the cells.
수동으로 CELL 의 섹션을 연속적으로 확대 할수 있습니다.

Adding Sprite to a Level

Once you are finished editing the ImageMap, you can add it to the level. From the Create tab, click on the ImageMap preview and drag it into your scene. The image will drop wherever the cursor was when you release the mouse button.

일단 ImageMap 에디팅이 끝나면, 레벨에 추가를 할 수 있습니다. Create tab 에서 ImageMap 미리보기를 클릭하여 화면에 드래그 합니다. 마우스 버튼을 놓으면 커서가 있는 곳에 이미지가 드롭 됩니다.

(click to enlarge)

You can use the mouse to move the sprite around the scene until you are happy with its location. For more precision, you can use the arrow keys on the keyboard to nudge it slightly in a direction.

당신은 위치에 만족 할 때 까지 스프라이트를 이동하기 위해 마우스를 사용할 수 있습니다. 더 정밀하게 배치하고 싶은 경우 키보드의 십자 키를 이용하여 (↑↓←→) 하는 것도 가능합니다.

For absolute positioning, an alternative is to directly input the X/Y coordinates. With the image selected, click on the Edit tab. Scroll down to the Scene Object rollout. The first section should be Position. For example, set the X and Y fields to 0, which is dead center of the scene:

절대 위치의 경우, x/y 좌표를 직접 넣는것도 가능합니다. 이미지를 선택하고, 에디트 탭을 클릭합니다. 스크롤을 내려 Scene Object 로 갑니다. 첫번째 섹션의 Position 이 해당 기능입니다. 예를 들어 x 와 y 의 필드값을 9 으로 하면 씬의 중심으로 이동 됩니다

When first added, the image is on the top most layer: 0. If you set the image layer to 5, every new sprite added to the scene and anything with a layer of 0-4 will be rendered on top of this sprite. You can find this property under the Scene Object rollout in the edit tab:

첫번째로 추가하면 이미지는 가장 상단의 레이어가 됩니다 0. 만약 이미지 레이어가 5인 경우 스프라이트가 추가 될 때 레이어 0-4에 해당하는 것들은 위에그려지게 될 것입니다. 이 부분에 대한 프로퍼티는 에디트 탭의 Scene Object 에서 찾을 수 있습니다

NOTE: Make sure you are SAVING your scene each time you add an image to the library or a sprite to the scene. SAVE and SAVE OFTEN!

만들고 난 뒤에 이미지를 라이브러리에 추가하거나 씬에 스프라이트 를 넣을 때 세이브 를 하세요. 세이브 하고 자주 하세요!.

Level Datablocks

Before a sprite will render in a running game, the ImageMap needs to be saved in the level's datablocks. The Level Datablocks system is an optimization feature. When you are editing your project in the iTorque 2D Editor, all of the sprites, animations, scrollers, tilemaps and so on are loaded into memory at all times. However, you may not need all of them for every single level.

 

Sprite 를 실행중인 게임에 렌더링 하기전에, ImageMap 은 level’s datablock 에 세이브가 필요합니다.  Level Datablock 시스템은 최적화 부분입니다. 만약 iTorque2D 에디터를 당신의 프로젝트에서 에디트 할 경우 모든 Sprite, 애니메이션, 스크롤러, 타일맵 들이 항상 로드 됩니다. 그러나 당신은 모든 단일 수준에 항상 필요로 하지 않을 수도 있습니다.

For example, you may only need four specific sprites and animations for one level, then a completely separate set in another level. The Level Datablocks editor allows you to manually control what gets loaded on a per-level basis, thus reducing the overall memory consumption of your game.

 

예를 들어,  특정 스프라이트가 필요하거나 한 레벨에 애니메이션이 필요한 경우, 다른 레벨에서 완전히 별도로 설정 할 수 있습니다??(번역이 이상하네요;). Level Datablocks 에디터는 레벨당 수동으로 로드를 하게 되므로써 게임의 전체 메모리 소모를 줄일 수 있습니다.

 

In the top left of the editor, click on the "Edit level datablocks" button:

왼쪽 위 에디터에서 "Edit level datablocks" 를 클릭합니다.

 

Next, select the ImageMap you want in this level and click on the [>>>] button to add it to the level's datablocks. Click on Apply to save these changes:

 

다음, 당신이원하는 레벨의 ImageMap 을 선택하고 [>>>] 을 클릭하여 level’s datablocks 를 추가합니다. Apply 를 클릭해 변경된 부분을 저장합니다.

(click to enlarge)

Once you are ready to test, save your project and then run your the game (shortcut F5 on Windows or theplay button in the menu). Your scene should be rendering the images:

 

일단 테스트 프로젝트를 저장하고 게임을 실행합니다(윈도우 에서는 F5).
당신의 이미지가 렌더링 될 것입니다.

(click to enlarge)

Location of Data

Like other objects, ImageMaps must exist in code or the engine will not know about them. The actual data structure that holds this information is a t2dImageMapDatablock. The editor saves and reads these datablocks in the projectFiles/game/managed/datablocks.cs file in your game's directory. A sample ImageMap will look like this:

 

다른 개체 와 마찬가지로, ImageMap 에 대한 코드가 존재하거나 엔진이 이걸 알거나 하진 않습니다. 이 정보를 가지고 실제 데이터 구조는 t2dImageMapDatablock 입니다. 에디터 세이브와 읽어들이는 datablocks 는 projectFiles/game/managed/datablocks.cs 에 위치 하고 있습니다. 샘플 ImageMap 은 아래처럼 되어 있습니다.

 

new t2dImageMapDatablock(backgroundImageMap) {

   imageName = "~/data/images/background.jpg";

   imageMode = "FULL";

   frameCount = "-1";

   filterMode = "NONE";

   filterPad = "0";

   preferPerf = "1";

   cellRowOrder = "1";

   cellOffsetX = "0";

   cellOffsetY = "0";

   cellStrideX = "0";

   cellStrideY = "0";

   cellCountX = "-1";

   cellCountY = "-1";

   cellWidth = "0";

   cellHeight = "0";

   preload = "1";

   allowUnload = "0";

   compressPVR = "0";

   optimised = "0";

   force16bit = "0";

};

The more you add to your editor, the more t2dImageMapDatablocks you will have in this file. When you add an ImageMap to your level's datablocks (via the Level Datablocks editor), it is stored in your game'sprojectFiles/game/data/levels/datablocks directory. Each level needs to have its own datablocks file. For example, if you create a new level called myLevel.t2d, you should create a myLevel_datablocks.cs file in that directory. The ImageMaps will be identical to what the editor sees:

당신의 에디터에 더 추가 하려 할 경우 t2dImageMapDatablocks 이 더 필요 할 겁니다. 당신의 level's datablocks 에 ImageMap 을 추가하려 할 경우(Level Datablocks 를 통해) 이것은  당신의 게임의 projectFiles/game/data/levels/datablocks 디렉토리에 저장이 될 것입니다. 예를 들어, 만약 새로운 레벨의 myLevel.t2d 를 생성할 경우, myLevel_datablocks.cs 파일이 디렉토리에 생성 될 것입니다. ImageMap 은 편집자가 보는 것과 동일합니다.

 

new t2dImageMapDatablock(backgroundImageMap) {

   imageName = "~/data/images/background.jpg";

   imageMode = "FULL";

   frameCount = "-1";

   filterMode = "NONE";

   filterPad = "0";

   preferPerf = "1";

   cellRowOrder = "1";

   cellOffsetX = "0";

   cellOffsetY = "0";

   cellStrideX = "0";

   cellStrideY = "0";

   cellCountX = "-1";

   cellCountY = "-1";

   cellWidth = "0";

   cellHeight = "0";

   preload = "1";

   allowUnload = "0";

   compressPVR = "0";

   optimised = "0";

   force16bit = "0";

};

Conclusion

This concludes the introduction to static sprites. Without ever touching code, you can import your artwork using iTorque 2D's editors. This allows you to rapidly prototype levels, tweak the appearance of an image using visual tools and more. The instructions you learned in this guide are essential and used all throughout your development.

이것으로 정적 스프라이트에 대한 소개를 마칩니다, 소스를 건들이지 않고, iTorque2D 에디터를 사용하여 당신의 아트워크를 게임에 추가하는게 가능합니다. 이것은 빠르게 프로토 타입 레벨의, 시각적 도구와 세밀한 방법으로 이미지 모양을 조정 할 수 있습니다. 이 가이드 에서 배운 내용은 필수 이며 개발에 전반적으로 사용 됩니다.

이 글의 저작권은 www.garagegames.com 에 있음을 밝힙니다

Introduction

 When creating a new project in Torque GameBuilder (TGB) it is important to know how you can adjust your workspace andwhat effect it will have on your workflow. In this tutorial we are going tocover how to change your design resolution, how to change your camera view, andhow changing your workspace in these ways will affect your project. Thistutorial will be using the stock TutorialBase project filethat comes with the engine. To open that file, launch TGB and click OpenProject. If you are already editing a project, click on File->Open Project... Once the file browser is open, navigate to theTGB game/TutorialBase folder. Select theproject.t2dProj fileto begin.

 

서론

 토크 게임 빌더(TGB)에서 새로운 프로젝트를 만들 때 어떻게 당신의 작업 공간을 조절하고 작업 흐름(workflow) 에어떤 영향을 미치는지 아는 것은 매우 중요합니다. 이 튜토리얼 에서는 디자인 리솔루션(design resolution)을 변경하는 방법, 카메라 뷰(camera view) 를 변경하는 방법, 그리고 작업 공간을 변경하는방법이 프로젝트에 어떠한 영향을 미치는지 다루게 될 것입니다. 이 튜토리얼은 엔진에서 제공되는 TutorialBase 프로젝트 파일을 사용합니다. 프로젝트를열려면 TGB 를 실행하고 파일을 클릭 합니다. 이미 수정중인프로젝트가 준비되어 있다면, File->Open Project 을 클릭합니다…일단 파일 브라우저(filebrower)가 열리면,  TGB game/TutorialBase 폴더를 가르키게 됩니다.project.t2dProj 을 선택하는 것이 시작입니다.

 

[그림1]

Camera View and Design Resolution

 Your camera view is defined in TGB as abox with a thick blue border around it. Though games can take up muchmore space than this square, all that will be visible to the end-useris what is inside of this square at any given moment (as shown inFigure 1)

 

카메라 뷰 와 디자인 리솔루션

 당신의 카메라 뷰는 TGB 에서는 주위의 파란색 테두리 네모 상자로 정의 됩니다. 게임은설정된 공간보다 더 많은 영역을 차지 할 수도 있지만, 한 순간(현재?)의 정사각형(camera view) 이 표시된 영역만 사용자(end-user) 에게 보여집니다. (그림 1에 표시)

 

[그림2]

 

To begin,let's start by dragging in one of the graphics from the Static Spriteslibrary. I chose to drag in the GarageGames logo (as shown in Figure 2). As you can see, once I drop the graphic inmy scene, it is automatically resized in the view. This is because of thedesign resolution. The design resolution is the size that TGB is going toassume your camera view is. So, when it resizes graphics, it is going to resizethem with respect to what the design resolution currently is. By default, thedesign resolution is set to 800 x 600 therefore all graphics that are dragged into the scene will be sizedproperly relative to the camera view.

 

시작으로, 스태틱스프라이트 라이브러리(Static Sprites Library) 에 있는 하나의 그래픽을 끌고 오는것 입니다. 난 GarageGames logo 를 선택하여끌고 왓습니다.(그림2 에 표시) 보이다시피, 나의 신(scene)에그래픽이 올라와 있습니다. 그래픽은 자동으로 사이즈가 뷰에서 재보정 됩니다. 디자인 리솔루션(design resolution) 때문에 그런 것입니다. 디자인 리솔루션(design resolution) 은 TGB 의 당신의 카메라 뷰(camera view) 로 추정 하여크기를 정합니다. 그래서, 그래픽이 사이즈가 변하는 것은, 현재의 디자인 리솔루션(design resolution) 의 주도아래 이루어 지는 것입니다. 기본으로, 디자인 리솔루션(design resolution) 은 800x600 의 해상도로 설정되어신(scene) 으로 끌고 오는 모든 그래픽은 카메라 뷰(cameraview) 의 상대 크기로 정해져서 올라오게 됩니다.

 

[그림3]

 

To accessyour design resolution, go up to the Edit Menu and choose Preferences (as shown in Figure 3).

 

당신의 디자인 리솔루션(design resolution)에 접근하려면, Edit  Menu 에 가서 Preferecens를 선택하면 됩니다 (그림3 에 표시)

 

[그림4]

 

Once youclick Preferences, you should be confronted by a dialog that contains all ofyour preference settings. You will see three tabs along the top of the dialog. Click on the tab marked Level Editor (as shown in Figure 4).

 

일단Preference 를 클릭하면, 모든 환경 설정을 포함하는 대화 상자를 보게 됩니다. 대화 상자 위에는 세가지 종류의 탭을 보게 됩니다. Level Edtor 라고적힌 탭을 클릭합니다.(그림 4에 표시)

 

[그림5]

 

[그림6]

  

Abouthalfway down on the left side of your Level Editor preferences is theDesign Resolution (as shown in Figure 5). As you can see, the design resolutiondefaults at 800 X 600. Let's change the design resolution to something else soyou can see the effect it has on your workspace. Change your design resolutionto 1024 X 768 (as shown in Figure 5).

당신의Level Editor 의 왼쪽 아래에 있는게 디자인 리솔루션(design resolution) 입니다. (그림 5에 표시)보시다시피 800x600 기본 해상도로 되어 있습니다. 변경 할 경우 어떠한변화가 있을지 보기 위해서 1024x768 로 변경합니다.(그림 6 에 표시) 변경후에 ok 버튼을누릅니다.

 

[그림7]

 

Now thatyou have changed the design resolution of your workspace, let's see what itdoes to your project. Grab another one of those GarageGames logos and drop it right next to the one we dragged in their earlier. Immediately youshould notice something the logo is sized smaller than it was before (as shown in Figure 7)! This is because of the reason I statedabove, TGB automatically resizes graphics in relation to the design resolution.Since the design resolution is 1024 X 768, all of the subsequent graphicsplaced in the workspace are going to be smaller. You should also note that allgraphics placed in the workspace before changing the resolution are notaffected. Change your design resolution back to default (800 X 600) and delete the second logo we created. Now we are goingto explore another method of setting up your workspace the Camera Tool.

 

이제 당신의 작업공간의 디자인 리솔루션(designe resolution)을 바껐습니다. 당신의 프로젝트에가서 또 다른 GarageGames logo 를 오른쪽에 끌어 놓습니다. 이전보다 사이즈가 더 작아진게 즉시 보일 겁니다!(그림 7 참고). 이것은 위에서 제가 언급 했던 일들 때문에 일어난 것이며, TGB 가 해상도에 의해 자동으로 그래픽 사이즈를 조정하는 것입니다. 디자인리솔루션이 1024x768 로 변경된 이후로는 모든 그래픽 들은 더 작게 배치가 될 것입니다. 이전 설정으로 돌리게 되도 영향을 받지 않습니다. 다시 디자인 리솔루션을기본으로 돌려(800x600) 보고 두번째 로고를 지운후 다시 만들어 봅니다. 이제 우리는 다음 탐험으로 작업 공간에서 CameraTool 을셋팅하는 방법을 하게 됩니다.

 

TheCamera Tool

The Camera Tool allows users to manually change the size of their cameraview. The Camera Tool Is located along the top bar of the Level Builder (as shown in Figure 8).

[그림8]

Camera Tool은 사용자가 수동으로 카메라 뷰(Camera View)의 크기를 변경 할 수 있습니다. Camera Tool 은 Level Builder 쪽 top bar에 위치 해 있습니다. (그림8에 표시)

 

[그림9]

When you click on the Camera Tool, your view zooms out and shows you yourCamera View as a translucent box with resize handles along the outer edges (as shown in Figure 9).You can resize your view in many ways.

Camera Tool 을 클릭하게 되면,당신의 뷰가 멀어지고(zoomout) 카메라 뷰에서 반투명 상자와 함께 사이즈를 조절할 수 있는 핸들이 바깥쪽 모서리에 반드시 보이게 됩니다.(그림9에 표시)당신은 사이즈 변경을 통해 많은 일들을 할 수가 있습니다.

 

[그림10]

First, if you click on any resize handle and drag it in any direction,the camera view will resize around its origin while keeping its default aspectratio (asshown in Figure 10).

첫번째로 리사이즈 핸들을 클릭하고 아무 방향이나 드래그 하면camera view는 출발점을 기준으로 종횡비(aspectration)는 유지 된 채 사이즈가 변경 됩니다.(그림10 참고).

 

[그림11]

Second, if you click on any resize handle while holding the CTRL key, it resizes the camera viewkeeping the same aspect ratio while anchoring the camera view to the oppositehandle as you are grabbing (asshown in figure 11).

두번째로,ctrl 키를 누른채로 리사이즈 핸들을 클릭하면 반대편 리사이즈 핸들을 기준으로camera view가 변경 됩니다.(그림11 참조)

 

[그림12]

Third, if you click any of the resize handles while holding the SHIFT key, it resizes the camera viewfrom the center but does NOT keep the aspect ratio giving the user theopportunity to mess up the aspect ratio of the scene(not recommended) (asshown in Figure 12).

세번째로,shift 키를 누른채로 리사이즈 핸들을 클릭하면,자유로운 종횡비로camera view를 조절 하게 됩니다.(권장하지 않음)(그림12 참조)

 

[그림13]

Finally, if you click on any of the resize handles while holding the SHIFT and CRTL, your camera view willresize freely from an anchor point opposite the one you grabbed without keeping theaspect ratio (asshown in Figure 13).

마지막으로,shift 와ctrl 키를 누른채로 리사이즈 핸들을 클릭하게 되면,반대편 리사이즈 핸들을 기준으로 자유로운 종횡비의camera view를 설정하게 됩니다.

Neither of the last two methods are recommended in most cases since ifyou mess up the aspect ratio you will get aninteresting, skewed look to your graphics. However, TGB still allows you toaffect the aspect ratio in case you ever work with an unusual aspect ratio suchas those found on a widescreen monitor, etc.

몇가지 방법중 마지막 두 방법은 종횡비가 깨지는 흥미롭거나 난잡한 상황을 연출하게 됩니다.. However, TGB still allows you to affect the aspect ratio in case you everwork with an unusual aspect ratio such as those found on a widescreen monitor,etc.

 

[그림14]

We now want to make the camera view larger. To do that, use either of thefirst two methods to enlarge the camera view to a reasonably larger size. Tosave the changes you have made to your camera view, click on the selection tool (as shown in figure 14) or hit Enter.

우리는 지금 카메라 뷰를 크게 만들고 싶습니다.처음 소개된 두가지 방법중 한 가지로camera view 를 늘리십시오.변경된camera view를 저장하고,selection tool 을 선택 합니다.

 

[그림15]

Once you have your camera view changed and saved, drag another copy ofthe GarageGames logo into the scene to see its effects. Your new graphic shouldbe larger than your original graphic, due to the relative sizing of the designresolution (asshown in Figure 15) Eventhough we made the camera view cover a much larger area, TGB still assumes thatit represents an 800 X 600 screen and therefore sizes any newly importedgraphics appropriately.

일단camera view 가 변경되고 세이브 되면,효과를 볼수 있는 장면으로GarageGames 로고의 다른 복사본을 끌고 오십시오.당신의 새로운 그래픽은 디자인 솔루션(designsolution)의 상대적 사이즈에 의해 원본 보다 크게 보이게 되며,(그림15참조),우리가 카메라 뷰(cameraview) 가 훨씬 더 큰 지역을 커버 했다 할 지라도TGB는 여전히800x600 해상도를 대표하고 따라서 새로 가지고온 그래픽을 적절하게 사이즈를 변경하게 됩니다.

 

Conclusion

 

This tutorialcovered the basics of setting up a workspace, changing the cameraview and design resolution, and the effect it can have on a project. As youbecome more familiar with this aspect of TGB, you will learn to use the methodsoutlined above to streamline your workflow and make your games more efficientlywith minimal resize issues. You can create all of your artfor one resolution and have it sized automatically in relation toyour camera view or design resolution. I hope this tutorial proves useful. Goodluck!

 

맺으며

이 튜토리얼은 작업공간의 기본 셋팅에 대해서 다루며,카메라 뷰(cameraview) 와design resolution 을 바꾸는법 과 변경 된 부분이 프로젝트에 미치는 부분에 대해서 다룹니다.TGB 의 이런 양상에 익숙 해 지도록,당신의 작업 흐름을 간소화 하고 게임 제작의 문제점을 좀 더 최소화 하기 위해서 위에서 설명한 방법에 대한 사용 방법을 배우게 됩니다.당신의 한가지 해결책에 대한 모든 아트(리소스)를 만들수 있으며 카메라 뷰(cameraview) 또는 디자인 리솔루션(designresolution) 에 의해 사이즈가 자동으로 보정될 수 있습니다.이 튜토리얼이 유용 했기를 빌며,행운을 빕니다!