Getting Started with MMORPG Maker XB (v.0.3)

[Administrator]

NOTE: Screenshot thumbnails are provided. Click on each thumbnail to view the full image.

In this tutorial, we will teach you how to create a level, import graphics, create a custom interface, create custom sprites and animations, introduce you to events, teach you about plugins, and more.

Ultimately, we'll take you step-by-step through the most important concepts of MMORPG Maker XB and teach you how to create a level and add an NPC we can talk to all while teaching you how to completely customize it with custom message box graphics, custom interfaces, custom NPC sprites, etc.

This tutorial might appear lengthy but that's because we wanted to make sure we covered the important foundational concepts. In reality, once you finish this tutorial and fully understand the concepts and how to use MMORPG Maker XB, it should not take more than 5-10 minutes to do everything taught in this tutorial.

With that said, let's get started...

Start by creating a new project in MMORPG Maker XB.

Level Editor

1. Once you've set the project name and created a new project, the default editor screen should appear and will look like this:



2. On the left hand side, you should see "Sample" highlighted under the "Maps" folder. Double-click it.

3. The sample map should load. On the left-hand side, double-click the "Tilesets" folder. A list of pre-loaded tilesets should be displayed (don't worry, you can still import your own custom tilesets).

4. Double-click "MT - Medieval Town.png" and the tileset should load. Your screen should now look similar to this:



5. For this example, we're going to lay down a single tile. You can add more tiles later. We're going to use the grass with dirt tile and paste the tile in front of the door. Here's a picture so you can get an idea of the tile's whereabouts:



6. As you can also see, I've already pasted the tile on the front doorstep. To paste a tile on your map, all you have to do is click on the portion of the map you want the tile to be pasted. You can also click and drag to paste multiple tiles more easily.

7. Now let's add an "Inn" sign to the house. Start by clicking the "Layers" button at the top. We're going to choose the top-most layer (Layer 3).



8. Once you've selected Layer 3, all the other layers should become semi-transparent. Now, choose the inn tile and paste it to the right side of the house like so:



9. Click the "Play" button at the top, and we should see the tiles you just added to the map already included in the game!



10. Click the "Save" button to save the map. We're done with the map for now.

Panel Editor/Custom Interfaces/Plugins Tutorial

11. On the left-hand side, click the "Panels" folder to highlight it. The folder needs to be highlighted for this to work.

12. Once the folder is highlighted, click the "New" button at the top-left corner.



13. A new panel will be created and you should be taken to the Panel Editor. The Level Editor should no longer be visible. Your screen should now look like this:



14. It's time to create a custom interface. For this tutorial, we are only adding a chatbar and message box to our custom interface. You can give your interface a better design on your own. We don't include any default interface panels or interface graphics with MMORPG Maker XB so you'll either need to design your own or use the following images:





Save each of the above two images to your hard drive.

15. Now that we have our interface images, we need to import them into MMORPG Maker XB. Click the import button at the top.



16. Under the heading "Upload to:," choose "Images." You will also notice other folders such as "Tilesets" and "Spritesheets." You can import other graphics into these folders to use your own tilesets or spritesheets, but you want to upload only to the "Images" folder right now otherwise you won't be able to use the images for your interface.



Click the "Browse" button and find the images in your hard drive. Once you've found the image, click the "Upload" button. Repeat the same process for the other image file.

17. If you've completed the upload successfully, check the "Images" folder on the left-hand side. Both images should be listed:



18. Now that we've uploaded our images, we need to add them to the panel. The only way you can add images or objects to a panel is to use plugins. Therefore, click the "Plugins" button in the top menu. Once the plugin list appears, choose the "Image Object."



19. Your mouse should have the "Image Object" thumbnail fitted inside a square following it now. Click anywhere on the panel to paste the Image Object to your panel. You want to paste the object inside the white container. Anything outside the container will be outside of the screen.

20. Once you've pasted the plugin inside the panel, the plugin setup dialog will immediately appear asking you to choose an image. If you haven't uploaded your images yet, you can click cancel and set up the image later. If there is no image, the object will not be rendered to the panel when you play your game. You can set or change the image later at any time by double-clicking the object and the setup dialog will re-appear. For now, just repeat steps 18-20 until you've pasted both image objects (one for the chat bar and another one for the message box).



21. Once you've pasted the plugins into the panel, you can move the objects around by clicking and dragging. I'm going to put the chat bar on the bottom with the message box slightly above it. You can customize your interface however you want; for example, you might like your message box at the top.



22. Once you've positioned both image objects, click on the message box image. The message box image should now be selected. Click on the "Properties" tab on the left-hand side. Your screen should now look like this:



23. You can use the Properties Editor to manually set the X, Y coordinates of your object to position it perfectly. Other properties you can edit include width, height, layer, etc. (each object and plugin has a different set of properties)

When using the Properties Editor, if a property is highlighted in blue, it means it is currently being edited. It needs to not be highlighted in order for you to know the property change(s) have been saved. Usually, when editing text or a value, you just need to click "Enter" or click to edit another property to save. For list items, all you need to do is click on a list item and the changes will be saved.

For now, you only need to concern yourself with positioning the object where you're satisfied and setting the "Visibility" property to "Hidden" because you don't want the message box to show up by default -- you want to wait until there's a message to show first!

24. Click the "Plugins" button in the top menu again. This time, we want to insert a "Text Object." Paste the Text Object on top of the message box image. Once the Text Object has been pasted and positioned, select it and go to the Properties Editor (in the "Properties" tab):



25. For the Text Object:

• Set the "Font Color" property to "#ffffff" (without quotes). This is the hex code for the color "white." The current version of MMORPG Maker XB does not come with a color picker to easily select the color but we will be including this in a future version. You can find a huge list of hex color codes at: http://www.december.com/html/spec/color.html
• Change the "Text" property to blank so we don't have any default text.
• Change the "Visibility" property to "Hidden."

26. Click the "Plugins" button in the top menu again. This time, insert the "Function Object."

27. The Function Object is an advanced (but very powerful) plugin which essentially allows you to create your own "custom" MMORPG Maker XB plugins. You'll see how the Function Object allows us to create custom events and makes MMORPG Maker XB much easier to use throughout this tutorial.

However, we will not be covering the Function Object in detail in this tutorial as it detracts from the focus of this tutorial and it might complicate the tutorial and confuse some users. Feel free to search our "Tutorials" forum for tutorials on the Function Object.

27. The Function Object does not get rendered so you don't have to paste it. As soon as you insert the Function Object, the setup dialog will appear. Click "Root" in the list and then click "Add Function."

28. In the first message box that appears, type "Show Message Box" (without quotes).

Click "OK," and a second message box should appear immediately afterward. Type "ShowMsgBox" (without quotes) and click "OK." If you've done everything correctly, your plugin setup screen should look like this:



If you didn't do it right, just click the "Cancel" button to exit the Function Object setup and the Function Object will not be added to your panel. You can insert the Function Object plugin again to try again.

29. Highlight the "Parameters" item as shown in the screenshot above. Click the "Add Parameter" button.

30. Use the following values:

• Parameter Type: String
• Titlebar Text: Message Box
• Description Text: Enter the message box text:

31. Click "OK," and your plugin setup screen should now look like this:



32. We've just created a shortcut to the "ShowMsgBox" function. Keep in mind, "ShowMsgBox" is not a built-in function of the game engine. We have to define what "ShowMsgBox" does in our events later (and it's this level of customization that makes MMORPG Maker XB so powerful).

