Entity Section Movement

# Course Introduction

We'll look into three concepts of Tween Component to create action in entities. You can use components to adjust the direction and range of the entity's movement.

##### Reference Guide

[Changing Location, Size, Rotation of Entities](/docs?postId=82)

# Introducing Tween Component

You can use Tween Component to create movement in entities and adjust the movement in detail. There are three different components depending on the type of movement. You can also combine them to your convenience.

Types of Tween Component are as follows.

[{"Tweener":"TweenFloatingComponent","Type of Movement":"Floating movement around original point"},{"Tweener":"TweenLineComponent","Type of Movement":"Linear movement from original position to destination"},{"Tweener":"TweenCircularComponent","Type of Movement":"Circular movement around original point"}]

> Tip Using multiple components might lead to malfunction or a bug where only one component operates. We recommend one Tween component for an entity.

# TweenFloatingComponent

TweenFloatingComponent is used to make the entity float around a single location. It moves up and down relative to the origin of the entity. By adjusting the amplitude and cycle time, you can control its distance and range. [png](1656418837727e9f305cc0d504a878ddf7c19063705e5) Let's take a look at the properties of TweenFloatingComponent.

[{"Name":"TweenType","Description":"Default value is Linear. Refer to the document below for more information of floating movement type."},{"Name":"OneCycleTime","Description":"Time spent in round-tripping amplitude value. The bigger the value, the slower the movement."},{"Name":"Amplitude","Description":"Sets the distance the entity travels up\/down from the original point. The bigger the value, the further it will move."},{"Name":"AutoStart","Description":"If enabled, the movement begins automatically upon the game's start."},{"Name":"AutoDestroy","Description":"If enabled, the component will be automatically deleted after the movement is finished."},{"Name":"SyncType","Description":"Choose whether the component will be synchronized with server or client. Default: Operates in server, appears same in all Clients.ClientOnly: Appears and operates only on that particular Client."}]

#### Application

  1. Add TweenFloatingComponent to the Entity. Enter each property value of TweenFloatingComponent in the Property Editor window as follows.  
[png](16462833345885523a1977e4446a99b1974de5d14eb58)
  2. Tap the [gif](16351278266829a1fa2002d524f72bbeedbf7d481793b)



> Tip Amplitude Value 1: It's hardly visible to the human eye, but considering each grid is 0.6 high, you can estimate it as 2 grids.

# TweenLineComponent

It is used to make linear movement from the original point to the destination. You can set if the trip goes one way, as well as accelerating/decelerating, bouncing upon arrival, etc. [png](1656418848585c69dc780ccb44ddf91083ec563dfc053) Let's take a look at the properties of TweenLineComponent.

[{"Property Name":"TweenType","Description":"Default value is Linear. You can choose movement in another type.Refer to the document below for more information of linear movement type."},{"Property Name":"Duration","Description":"Indicates time taken to reach the destination."},{"Property Name":"StopType","Description":"Chooses stop type.Oneway: Entity goes one way and terminates movement upon reaching destination.OneRoundTrip: Entity goes for a round-trip, considering destination as the halfway point. Stops movement after 1 round-trip.RepeatRoundTrip: Entity repeats round-trip, considering destination as the halfway point."},{"Property Name":"UseReturnTweenType","Description":"If enabled, entity follows separate method after turning halfway point."},{"Property Name":"ReturnTweenType","Description":"Designate the post-halfway point trip type if you have chosen OneRoundTrip\/RepeatRoundTrip as the stop method.Refer to the document below for more information on return trip type."},{"Property Name":"ReturnDuration","Description":"Indicates time taken to move from the destination to the starting point."},{"Property Name":"DestinationCoordinateType","Description":"It's how the entity recognizes its destination. Relative: Recognizes destination in relative coordinates. Absolute: The values entered for the destination are interpreted as absolute coordinates."},{"Property Name":"Positions","Description":"You can add several destinations in the moving direction. The number of destinations is not displayed in [png](163452458863504f49c7a23aa4a41af56b5b4611a6daf) Scene.Size: Refers to the number of destinations. The number starts from 0, and the value you entered in Size will be the number of destinations.Number: Enter the destination's X and Y coordinates. Coordinates of [1] will be the entity's first destination. Then it moves to the next number."},{"Property Name":"Interpolation","Description":"Determines the point's interpolation method. Operation is valid when there are more than 2 points.None: Default value, does not interpolate.SplineTypeA: Interpolate in SplineTypeA. Entity might not pass points in the middle. *Interpolation: If the entity follows a straight line between several points, the movement does not look smooth. Interpolation compensates for this by making the movement more soft by smoothing the path into a curve."},{"Property Name":"AutoStart","Description":"If enabled, the movement begins automatically upon the game's start."},{"Property Name":"AutoDestroy","Description":"If enabled, the component will be automatically deleted after the movement is finished."},{"Property Name":"SyncType","Description":"Chooses whetherthe component will be synchronized with server or client.Default: Operates in server, appears same in all Clients.ClientOnly: Appears and operates only on that particular Client."}]

