Clickteam Fusion 2.5

Clickteam Fusion 2.5

Not enough ratings
Easy Hidden Object Game
By 🐺-Wolferatus-🐺
Eng: This is a little easy Tutorial to learn how to make a Hidden Object Game with Clickteam Fusion 2.5.
DE: Das ist ein kleines einfaches Tutorial das euch zeigt, wie man ein Hidden Object Spiel mit Clickteam Fusion 2.5 erstellt.
3
   
Award
Favorite
Favorited
Unfavorite
Introduction (Einleitung)
Eng: Okay this Tutorial is to show you how to build an own Hidden Object Game in Clickteam Fusion 2.5. This is not an professional Tutorial, it is just to show you step by step how you can do it, of course, there are much more ways how to build it and much more options you can add, like Intro, levels, Background music and so on.

German: Dieses Tutorial soll euch zeigen wie man ein einfaches Hidden Object Spiel in Clickteam Fusion 2.5 erstellt, dies ist kein profi Tutorial sondern dient nur dazu da, euch einen von vielen wegen zu zeigen. Natürlich kann man sein Spiel weiter ausbauen mit Hintergrund Musik, mehr levels und so weiter, aber dies ist nicht bestandteil dieses tutorials.


Starting (Start)
Eng: You need a Background and Object Pictures you like to use in this Tutorial. Also 2 samle sounds. (a nice one and a boring one). I did my Background and Items on PSD and saved them into PNG. My Objects are not well hidden, to show you the object without problems. On your Game you have to recolor the Objects to make it harder for the player.

DE: Du brauchst ein Hintergrund Bild das du benutzen möchtest und Bilder die die Gegenstände zeigen die du verstecken möchtest bzw der User finden soll. Ich habe mein Bild und die Objekte mit PSD bearbeitet und als PNG Datei gespeichert. Ich habe meine Objekte nicht gross verändert, damit man sie noch sieht in diesem Tutorial, im richtigen Spiel müsst ihr natürlich die Objekte umfärben damit der Spieler es nicht so leicht hat sie zu finden.

Background and Items: (Hintergrund und Objekte)
Step 1 (Erster Schritt)
Eng: We start our App Clickteam Fusion 2.5 with a new Application. Right Click on Application - rename to rename it if you like, i called it "Tutorial"

De: Startet Clickteam Fusion 2.5 mit einer neuen Anwendung (Application), macht einen rechtsklick drauf "Application - rename" um die Datei umzubenennen, ich habe sie "Tutorial" genannt.

Eng: Do the same with Frame 1 and rename it "Level 1" or what ever you like. On the right side you see a little window with a blue monitor, click it with the right mouse and choose 800x600. Click on Application and choose the second Icon from Properties on the left site (Window), click on size and choose 800x600, else your game will not start in this Frame size.

De: Macht das selbe mit "Frame 1" und bennent es in "Level 1" um oder in was immer ihr wollt. Auf der rechten Seite seht ihr nun ein Fenster mit einem blauen Monitor, klickt mit der rechten Maustaste auf diesen und wählt 800x600 aus. Klickt nun links auf "Application" und wählt auf der unteren linken Seite, bei Properties das zweite Icon aus "Window" und wählt bei Size 800x600 aus, wenn ihr dies nicht tut, wird euer Spiel nicht in dieser grösse starten.

Step 2: (Schritt 2)
Eng: Double click now on "Level 1", you should see now a white window in your size 800x600. We will now add our Background. Right click on the white window and choose "insert Object" a new window appears, choose "Background" on the left and then "Picture" and press "OK"

De: Doppelt klickt nun auf "Level 1", ein neues fenster sollte sich nun auf der rechten Seite öffnen, wo ihr ein weisses Blatt seht in eurer Auflösungsgrösse. Klickt nun darauf mit rechts und wählt "insert object", wählt dort links "Background" und dann "Picture" und dann "OK"


Eng: Click now again on your white window and choose your background Picture, press "OK" and it should fill now your white screen. If your Picture has the right size and all is okay, right click on it and Choose "Lock".

