Kees’ Adventure Let’s Play by jbeezie1234

I always enjoy seeing that people like my games, in this case someone made “let’s play” video’s for the Kees’ Adventure series. I am really flattered that ‘jbeezie1234′ took the time and effort to make these. If you want to see the other Kees’ Adventure “Let’s Play” video’s by jbeezie1234, you can find the links below.

Kees’ Adventure
Kees’ Adventure 2: Bor’s Revenge
Kees’ Adventure 3

Java Server with Flash Client prototype game

A short video demonstrating a test I did with connecting a couple of Flash clients to a Java server, my plan was to make a multi-user dungeon that would have components of the Kees Adventure series, be sure to watch it in high-definition. Because I do not have any experience with programming servers and/or network programming in general, I was unable to reduce the lag and ghosting. Unfortunately, this project will have to rest in the fridge, until I have enough knowledge to handle it.

Creating an arcade-controller – Part 1

I have been planning to make an upright arcade cabinet for a while now because I have always wanted to own one! Where I live, there aren’t a lot of arcade halls, on top of that playing games there cost a lot of money.

Building a cabinet might be a bit to big of a project for an inexperienced arcade builder, so I have decided to start smaller: an arcade controller. The components will be placed in a wooden box and I hope to be able to put some nice video-game related art on it, most likely of some of my own games.

Soldering stuff and arcade buttons!
A package arrived at my house containing the following:

Because all the buttons that I got were yellow, I tested if I could paint one using some miniature model paint. I painted one grey and another one green. The grey one came out better than the green one so I decided to paint the other one grey also and add an extra layer of grey to both of them. This created a problem where the button was hard to press because there was dried up paint between the moving parts!

After doing some research, I came across several options to get the button inputs to be read by a computer, the following seemed best to me: Arduino and the I-PAC. The first one, the Arduino, is more expandable and might become useful in future projects. The I-PAC is nice because all the hard work is done already, and I can rest assured that it will be fitting for my purpose, since it has been designed specifically for arcade projects.

I’ll have to think about which approach to take when it comes to the keyboard encoder, meanwhile, I can work on a box to house the buttons and the circuitry. Stay tuned for part 2!

OUYA

Ouya console

“The Ouya is an upcoming video game console that will be built upon open-source software technology running on the Android mobile operating system. Julie Uhrman, a game industry veteran, founded the project. She brought in designer Yves Béhar to collaborate on the design of the project, and Muffi Ghadiali as product manager to put together the engineering team for the hardware and application framework software. The console is slated for release in March 2013.”
-Wikipedia

So basicaly the OUYA is a cheap entertainment/gaming console that you can hook up to your television, and is running on Android. What this means is that it is open-source, so anyone can make their own adjustments to the software. On top of that, they have also open-sourced the hardware design, so you can actually build your own console if you have the right tools and the knowledge. Mojang (the makers of Minecraft) have claimed that they will release Minecraft for the OUYA, which seems pretty cool to me.

You can pre-order the console on the Kickstarter page. I’ll be looking forward to seeing how this works out, if it catches on and becomes a big thing, or just another fad.

Flixel Adventure Game Tutorial – Part 12: Tips

Index
Previous part: Sound

This post concludes the Flixel Adventure Game Tutorial, a mini-series for making an awesome Flash game. I hope you have learned some valuable skills and have had a lot of fun in the progress. Although the tutorial is far from perfect, and you still have a long way to go before you have made a proper game, it should give you a good base to further develop your game from. This part will be about some things you might want to take a look at when working on your adventure game.

1. Map editors
There are a number of map editors that you can use to make maps, so you won’t have to edit text files by hand with notepad. My personal favourite is Mappy, because it is clean and simple. I have also worked with DAME which has a lot more features and has been specifically made for use with the Flixel framework. There are tons of editors out there, these are just the tip of the iceberg!