We'll come back to "ShowMsgBox" and cover the events later in this tutorial, but, first, we also need to create a shortcut function to hide the message box.

33. Click the "Root" item again as shown in the screenshot above (in step 31).

34. Click the "Add Function" button. In the first dialog, enter "Hide Message Box" (without quotes), and, in the second message box, enter "HideMsgBox" without quotes.

35. Finally, we're done with setting up the Function Object. If you've done everything correctly, your plugin setup screen should look like this:



If you did not set it up correctly, you can always click "Cancel" and the Function Object will not be added to your panel and you can start over on inserting and setting up the plugin again.

Events Editor

Now we need to setup some actual events for our panel. We can't have an interface that's always showing a message box so in the previous steps, we taught you how to hide the message box. In order to make an interface completely customizable, it needs to be programmable (don't worry, you won't have to do any coding!)

We already setup the Function Object in our panel which provides shortcut functions for showing/hiding our message box dynamically.

Now that we have all of this setup, we need to create events so our interface can respond to player input. Those shortcut functions we setup in the Function Object won't do anything if we don't define the events that happen when the shortcut functions trigger so let's start defining our events!

36. Click the "Events Editor" button in the top menu. We've circled it for you in this screenshot:



37. Click the "New Event" box.

38. Events in MMORPG Maker XB are defined by "conditions" and "actions." If a condition occurs, the actions associated with the condition(s) will occur. For example, if I click the gas peddle in a car, it will start moving. Clicking the gas peddle is the "condition," and the car beginning to move is the "action."