DE: klickt nun auf euer weisses Bild, wählt euer Hintergrund und bestätigt mit "OK", euer Hintergrundbild sollte nun das weisse Blatt bedecken, wenn ihr nun zufrieden seit, mit der Position des BG`s, klickt wieder mit der rechten Maustaste drauf und wählt nun "Lock".


Eng: Your picture is now locked and cant be moved anymore.

DE: Euer Bild sollte nun fest sitzen und kann nicht mehr bewegt werden.
Step 3 (Schritt 3)
Eng: Right Click now again on your Picture and choose "insert Object", choose on the left site "All objects" and on the right Site "Active". Click on your screen or on the site of your screen, there should now appear a blue icon.

De: Rechtsklickt nun wieder das Bild, wählt "insert Object" und wählt auf der linken Seite "All objects" aus und rechts klickt dann auf "active" und bestätigt es. klickt dann auf euer Bild oder daneben, es sollte nun ein Blaues icon auftauchen.


Eng: Double Click that Icon now, a new windows pops up, in that windows is a yellow folder "imoirt" click on it and choose an Object you like to use for your game.

De: Doppelt klickt nun das icon, ein neues fenster öffnet sich, wählt dort nun den gelben Ordner "Import" und wählt euer Objekt aus das ihr für euer Spiel benutzen wollt.


Eng: Do this now with all your objects, in my case they are 4.

De: Macht das nun mit all euren Objekten die ihr im Spiel benutzen wollt, in meinem Fall wären es 4.
Step 4 (Schritt 4)
Eng: After adding all your Objects as "Active Object" you need to give them a player event. Don`t worry, thats simple. Click on your Object, choose on the left site where it says "Properties" and choose the 5 Icon "Events", click on Qualifier(s) and "Edit" a window named "Objects qualifiers" should open, click on add and choose "player" and then "OK" and after that click to "OK".

De: Nach dem ihr all eure Objekte nun als actives Objekt eingefügt habt, müsst ihr den objekten noch ein Player Event geben, keine sorge das geht ganz einfach. Klickt auf euer Objekt und wählt links bei "Properties" das 5 Icon aus "Events", klickt dort auf Qualifier(s) und dann auf "Edit", hier sollte sich ein fenster öffnen mit dem namen "Objects qualifiers" klickt hier auf "add" und wählt nun Player aus und bestätigt dies, danach auf "OK".


Eng: You do that now with all your Objects. And then you place them on your BG where ever you want.

De: Dies macht ihr nun mit all euren Objekten. Danach platziert ihr sie auf euer Hintergrund wo auch immer ihr wollt.

Step 5 (Schritt 5)
Eng: Time for the Event Editior. Click on it.

De: Zeit für den Event Editior, klick auf ihn zum öffnen.


Eng: Here we go. Right click on "New condition", "Mouse Pointer and Keyboard". "the mouse", "User clicks" and press "OK"

De: Da sind wir schon. Rechtsklick nun auf "New condition", "Mouse Pointer and Keyboard". "the mouse", "User clicks" und mit "OK" bestätigen.


Eng: There should now stand "User clicks with left button", click again with your right mouse on that and choose "Insert".

De: Es solte nun ein grüner text erscheinen "User clicks with left button", klickt erneut mit der rechten Maustaste drauf und wählt "Insert"


Eng: Choose again "Mouse Pointer and Keyboard". "the mouse" and then "Check for mouse pointer over an Object" and click on the "Player" Icon. and press "OK"

De: Wählt nun wieder "Mouse Pointer and Keyboard". "the mouse" und dann "Check for mouse pointer over an Object" und klickt auf das "Player" Icon. bestätigen mit "OK".


Eng: Right click on it and choose "negate", if you did it right it should look like on the screen now.

De: Rechts klick nun drauf und wählt "Negate", hast du es richtig getan, sollte es nun wie auf dem Bild aussehen.


Eng: Right Click now on under the Sound icon on "1" and choose "play Sample", use from a file "Browse" and choose your boring sound. (We negate the pointer on our player icon so that if the User now clicks on the wrong icon on your background this sample will play. the user knows now, he clickt wrong.)

