Difference between revisions of "Map Editing Tutorial"

Jump to: navigation, search
m (Adding Graphics from the Graphic Library)
m
Line 52: Line 52:
 
==== Scrolling Around ====
 
==== Scrolling Around ====
  
To scroll around, use the arrows on the edges of the map, or click (click and hold also works) on a spot in the mini-map (located at the bottom). You'll notice that the background appears to be small or cut off by a small portion at the bottom. This is fine, as the map will automatically resize the background when you actually go to it. In background mode, the background looks smaller, while in Normal mode, the background looks bigger.
+
To scroll around, use the arrows on the edges of the map, or click and hold to drag the red box on in the mini-map (located at the bottom). You'll notice that the background appears to be small or cut off by a small portion at the bottom. This is fine, as the map will automatically resize the background when you actually go to it. In background mode, the background looks smaller, while in Normal mode, the background looks bigger.
  
 
The top-right of the map editor shows your current position with your cursor. The position (0, 0) starts from the top-left and increases the further down and right you go.
 
The top-right of the map editor shows your current position with your cursor. The position (0, 0) starts from the top-left and increases the further down and right you go.

Revision as of 08:26, 28 March 2020

If you've read the forum thread(s) and page on Map Editing, it might overwhelm you at first. This tutorial (with images) will help first-time players get used to the map editor, without making it seem difficult for them. In addition, an example will be demonstrated on a step-by-step basis.

General Information

This tool has been used for creating official maps in Paw'D. If you want to gain access to the map, file a ticket through /support.

With access, you gain control to the dashboard and the map editor itself. You'll have to log in first. Some of the links and features on dashboard are broken, so use the alternative map editor link instead.

Navigating through the Dashboard

The dashboard stores your custom maps in a convenient list, showing basic information and statistic data about how many times it was viewed and when the map was last accessed. Under Custom Graphic, you can add your own graphics using Add, and manage them under List. You can also add a new custom map using Add New, however this link is broken.

