Getting Started

Installation Instructions

Start by installing the prerequisites. You need Visual Studio 2008 (or Visual C# 2008 Express) plus XNA Game Studio 3.1. Then download and install FerpectSDK.msi, found on the Downloads page.

Be sure to close all running instances of Visual Studio 2008 or Visual C# 2008 Express before installing Ferpect SDK.

Create a New Game Project

Start Visual Studio, and select the File->New->Project... menu command. In the New Project dialog, select the Ferpect folder on the left-hand side, and choose the FerpectGame project template. See the image below for an example.


Build the Project

You must build the project before opening any design views. On the Build menu, choose Build Solution.

If you open a design view before building the project, the editor will display an error message and a call stack. If this happens, just close the editor, build the project, and re-open it.

Open a Screen in Design View

The project template contains a couple initial screens in PlayerStartScreen.cs, MainMenu.cs, and ExitConfirmation.cs. To edit one of the screens in design view, double-click the file in the Solution Explorer (if the code view opens, right-click it and select View Designer).

The example below shows ExitConfirmation.cs open in design view.


Working in Design View

The design view for a screen component works very much like the Windows Form design view. By default, a Screen is invisible (both empty and transparent). A screen can be made visible either by adding visual elements like sprites, or by setting the Screen's BackColor property.

When the BackColor property is set, the Screen will clear the graphics device with the specified color. This will erase anything drawn before this Screen component. Draw order can be controlled by setting the Screen's DrawOrder property (lower numbers are drawn first).

When sprites are added to a Screen, they will be drawn whenever the Screen is drawn. Sprites are drawn even if the screen BackColor is not set, allowing screens to be layered. Sprites can be added to a Screen by dragging them from the Toolbox and dropping them onto the design view.

When you select a sprite, a white border will appear around it with a dot in the top-left corner (the dot helps to show orientation when the sprite is rotated). Sprites can be moved by clicking and dragging them in the design view. A sprite can also be moved or repositioned by editing its properties.

Adding Sprites

Open the Toolbox when a Screen's design view is active, then drag the desired sprite onto the design surface. Sprite components tend to have "Sprite" as a suffix to its name.

IMPORTANT NOTE: In the beta, the installer adds many items to the Toolbox that should not be there! Please avoid adding any Screen types to your screen. Also avoid adding a ScreenManager to your screen.

The following sprites can be used:
  • ImageSprite
  • MenuSprite
  • RectangleOutlineSprite
  • RectangleSprite
  • TextSprite
  • VideoSprite
  • ParticlesSprite* - This one is more of an experiment and isn't recommended for use.

Sprites will be drawn on the design surface in the position where they will be drawn at runtime. By default, a sprite is anchored to the top-left corner of the screen. Since Screen classes do not control the viewport of the game hosting them, it is possible that the viewport will be a different size at runtime than what's used in the design view. For that reason, sprites are drawn relative to an anchor. The anchor can be set to be a corner, an edge, or the center of the viewport.

For best results, select an anchor suited to your sprite's purpose. If you want text centered in the viewport, anchor the TextSprite to the center of the screen using its Anchor property. If you want text at the bottom of the screen, anchor it to the bottom. Set the UseTitleSafeArea property to true if your sprite is an important UI element.

Adding Other Components

The following components can also be used (they will appear in the component tray at the bottom of the design view):
  • BasicInputComponent
  • MenuInputHandler
  • TimerComponent
  • SpriteRotation
  • BloomComponent* - To use this, you should also add a BloomEffects item to your content project.

To edit properties on these components, select the item in the component tray.

These components tend to expose configurable events that provide an easy way to add logic to your screen. For example, the TimerComponent class exposes a Tick event that is triggered when the specified interval elapses. You can add an event handler to the Tick event by double-clicking an instance of the TimerComponent on the design surface.

Adding Screens

Screens work a lot like user controls in Windows Forms. You define them by adding new classes to your project, customize the class in design view, and then add instances of the class to a parent class like a Form or, in this case, a ScreenManager.

You can add new screens to your project by right-clicking the project in Solution Explorer, and selecting Add->New Item.... In the Add New Item dialog, select the Ferpect folder on the left-hand side, and choose the Screen item template. Name the item whatever you like. In the example below, the screen is named OptionsMenu.


After adding the screen to the project, you can design it by adding sprites and other components, and writing event handlers for input.

To add an instance of your screen class to the game, you need to add it to the ScreenManager. The ScreenManager is never visible at runtime. What you see in the design view is a representation of the screen instances that it manages. There will be one screen icon per screen instance.

IMPORTANT NOTE: You must build the project before using the ScreenManager design view. After building, double-click ScreenManager1.cs to open its design view. If you don't build the project first, your new Screen class will not appear in the Toolbox.

Now drag-and-drop your screen from the Toolbox onto the ScreenManager1 design view. This will ensure that your screen is instantiated and initialized by the screen manager. The ScreenManager class has a StartScreen property which determines the first screen to be displayed. From there, transitions must be handled explicitly by your code, by calling the following ScreenManager methods:
  • Goto - Clear the current stack and push the specified screen onto the screen stack.
  • Call - Push the specified screen onto the screen stack.
  • Return - Pop the topmost screen off the screen stack.
  • ReturnAndCall - Pop the topmost screen off the screen stack and replace it with the specified screen. This bypasses the activation events on the next screen in the stack.

The ScreenManager methods take the screen instance name as an argument. Each instance is given a name when added to the ScreenManager, and they can be renamed in the ScreenManager design view.

Design note: You should be able to add more than one instance of each screen, and customize the instance by setting properties. For example, you could have one GamePlay screen per level of your game, and set a property on each to specify the level data file. For now, the editing experience for screen instances is not complete.

Last edited Dec 29, 2009 at 9:58 PM by BadCorporateLogo, version 10


No comments yet.