De: Rechts klick nun unter das Sound Symbol bei "1" und wählt "play Sample", wählt dort bei from a file "Browse" und nehmt eurer schlechtes Soundstück und mit "OK" bestätigen. (Da wir den Maus Pointer negiert haben, wird nun jedesmal der Sound gespielt wenn der Spieler falsch klickt, er weiss also damit, dass es sich um kein Objekt gehandelt hat das er suchen musste.

Step 6 (Schritt 6)
Eng: Now we need to add our Objects. Click on "2" with a right Click and choose this time "the mouse" and then on "users clicks on an object", press "OK" and choose now your Object you use for your game. Do this with all your objects, but choose always the new number in that case it would be now "3"

De: Nun müssen wir unsere Objekte einfügen, klickt dazu bei "2" woeder auf das Symbole mit der Tastatur, wählt "the mouse" und dann "user clicks on an object", wählt nun euer Objekt aus, für euer Spiel. Wiederholt diesen Schritt nun mit allen Objekten die ihr braucht aber macht weiter mit der nächsten Zahl, in diesem fall wäre es dann "3".


Eng: it should look like the picture now when you finished.

De: Es sollte nun wie in dem Bild aussehen, wenn du fertig bist.


Eng: Now add your nice music on your objects. Its the same way you addet the boring sample.(right click under the sound icon where your object is, press samples, then from a file "Browse" and choose your nice sound.) Do this step with all your items (you can also click on one of your sounds and hold it and drag it to your other object.

After that right click under your Object icon and press "Destroy", do this with all your objects.

De: Nun fügt euren Objekten den guten Sound hinzu, dies geht wie vorher mit dem schlechten. (rechts klick unter das sound icon wo euer Objekt ist, klickt "samples" und dann from a file "Browse" und wählt euren guten Sample.) macht diesen Schritt nun mit allen Objekten, ihr könnt aber auch von eurem eben erstelltem eine kopie machen in dem ihr den grünen Pfeil festhaltet und runter zieht zu eurem Objekt.

Danach drückt unter eurem Objekt Icon mit der rechten Maustaste und wählt "Destroy" aus. Wiederholt das mit all euren Objekten.

Step 7 (Schritt 7)
Eng: Now double click again on "Level 1". We add now 3 Counter and our text. Right click on your Background, "insert object" and choose "all objects" Scroll right untile you see a counter, click "OK" and somewhere on your screen. Do this 3 times. (or more if you have more Objects)

De: Nun klickt wieder doppelt auf "Level 1". Wir müssen nun den Counter einfügen und unseren Text. Rechts klick auf unser Hintergrund, "insert object", dann links auf "all objects" und nun müsst ihr rechts solange Scrollen, bis ihr "Counter" seht, klickt drauf udn bestätigt mit "OK", klickt dann irgendwo auf euer Fenster. Wiederholt nun diesen Schritt 3x oder mehr falls ihr mehr Objekte habt.


Eng: Do the Same now with your text. Right click on your Background, "insert object" and scroll on the left site to "text", mark "string" and press "OK" and somewhere on your screen.

De: Macht das selbe nun mit dem Text, rechts klick auf unser Hintergrund, "insert object", dann links scrollen und auf "Text" klicken, rechts nun "string" wählen und bestätigen. Klickt dann irgendwo auf euer Fenster wieder.


Step 8 (Schritt 8)
Eng: You have now your "string" on your window, double click on it and write now all your objects in it. You have to make the box larger, for doing this, click 1x on your string box and then you should be able to do this step. On the lft site under "Properties", 4rd Icon you can change Text color, Font and much more.

De: Du siehst nun dein "string" auf dem Fenster wo du es abgestellt hast, klicke nun doppelt drauf und schreib deine objekte rein. Du musst nun die Box grösser machen, dies geht in dem du 1x auf dein "string" klickst. Auf der linken Seite bei "Properties", das 4 icon, kannst du auch weitere optionen einstellen wie Textfarbe, Schrift Art usw.


Eng: Place your "String" now on the place you like on your BG and place your counter near your text. You can change the size and you must add the numbers of your objects. To do that, click on 1 Counter (best way is to rename each counter with your objects name for example C-DR = Counter Drinking Glass), left Side "properties" then the 3rd Icon "Size" and under Size you can choose how big or small your counter should look. (in my case W: 7 H: 10). Do that with all 3 Counter. Also you need now to add the number, click for this step on "Settings" (1st Icon on Properties) and under "Value" on "Initial value" you have to change from 0 to 4 or the number you need for 1 Object. (if you have 8 bottles then the counter is 8). Do this with all counters for each object.

De: Platziert euren text nun dahin wo ihr auf eurem HG wollt, schiebt den counter daneben. Es ist ratsahm, den Counter in euer Objekt zu benennen, also z.b C-DG = Counter Drinking Glass. Ihr könnt nun die grösse und den Zähler einstellen. Klickt dazu wieder unter "Properties" das 3 Icon an (Size), bei Size könnt ihr nun die Grösse einstellen. (In meinem Fall W: 7 H: 10). Nun ist es zeit dem Counter eine Zahl zu geben, drückt dafür auf den ersten Reiter unter "Properties", bei "Settings" unter "value" steht nun "Initial value", hier gebt ihr die anzahl der Objekte an, wenn ihr also 8 Flaschen auf eurem bild platziert habt, ist die anzahl hier 8. Macht dies mit allen euren Objekten nun.

Step 9 (Schritt 9)
Eng: Open now again your "Event Editor", you should see now all your counters above. Right click now on your counter on your icon where it say "User clicks with left ..." and choose "Substract from Counter", mark 0 and add 1 on it and press "OK", do this step with all your Objects (or just hold and drop it on the next counter)

De: Öffnet nun wieder euer Eventt Editor, oben solltet ihr nun eure Counter sehen. Wählt nun bei eurem objekt, wo steht "User clicks with left ..." auf den Counter und wählt "Substract from Counter", löscht die null und ersetzt sie mit 1. Nur noch mit "OK" bestätigen.


Eng: Right click now on "new condition" and click on your counter, choose here "Compare the counter to a value" and press "OK". Do this with all your counters but dont do a new condition just right click on your counter and press "insert".

After you did that, press again with your right mouse on your counter, click on "insert" and choose "Special" and "limit conditions" - "Only one action when event loops".

De: Rechtsklick nun auf "new condition" und wählt dort euren Counter aus, wählt hier dann "Compare the counter to a value" und bestätigt das mit "OK". Dies müssen wir nun mit allen Zähler machen, aber ihr müsst nicht nicht auf "new condition" klicken sondern auf euren ersten Counter und auf "insert" klicken, so das die Zähler dann schön untereinander stehen.

Habt ihr das gemacht müsst ihr nun wieder rechtsklick machen, "insert" und wählt nun die Zahnräder "Special" aus und wählt dort "limit conditions" - "Only one action when event loops".

Final Step (Finaler Schritt)
Eng: Right click on "Tutorial" on the left site and add a new Frame. Call it "awesome" or Level 2 or what ever you like. Double Click on this Frame, click on the white screen "insert object" - "all objects" - "active" and press "OK" choose now the Awesome Pic and place it on your windows in the middle.

Go again to "Level 1" and open your event editior. Above 3rd Icon (Storyboard) on number 6 right click and choose "Jump to Frame" or "Next Frame" what ever you prefer. if you choose "jump to frame" choose here your Awesome Frame.

Thats it. You can now test your game and after you found all Objects you should see the "Awesome Pic. Or your second Level or what ever you build.

De: Rechts klick nun auf "Tutorial" auf der linken Seite und fügt ein neues Frame hinzu. nennt es "Awesome" oder Level 2 oder wie auch immer ihr wollt. Doppel klickt nun auf Frame und klickt mit rechter Maustaste auf euer weisses Bild und wählt "insert object" - "all objects" - "active" bestätigt es dann mit "OK", klickt dann auf die mitte eures Blattes und wählt das Awesome Bild aus.

Geht wieder zu "Level 1" und öffnet den event editor. Oben beim Pferd (Storyboard) und eurer Nummer 6, klickt ihr nun mit rechter Maustaste drauf und wählt "jump to next frame" oder "next frame", solltet ihr "jump to next frame" ausgewählt haben, wählt hier euer Awesome Frame aus oder level 2 oder wie auch immer ihr es benannt habt.

Das wars, speichert und testet nun euer Spiel, wenn ihr alles richtig gemacht habt und alle Objekte gefunden habt in eurem Spiel sollte nun kommen "Awesome". Ab hier könnt ihr dann weitere Level erstellen oder was immer ihr wollt. Die Grundlagen habt ihr nun drauf für ein Hidden Object Game.

10 Comments
🐺-Wolferatus-🐺  [author] 3 Nov, 2016 @ 8:42pm 
@silencergroup you also can do a new layer on photophop with a black underground and save it as PNG. (for ex. Layer 1 is Background painted black, layer 2 is your picture)
🐺-Wolferatus-🐺  [author] 19 Oct, 2016 @ 5:29pm 
Danke, ist mein erster :)
NILOKILO 19 Oct, 2016 @ 4:50pm 
echt guter guide spitze :krstar:
🐺-Wolferatus-🐺  [author] 7 Oct, 2016 @ 7:32am 
yeah I had the same problem, I solved it with photoshop doing "file - new" used color background white or black and recolor it with your background color of your image and adding the image as new layer. and then saved as PNG. maybe that works for you too. (didn`t found another solution for it, had that with a lot of backgrounds in JPEG)
silencergroup 7 Oct, 2016 @ 7:19am 
I do have a question though. I used your material to do the demo and noticed that the black areas around the bed are full of white "holes". I tried loading a photo of my own and it did the same thing - any black areas ended up speckled with white spots. Ideas?
🐺-Wolferatus-🐺  [author] 7 Oct, 2016 @ 4:54am 
thanks, yeah maybe my english isn`t always good in that tutorial, I never realy wrote one in english and since I use it realy rare I forgot a lot :(
silencergroup 7 Oct, 2016 @ 1:29am 
Well done. I stumbled over one or 2 things, but eventually figured out what you were meaning.
🐺-Wolferatus-🐺  [author] 4 Oct, 2016 @ 6:15am 
Danke. nein bin ich nicht xD schön wärs.
LUCY.ninos 4 Oct, 2016 @ 6:14am 
*Computerprogrammiererin?
LUCY.ninos 4 Oct, 2016 @ 6:14am 
Prima!
Sehr toll! Danke.
Bist du Computerprogrammierer ?