2. Monetisation
There are multiple ways to making money from the Flash game you have made, you can make a website and use advertisements on that site, or in-game. A great way to get your game in to the public and earn money is by using the Mochi-Ads system, those are the annoying pre-loaders that you see most often when playing Flash games. Specific sites also have their own revenue system, such as Mindjolt, Newgrounds and Kongregate. I have written a short tutorial on how to implement Mochi ads for Flixel games here.
**Please note that the Mochimedia services went offline as of march 2014.**

3. File size
Keep the size of your *.swf file smaller than 5 MB, this is not really a strict limit but a lot of portal owners would rather have smaller games. On top of that, if your game loads faster, people will tend to play it more often too.

4. Inspiration
When in need of inspiration, you can play your favourite adventure games and write down you like about them. Look around on discussion forums on the internet, see what people have to say about the things you liked, it will get you valuable information about what works and what doesn’t!

5. Resources
The resources that I have provided you with during this tutorial, the code, sprites, sound effects and music may be used in a game that you are making. All I am asking in return is that you mention where you got them from in the credits, for example by putting up a link to www.kcnhgames.com.

Here are some extra characters that you can use for your game.



6. Final words
Remember that Rome wasn’t build in one day, and it might be that your first game will fail horribly, however, that is OK. You should always keep on trying though, because practice makes perfect. Good luck, and don’t forget to send me a message when you have published your Flash game!

Flixel Adventure Game Tutorial – Part 11: Sound

Index
Previous part: Winning

In the previous part we have made a menu and a credits screen, this was all done in complete silence. It’s time to change things for the better by adding some sounds to the mix. There are two types of audio that we will be looking at, sound effects and music.

If you are comfortable creating your own sound effects and/or music, you can make your own with a program like Fruity Loops. If you are like me, you need other people to do it for you. I have some friends who are DJ’s or can play guitar, that I usually ask to make music. You can also use Google to find some royalty free music, that is how I found out about Kevin MacLeod’s music. Another option is using music that is in the public domain and/or very old music like Beethoven’s. Please read this comment for some more legal information.

For sound effects I use a application called as3sfxr, you use it to quickly make unique sound effects. Note that you will have to convert the *.wav file to a *.mp3 file in order to import it.

Let’s add music to the game and a bleep sound when you press the button in the menu, download this bleep and this song, and embed it in the MenuState class. In case you are wondering why the music is so low quality: lower quality means a smaller file size. Note that the songs have relatively large file sizes, so reusing them is a must if you want to keep your game-size small.

[Embed(source = "data/Beep.mp3")] private var sfxBeep:Class;
[Embed(source = "data/Music.mp3")] private var sfxMusic:Class;

Flixel has a easy-to-use function for adding music, add the following line to the constructor of the MenuState.

// Play Music
FlxG.playMusic(sfxMusic);

Add this to the startGame function:

FlxG.play(sfxBeep);

You can go and add sound effects to any place you like, such as in dialogue or when moving, the sky is the limit! Be careful though, adding to much sounds might be annoying for people when they your game. The next part will be filled with some tips for your adventure game and (Flixel/Flash) programming.

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

Next part: Tips

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

Flixel Adventure Game Tutorial – Part 9: Item Trading

Index
Previous part: Picking up items

In the previous part we have programmed how to pick up items from the world and delete items from our inventory. Now we will take a look at item trading, which will incorporate things we have learned in earlier in this tutorial.

Let’s start out by writing a function that will check if a player has a specific item in it’s inventory, and if the player has said item, move the dialogue to a specific line.

private function checkItem(input:String):void
{
	for (var i:int = 0; i < inventory.length; i++ )
	{
		if (inventory[i].name == input.split(",")[0])
		{
			dialogIndex = int(input.split(",")[1]);
		}
	}
 }

And add a separate function for move the dialogue to a specific line.

private function changeLine(line:String):void
{
	dialogIndex = int(line);
}

Since our dialogue is like a tree that has different branches, we should also be able to terminate a branch. Let’s make a function for that.

