View Single Post
Old 01-17-2011, 10:05 PM
Administrator Administrator is offline
Join Date: Jun 2010
Posts: 161

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

Click image for larger version

Name:	29.png
Views:	2740
Size:	39.9 KB
ID:	41

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:

Click image for larger version

Name:	30.png
Views:	2603
Size:	6.1 KB
ID:	42

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

Click image for larger version

Name:	31.png
Views:	2753
Size:	47.6 KB
ID:	43

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:

Click image for larger version

Name:	32.png
Views:	2701
Size:	63.8 KB
ID:	47

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

Click image for larger version

Name:	33.png
Views:	2670
Size:	25.2 KB
ID:	48

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:

Click image for larger version

Name:	34.png
Views:	2748
Size:	28.7 KB
ID:	49

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.

Click image for larger version

Name:	35.png
Views:	2661
Size:	62.1 KB
ID:	50

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

Name:	36.png
Views:	2673
Size:	44.0 KB
ID:	51

Click "OK."

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

Click image for larger version

Name:	37.png
Views:	2727
Size:	38.7 KB
ID:	52

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

Click image for larger version

Name:	38.png
Views:	2528
Size:	47.3 KB
ID:	53

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

Name:	39.png
Views:	2657
Size:	3.1 KB
ID:	54

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

Name:	40.png
Views:	2613
Size:	10.4 KB
ID:	55

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

Click image for larger version

Name:	41.png
Views:	2664
Size:	13.2 KB
ID:	56

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

Name:	42.png
Views:	2644
Size:	10.8 KB
ID:	57

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!

Click image for larger version

Name:	43.png
Views:	2708
Size:	22.5 KB
ID:	58

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:

Click image for larger version

Name:	44.png
Views:	2656
Size:	19.0 KB
ID:	59

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

Click image for larger version

Name:	45.png
Views:	2621
Size:	14.9 KB
ID:	60

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:

Click image for larger version

Name:	46.png
Views:	3061
Size:	45.7 KB
ID:	61

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:

Click image for larger version

Name:	47.png
Views:	2667
Size:	25.6 KB
ID:	62

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:

Click image for larger version

Name:	48.png
Views:	2883
Size:	11.1 KB
ID:	63

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!