2002 – Beginner Tutorial for MMF 1.5

Getting the most of... Absolute Beginner Tutorial for Multimedia Fusion

by Reiner Prokein

So you have decided to create a game with Multimedia Fusion? And you are an absolute Beginner in creating games?

The following text explains the first steps with MMF. All beginning is hard …

What you need :

  • a Gameidea
  • Graphics
  • Sounds / Samples
  • Music
  • a Programming Enviroment

Don`t be afraid of the word Programming Enviroment. There must be a way to tell the Game what it should do : ). And MMF is such an Enviroment. But you don´t write the code line by line like in an Programming Language, you simply click it together.

Generally told : MMF works with Objects. And every Object is having its own Codepieces.

Note : The Toolbars in MMF are customizable. Your Interface could look different form the screnshots here. I made some small changes in the toolbars in my MMF. You can read a howto in the Getting the Most of – tutorials …

Another thing : there is more than one way for some steps to do the things i am describing here.

Here we go :

Let us start with the interface …

Do so, and it looks like this :

Now, here we have a new application, including your Frames. At the momet there is only one Frame. If you close the left window, you will also close your Project. It is the Project window, which is your application. So be careful …

The window that appeared at the right is the Storyboard Editor. This Editor handles your Frames. Later more …

By klicking at the ” Untitled frame ” in the Project window, some Buttons become highlighted … ( You can also klick at the Frame in the Storyboard Editor. But when you klick the field with the “1”, you will move to the Frame Editor of the Untitled Frame )

These Buttons lead to the different Editors of MMF.

They are from left to right :

  • – the Storyboard Editor
    – the Frame Editor
    – the Event Editor
    – the Eventlist Editor
    – the Timeline Editor

That`s where we getting close to the important pieces of Multimedia Fusion : )

The Storyboard Editor is still opened. It´s here where you can handle your Frames. And here you can change the Framesize. The standard Framesize is 640×480 Pixel. You also handle the fadingeffects between the Frames here. And you can change the name of the Frame. Simply klick at a field, and do the changes. To create a new Frame, simply click at the “More” field.

We have explored the Storyboard Editor. So click it away, and mark the “Untitled frame ” in the Project Window ( to make the buttons active again ). We will go on with the Frame Editor. If you are klicking at the Button for the Frame Editor, the Frame Editor appears :

You should maximize the Frame Editor window. You can zoom in by pressing the F2-Button. And you can zoom out by pressing the F3-Button. Good for big Frames. What exactly can you do in the Frame Editor ? Well, it´s here where you create your Playfield …

And how ? You have to use Objects. For Background you can use Quick Backdrop Objects ( good for big tiled backgrounds ) or Backdrop Objects. After the Frame Editor appeared, some more buttons became highlighted. They are for the Objects. You can place the corresponding Objects in the Frame with this Buttons. Click them, and then click somewhere into the Frame. The Objects are from left to right :

Quick Backdrop, Backdrop, Active, String, Counter, Edit box, and Button.

If you wanna have a look at the other available Object types of MMF, rightclick somewhere in the Frame Editor, and in the Popup Menu choose insert Object :

Lots of stuff. Here you can have a look at all Objects that are inside MMF. You can add more Objects by adding a *. cox file into the right folders of MMF. But most of the new Extensions are with Installers anyway. Extensions are another chapter 😉

Press cancel. We don´t want to import an Object at the moment.

Now, click at the Backdrop button ( second from left )

And then leftclick somewhere in the Frame Editor. Wow, what´s this ? Here we are in the Picture Editor. Well, there must be a thing where you can import your Pictures. And how can i import a Picture here ? Choose the Menu up left :

File/Import/Bitmap

Now you can choose your Picture ( Bmp, Jpeg, Gif … ) to import it into your Backdrop Object.

