msw-ai-tf/maplestory-worlds-creator-docs huggingface dataset:
ImageComponent

This is the parent component for UI image printing components like SpriteGUIRendererComponent. It cannot be added directly to the entity.

# Properties

[{"index":"Color Color","0":"Sets the default color for the image."}]

[{"index":"boolean DropShadow","0":"Sets whether to output shadows for the image."}]

[{"index":"float DropShadowAngle","0":"Sets the angle to output the shadow."}]

[{"index":"Color DropShadowColor","0":"Sets the shadow color."}]

[{"index":"float DropShadowDistance","0":"Distance between image and shadow."}]

[{"index":"float FillAmount","0":"Percentage of the image with Type setting Filled. Use values between 0 and 1."}]

[{"index":"boolean FillCenter","0":"Sets whether to fill the center of the image area when Type is set to Sliced or Tiled."}]

[{"index":"boolean FillClockWise","0":"Sets the direction of filling when FillMethod is set to Radial90, Radial180, or Radial360. It fills clockwise if the value is true."}]

[{"index":"FillMethodType FillMethod","0":"Filling method when setting the Filled type."}]

[{"index":"int32 FillOrigin","0":"You can set the starting point for filling when Type is set to Filled. If FillMethod is Horizontal or Vertical, you can use values from 0 to 1. If FillMethod is Radial90, Radial180, or Radial360, you can use values from 0 to 3."}]

[{"index":"boolean FlipX","0":"Determines whether to invert based on the X axis of an image."}]

[{"index":"boolean FlipY","0":"Determines whether to invert based on the Y axis of an image."}]

[{"index":"int32 FrameColumn (Deprecated)","0":"This property is no longer used. Please use the AnimationClip Editor."}]

[{"index":"int32 FrameRate (Deprecated)","0":"This property is no longer used. Please use the AnimationClip Editor."}]

[{"index":"int32 FrameRow (Deprecated)","0":"This property is no longer used. Please use the AnimationClip Editor."}]

[{"index":"DataRef ImageRUID","0":"The image RUID to be displayed on the screen."}]

[{"index":"boolean Outline","0":"Sets whether to output the image outline."}]

[{"index":"Color OutlineColor","0":"Image outline color."}]

[{"index":"float OutlineWidth","0":"Outline thickness."}]

[{"index":"boolean RaycastTarget","0":"Becomes the subject of screen touch or mouse clicks if the value is set to true. The UI hidden behind will not receive screen touch and mouse click inputs."}]

[{"index":"ImageType Type","0":"How to display the image."}]

##### inherited from Component:

[{"index":"boolean Enable (Sync)","0":"Checks whether Component is activated or not."}]

[{"index":"boolean EnableInHierarchy (ReadOnly) (HideFromInspector)","0":"Displays whether this Component is Enable in the hierarchy. If Entity Enable is false regardless of Component Enable, returns false."}]

[{"index":"Entity Entity (ReadOnly)","0":"The Entity that owns this component."}]

# Methods

[{"index":"void SetNativeSize()","0":"Resizes the image to its original size."}]

##### inherited from Component:

[{"index":"boolean IsClient()","0":"Returns whether the current execution environment is a client or not."}]

[{"index":"boolean IsServer()","0":"Returns whether the current execution environment is a server or not."}]
Draw Polygon

# Course Introduction

You can draw various lines in the World freely by using PolygonRendererComponent.

# PolygonRendererComponent

`PolygonRendererComponent` can draw polygons in the World by connecting points. A polygon is drawn according to the order of the points added. If the lines intersect when connecting points, the polygon will not be drawn. If you need to check whether a polygon is drawn, use the `IsDrawable()` function.

If you enter the coordinates of the points as below, the polygon is not drawn because the line connecting (0,0) (3,2) and the line connecting (1,0) (2,2) intersect. [png](1692247765816f43f2f51cd72421fa5b6b38c8f1a1b4e)

The polygon is drawn if you enter the coordinates of points so that the lines don't intersect. [png](16922477424456fa94597546b46dfb64ac2eed48916c7)

The main properties of `PolygonRendererComponent` are as follows.

  * Click the Points Edit: [Edit] button to enable Edit. You can modify, add, and delete the point location in the Scene.
  * Color: Specifies the color of the polygon.
  * Points: The group of points that form a line. 
    * Size: Indicates the number of points connecting lines. The number starts from 0, and the points will be added as much as the value you entered for Size.
    * [Number]: The number of the point. The X, Y values are the coordinates of the point.



# Usage Example