MMORPG Maker XB works similarly, and, in a gaming context, you might check if a player has a key item, and, if the player touches a door, the door will become unlocked.

The conditions are:

• The player has the specific key item to open the door
• Player touches the door

If both these conditions occur, the following action will execute:

• The door will become unlocked.

39. When you first create an event, MMORPG Maker XB will ask you to create the conditions. The dialog we currently see asks us for a condition and lists all of the objects which contain conditions.

40. For the purposes of this tutorial, we will only need to create events for the Function Object. Right-click the Function Object and click "On Custom Function:"



41. Sometimes, conditions might certain data ("arguments"). In the case of "On Custom Function," the Function Object needs to know which custom function we're referring to so you should see a dialog prompt you for the name of the function:



The function we want to handle is "ShowMsgBox" (with quotes). We want to include quotes because "strings" in MMORPG Maker XB should always be contained inside quotation marks. On the other hand, values (such as numbers) do not require quotation marks. "1" is a string while 1 is a number. "1a" is valid while 1a is not.

42. You should see the condition listed in the Events Editor now and a new box labeled "New Action." Click on "New Action" to create an action for when the "ShowMsgBox" custom function occurs.

43. Right-click the Text Object plugin and select "Set Text" as follows:



44. A dialog will appear asking you what you want to set the Text Object text to. By default, it's an empty string (just two quotation marks). Erase the quotation marks because we want to insert a custom action.

45. Click the "Insert Property" button.

46. Right-click the Function Object and select "Get Argument."



47. You will now be asked to get which argument of the "ShowMsgBox" custom function. We only want the first argument because when we setup the Function Object, we only specified two parameters (arguments). Replace the "<Insert Number>" text with "1" (without quotes). It should look like this:



Click "OK" to finish.

48. Now we can't just set the message box text because we need to show the message box objects as well in order for the user to see it. Create another new action, right-click the message box object (should be named "Image Object 2"), go to "Visibility," and click "Set Visible."



Do the same for the Text Object.

49. When you're done, it should look like this:



50. We just created a global custom event to show a message box. However, we need to also define the custom function for hiding our message box.

51. The custom function name for hiding our message box (as defined when we setup the Function Object) should be "HideMsgBox."

52. Click the "New Event" box.

53. Right-click the Function Object and select "On Custom Function."

54. When prompted, type in "HideMsgBox" (with quotes).

55. You should now have a new event with a single condition. Create actions by clicking "New Action" under the "HideMsgBox" condition.

56. Right-click the Text object and choose "Set Text." Leave it as the default empty string (two quotation marks).

57. Create another new action and right-click the message box image object, choose "Visibility," and select "Set Hidden." Do the same with the Text Object.

58. When you're done, it should look like this:



(Continued in below post...)

[Administrator]

(...Continued from above post)

59. Finally, we should be done setting up our interface panel. Click the "Save" button and you should be prompted for a filename.

You MUST type "Game" (without quotes and with a capital "G") for the engine to recognize your panel as the interface panel; otherwise, it will be treated as a regular panel (such as login screens, registration screens, etc.) and will not be layed over every map.



60. Once you've saved the "Game" panel, we need to compile the panel so we can create a file compatible with the game engine so the panel will show up in our game. Click the "Compile" button in the top menu:



61. Feel free to click the "Play" button to see your panel in action (although there won't be much to see!). When you click "Play" in the Panel Editor, it will show the panel only and will not load any maps or any part of your game.

Custom Sprites, NPCs, and Level Events

We've finished creating our own custom interface. Now we'll create custom sprites and animations, insert NPCs into our levels, and setup events for individual levels (unlike our interface "Game" panel events which were global events).

62. Click the "Database" icon in the top menu bar (to the right of the "Events Editor" icon).

63. Click the "Spritesheets" tab.

64. Click the "New Sprite" button. For this tutorial, we will create a Knight sprite so we're naming the sprite "Knight."



65. The full Sprite Editor should now pop up. The Sprite Editor allows you to take a spritesheet, crop it, create animations, and more. Your screen should look like this:



As seen in the above screenshot, select "knight.png" under "Spritesheet."

66. Now, we need to create a new animation. It won't be a real "animation" that actually animates in this tutorial (although you're free to do this if you want) because we're only going to have a static knight image facing downward for this tutorial.

