 |
|
||
|
#1
01-17-2011, 08:36 PM
|
|||
|
|||
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: 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:
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:
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:
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...) |
Threaded Mode