#### Draw Polygon

  1. Create the new  EmptyEntity, and add it to TransformComponent, PolygonRendererComponent.
  2. Select Points of the PolygonRendererComponent and add the number to the Size.
  3. Enter the coordinates of the point, and specify the Color. [png](16944121241288615fed41bbe4d32bc36b4eea6e4b651)



> Tip If there are more than 2,000 points, no more points are drawn. If the points are placed to intersect different sides, the polygon will not be drawn.

#### Draw Polygon with Material

You can use Material's PolygonSprite Shader to paint a polygon. For questions about how to use the Material, please refer to [Utilizing Material](docs/?postId=828). You can use both user resources and cloned MSW resources as the Material's sprites available for PolygonRendererComponent. To learn how to clone MSW resources, see [Managing Resources](docs/?postId=690).

  1. Select Workspace - MyDesk - Create Material to make a new Material.
  2. In the Properties window of the Material you've created, select Shader - PolygonRenderer - PolygonSprite.
  3. Select the image you'd like to use for SpriteRUID. If necessary, adjust the Offset and Scale values.
  4.  Create EmptyEntity and add PolygonRendererComponent.
  5. In the MaterialId of PolygonRendererComponent, press  and specify the Material. [png](1694413381584443e343db0c5476daf441bf8017867cf)



> Tip Both the user resource and the cloned MSW resource must have their lab mode set to Repeat. [png](168422631874542cfe7bb765e4d659b113e430d223b99)

> Tip If you increase the size of the polygon to which the material is applied, the size of the material will also increase. When the Rotate value of the polygon changes, the Material's sprites will change accordingly. [png](169225197319446744ec0a8594315ade9ee52da40ac70)
Setting Game Start Position

# Course Introduction

Here's how to set the starting position of the Player Avatar. Let's look into the setting of the game's starting position, respawn, and test location during production.

# Default Position of Player Avatar

Default position of player avatar is the center of the screen. In X and Y coordinates, both values are 0. Basically, the game starting position and respawn position follow the same settings. You can check the basic position at [png](16346008379922a9b756c3912461db7195808cb554abd) DefaultPlayer's TransformComponent. [png](163515895824953612927a52740079e54f5fff52a4db3)

# Setting Starting Position with SpawnLocation

If you've placed it in a starting map, 'SpawnLocation' is where the player avatar first appears. IIf you've placed it in another map, 'SpawnLocation' can be used where the avatar is respawned or where it appears upon map entrance.

  1. Click Special Model from the Preset List.
  2. Place SpawnLocation model in [png](163452458863504f49c7a23aa4a41af56b5b4611a6daf)Scene.  
[png](1656036546711155b8385c0fb4001bda8ec16387d412e)



# Respawn Location during Play

You can place multiple SpawnLocations in each map as necessary. If there are several SpawnLocations in one map, the distance between SpawnLocation and player avatar will be used to determine the respawn position. In the example below, the player avatar died between the two spawn locations. Even though the avatar had been moving to the left, it will reappear at the SpawnLocation on the right, as it's closer. [png](1634957591109e98512448cae4044ae9a75e96b22221a) Place SpawnLocation appropriately to make a few checkpoints in the game. It will encourage users to replay, as they won't have to start the game over from the beginning.

# Setting Starting Position for Test

You might want to check a certain part of the game during production several times. In this case, it would be much more efficient to start from a desired position, rather than starting from the beginning. You can use [png](1634538307569eec2919eb0d84163aa7be63651bd165d) Play Here to set the starting position for the test.

  1. [png](163452458863504f49c7a23aa4a41af56b5b4611a6daf)Located below the Scene tab [png](1634538307569eec2919eb0d84163aa7be63651bd165d) Play Here button is selected.   
[png](17617248549680bd501dfcee840dbb7eb05c1fed935eb)
  2. Place it by moving to the position where the test will start (above a tile or platform).  
[png](1740551251453a53f6916f5d6499e86c8c453f7304fdc)
  3. Press Start [png](163453086660754178e0ff96a45c58d1a580a4dfab9d1) to test.
  4. The player avatar will appear in the set location.



> Tip For the test, "Play Here" takes priority over SpawnLocation.

> Tip If you set the starting point without any foothold or tile, the character will appear in the middle of the screen. Place the character above a foothold area if you want it to appear in a particular spot.

##### Reference Guide

[Editing Initial Character Properties](/docs?postId=48)
Utilizing Creation Guide

MapleStory Worlds provides guides in the various formats. If you're a creator new to MapleStory Worlds, we recommend that you check the basic Creation Guide - Getting Started - [Using Maker](/docs?postId=724) first to learn the basic features.

