Friday, July 18, 2008

Step 4 - Treasure little Treasure

In this post we will be covering treasure and HUD updates. Basically we will adding a treasure chest to the sceen and when the player touches it, the players score will go up by 100. So first let's get our actors.
  1. Click Actors->Search and type in treasure.

  2. It should find a closed treasure chest, select it and add it to your actors list.

  3. Rename that actor to ChestClosed, since the hyphenated name is just annoying.

  4. Click Scene->Main->ChestClosed in the actors left sidebar so we can add the treasure to our scene.

  5. I know what you are thinking, wow that's a big chest. And you're right! It too big, so grab a corner and resize it. 48x48 looked good to.

  6. Place the chest at location 91,305 and test it out. Try touching the chest!

So what happened? It moved right and your score didn't increase. You still have the goose egg. Good that's what supposed to happen. Why did it move? That's right, mass! We didn't set the mass. Also if we want our score to increase, lets add a collision behavior as well.

  1. Click Actors->ChestClosed->Properties->Mass. Set the mass value to 10.
  2. Click Behaviors->Property->Event->Collision. Set the first actor to myself and the second actor to "any instance of this actor:" player. Click Close.
  3. Click Property in the Chest Closed Behaviour submenu.
  4. Make sure "Change the value of the" Game is set to Score.
  5. Click Add then 100. Now close it.
  6. Rename the Behavior name to "OnTouch"
  7. Try it now, click Play.

Wow it worked...and worked...and worked. From this one treasure chest we can get infinite points. Woot! Ok now that's not supposed to happen. Our score should only go up once. We need to add a filter behavior to fix this so let's set it up and fix it.

  1. Click Actors->Properties->Add a property. Then add a property that is m_IsOpenned and set its default value to 0. We'll use this property to tell if the chest is alreadly opened. Click Close.
  2. Click Behaviors->TouchChest-Filter. Set the filter variable to m_IsOpened and set the value to 0. This way we only get points when it's zero.
  3. One last thing, we need to set it to one once we touch it as well. So we need to add one more collision behavior for that.
  4. Click Behaviors->Property. Rename the new behavior to TouchChestOpened.
  5. Click Event->Collision and set the actors to myself and Player.
  6. Click the Property submenu of ChestUnlocked Behaviors and Change value of the MYSELF to m_IsOpened and Set it to: 1. To indicate that the treasure is open.

Perfect. It's all working as expected. Too bad the chest doesn't open so we can easily tell if it's got treasure or not. Wait we can fix that as well. But let's do that in the next post since I'm getting tired.

Step 3 - A Room with a view

Ok in this post we will setup the room with the player and the boundaries. We will also add a few HUD elements as well. And what I mean by hud elements are actors the provide us with game information, like scoreboard.

  1. Select Scenes and then main.
  2. You should be seeing the really awesome dungeon background we selected last time. If not redo the last step.
  3. Select the boundary actor in the left menu bar and click on the dungeon scene.
  4. Click the snapping icon to make sure it is NOT highlighted. You do not want snapping enabled when setting up boundaries.
  5. We are going to use this boundary to stop the actor from falling off the left side of the screen. Now resize the boundary to be as tall as the scene and only 10 pixels wide. Just click on the square on the corners of the icon and drag to resize.
  6. Once resized move (click its center, hold down the mouse and drag) the actor to the left edge of the scene were you can barely see it and leave it there. There's boundary number one. Now repeat for the right side and the top side. The bottom side is special so we'll do that next. Hint, the resize controls are a bit buggy, sometime I have to use the top square to resize and sometimes the buttom, just try either until you resize it properly.
  7. The bottom boundary is special because it will also be the background for our HUD. So add one to the scene, make it as wide as the scene but this time make it 50 pixels in height. And place it at the bottom of the scene were all 50 pixels are visible.

Great! The boundaries are all done. Now let's drop in our player and test the scene.

  1. In the main scene, select Behaviours and in the sub menu select Appear.
  2. Select the Player actor and set it's offset relative to scene with X:500 and Y:600. That should do it.
  3. Now close the scene and test the game. Click "Play"
  4. You should be able to move around the scene without leaving it. If you can move through the boundaries then you for got to make that actor solid, so click the boundary actor and make it solid.

Great it's loooking like a game now. But wait, something seems wrong, the player is moving annoyingly slow. What's up? Well let's just say its physics. So to fix the speed, select Actors->Player->Behavior->MoveLeft->Motion->MaxSpeed. Set this value to 200. I think that feels better. Now set the speed for MoveRight, MoveUp and MoveDown. Note: when editing Motion, you can immediately test out your changes by clicking on the preview button.

We're almost done, let's add a scoreboard actor to enhance the hud.

  1. Click Actors->Search->Controls->Score Display Typewriter. That should do for this game as the font has a gothic look to it.
  2. Now rename the actor to scoreboard.
  3. Click Scene->Main and then click the scoreboard actor.
  4. Resize the scoreboard to fit nicely on the hud.
  5. I placed mine on the bottom right corner of the screen, ON the HUD.