If you have enabled the Show Dialog on Import Bitmap option and the Show Dialog on Import Animation option in the Preferences/Picture/Animation Editor, you can choose a transparent colour of your Image. If you activate the transparent colour checkbox, the grey colour becomes transparent in the Frame Editor. I will go on importing a simple Planet …

Simply click at the OK button. The Picture is imported, and we are back in the Picture Editor.

Maybe you want to fix some of the Pixel in your imported Picture. Look at the left toolbar, and you`ll find some needful tools for this. The Picture Editor is somekind of a Paint Software. Play a bit around. To get back to the Frame Editor, close the Picture Editor. I made mine, that it will automatically save at closing ( Preferences of MMF ).

If you decide that the Picture is wrong, simply doubleclick left at the Backdrop Object, and you are back in the Picture Editor. Or you rightclick at it, and choose “Edit” in the Popup Menu. Now you can import a new Picture, or make some edits at it.

The most useful Object is the Active Object. It can be controlled and moved. A good way to create a sprite. Back in the Frame Editor, click at the Active Object Button, and, as above, click somewhere in the Frame.

This is the Animation Editor. It looks different from the Picture Editor. But the Active Object provides more posibilities. 32 directions, unlimited number of animations …

The way to handle the stuff is nearly the same. Doubleclick at the green symbol with the ” Frame 1 ” under it, and you are back in the Picture Editor. Here again, you can import single Pictures and edit them.

If you want to import an Animation, you should only mark the green symbol by one leftclick. Then go to File/Import/Animation, and choose your Animation ( most times i use *. avi-files to import, but you can also use an Bitmap Animation sequence by marking the first Picture of it … ). Your Animation will be imported after the green symbol, Frame by Frame. And you can delete Frame 1 ( the one with the green symbol ) then.

You need a new direction for your sprite ? Rightclick at the “stopped”, and choose “insert new direction”. Here you can choose your new direction. If you need a new Animation, rightclick into the free space under the stopped Animation, and choose “insert new animation”. Create your sprite now.

At this point i will import a spaceship with 16 directions. I have rendered my starship as single Bitmaps. You can also use a single Picture, and use it as a base for creating rotated directions. But after doing this you have to fix the Hot Spot of all Pictures ( there is a button for hot spot in the left toolbar). The Hot Spot should be at the same point in all of your Pictures. Otherwise it will cause some conflicts with collisions later on.

Close the Animation Editor when you are done with your sprite. Now you should have something like this :

As you can see, all Objects are listed in the subwindow of the Frame Editor (at the moment two Objects ). I have renamed my Active into ” schif ” ( rightclick at it, and choose rename ). They are also listed in the Project window in your Untitled Frame. Click at the” +” to open it, and then at the “-” to collapse it again.

Now we need a better background for the Frame. White is a bad colour for a starfield. So next step : In the Project Window rightclick at the “+” besides the ” Untitled Frame “, and click at the Properties that appears below ( Don´t mix it up with the Properties above. Those are the Properties for the whole Application … ). Now choose Properties/Frame, and we are in the Frame options. That´s where we want to be.

Here you can change the background colour of the Frame : Color with the Change Button. I`ll choose black here. You also can use a Quick Backdrop Object in Frames ize as a Background for the Frame. Maybe a nice Picture of a starfield.

Now, when it´s done, we need to do some small changes at our Objects : we will make the planet to bounce the ship, when it´s colliding with the planet. Rightclick at the Backdrop Object, and, in the upcoming submenu, choose Properties/obstacle. Change the Obstacle type to Obstacle.

Now the ship : rightclick at the ship, and in the submenu choose Properties/new Movement

Seven ways to assign a movement to our poor Active : ). We will choose the Race Car movement for our starship. Well, the Frame is nearly finished at the moment. You can also play a bit around in the Setupdialog for the racecar. I´ll leave it at standard at the moment.

Here we stop exploring the Frame Editor. We have an Active Object and an Backdrop Object. Half of the game : )

Let´s go to the Event Editor. It´s here where you bring your game to live. Above i have described how to go to the different Editors. Now, click at the Event Editor Button.