# Difficulty Level

Before checking the guide, you can check the Target badge to make sure it's the right difficulty level for you.

  * Lv.1: For creators who want to use basic features of the Maker and Components
  * Lv.2: For creators who know basic MSW grammar and can create simple movements
  * Lv.3: For creators who know and can leverage the server-client relationship
  * Lv.4: For creators who know Worlds and instances, and consider optimizing Worlds and their security



# Basic Creation Guide

The Basic Creation Guide provides a detailed introduction to the basic features of MapleStory World Maker, concepts of APIs, and how to use each API.

#### Using Maker

  * [Workspace](/docs?postId=121)
  * [Hierarchy](/docs?postId=453)
  * [Adding and Deleting Components](/docs?postId=58)
  * [Setting the Game's Starting Position](/docs?postId=115)
  * [Editing Initial Character Properties](/docs?postId=48)



#### Understanding Concept

  * [Model](/docs?postId=55)
  * [Map Layer](/docs?postId=53)
  * [Entity, Component, Property](/docs?postId=54)
  * [World Instance](/docs?postId=984)
  * [Utilizing DataStorage](/docs?postId=692)



#### Script

  * [Script Editor Orientation](/docs?postId=56)
  * [Property](/docs?postId=205)
  * [Property Synchronization](/docs?postId=208)
  * [Execution Space Control](/docs?postId=210)
  * [Function](/docs?postId=172)
  * [MSW Default Event Function](/docs?postId=163)
  * [MapleStory Worlds Lua Basics](/docs/?postId=822)



#### Terrain and Movement

  * [Understanding MapleStory Movement Concepts](/docs?postId=750)
  * [Using Ladders and Ropes](/docs?postId=809)
  * [Making Footholds](/docs?postId=71)
  * [Utilization of RectTileMap](/docs?postId=589)
  * [Creating Map with SideViewRectTile Mode](/docs?postId=758)



#### Resource Creation

  * [Basic Concepts of Character Cosmetics Creation](/docs?postId=588)
  * [Registering Avatar Items](/docs?postId=590)
  * [Making Animations](/docs?postId=595)



#### Security and Optimization

  * [Analyzing World Performance with Profiler](/docs?postId=1078)
  * [Optimizing Property Synchronization with TargetUserSync](/docs?postId=1119)
  * [Efficiently Utilizing DataStorage](/docs?postId=1073)



# Application Creation Guide

The Application Creation Guide is divided into System Implementation Examples and Following the Game Creation. The System Implementation Guide introduces utilization examples created with various components and services provided by MapleStory Worlds. You can follow the guide to learn the features or reflect its contents to your own World.

#### Following the Game Creation

  * [Playing Avatar Animations in UI](/docs?postId=1147)
  * [Killing a Monster with a Ranged Projectile](/docs?postId=934)
  * [Shop and Inventory](/docs?postId=1104)



#### Following Game Creation

  * [FlappyFish Remake](/docs?postId=1100)
  * [Spiegelmann Game Remake](/docs?postId=1099)
Loading and Managing Your Worlds

# Course Introduction

We will learn how to load a created World and how to manage it.

# Loading World in Production

  1. Click the [Create] button in the menu. [png](1685699078924e29ff21396614c3d8f1efcb8b84f7e99)   

  2. Select the World you want to load from the list. [png](17271621059070a0ef5aca21f44baac90b278907d30da)   

  3. Click the [Edit] button in the World information to load the World being created. [png](172906902884778aa8b98c0ec4ea5b78023381c2b129f)



# Revision management

When you create a World, you need to create and manage revisions. Creating a revision whenever you make a significant change keeps your work safe because you can revert your World to a previous revision when you need to. It's also a convenient way to track and manage previous versions.

##### Create Revision

Go to File - Revisions menu to create a revision. [png](16892261674937e4332ad952c4bfba92ca79c12271eb4)

In the Revisions window, click the [Create Revision] button to save the revision with a simple memo. [png](17271578271160e214b1d91564e0da34e90f6211d2d1d)

##### Revision Management Feature

In the Revisions window, you can use the following features. [png](1727157901202ce9c5e26c6da404cb0bfc6aa4f85009a)

[{"Numbers":"[jpg](1634541272181b5c1a55fcf3d49b19734d25913c38583)","Function":"Modify memo","Description":"Modify revision memos."},{"Numbers":"[jpg](1634541300837cb541c2f44e046a79bb1901a885aa8ac)","Function":"Download","Description":"Download mod file of the revision."},{"Numbers":"[jpg](163454131465069e090278448490f965207e9a4a10348)","Function":"Restore","Description":"Restore to the revision. Individual Worlds can revert revisions immediately, but group Worlds can revert revisions only after turning on the recovery mode. For more information, refer to Recovery Mode in [Coproduction](\/docs\/?postId=670) Guide."},{"Numbers":"[jpg](1634541326353d8628c1473944497bf376acb7a65ca45)","Function":"Remove","Description":"Remove revisions."}]

  
> **Learn more** > You can also manage revisions by clicking the **[⋯] - [Revision]** button in the World Info. > [png](17271609155899f9db5cc2797418faffd464c8f8c1c0e) > [png](172716186989383aa3b535ba542dd91843e7ee2c3a52a) 

# Delete World

Only unreleased Worlds can be deleted. You cannot delete a World that has already been released.

  1. Select the World you want to delete from the list. [png](17271621059070a0ef5aca21f44baac90b278907d30da)   

  2. Click the [⋯] button. [png](172906927536113ef61a34a204469923fa8fa470ffa30)   

  3. In the WORLD MENU pop-up window, click the [Delete World] button to delete the World. [png](1727157958421e8faeb5b3eff42b082d0241cedfff299)   




> Learn more You cannot delete a World that has already been released. Only the [Revision] and [Critical Report] buttons are visible in the WORLD MENU pop-up window of a released World.
Creating Maps with SideViewRectTile Mode

# Course Introduction

RectTileMapComponent and KinematicbodyComponent are suitable for top-down view game production, but not for side-scrolling game production. SideViewRectTile supports side-scrolling-type movement, jumping, and collisions with tiles to produce side-scrolling games easily using RectTileMap. We'll discuss how SideViewRectTile mode works, and create a map.

> Learn more SideViewRectTile mode is based on RectTile mode. Before trying this course, please refer to [Utilizing RectTileMap](docs?postId=589) first.

# Change SideViewRectTile Mode

To use SideViewRectTile, you need to change the map tile mode. The first way to change Map Tile mode is to select the current map entity from the Hierarchy  and select Switch To SideViewRectTileMap from the right-click menu. [png](1686212940229528039cf5e884de28be22ce0db30fcd2)

The second way is to long-press the Tile Editor button on the top menu to open the Select Tile Mode menu, and then select SideViewRectTile. [png](1658472803827bec010dc49a346efbc96c900cbe8ca0a)

If you select SideViewRectTile mode, the Scene  will change as below. [png](16587495455372f3485bfe4304859a62f38fe743d002d)

# Create SideViewRectTile Map

Creating a map in the SideViewRectTile mode is generally the same as the RectTileMap production process. We'll create a simple SideViewRectTile map as shown below. [png](1658474735348794bdba4e80f40338aefc482a15595e0)

First, let's save the four images below. [png](16584737735555de4cfef1e6846b881fb08dd974e18f1) [png](1658473786750f09028c3d7164a2694e9f0a099456a1c) [png](1658473808386f01655943b5f452a842aaf7f7ba3c4a6) [png](1658473825666f3080a29dece4ce685465b7018636cbe)

  1. Change the tile mode to SideViewRectTile.   

  2. Add the four images you downloaded above to  Resource Storage - My Resource - etc. [png](165874972066502a39c24bbd646c384b9486e3bb4881d)   

  3. Search back-4 on the Preset List  - Background and then select it to change the map's background. [png](1658475486669606fbfbe07024b8dad2697df10431fec)   

  4. Press the "[+]" button on the upper left of the Tile Set Palette, and then select Create Empty TileSet. Enter the name of the new Tile Set as TileSet. [png](165874984152737132bbc9da841f7b3ba6690a8d9fefd)   

  5. On the bottom of Tile Set Palette, click the  icon on the lower left of the Tile Set Palette, and then select Add ResourceStorage Image. [png](16587499138192f06f82cfafb4535a1b7431d757df55d)   

  6. Select the images you have added in advance from the Resource Picker. [png](1681090600455cf1b5be97cca41538edc1002fed32cee)   

  7. Select a tile from Tile Set to decorate the map as desired. In addition, place suitable objects for the map. [png](16584776165678f4bf1e92d9845bcb7a0745d3802952d)   

  8. Set the tile as immovable to make the character stand on the tile. [gif](16587502264797ed1bf2dbc3447d39081743abf93e075)   

  9. Press the [Play]  button to check if the side-rolling movement works well. [gif](1658478611789db5a20547f4f40a5bec1c0b961ad97a7)



> Learn more For the movement on SideViewRectTile, please refer to [Controling Character Movement from SideViewRectTileMap](docs?postId=759).