Go Back   MMORPG Maker XB Forums > MMORPG Maker XB Development > Tutorials

Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 01-17-2011, 08:36 PM
Administrator Administrator is offline
Join Date: Jun 2010
Posts: 161
Thumbs up Getting Started with MMORPG Maker XB (v.0.3)

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:

Click image for larger version

Name:	1.png
Views:	6271
Size:	48.3 KB
ID:	9

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:

Click image for larger version

Name:	2.png
Views:	5501
Size:	81.4 KB
ID:	10

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:

Click image for larger version

Name:	3.png
Views:	5220
Size:	60.3 KB
ID:	11

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).

Click image for larger version

Name:	4.png
Views:	4389
Size:	16.2 KB
ID:	12

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:

Click image for larger version

Name:	5.png
Views:	4752
Size:	49.5 KB
ID:	13

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!

Click image for larger version

Name:	6.png
Views:	4633
Size:	38.9 KB
ID:	14

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.

Click image for larger version

Name:	7.png
Views:	4404
Size:	7.2 KB
ID:	15

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:

Click image for larger version

Name:	8.png
Views:	4521
Size:	45.7 KB
ID:	16

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:

Click image for larger version

Name:	chatbar.gif
Views:	4433
Size:	2.6 KB
ID:	17

Click image for larger version

Name:	msgbox.gif
Views:	4462
Size:	1.5 KB
ID:	18

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.

Click image for larger version

Name:	9.png
Views:	4308
Size:	10.0 KB
ID:	19

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 image for larger version

Name:	10.png
Views:	4334
Size:	5.9 KB
ID:	20

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:

Click image for larger version

Name:	11.png
Views:	4426
Size:	11.1 KB
ID:	21

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."

Click image for larger version

Name:	12.png
Views:	4483
Size:	36.3 KB
ID:	22

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).

Click image for larger version

Name:	13.png
Views:	4374
Size:	13.5 KB
ID:	23

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.

Click image for larger version

Name:	14.png
Views:	4308
Size:	30.2 KB
ID:	24

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:

Click image for larger version

Name:	15.png
Views:	4457
Size:	38.0 KB
ID:	25

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):

Click image for larger version

Name:	16.png
Views:	4462
Size:	39.4 KB
ID:	26

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:

Click image for larger version

Name:	17.png
Views:	4565
Size:	40.0 KB
ID:	27

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:

Click image for larger version

Name:	18.png
Views:	4611
Size:	25.1 KB
ID:	28

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:

Click image for larger version

Name:	19.png
Views:	4435
Size:	47.5 KB
ID:	29

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:

Click image for larger version

Name:	20.png
Views:	4399
Size:	22.8 KB
ID:	30

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:"

Click image for larger version

Name:	21.png
Views:	4291
Size:	15.4 KB
ID:	31

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:

Click image for larger version

Name:	22.png
Views:	4416
Size:	3.8 KB
ID:	32

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:

Click image for larger version

Name:	23.png
Views:	4311
Size:	12.3 KB
ID:	33

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."

Click image for larger version

Name:	24.png
Views:	4326
Size:	15.3 KB
ID:	34

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 image for larger version

Name:	25.png
Views:	4423
Size:	10.7 KB
ID:	35

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."

Click image for larger version

Name:	26.png
Views:	4364
Size:	13.4 KB
ID:	36

Do the same for the Text Object.

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

Click image for larger version

Name:	27.png
Views:	4396
Size:	12.7 KB
ID:	37

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:

Click image for larger version

Name:	28.png
Views:	4301
Size:	27.9 KB
ID:	38

(Continued in below post...)

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Powered by vBulletin®
Copyright © 2000 - 2023, Jelsoft Enterprises Ltd. .
Copyright © MMORPG Maker XB. All Rights Reserved.