private function endDialog():void
{
	// Unfreeze
	freeze = false;
						 
	// hide GUI
	GUI.visible = false;
}

In the dialogue with our dear friend Richard, we’ll add a check to see if the player has a pencil in it’s inventory.

char2.dialog = ["Richard: Hey how are you today!",
	"You: I'm ok, thank you.",
	"Richard: Do you have a pencil?",
	"::checkItem@Pencil,5",
	"You: No.",
	"::endDialog",
	"You: Yes."];

Run the game, talk to Richard, pick up the pencil and talk to Richard again. Using the endDialog, changeLine and checkItem functions, you can change the course of the conversation and steer which branch is taken in the dialogue-tree. You now have the tools to make an item-trading dialogue.

char2.dialog = ["Richard: Hey how are you today!", 
	"You: I'm ok, thank you.",
	"Richard: I need to write a letter but I don't have anything to write with. Do you have a pencil?",
	"::checkItem@Pencil,5",
	"You: Nope.",
	"::endDialog",
	"You: Yes, here you go.",
	"::remInv@Pencil",
	"*You give the Pencil to Richard*",
	"Richard: Thanks a lot! Can you take this letter to Mimi, she lives in the house down the road?",
	"::addInv@Letter",
	"*Richard gives you a Letter*",
	"You: I'll see what I can do."];

Richard will trade a pencil for a letter, which he wants you to bring to Mimi (if you don’t know who Mimi is, we haven’t programmed her yet…). Richard repeats himself if you talk to him again. Perhaps we should bookmark a line where we want the conversation to start when you talk with Richard again.

Add the following variable to the Character class.

public var dialogLine:int = 0;

Now, back to the PlayState, we’ll have to specify that the conversation starts with the line stored in the character itself.

Change this:

 // Change text to dialogtext.
dialogIndex = 0;

To this:

// Change text to dialogtext.
dialogIndex = tempChar.dialogLine;

We’ll add a function in the PlayState that changes the character’s internal dialogLine.

private function changeCharLine(line:String):void
{
	tempChar.dialogLine = int(line);
}

Now we can expand Richard’s dialogue even more.

char2.dialog = ["Richard: Hey how are you today!",
	"You: I'm ok, thank you.", 
	"Richard: I need to write a letter but I don't have anything to write with. Do you have a pencil?",
	"::changeCharLine@19",
	"::checkItem@Pencil,6",
	"You: Nope.",
	"::endDialog",
	"You: Yes, here you go.",
	"::remInv@Pencil",
	"*You give the Pencil to Richard*",
	"Richard: Thanks a lot! Can you take this letter to Mimi, she lives in the house down the road?",
	"::addInv@Letter",
	"*Richard gives you a Letter*",
	"You: I'll see what I can do.",
	"::changeCharLine@15",
	"::endDialog",
	"Richard: What did Mimi say?",
	"You: I haven't delivered the letter yet.",
	"::endDialog",
	"Richard: Did you find a pencil yet?",
	"::checkItem@Pencil,6",
	"You: Nope."];

As you can see, ‘programming’ this adventure game becomes more about creating the correct dialogue, which can be confusing. However, you should be able to create a simple item-trading conversation now using the example I have provided for you.



In the next part we will take a look at what Mimi has to say and we’ll program an end and a beginning for the game.

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

Next Part: Winning

Flixel Adventure Game Tutorial – Part 8: Picking up items

Index
Previous part: The Inventory

Previous part of the tutorial we have created an inventory system. Now, we will create an item in the world for the player to interact with and pickup. For the pencil we want to have a world-representation in the form of a character. The way Flixel handles sprite-sheets allows us to create a single 16 by 16 sprite that will be used for all the animations of our ‘character’.

Let’s create a ‘pencil character’, create a new private variable.

private var pencil:Character;

Instantiate the variable in the constructor.

// Item that can be picked up in the world
pencil = new Character(10,3, imgPencil, map);
foreground.add(pencil);

And add it to the characterList.

characterList.push(pencil);