Under Manage, it offers the same basic information as well as additional settings. These settings include:

  • Option to enable PvP (player vs player) and/or GvG (guild vs guild) for the map
  • The custom map's code under Code (Link and Download Game Client are broken)
  • Disabling guest access to the custom map
  • Delete the custom map (it won't be deleted immediately, have to wait several hours), and edit the custom map (this link is also broken)

Navigating through the Map Editor

Creating your First Map

When you first start up the map editor, you'll be taken to this screen below. Log in using your Paw'D credentials.

MapEditor1.png

On the bottom-left of the screen, select the map size you want (length [left to right] and width [top to bottom] in pixels). By default, the size is set to 800 x 800. Then press New. Then press the button called Bg (to show that the map has been created with the default background). You have created your first map. If you make any mistakes, you can click New again to reset the whole map without refreshing (it won't be uploaded to the server until you save it).

Don't forget that since the chatbox takes up 200 pixels of space, you want to build your graphics so that your platforms are 200 pixels higher.

If you've created several custom maps and want to return to this map later, the dashboard only redirects you to a broken link of the map editor. Instead, erase the file's text box so that it is blank, then use Load to bring up a list of custom maps. This way, you can access your other custom maps.

Background Layers and Scrolling

The game automatically adds a background for you once you have created a new custom map. This background is a sky that changes depending on in-game time. To show/hide the background, tick the checkbox beside Background. For this tutorial, all checkboxes have been ticked.

MapEditor2-v2.png

Notice that the button for Bg (background) is highlighted in green. This means that the menu is in background mode. To exit the background mode, simply click on the Bg button to turn it blue. You can switch to monster mode by clicking on the Mobs button, and exit from it by simply clicking the button again. When both buttons are blue, that means you are in Normal mode.

If you want to change the brightness of the background, you can go to Options beside the Save button, tick the box beside Dim Background, and set the % to whatever we want it to be. This will apply globally.

Setting a Different Background

If you want a different background other than the sky, switch to background mode, and click Browse. Use the dropdown list to select a type of terrain, and the other dropdown list as Background. Click on the background you want, then press Ok. The background is now added to your Quick List.

To set the different background, click on Set. This way, the game will automatically set the background to the screen, so you don't have to worry about where it is positioned. If it is not showing, exit out of background mode to see the reflected changes.

The editor also allows you to flood fill a background onto a certain area of the map, although it doesn't seem to work as intended. Only one background can be used for each layer. If you want to combine backgrounds (to a max of 3), the game doesn't have many default backgrounds that can be combined together (you'll only see Layer 2 or 3 depending on the number of backgrounds you want to set). Select Layer 1 (this is the back-most layer), choose the background, then set it. Then, select Layer 2, choose the background, then set it, and vice versa.

Scrolling Around

To scroll around, use the arrows on the edges of the map, or click and hold to drag the red box on in the mini-map (located at the bottom). You'll notice that the background appears to be small or cut off by a small portion at the bottom. This is fine, as the map will automatically resize the background when you actually go to it. In background mode, the background looks smaller, while in Normal mode, the background looks bigger.

The top-right of the map editor shows your current position with your cursor. The position (0, 0) starts from the top-left and increases the further down and right you go.

If you went outside the map by clicking and holding the red box on the mini-map, and want to fix it so your screen stays within the map's borders, use the left and top arrows on the edges of the map to automatically correct it.

List of Controls

The map editor is known to have some inconveniences for the user. If you are trying to type something into a box or move something around, it might not work. Click on a text box somewhere on your browser (such as the search bar), then click somewhere inside the map editor to bring it to focus. Then it should work (if not, click somewhere else on your browser and onto the map editor again).

These controls only work when you're about to set the graphics down, not when they have been already placed. When you change the size, it'll stay that way for every graphic you put down, whereas you have to manually mirror for each object. Click the select button to unselect a graphic.

  • M to mirror the graphic/monster horizontally
  • + to increase the size of the graphic (the bigger it is, the more pixelated and lower quality it gets)
  • - to decrease the size of the graphic (sometimes this does not work, even if you try to bring it to focus)
  • * to reset the graphic back to it's original size.

These controls are focused on repositioning the graphic object (while they are selected/highlighted) after already setting them down. You can move the object by a pixel in the direction you want using the arrow keys. You cannot mirror or change their size after they have been set.

  • Page Up to bring the object one layer forward (towards the front)
  • Page Down to bring the object one layer backward (towards the back)
  • Home to bring the object all the way to the front (front-most layer)
  • End to bring the object all the way to the back (back-most layer)
  • Delete to delete the object.

When a platform (shown as a blue line with circles) is selected, you can move around the circle (referred to as nodes) using the arrow keys. When selecting the platform again, you are selecting the last node by default. You can only create platforms that go from left to right, not right to left (the server will give you an error when you try to save the map).

  • Page Up to move to the next node (towards the right)
  • Page Down to move to the previous node (towards the left)
  • Delete to delete the platform.

For functional objects such as jump hints, portals, and respawn points (you can only set a max of one down), you can only move them around by pixel-precise movement using the arrow keys. Monsters can be moved using the arrow keys and mirrored using the M key after they have been set. You can change the properties of portals and monsters (you have to be in focus first) by right-clicking on them.

Adding Graphics from the Graphic Library

Next, we want to add graphics into our map. Parts of the landscape, such as dirt, grass and trees are needed. Remember that your graphics should be placed in a way so that when platforms are placed, the platforms are 200 pixels above the chatbox. For instance, if your map was 1000 x 1000, you want to make sure that your grass is placed between 750 and 800 (for rocky/snow maps with slopes leading upwards, you can place them way higher). I used an object to show where the 800 pixel mark was on the map.

To add a graphic, switch to Normal mode by exiting out of either Background or Monster mode (Background mode also works, but it is easier to work in Normal mode). Click on Browse, then use the dropdown list to select the terrain you want, and go for platforms (sometimes scenery). Choose the graphic you want, then paste it onto the area you want the graphic to be on.

MapEditorGraphics.png

MapEditor3.png

The graphic will also be added to the Quick List on the top-left of the editor, allowing you to re-select it again. You can remove graphics from the Quick List by clicking the x associated with the graphic. The Quick List will be wiped once you leave the map editor or refresh the page.

There are 19 different Areas you can select from, such as: Grass, Beach, Cafe, Cave, Cave2, Class, Earth, Factory, Garden, Jungle, LargeTree, Monastery, OneTimeAssets, Ruins, Snow, Spaceship, Temple and Treehouse.

There are four kinds of graphic objects, such as: Background, Platform, Scenery and Sounds. Not every Area has all four of these types.

Correcting the Positions and Layers

To correct the position of the graphic after setting it down, select it, then tap the arrow keys to move the graphic pixel by pixel in the direction you want. A reminder that you cannot mirror it or change it's size after you set it down.

You will notice that the graphics don't work well with each other, and may look cut off. In order to deal with that, reposition the layers by using the Page Down and Page Up keys.

In this case, I used 2 Fill A (Earth) and 3 Platform D's from the graphic library under Grass - Platform, 1 Cafe from the category Grass - Scenery, and 1 Wooden Blank - Separator from the category Beach - Scenery to show the 800 pixel mark.

You can partially overlap two of the same graphics together so that they can fit, and reposition the graphics using the Page Down and Page Up keys. However, some graphics won't allow you to do that by the nature of their design (may still look cut off). If the graphics are too big, shrink the size of the graphic before setting it down. If you cannot shrink it, you can put graphics that sit between the borders of your custom map, to fit your needs. The server will automatically cut off parts of the graphic that sit on the outside of the borders once in-game.

The Three Layers

On the bottom-right, you can select between three layers: Background, Platform and Foreground.

The background is the layer that you'll work with most of the time when adding just about anything in the map editor.

The platform layer is located between the background and the foreground, focusing on the platforms themselves. If you have too many graphics in your custom map and can't see the platforms, this layer will dim out all of the graphics (this won't prevent you from accidentally clicking on graphics).

The foreground is the layer in the front. If you want to bring a graphic object directly to the front without having to use the Pg Down and Pg Up keys all the time, you would switch to the foreground layer, select the graphic and paste it to wherever you want. This will dim all objects that are in the back.

Changing the Color of Graphics

The game uses a color code style called Hue, Brightness and Desaturation. This is similar to HSV (Hue, Saturation and Value) for colors, not the RGB model. To change the color of a graphic object, select it, then click on the values beside Hue, Bri and Des. You may need to click on a browser's text field first for the values to be registered.

  • Hue represents the type of color (e.g. red, green, blue...)
  • Brightness represents how light or dark the color is (e.g. 0 = default, 255 = white)
  • Desaturation represents how colorful or faded the color is (e.g. 0 = colorful, 255 = greyscale). Think of it similar to colored and grayscale printers.

Don't worry about the Advanced button. This is for questing/scripting purposes only. The Default button is used to reset the graphic object's colors back to normal.

Note that the color of some graphics cannot change due to the way they have been designed. Some graphics may change their colors differently from what you expected it to be (even if you found the HSV values for the color turquoise and put them into the editor).

Adding Sounds

Without sounds, a custom map does not have any feel to it. To add sounds, select Normal mode or Background mode > Browse, and choose one of the categories with Sounds in it. Then choose whatever you feel best suits your custom map.

Once you select a sound, it will appear as a speaker. The speaker is an invisible object that projects the music into the map. The closer your character is to the speaker, the louder the sounds are. You can mix and match different sounds in a custom map, however it may become distorted and choppy depending on whatever you choose.

For best results, spread out your speakers so that they cover the entire custom map. Do not add too many speakers, and do not add too few speakers (you'll have dead spots in your custom map where there is no music playing).

Platforms, Jump Hints, Portals and Respawn Points

You may now have graphics in your custom map, but if there are no platforms, then you can't actually explore it in-game (you'll just fall to your doom).

MapEditor4.png

In Normal mode, select the Platform button (this will be highlighted in green). Then, click somewhere around the 800 mark indicator, on the left side of the map. This will create a node. Then click on the right side of the map, while following along the 800 mark indicator. This will create a second node, and a blue line is drawn from the first to the second. These blue lines are where your character stands on (adding more than 2 nodes makes the platform complex). In other words, these are platforms (also called vectors).

You cannot place your nodes on the right, and work your way left. Instead, you have to start from the left, and work your way right when placing platforms. Click on the select button to cut off the platform instead of adding more nodes to it.

Use the arrow keys to move the node (will start from the most-recent node first) after they have been set if you need to adjust them. Use the Page Down and Page Up keys to switch between nodes.

The Properties of Platforms

Once you got the hang of placing down platforms, you might be wondering what the buttons NJF, NJT and NJ do. They are all shortcuts for creating platforms with different jump conditions. In all three cases, you can fall as long as there is a platform underneath (if there isn't, the fall won't work).

  • No Jump From: You can't jump to any other platform. For example, if you were on Platform A (set to NJF), you can't jump to Platform B (normal), but you can still jump on Platform A itself.
  • No Jump To: You can't jump to this platform. For example, if you were on Platform B (normal), you can't jump to Platform A (set to NJT), but you can still fall if there was a platform underneath it (if there is no platform underneath, the jump won't work).
  • No Jump: You can't jump on this platform at all. This is a combination of both No Jump From and No Jump To.

You might be wondering, is that all there is to platforms? No! In fact, if you go ahead and select a platform you've placed down, you'll find the Advanced button. There is also a checkbox for in BG, which means In Background, but we don't worry about that when creating maps, until we want to make platforms that show monsters wandering around in the distance. But this is not important now.

MapEditor4-2.png

When we go ahead and click the Advanced button, you'll get a screen similar to this one. Don't worry about the Effect ID text boxes, as well as the May Jump To Condition, On Enter Call and On Leave Call. These are used for scripting/questing.

Instead, you want to pay attention to the Segment Flags, and the big list with small text on the right. Each of these in the list are called segments, however I'll call them conditions to make it clearer. Each number is associated with a condition; something that happens on the platform. You can click on one of the conditions in the list to add it to your platform. You can combine conditions; these will be added as a sum under Segment Flags (1 [no jump from] + 2 [no jump to] = 3 [no jump]). You can test these conditions yourself to see what happens. After selecting the ones you want, pressing All will save that condition to the entire platform.

If you want only part of your platform to have a specific condition, you would press Ok to save that condition to the node, select the previous node, change the condition, then press Ok. For example, if I wanted to stop someone from jumping from the right side of platform A onto platform B, I would make a platform called Platform A with four nodes in it. Then I would set the two nodes on the right to have the condition No Jump From. That way, they can't jump from the right side of Platform A. Remember that you start from the most recent node when selecting platforms.

Jumping Down? So Does the AI

You can now create platforms, but what if you want your character to jump down? Your character is not smart enough to realize this. What if you want your auto-move and the monster AI to know when to hop to another platform when it might be slightly out of reach? In both of these cases, you need jump hints.

To create jump hints, you need at least 2 or more platforms. Go to Normal mode and select the Connect button. Select a platform that you want to jump from (we'll call this Platform A, and assume that it's at the top). This will turn the Connect button pink. Then, select a platform that you want to jump to (we'll call this Platform B, and assume that it's at the bottom). This will draw a yellow arrow to connect the two platforms. This will enable you to jump down from Platform A to Platform B.

Normally, your character already knows how to jump up from Platform B (bottom) to Platform A (top), so we don't need a second jump hint. But if the platform is too high for your character to jump onto, we'll need the extra jump hint for them to do so. The AI is not smart enough to know how to jump upwards and downwards too, so we'll need both jump hints (A->B and A<-B). At most, you should only have 2 jump hints between 2 platforms (any more is excessive).

When selecting a jump hint, you'll see two different checkboxes. When No AJ is ticked, this means that only monsters know how to use the jump hint. Teleport means that the character will immediately warp to the other platform instead of jumping to it.

Note that once you save the custom map, sometimes the jump hints are not saved by the server, or marked as red (jump hint does not work/has errors). In this case, delete any red jump hints and re-add them to the platforms again.

Portals and Properties

If you want to connect your custom maps together, you need to create and configure portals. Portals cannot be placed outside of the map (the server will give you an error when trying to save it).

To create a portal, go to Normal mode and select the Portal button. Place it somewhere along your platform (a few pixels above the platform, or else you will fall off).

To configure the portal, select it, right-click it and select Portal Properties. You'll be directed to this screen.

MapEditorPortals.png

We don't care about the NPC Script Call and Display Variable, and it is not necessary to edit the portal's width and flags (this just changes the color/look of the portal). Instead, we want to look at the Target Map ID and the three checkboxes below.

When you click on the button next to the Target Map ID, it brings up a list of custom maps you've created. Let's assume that we've created a custom map called Test2, and had a platform placed at the [0, 500] to [500, 500] mark. We want to select Test2 from this list to automatically get the ID, and manually set the position to [250, 500] (so that the portal is in the middle of the map). This way, the portal goes to Test2, under those coordinates. If we leave it this way, it's called a one-way portal.

When selecting the custom map from the list, the mini-map for that custom map appears. You can click on a specific part of the mini-map to automatically set the coordinates, though this is not recommended (the mini-map is too small, so it's hard to see where the platforms will be). You might accidentally set the position to somewhere where you'll fall off.

If we want to make a two-way portal, we have to first save this custom map called Test, then load the other custom map called Test2. Then, create a portal and get to the configuration screen. We have to remember the coordinates of where we set the platform on Test (let's say it was from [0, 300] to [240, 300]). Let's set it to [120, 300]. This way, the two maps are connected. We do not have to be exact with the coordinates; it is still safe to put the coordinates a couple of pixels above the platform.

When the Mini-Map checkbox is ticked, you'll see the portal as a yellow square on the mini-map, otherwise it won't be seen on the mini-map. If you want the portal to be animated, tick the checkbox next to Animation. If you want the portal to immediately take you to the next area, tick the checkbox next to Auto-Warp (if left unchecked, the player has to manually press the jump key themselves to go in the portal).

Respawn Points

The respawn point tells you where your character should be revived at once they are knocked out, and where they will directly spawn to once they enter the custom map (through a code).

To set a respawn point, go to Normal mode and click on the Res button. Then set it anywhere you want it to be (preferably somewhere on a platform). You cannot have more than one respawn point (once you try setting down a second respawn point, the first one disappears).

Adding Monsters from the Monster Library

What good is a custom map if there isn't any monsters in it? We'll begin by clicking on Monster mode, and then clicking the Browse button. You'll come to a screen like this. Note that you can't see jump hints while you are in Monster mode.

MapEditorMonster.png

Notice that as you scroll down the list, each monster is assigned an ID, and a maximum number of spawns. This means that you are limited to having a certain amount for each monster in your custom map. Not every monster from the game is included in this list. The ID represents their number in the Monster Compendium.

Let's choose a Fliffy, and spawn it somewhere on the platform. Before setting it down, it will show the monster's range and set line.

MapEditor5.png

We have placed our very first monster onto our custom map, but it won't move on it's own unless we attack it. In order to make the monster move, we need to set a Patrol.

Click on the Patrol button, and then select the monster. When you move your cursor, you'll see a blue line extending from the left and right sides of the monster. Extend the blue line as much as you want, then left-click to set it. This line will tell the monster how far they can move on their own.

Tinkering with the Monster's Properties

Right-click the monster to see it's properties (if you cannot get to the properties, move your monster into an area with fewer graphics and try again). You'll come to a screen like this.

MapEditorMonsterProperties.png

The 4 represents the monster's ID (for Fliffy). The Map Editor doesn't allow you to set a monster that is not permitted within it's limits (e.g. If you tried to summon Zafyre, the server will not let you save the custom map because it doesn't allow it).

You can change the monster's respawn time (by default, it is 1 hour or 3600). The reason why it is given in a range is so that monsters don't spawn all at once (some can spawn slightly earlier, some slightly later). You can also tick the No Respawn checkbox for the monster to have a near-instant respawn time.

In the On Respawn text box, you can modify a monster to become Friendly, Neutral or Hostile by typing in monster:hostile, monster:neutral or monster:friendly. Some monsters are already hostile, neutral or friendly by default. The Map Editor usually decides this on it's own.

You can tick the Assist Any checkbox so that when a fellow monster is attacked within it's assist range, the monster will always come to it's aid.

Aggro and Assist Ranges

The aggro range (indicated by a yellow circle around the monster) tells you how far away the monster will be triggered if you step into their circle. By default, monsters have a medium radius set around them. To change the radius or reduce it to almost nothing, click on the Aggro button and then click on the monster. Move your cursor to expand or shrink the circle around the monster, then left-click to set it.

To check the monster's aggro range (indicated by a red circle around the monster), click on the Select button and click on the monster. This only matters for hostile monsters, not neutral monsters.

The assist range (indicated by a green circle around the monster) tells you how far away the enemy will care about a fellow monster being attacked. By default, monsters have a medium radius set around them. To change the radius or reduce it to almost nothing, click on the Assist button and then click on the monster. Move your cursor to expand or shrink the circle around the monster, then left-click to set it.

The assist range only matters for monsters whose Assist Any checkboxes have been ticked in their properties, or those who have been linked together. If the assist range is too small, the links won't work.

Both and One-Way Links

Let's assume that there are two monsters, called Monster A and Monster B. Monster A and Monster B are linked together (using Both). If you attack either one or either one attacks you, the other will come to help them.

To set a both link, click on the Both button, then select two monsters that you want linked together.

Now let's say that Monster A is linked (one-way ->) to Monster B instead. If you attack Monster A or Monster A attacks you, Monster B won't help out. However, if you attack Monster B or Monster B attacks you, Monster A will help out.

To set a one-way link, click on the One-Way button, select the monster that you want it to link from, then select the monster that you want it to be linked to.

Other Options and Saving the Custom Map

Finally, we want to take care of a few things, such as giving the map a name and a realm to exist in.

MapEditorOptions.png

Under Options, you have a couple of other features. These include dimming the background, locking the map and making the custom map Read Only. If you want to check your login information again and change it, click on the button with a key on it. Hit OK once you are done.

Once you are done with your custom map, you want to enter a name for it before saving it in the text box beside File. This is the actual name of the file that gets uploaded to the servers, not the name of the map that you see in-game.

Limitations and Server Delays

  • The server can only upload so much of your file at once. You'll have to wait somewhere between several hours to a day for the custom map to properly implement platforms (that had their conditions changed), jump hints, portals, respawn points and monsters.
  • Uncheck Use Cache, then exit and re-enter if the custom map is not properly updating after waiting for some time.
  • Only add jump hints after you are sure about your position placements for your platforms. If you happen to move the platforms connected to jump hints, the jump hints will successfully be loaded to the server, but once in-game, they won't work.
  • There are limits on the number of things you can place onto a map, if you happen to place too much.

Summary

  • First, choose a size and file name for your custom map.
  • Set a background to your custom map (if you are not happy with the default).
  • Add graphic objects (part of the background, platforms, scenery and sounds).
  • Fix the layers of the graphic objects.
  • Create platforms, jump hints and a respawn point (so you can walk in the custom map).
  • Revise jump hints and platforms so that they work.
  • Add and configure portals to connect your custom maps together.
  • Bring monsters into your custom map.
  • Configure the monster's settings.
  • Finally, choose a proper name for your custom map (and don't forget to save).

Thank you for reading this tutorial. Most of the information gathered has been to my experience of using the map editor, asking questions and using the wiki pages as a reference.

Written by localguest.