Well that it for now. Next time we do fun stuff, like collect treasure and poke around with the HUD.

Step 2 - Actors are Actors

In this step we will cover setting up the main Scene. As stated earlier, each room must connect to 3 adjoining rooms. So that's the plan. We will create a room scene with our player actor and later we will add 3 gateway actors to other rooms. And what I mean by gateway is basically an actor that will trigger a scene change when the player actor touches it.

However in this post all we are going to do is to setup the main scene with background, add boundries and our Player actor.

Ok here we go...

  1. Login to Popfly and select "Create a Game".

  1. Be brave and select ... or start from scratch.




  2. Click the scene globe to edit scenes, then the main scene icon.

  3. Add a background. I choose the dungeon background because well the player will be exploring dungeons. Note: the scale image to background button should be highlighted by default, if not click it before adding your background. This way the background image will scale to the size of your background automatically. Then click the close button, circled X.


  4. Since we need a bit more room to move around, change the scene size to Width:1024 and Height:760. That's a good old graphics resolution number, so hopefully it will show up fine on most computers. Hint: If you have a high resolution monitor, maximize your window so the entire scene will fit.

Now that we are done with the basic setup, let's start adding the fun stuff.

  1. First a few actors: the Player and the scene boundaries. The boundries are really walls that we try to hide so they don't clutter the scene. The job of the boundries is to keep the player in the scene. Now click Actors.

  2. For the player actor I chose: Ninja Boy. He's good for a couple of reason, he's cool but I'll really elaborate as to why later. You can choose whom ever you like. But from now on, when I mention the player, I really mean the player actor. Lastly, I renamed Ninja Boy to Player, just so it's a bit easier to use.
  3. As for the scene boundary, I chose "Silver Button". I really was looking for blackish, but couldn't find it, so hope the silver color works out. I renamed "Silver Button" to Boundary.

Now that we have our boundaries we need to make it useful.

  1. Click the Boundary Icon and the make the boundary a solid actor but clicking on the bricks icon. This way, when our Player touches it, we can get it to stop our player.
  2. However, just making solid won't stop our player. GameCreator has a built in physics engine so all actors have mass (for you non-physics peeps, let's just say mass is what makes things heavy). The default mass for all actors is 0. So if our actor is moving and collides with the boundary that has the same mass and not moving, the boundary will move. So much for stopping the actor from leaving the scene. This reaction is due to conservation of momentum, but I won't get into a physics lesson here. Let's just say if the boundary was more massive then it wouldn't move. So let's do that.
  3. To add more mass to the Boundary click the boundary actor icon and the select properties. Set the mass property to 1000. That's really massive compared to 1. So it shouldn't move.

Ok the Boundary actor is all done. Now time to setup the Player.



  1. Click the Player in the actors list, then the Behaviors buttons since we need to add movement controls.
  2. Click motion then event in the motion menu. In choose an event, select Keyboard, then select a key to move left. I chose the left arrow. Click close to end your selection, then click the motion icon in Player Actions.
  3. In the Motion menu select the Left Arrow (west) and make sure it Relative to: is set to scene. This will make our actor move left.
  4. Make sure to click "While receive event." Otherwise our actor will never stop moving. Then click close.
  5. Lastly rename the behavior to: MoveLeft so you can easily know what it's doing.
  6. Repeat steps 1-4 again for moving Up, Down, and Right.

Well that's it. You have your basic parts. In the next lesson, we'll get the actors to do something. Be sure to save your game RIGHT NOW!

Step 1 - Game Design

The first thing that needs to be settled is Game Design. More specifically a few basic behaviors of the game. Don't worry we can add more features as we complete each phase.
  1. Entire Room Visible - The entire room will be visible at once. No sliding viewports.
  2. 3 Doors out - Each Room will have 3 doors that lead to other rooms.
  3. Room Monsters - Each room may have a few monsters. Some fixed, some dynamically generated.
  4. Variable Monsters skills - some monsters are weak, some are stronger, & some are Boss level.
  5. Room Treasure - Each room may have treasure. Like gold
  6. Stats - Health
  7. Default Weapon - You start with a sword.
  8. Attack - You can attack monsters that are in front of you.
  9. Combat - basic combat system where the player and monsters gives damage.
  10. Start in Room O (zero).
That's probably more than enough to start with. So let' s see how this goes.

What it's all about

Welcome to Popfly Oki. The blog will cover the development of an adventure game using Microsoft Popfly Game Creator product. So why bother? Since Popfly is still in alpha finding any good documentation is a hassle and since I already with through the trouble of figuring stuff out on my first game, I figured that I might as well share my experiences with you...but on a another game. Unlike my last game, this one won't be a side scrolling adventure. Instead I will be making a dungeoneering game with 42 rooms. Now let's get started!