#### Application

  1. Add TweenLineComponent to the Entity and set as follows.  
[png](1646283379788c89d5799ffb74e478c8d62d6db6be1e2)
  2. Tap the [gif](1635128047869e1e7391ce85e4e7989395243e2590395)



# TweenCircularComponent

It is used to make circular movement around the original point. You can adjust the number, speed, and range of rotation.

Let's take a look at the properties of TweenCircularComponent.

[{"Property Name":"Radius","Description":"Moves away from original point by input value before circular movement.The bigger the value, the further from center.","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"Property Name":"Speed","Description":"The bigger the number, the faster the entity's movement.","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"Property Name":"LookAtCenter","Description":"If enabled, the topside of the entity's square edge will face the centerpoint.","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"Property Name":"Degree","Description":"Rotates by input angle and then stops. When this is set to 0, the object will move continuously without stopping.","Unnamed: 2":"Radius","Unnamed: 3":"Moves away from original point by input value before circular movement.The bigger the value, the further from center."},{"Property Name":"IsClockwise","Description":"Defines the direction of rotation. Rotate clockwise if set to true.","Unnamed: 2":"Will be deleted.","Unnamed: 3":"nan"},{"Property Name":"AutoStart","Description":"If enabled, the movement begins automatically upon the game's start.","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"Property Name":"AutoDestroy","Description":"If enabled, the component will be automatically deleted after the movement is finished.","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"Property Name":"SyncType","Description":"Chooses whether the component will be synchronized with server or client.Default: Operates in server, appears same in all Clients.ClientOnly: Appears and operates only on that particular Client.","Unnamed: 2":"nan","Unnamed: 3":"nan"}]

#### Application

  1. Add TweenCircularComponent to the Entity and set as follows.   
[png](164628347830889af06e47ea34c718e77f29897772157)
  2. Tap the  [Start] button and run a test.  
If you only enter a Radius value, the entity will only rotate along the radius.  
If you apply LookAtCenter, the top edge of the entity's rectangle border is attached to the rotation radius and rotates toward the base point of the rotation.  




[{"Basic Rotation":"[png](1635132897859b8a88490ede14cf3ab4961b279af2fbc)","Apply LookAtCenter":"[png](16370579280376c43e57eec704eaea6bac377ce481b5c)"},{"Basic Rotation":"[gif](16351329567296ac3abbf46b64488b31bd416bd566412)","Apply LookAtCenter":"[gif](16351329728073d33972360c648cd9e11a4c70eb1c05f)"}]

# Reference - Ease Type

Imagine you wound up a clockwork toy and put it on the ground. It will slowly start, move at a constant speed, get slower, and then come to a complete stop. Most of the objects we encounter in our daily life move at different speeds. So a robot that keeps moving at the same speed looks rather awkward. In MapleStory Worlds, you can set different movement speeds and recoil of entities so that they move naturally. Maker offers 10 different types, and each of them has 3 variations. You can refer to the table below.

Types: Quad, Expo, Cubic, Quart, Quint, Circ, Sine, Elastic, Bounce, Back

Variation

  * Ease Out: It starts moving fast, slows down at the end, and stops at its destination.
  * Ease In: It starts to move slowly, accelerates, and stops at its destination.
  * Ease In-Out: Starts moving slowly, accelerates in the middle, then decelerates and stops at its destination.



[png](1635132999893719a42ed301645e8afcf19bb1a302ea9)