Next to the "Animation" list, click the "New" button to create a new animation.

67. You will be prompted to name the animation. Let's name it "Idle-Down" to describe both the animation type (idle) and the direction (down):



68. You can use your mouse to click around the spritesheet to select the area you want to use for the current animation frame. You can also select the area by using the textboxes under "Grid" and "Grid Position of Frame."

Under "Grid," type 32 in the left-most textbox and press enter.

In the textbox just to the right of that (and to the right of the "x"), type 50 and press enter.

The "Grid Position of Frame" should be 0 x 0.

When you're done, it should look like this:



69. Click the "Save" button. We've just created a sprite.

70. On the left-hand side of the screen, double-click the "Maps" folder to open it again. Double-click the "Sample" file to re-open the sample map.

71. Click the "Plugins" button in the top menu and insert the "Sprite Object" plugin.



72. Paste the Sprite Object anywhere on the map (we chose to put it in the center between the two fences). The plugin setup dialog should pop up asking you to choose a sprite. Double-click on "Knight" in the list and it should load the "Knight" sprite. Make sure the selected animation is "Idle-Down." Your setup dialog should look like this:



Click "OK."

73. You should now see the sprite pasted into your level as follows:



74. Go to the Events Editor.

75. Click the "New Event" box. When asked to create a condition, click the "Global" tab to access all the plugins in our interface "Game" global panel.

76. Right-click on the "Keyboard" object and select "On Key Pressed:"



77. You'll be prompted to press a key so the game engine knows exactly which key you want to test has been pressed. Since we're going to trigger a message box, let's use the spacebar key. Press your spacebar, and the dialog should now look like this:



Click "OK."

78. Click on the new condition we just made. We want to combine conditions now because we want the player to be touching the sprite we just pasted AND having pressed the space bar to trigger our message box. Once you click on the condition, you should see a box appear entitled "New Condition" which allows us to add another condition to the same event.



Click on the "New Condition" box that just appeared.

79. Go to the "Global" tab again. This time, right-click on the "Player" object. The "Player" object represents the actual player object in the game. Select "On Overlap:"



80. Once you click "On Overlap," another dialog will appear asking which object you want to check the player has collided with. We want to check if the player has collided with the sprite object we just pasted. This time, stay on the "Level" tab. Select the Sprite Object by clicking on it as follows:



Click "OK."

81. You should now have two conditions. It's time to create the action so click "New Action" under the conditions.

82. Go back to the "Global" tab and right-click the Function Object. We're now going to make the Function Object execute the shortcut function that shows the message box. As you can see, "Show Message Box" is listed in the popup menu. If you haven't realized already, you can create your own custom actions using the Function Object!



Select "Show Message Box."

83. Just as we specified when we setup our Function Object, we are now being prompted to enter the message box text:



84. Once you're done, you should see the custom action being listed in the Events Editor!



85. Finally, let's click "Play"

86. Walk up to the sprite we pasted and press the space bar. The message box will now be shown completely with your custom interface and the message box text you set:



87. However, you may notice we still haven't created an event to hide the message box! Go back to the Events Editor and create a new event. Select the "Player" object again from the "Global" tab and select "On Overlap" again. Select the Sprite Object again for the overlap detection.

88. Now we want to test if the player is not overlapping the Sprite Object. If the player is not overlapping the Sprite Object, we will hide the message box. The easiest way to test if the player is not overlapping the Sprite Object is to select the condition, and click the "Reverse Logic" button in the bottom-right corner:



We circled the "Reverse Logic" button for you in the screenshot above. Once you click the "Reverse Logic" button, the reversal icon should appear before the condition.

89. Create a new action, go to the "Global" tab, select the Function Object, and choose "Hide Message Box."

90. When you're done, your level events should look like this:



91. Finally, click "Play" again. Go up to the sprite, press the spacebar, and you should see the message box appear. Move away from the sprite, and you'll notice the message box immediately disappears!