For our pencil, we will have to add some dialogue to notify the player that he/she has obtained a pencil. Note that we use a strange notation for the first line, we will use the string later on as a command to add pencil to our inventory.

pencil.dialog = ["::addInv@Pencil", 
"*You have found a pencil.*"];

Add the following functions, these will be used to check for events and execute them.

// returns true if there is an event
private function checkLine(line:String):Boolean
{
	if (line.substring(0,2) == "::")
		return true;
				 
	return false;
}

If the first two characters of the dialogue-string are ‘::’, it will see that part as a function and use the part after the ‘@’ as the function’s arguments.

private function runEvent(line:String):void
{
	if (line.substring(0,2) == "::")
	{
	    // Check if the function has arguments.
		if (line.split("@")[1] != null)
		    // Execute function written in string with arguments.
			this[line.split("@")[0].substring(2)](line.split("@")[1]);
		else
			this[line.split("@")[0].substring(2)]();
	}
}

Now we will have to add this function to the two places where we get new lines for the dialogue, the start of a conversation.

// Change text to dialogtext.
dialogIndex = 0;
// Check for events and go to next line.
while ( checkLine(tempChar.dialog[dialogIndex]))
{
	runEvent(tempChar.dialog[dialogIndex]);
	dialogIndex++;
}
text.text = tempChar.dialog[dialogIndex];

And the second place, during the conversation, when the world is frozen.

// Else display next line
else
{
	// Check for events and go to next line.
	while ( checkLine(tempChar.dialog[dialogIndex]))
	{
		runEvent(tempChar.dialog[dialogIndex]);
		dialogIndex++;
	}
	text.text = tempChar.dialog[dialogIndex];
	}
}

Now we are able to write events in our dialogue and have them executed. Try running your game and you’ll see that you can ‘talk’ to the pencil in the world and have a pencil added to your inventory.

You can do this indefinitely, in order to solve this problem we’ll have to make the pencil disappear after it has been ‘picked up’. Let’s write a function that teleports Characters.

// Teleports a Character
private function tele(input:String):void
{
	tempChar.x = input.split(",")[0] * 16;
	tempChar.y = input.split(",")[1] * 16;
}

We’ll have to reference this new function in the text-array of the pencil dialogue.

pencil.dialog = ["::addInv@Pencil", 
	"::tele@-1,-1",
	"*You have found a pencil.*"];

We are teleporting the pencil to tile (-1,-1) because it is unreachable and not visible for the player.

Now you have learned how to make items that you can pick up and how to create functions that you can call by dialogue in our adventure-game engine. In the next part we will look into item-trading with characters.

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

Next Part: Item Trading

Flixel Adventure Game Tutorial – Part 7: The Inventory

Index
Previous part: Creating layers with FlxGroup

In the previous part we have used the FlxGroup class to group objects and manipulate them. In this part we will make an on-screen inventory.

We want to display items on-screen like we do with the dialog. Let’s start by creating an item class, we want it to extend FlxSprite, so we can display images using it. On top of that, we would also like to name each item so we can reference to it easily.

package com 
{
   import org.flixel.FlxSprite;
	/**
	 * ...
	 * @author kcnh
	 */
	public class Item extends FlxSprite
	{
		// Image variable, publicly accessable.
		public var image:Class;
		// Name variable, publicly accessable.
		public var name:String;
		
		// If there is only 1 argument specified, the name, the image variable will be null.
		public function Item(name:String, image:Class) 
		{
			// Setting up variables.
			this.image = image;
			this.name = name;
			
			// Load the graphic.
			loadGraphic(this.image, false, false, 16, 16);
		}
	}
}

Now that we have defined what an item has as its properties, we want to create the items on-screen. Usually a player in an adventure game starts out with empty pockets, so we will start out with zero items displayed in the inventory.

Pencil Sprite Flash Game
Letter Sprite Flash Flixel Tutorial

Download the images above and save it in your project’s com/data folder, and add the variables to your PlayState to embed the image into your file.

