kcnhgames.com header

Flixel Adventure Game Tutorial – Part 10: Winning

Index
Previous part: Item Trading

In the previous part we have created dialogue for trading items between the player and a non-playable-character. In this part we will be looking into creating an end (credits screen) and a beginning (menu) to the game.

For this tutorial we will just create an easy win-condition, delivering the letter to Mimi. Before we can do anything, we should make Mimi.

Mimi Adventure Sprite

Save the image to your com/data folder and embed the image in your code.

// Mimi
[Embed(source = "data/Mimi.png")] private var imgMimi:Class;
private var mimi:Character;

Instantiate the variable.

mimi = new Character(13, 22, imgMimi, map);
mimi.dialog = ["::checkItem@Letter,2", 
	"Mimi: Welcome to my house!",
	"::endDialog",
	"You: I have a letter for you from Richard.",
	"::remInv@Letter",
	"*You give the letter to Mimi*",
	"Mimi: Oh, how exciting, thanks a lot!",
	"You: Well, it seems my adventure ends here, I've done a great job today...",
	"::endGame",
    ""];
foreground.add(mimi);

Add the ‘mimi’ variable to the characterList.

characterList.push(mimi);

As you might have noticed, in the dialogue we are referencing to a function we haven’t written yet, called ‘endGame’.

 private function endGame():void
{
	FlxG.state = new CreditState();
}

For this game we will make a simple credits screen that returns to the main menu at the end when the space key is pressed. Both these screens are FlxState’s, just like the PlayState. Let’s define our CreditState class, place it in the ‘com’ folder.

package com
{
   import org.flixel.FlxState;
   import org.flixel.FlxText;
   import org.flixel.FlxG;
  /**
   * ...
   * @author kcnh
   */
  public class CreditState extends FlxState
  {
    private var text:FlxText;
    public function CreditState()
    {
      text = new FlxText(24, 24, FlxG.width,
      "Adventure Game \n \n" +
      "Programming by: me \n" +
      "Graphics by: kcnh (www.kcnhgames.com) \n" +
      "Based on a tutorial by: kcnh (www.kcnhgames.com) \n" +
	  "\n \n Press SPACE to continue.");
       
      add(text);
    }
     
    override public function update():void
    {
      if (FlxG.keys.justPressed("SPACE"))
         FlxG.state = new MenuState();
          
      super.update();
    }
  }
}

Note that the string “\n” is a line break. Moving the text’s position is something we have learned in one of the first parts in this tutorial, so it should be familiar to you. We will also have to add a MenuState class, which we will display when the credits-roll is over.

package com 
{
   import org.flixel.FlxButton;
   import org.flixel.FlxState;
   import org.flixel.FlxG;
   import org.flixel.FlxText;
	/**
	 * ...
	 * @author kcnh
	 */
	public class MenuState extends FlxState
	{
		public function MenuState() 
		{
			var title:FlxText = new FlxText(40, 10, 300, "Adventure Game");
			title.size = 24;
			add(title);
			
			var startButton:FlxButton = new FlxButton(100, 100, startGame);
			startButton.loadText(new FlxText(20,3,100,"Start Game"));
			add(startButton);
			
			add(new FlxText(100, 130, 300, 
			"Moving: Arrow keys \n" +
			"Actions: Spacebar \n" + 
			"Inventory: X"));
			
			// Show mouse.
			FlxG.mouse.show();
		}
		private function startGame():void
		{
			FlxG.state = new PlayState();
		}
	}
}

This class also contains things you already know how to program, except for the FlxButton part. Loading a text on the button is a bit tricky as you can see, it requires creating a FlxText object and passing it to the FlxButton variable.

Run the game and finish it, when you are in the menu, play the game again. As you will see, the dialogue of Richard is still at it’s position where we left him in the previous game, also, the mouse is still visible in-game.

We can fix the mouse problem by hiding the mouse in the PlayState constructor.

// Hide mouse.
FlxG.mouse.hide();

A character’s dialogue can be reset in the constructor of the PlayState class. Since we have declared the characterList variable as a static, all instances of the PlayState class will use the same variable.

Add the following code before adding the characters to the characterList.

// Reset the characterList array.
characterList = new Array();

Our game still starts with the PlayState, we would like to let it start in the menu. Let’s go to our main.as file and change the state we start in.

super(320,240,MenuState,1);

Don’t forget to import the MenuState class in the main.as file, or you will get an error.

import com.MenuState;

Run your game, it now has a start, a middle and an ending. Do you hear that? No? That’s right, you cannot hear anything, because there is no sound yet. We’ll look into this in the next part of this tutorial.

You can download the code for this part here: Flixel Adventure Tutorial Game Tutorial part 10 code.

Next part: Sound

This entry was posted in Game development, Tutorials and tagged , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

There are 3 responses to this post