Part 1 - Layout
First, create a new mobile project. You can use a blank project if you want, but the mobile project template will have some of the setup already done for you. Once the project is created, you will notice that you now have a "layout" tab and an "event sheet" tab. Ignore the event sheet for now. All of the initial setup will be done in the graphical layout.
Setting up the layout - Layer 0
When you look at the layout, you will notice a large white rectangle which represents the entire layout, and a smaller dotted rectangle which represents the visible area on the screen. If you click the "play" button at the top left of the screen, you should see a new browser window opening a blank white screen. Right now our game is completely blank.
The first thing we want to do is make the layout big. Click on the layout. On the left side of the screen you should see a "Layout Size" under "Layout Properties". Change your layout size to "2048,1536". Now you have a much larger world to play in.
Creating the Ground
Next, we add stuff! First, right click anywhere on the layout, and "Insert New Object". You want to insert a "sprite", an in-game object. This particular sprite will represent the ground. Pick a nice color (brown) and insert it where you want it. You can resize it as necessary to completely fill the bottom of the layout. We don't want our player to be able to fall off the edge of the world!
Once you have added the sprite, you need to tell the game that this is a ground rather than just a pretty brown rectangle. Make sure the ground sprite is selected, then adjust the following properties:
Name: ground
Behaviors: add the "Jumpthru" behavior to allow our player to jump up to the ground from below, then add the "Physics" behavior, switch "Immovable" to "Yes", and "Collision Mask" to "Bounding Box".
Once you have done this to the ground, you can make multiple copies ("instances") of the ground by control-dragging the ground to duplicate its properties and behaviors. Make several more platforms for the player to jump on. Try previewing your game now. Your layout should look something like this so far:
Creating the Player
Now that we have platforms for the player to jump on, lets create the player. Create another sprite, draw a smiley face (or import an image of a smiley face from the web), and change the size of the sprite to 64 pixels x 64 pixels. Place the player sprite somewhere on the layout, and change the name of the sprite to "player".
Next, add the following behaviors: "Platform" (makes him behave like "Mario"), "ScrollTo" (makes the "camera" follow the player's movements), and "Wrap" (when the player reaches the right side of the layout, they teleport to the left side).
Run the layout. You can now play the game! Of course, it isn't a very exciting game yet, since there is nothing to do other than jump from platform to platform.
Adding a Little Texture
At the moment, the ground doesn't look very convincing. Insert a new object, this time a "Tiled Background". Draw a ground-looking texture that will be repeated over and over again. I like a brick pattern because it is easy to draw, but you can find all sorts of patterns with a quick google search. This pattern doesn't affect gameplay at all, it is just decoration. Here is what mine looks like:
Score Layer - To Keep Track of Everything
Now that we have the basic game layer (currently called "layer 0"), we need to add another layer that keeps everything onscreen that we always want to have onscreen. This includes our answer box and the "Check" button. To add a new layer, on the right hand side of the screen, look for the "Layers" tab, and click the + button to add a new layer. Call this layer "scorelayer".
Once you have added the scorelayer, you need to set its parallax to 0,0 so it won't scroll offscreen when the player moves.
With scorelayer selected, we need to add three new objects: a check button (a new sprite), a text box that says "What is the correct order?", and another text box that will display our answer. Name these "questiontext", "answer", and "checkbutton", respectively. Make sure that they are all within the small dashed rectangle representing the visible screen area of the layout. Here is what they should look like so far:
Another Frame for the Checkbutton
We are going to reuse the "checkbutton" as a "reset" button as well. Rather than creating a whole new button, all we have to do is to tell the button to display a different image after it has been pressed. We do this by adding a second animation frame to the checkbutton sprite. Right-click on the "checkbutton" sprite and select "edit animations". Once you are here, right-click in the "Animations" box to create a new frame called "Frame 1":
For this new frame, add a picture of a "Reset" button. Now Frame 0 should say "Check", and Frame 1 should say "Reset":
If you run the game now, all of the stuff on the scorelayer should always be visible while the rest of the game scrolls around. If the scorelayer stuff isn't always on the screen, you probably forgot to set scorelayer's parallax to 0,0. Here's what the bare-bones game should look like so far:
The "Correct!" Textbox
One more thing to add to the score layer - a box that appears to tell you whether you are correct or incorrect. Add this textbox to the center of the small rectangle. I made mine big (28 points) and green, so it is obvious when you get the question right:
Adding the Words
Because this is a quiz game, there needs to be a task for the player to accomplish. We will add words that will bounce around onscreen and the player must "collect" in a certain order to win. To do this, first, select "Layer 0" to add the words to the main game layer, not to the score layer. Then add a new "Text" object. Change its properties as follows:
Name: Word
Behaviors: add the "Physics" behavior, and set its "Elasticity" to 1 to make it perfectly bouncy
Text: prophase
Once you have done all this, control drag to duplicate this word to different spots on the screen. Add three more words: "metaphase", "anaphase", and "telophase". For the biology folks out there, you should recognize these as the four stages of mitosis.
When you play the game now, you should see the words bounce off the platforms. They don't do anything yet, but that is what Part 2 is for...