Here you can put in your code. It works in an ” IF –> THEN ” way. So, IF the ship collides with the planet, THEN it should bounce at it.

The IF ( Conditions ) things are placed into the grey fields ( where you can read new condition ). And the THEN things ( Actions ) are placed into the grid under the current Object. As you can see, there is more than our starsip here. Later more. And our Backdrop Object is missing here. That´s because you can´t add actions to Backdrop Objects …

Let´s rightclick onto the ” New condition ” field now. In the popup menu rightclick at the ship and choose Collisions/Backdrop :

By clicking at the ” Backdrop ” we will get the following result :

We have defined the IF condition now. IF starship collides with background … . And because of this, we had prepared our planet to be Obstacle. Actives only bounce at Obstacle Backdrops.

Let´s go to the THEN thing ( Action ) : rightclick into the grid under the ship and choose Movement/Bounce

Now we have this line :

Congrats, you have programmed your first line of code in your game : )

Note : you can also implement multiple conditions and actions into one line. Sometimes very important. Maybe you want to limit an event so that it only occurs when a counter has a specific value for example. Or you want to perform multiple actions with one condition. No need to rewrite the whole line again and again.

Let´s test it. Click at the Run Frame Button ( squaresymbol ) or Run application Button ( the Button with the ” F ” ). You can find this Button in the top toolbar :

Run Frame only runs the selected Frame, while Run application runs the whole application, starting at Frame 1.

Because we don´t have a command to end the Frame at the moment, we need to use ALT+F4 to stop the playing of the Frame. Or click at the topright at the X-button to close the Frame.

Lets add one or two more lines of code. Our starship is getting lost when it reaches the Frame border …

What about wrapping the starship around the screen, when it´s too far to this border ? So, IF the starship is too close at the Frame border, THEN wrap the ship around the playfield. And reappear it at the other side.

Therefore we have to test the position of the ship : Like above, rightclick at the New Condition, and select our starship. Then rightclick and choose Position/test position of Schiff :

In this dialogue we have to choose all inside arrows. It`s because our starship should wrap at all 4 Frameboders.

Then click the OK button. Back to the grid below our starship. Rightclick and choose : Movement/wrap around play area :

Now we have a codeline wich defines the ship to wrap around the playfield when it’s outside of it.

Let´s go on with a line for ending the game by pressing ESC …

Click at new event. But now we choose the Keyboard Object.

Click at Upon pressing a key. A dialog appears, wich commands you to press a Button. Press the ESC-button. So the Condition is defined : upon pressing ESC … . For the Action you have to go to the grid below Storyboard controls. Here you can find the command to end the Frame.

The application will end If you are pressing the ESC button while runtime now.

Congrats. Your game does have 3 lines of code now.

To get a feeling of all the commands you should have a look at all the commands of the different Objects. Every Object has it´s own bundle of commands.

Back to the Editors : there is still the Eventlist Editor and the Timeline Editor. Click at the Eventslist button :

Nearly the same as the Event Editor. But the code is now typed in a list. It is shown in the way the code goes. Good for big codes and to control if the Order of Events is right. You can edit your code here, but you cannot place new eventlines here. This must be done in the Event Editor.

Note : you can also enter the Event List Editor by doubleclicking at an Action in the Event Editor. Very useful. Because sometimes the order of Events is essential. Which can be controlled best in the Event List Editor.

Finally there is the Timeline Editor. It is made for timebased Events. Unfortunately i never wrote a single line here till now …

Here stops my little Beginner Tutorial. I only told you the basics. And i hope that it was good enough so that you understand it 🙂

The posibilities of MMF doesn´t stop with creating games. You can create nearly everything 2D – related by using the right Object. Like using the FTP-Object for an FTP application etc … . Have a look at the MMF manual …

You should also read the getting the most of MMF tutorials. Very hintful tips in there …

© 2002 by Reiner Prokein