Absolute Beginner Tutorial für Multimedia Fusion
Von Reiner Prokein
Ihr habt euch also entschieden, ein Game mit Multimedia Fusion zu basteln ? Und ihr seid absolute Anfänger was das Spielemachen angeht ?
In den folgenden Zeilen erkläre ich euch zumindest mal die Anfänge in MMF. Aller Anfang ist ja bekanntlich schwer …
Ach ja, ein wenig Englisch solltet ihr schon beherrschen. MMF ist in Englisch …
Und euer MMF kann ein wenig anders aussehen. Die Toolbars lassen sich individuell einstellen. Was ich bei meinem teilweise getan habe …
Was man zum Spielemachen braucht:
- eine Spielidee
- Grafiken
- Sounds
- Musik
- eine Programmierumgebung
Erschreckt nicht gleich vor dem Wort Programmierumgebung. Irgendwie muss man ja dem Game sagen, was es machen soll :). Und MMF ist so eine Umgebung. Allerdings schreibt ihr euren Code hier nicht selbst wie bei einer Programmiersprache, sondern klickt ihn euch zusammen.
Grundsätzlich arbeitet MMF mit Objekten. Und jedes Objekt bringt seine Codeschnipsel mit.
Am besten fangen wir mal mit der Oberfläche von MMF an …
Wenn ihr das getan habt, sieht die Sache so aus:
Auf der linken Seite ist nun ein Fenster erschienen, in dem eure Frames auftauchen. Im Moment haben wir da einen Frame. Wenn ihr dieses Fenster schliesst, schliesst ihr euer Projekt. Es ist das Projektfenster. Also aufpassen …
Das rechts erschienene Fenster ist der Storyboard Editor. Auch hier tauchen eure Frames auf. Dazu später mehr.
Wenn ihr im Projektfenster den Untitled Frame anklickt, werden ein paar Knöpfe aktiviert … ( Ihr könnt auch im Storyboardeditor den Frame markieren. Wenn ihr allerdings auf das graue Feld mit der “1” klickt, gelangt ihr direkt zum Frameeditor des Untitled Frames )
Die Buttons führen uns zu den verschiedenen Editoren.
Von Links nach Rechts sind das:
- der Storyboardeditor
der Frameeditor
der Eventeditor
der Eventlisteditor
der Timelineeditor
Hier kommen wir so langsam an die wesentlichen Teile von Multimedia Fusion:)
Der Storyboardeditor ist ja schon offen. Hier werden die Frames ( eure Spielfelder ) verwaltet. Hier kann man die Framegrösse einstellen. Standardmässig ist das 640 x 480 Pixel. Hier werden auch Fadingeffekte zwischen den Frames eingestellt. Und ihr könnt eurem Frame einen Namen verpassen. Einfach auf das entsprechende Feld klicken und die Werte ändern. Wenn ihr auf das Feld unter dem Frame klickt (da steht “more … “), erzeugt ihr einen neuen Frame.
Klickt nun den Storyboardeditor weg, und markiert wieder Untitled Frame im Projektfenster ( damit die Buttons wieder aktiv sind ). Wir machen mit dem Frameeditor weiter: Wenn ihr auf den Button für den Frameeditor klickt, erscheint der Frameeditor:
Maximiert am besten das Fenster. Mit der F2-Taste kann man reinzoomen. Und mit der F3-Taste zoomt man raus. Nützlich für grosse Frames. Was genau kann man im Frameeditor anstellen ? Tja, hier erzeugt ihr euer Spielfeld …
Was nimmt man dafür ? Man nimmt Objekte. Für den Hintergrund nimmt man entweder Quick Backdrop-Objekte ( gut für grosse gekachelte Flächen ), oder Backdrop-Objekte. Nach erscheinen des Frameeditors sind wieder ein paar Buttons aktiv geworden. Damit könnt ihr die jeweiligen Objekte in den Frame packen. Button anklicken, und dann in den Frame klicken. Von links nach rechts sind das folgende Objekte:
Quick Backdrop, Backdrop, Active, String, Counter, Edit Box, Button.
Wenn ihr auch die anderen Objekte sehen wollt, die in MMF zur Verfügung stehen, rechtsklickt ihr einfach irgendwo auf eine freie Fläche im Frameeditor, und wählt Insert Object aus. Dann kommt euch dieser Dialog entgegen …
Tja, ne ganze Menge Sachen. Hier werden alle Objekte verwaltet, die ihr in MMF verwenden könnt. Ihr könnt die Liste erweitern, indem ihr das entsprechende. cox file in die entsprechenden Ordner von MMF packt. Aber das nur am Rande. Die meisten Extensions kommen inzwischen mit einem Installer …
Wählt mal den Backdrop-Button aus ( zweiter von links ):
Dann klickt ihr irgendwo mit Linksklick in den Frameeditor. Huch, wo sind wir denn nun ? Tja, irgendwo muss ja das Bild importiert werden. Wir befinden uns im Pictureeditor. Und wie kriege ich nun da ein Bild rein ? Über den Dialog oben links zum Beispiel:
File/Import/Bitmap
Hier könnt ihr nun ein Bitmapbild (oder jpeg, gif … ) importieren. Wenn ihr in den Preferences im Picture/Animationeditor die Option Show Dialog on Import Bitmap und Show Dialog on Import Animation aktiviert habt, könnt ihr im Importdialog eine transparente Farbe definieren. Ich importiere hier mal einen Planeten.
Nun noch auf OK klicken, und wir sind wieder im Pictureeditor.
Vielleicht wollt ihr ja noch einige Pixel nachbearbeiten. Dafür gibt es ein paar gute Werkzeuge im Pictureeditor (die linke Leiste). Der Picture Editor ist ein kleines Malprogramm. Spielt mal darin herum. Um zum Frameeditor zurückzukehren, schliesst ihr einfach den Pictureeditor. Ich habe meinen so eingestellt, dass er automatisch beim Schliessen speichert (Preferences).
Wollt ihr nachträglich den Backdrop ändern, einfach doppelt links draufklicken, und ihr landet wieder im Pictureeditor. Oder ihr klickt rechts drauf, und wählt im Popupmenü Edit.
Das wichtigste Objekt allerdings ist das Active Object. Es kann gesteuert werden. Also eine gute Möglichkeit, einen Spielersprite zu machen. Klickt, wenn ihr wieder im Frameeditor seid, auf das Active Objekt, und klickt dann wie oben irgendwo links in den Frameeditor.
Der Animationseditor. Dieser Dialog sieht ein wenig anders aus. Das Active bietet allerdings auch eine Menge mehr Möglichkeiten. Immerhin hat es bis zu 32 Richtungen, und kann eine unbegrenzte Anzahl von Animationen enthalten: stehen, laufen, rennen, etc ….. Das Prinzip ist allerdings das gleiche wie im vorherigen Vorgang. Doppelklickt auf die Raute undihr landet wieder im Pictureeditor. Hier kann wieder ein einzelnes Bild importiert und bearbeitet werden.
Wenn ihr eine Animation importieren wollt, dürft ihr die Raute nur markieren. Dann geht ihr auf File/Import/Animation, w ählt eure Datei aus(ich nehm. avi)und die einzelnen Bilder der Datei werden nach dem Rautenbild importiert. Und das Rautenbild kann gelöscht werden.
Wollt ihr eine neue Richtung für euren Sprite ? Klickt rechts auf die Stopped Schrift, und wählt Insert new Direction. Da könnt ihr eure neue Richtung auswählen. Wenn ihr eine neue Animation braucht, klickt ihr rechts unter die schon vorhandene in den leeren Raum. Und wählt dann Insert new Animation. Bastelt euren Sprite zurecht.
Ich selber importiere mal an der Stelle ein Raumschiff mit 16 Richtungen. Ich habe alle 16 Richtungen als Einzelbilder gerendert. Ihr könnt aber auch ein einzelnes Bild nehmen, und von diesem ausgehend mit Create rotated Direction die verschiedenen Richtungen erzeugen. Dann müsst ihr aber den Hotspot bei den einzelnen Bildern manuell nachstellen ( im Pictureeditor befindet sich auf der linken Leiste ein Button für view Hotspot. ). Der Hotspot sollte sich bei allen Bildern an der gleichen Stelle befinden. Sonst kann es später bei Kollisionen zu Problemen kommen.
Wenn ihr euren Sprite fertig habt, schliesst ihr den Animationseditor. Und habt nun folgendes:
Wie ihr seht, sind alle Objekte in der linken Spalte des Frameeditors aufgeführt. Ich habe auch schon mein Active umbenannt in Schiff.
Ein Raumschiff auf weissem Himmel sieht allerdings nicht so gut aus. Klickt mal im Projektfenster auf das kleine Pluszeichen neben Untitled Frame. Direkt drunter erscheint nun ein Properties ( Nicht zu verwechseln mit den Properties direkt darüber, Die sind für die Enstellungen, die für die ganze App gelten … ). Dieses Properties bezieht sich auf den Frame. Es sind die Frame Properties. Da wollen wir hin. Mit Doppelklick darauf öffnet ihr die Properties of Untitled Frame. Hier doppelklickt ihr nun mal auf Frame, um die Frameoptions aufzumachen.
In den Frame Options kann man die Hintergrundfarbe des Frames ändern: Color mit dem Change Button. Ich nehm mal Schwarz. Ihr könnt auch einen Quick Backdrop in Framegrösse als Hintergrund nehmen, falls ihr einen schönen Sternenhintergrund habt.
Nun kommen noch einige kleine Korrekturen an den Objekten dran. Wir machen den Planeten nun so, dass das Raumschiff später daran abprallt. Dazu klickt ihr rechts auf den Backdrop. Entweder im Frame oder in der linken Spalte. Im Menü wählt ihr Properties/Obstacle. Und dann stellt ihr den Obstacle typ auf Obstacle.
Beim Active ( unser Raumschiff ) auch in die Properties ( rechtsklick und im Menü … ), und da auf New Movement.
Nehmt mal das Race Car movement für unser Raumschiff. Somit haben wir mal den Frame vorbereitet …
An dem Punkt beende ich mal die Exkursion im Frameeditor. Wir haben nun einen Backdrop und ein Active Objekt. Die halbe Miete.
Kommen wir zum Eventeditor. Hier wird dem Spiel leben eingehaucht. Oben habe ich ja beschrieben, wie man zu den verschiedenen Editoren kommt. Klickt auf den Eventeditor Button.
Hier wird der Code eingegeben. Es funktioniert nach dem Prinzip Wenn:Dann. Also WENN unser Raumschiff mit dem Planeten kollidiert, DANN soll es gefälligst daran abprallen.
Die WENN Konditionen kommen ins graue Feld (da wo im Moment noch New conditon steht). Und die DANN Aktionen kommen in das Kästchen unter dem entsprechenden Objekt. Ihr seht, dass nicht nur unser Raumschiff als Objekt aufgeführt ist. Dazu später mehr.
Wir klicken nun rechts auf das New conditon Feld. Im aufpoppenden Menü klicken wir rechts auf unser Raumschiff, und wählen Collisions/Backdrop
Wenn ihr auf Backdrop klickt, erhaltet ihr folgendes:
Wir haben also gerade die WENN Kondition definiert. WENN Schiff collides with the background …. Damit das auch wirklich nachher geht, haben wir ja unseren Backdrop schon mal präpariert, indem wir ihn als Obstacle definiert haben. Nur dann prallt das Schiff daran ab. Kommen wir zur DANN Aktion: Im Kästchen unter dem Schiff klicken wir nun auch wieder rechts, und wählen im Menü Movement/Bounce
Somit haben wir diese Zeile:
Ihr habt gerade erfolgreich die erste Codezeile eures Spiels programmiert:)
Anmerkung: Es können auch mehrere Conditions oder Actions in einer Zeile stehen. Dies ist manchmal sogar sehr wichtig, um eine Condition auf einen bestimmten Zustand einzugrenzen. Zum Beispiel wenn ihr eine Kollision nur zulassen wollt, wenn ein Counter einen bestimmten Wert hat. Oder ihr wollt mit einer Condition mehrere Aktionen ausführen lassen. Es ist unnötig dafür eine neue Zeile zu schreiben …
Klickt mal nun auf Run Frame. Der Button ist oben zu finden:
Der linke Button lässt die gesamte Applikation abspielen, der Rechte nur den ausgewählten Frame.
Da wir noch keinen Befehl zum Beenden der App haben, müsst ihr den Frame entweder mit einem Klick ins graue Kreuz oben Rechts beenden, oder ihr nehmt ALT+F4
Nun machen wir noch ein, zwei zeilen Code dazu. Unser Raumschiff verschwindet ja am Rand …
Wie wäre es, wenn das Raumschiff auf der anderen Seite des Frames wieder auftaucht, wenn es zu nahe an den Rand kommt ? Also WENN Schiff zu nahe am Rand, DANN setze die Position auf die andere Seite des Frames. Dazu müssen wir die Position des Schiffes testen. Wie oben klicken wir wieder rechts auf New condition, wählen unser Schiff, und klicken rechts. Im Menü wählen wir nun Position/test position of Schiff:
Im folgenden Dialog wählen wir alle 4 innenstehenden Pfeile aus. Schliesslich soll unser Schiff an allen 4 Seiten die Position wechslen.
Nun wieder in das Kästchen unter das Schiff. Rechtsklick, und im Menü auf Movement/Wrap Around Play Area.
Somit taucht unser Schiff auf der anderen Seite des Frames wieder auf, wenn es am Rand verschwindet.
Jetzt mal eine Zeile, um mit der ESC Taste das Spiel zu beenden.
Klickt auf new event. Nun wählen wir das Keyboard Objekt:
Klickt auf upon pressing a key, dann drückt die ESC Taste. Als nächstes müssen wir uns ins Kästchen unter Storyboard Controls begeben. Hier finden wir auch den Befehl für das Beenden der Applikation:
Wenn ihr nun euer Game abspielt, kann durch Drücken der ESC Taste das Game beendet werden.
Ihr schaut euch am Besten mal in aller Ruhe an, welche Befehle die einzelnen Objekte sonst noch bieten. Jedes Objekt hat seinen eigenen Befehlssatz …
Immerhin habt ihr ja schon drei Codezeilen für euer Game zusammen.
Zurück zu den Editoren. Es bleiben noch der Eventslisteditor und der Timelineeditor. Klickt mal auf den Eventslisteditor Button:
Eigentlich fast der gleiche Editor wie der Events Editor. Nur dass hier der Code übersichtlicher dargestellt wird. Praktisch, wenn ihr viele Objekte und Eventzeilen habt. Und ihr könnt hier kontrollieren, ob die Eventreihenfolge stimmt. Ihr könnt hier zwar die vorhandenen Codelinien bearbeiten, aber neue Zeilen könnt ihr nur im Events Editor einfügen.
Anmerkung: man kann auch zum Event List Editor gelangen, indem man im Event Editor auf eine Action doppelklickt. Sehr nützlich. Denn manchmal ist die Reihenfolge der Conditions und Actions äusserst wichtig.
Bleibt noch der Timeline Editor. Er ist für zeitgesteuerte Aktionen gedacht. Zu meiner Schande muss ich aber gestehen, dass ich noch keine einzige Zeile hier bearbeitet habe …
die Möglichkeiten, die MMF bietet, sind aber nicht auf Spiele beschränkt. Man kann eigentlich alles damit anstellen, was man auch mit herkömmlichem Programmieren hinkriegt. Man brauch nur das entsprechende Objekt dafür. Am Besten lest ihr euch auch noch die Getting the most of … Serie durch.
Ich konnte hier ja nur die Anfänge ankratzen …
© 2002 by Reiner Prokein