// Pencil
[Embed(source = "data/pencil.png")] private var imgPencil:Class;
// Letter
[Embed(source = "data/letter.png")] private var imgLetter:Class;

For this game we will start with a simple item-slots system. When you get more experience programming, you can try to expand this into an inventory where you can drag-and-drop and select items, but for now we’ll keep it simple.

Make an array that will contain all the items in the inventory and an array that contains all the items that we can add.

private var inventory:Array = new Array();
private var items:Array = new Array();

In the constructor, add all the items you want in your database to the items list.

// itemslist
items.push(new Item("Letter", imgLetter));
items.push(new Item("Pencil", imgPencil));

The next function contains a for-loop that with go through all the items in the inventory array and place them in the inventory-box, underneath the dialogue-box. Note that we can only have 20 ( 320 / 16 = 20 ) items on-screen this way. For our tutorial-game it will do just fine, however, you can be creative and come up with your own ways to display the inventory!

private function updateInv():void
{
	for (var i:int = 0; i < inventory.length; i++)
	{
		inventory[i].x = 16 * i;
		inventory[i].y = 44;
	}
}

We want a function to add an item to the inventory.

public function addInv(name:String):void
{
	// temp Item variable
	var newItem:Item;
			
	// find item
	for (var i:int = 0; i < items.length; i++ )
	{
	    if (items[i].name == name)
		{
		 newItem = new Item(items[i].name, items[i].image);
	    }
	}

    newItem.scrollFactor.x = 0;
	newItem.scrollFactor.y = 0;

	// Add newItem to the list
	inventory.push(newItem);
			
	// Add to Inv layer.
	Inv.add(newItem);
			
	// Update display.
	updateInv();
}

And, of course, a function to remove an item from the inventory.

private function remInv(input:String):void
{
	for (var i:int = 0; i < inventory.length; i++ )
	{
		// If the names match.
		if (inventory[i].name == input.split(",")[0])
		{
			// Remove item.
			Inv.remove(inventory[i], true);
			inventory.splice(i, 1);
				  
			// Remove all, or just 1 instance.
			if (input.split(",")[1] == "true")
				i--;
			else 
				break;
		}
	}
			
	// Update display of inventory.
	updateInv();
}

You might wonder why both the add and the remove function have only one argument, a String. I have done this so it will be easier in the next part to convert strings to functions so we can have events, such as item trading, while talking.

Let’s design our inventory box, first, a new variable.

private var invBG:FlxSprite;

Second, in the constructor.

invBG = new FlxSprite(0, 42);
invBG.createGraphic(FlxG.width, 20, 0xFF773333);
invBG.alpha = 0.75;
invBG.scrollFactor.x = 0;
invBG.scrollFactor.y = 0;
Inv.add(invBG);

We want our inventory to be visible, but only when the ‘x’ button is pressed, place this code outside the ‘if-frozen’ part of the update function, so we can always toggle our inventory on/off.

if (FlxG.keys.justPressed("X"))
{
	updateInv();
	if (Inv.visible)
		Inv.visible = false;
	else
		Inv.visible = true;
}

When you run the game, you will see that the inventory starts visible, if you want to change this, you can do it like we did for the dialoguebox.

Inv.visible = false;

For testing purposes, we can add and remove some items to the inventory, do this in the constructor.

addInv("Pencil");
addInv("Letter");
remInv("Pencil,false");

The remInv function will look for matching names, so pay attention to what you write down when removing items from the inventory. If you run the game, you will see that only the letter is in the inventory, this is because we remove the pencil after it is being created. You can now remove the previous three lines from your code.

We now have a functioning inventory, we can add, remove, and show items. In the next part we will focus on trading items with non-playable-characters and picking up items. I hope you are getting more acquainted with programming, Flixel, Flash and Flashdevelop. If you are having a hard time, I suggest reading back previous parts of this Flash/Flixel Adventure Game tutorial.

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

Next Part: Picking up items