Τρίτη 2 Ιουλίου 2013

Το πρώτο μου game

Πάμε να κάνουμε αυτό για το οποίο στήθηκε τούτο εδώ το blog.
Θα φτιάξουμε το πρώτο μας game. Το ταβάνι το βάζουμε χαμηλά γιατί τώρα ξεκινάμε, δεν γίναμε και Sid Meiers!



Το 1ο βήμα είναι να κατεβάσουμε τη Construct 2 από εδώ:
http://www.scirra.com

Πατάμε το κουμπί "Download" και το κατέβασμα θα ξεκινήσει αυτόματα.

Τρέχουμε το αρχείο που μόλις κατεβάσαμε. Η εγκατάσταση είναι απλή και δεν διαφέρει από τα εκατομμύρια άλλες εγκαταστάσεις που έχετε κάνει.

Μόλις ολοκληρωθεί πατάμε το εικονίδιο που δημιουργήθηκε κι αυτό ήταν!
Μας υποδέχεται η αρχική οθόνη της Construct 2:

Holy...


Πατάμε New Project και στο επόμενο παράθυρο συνεχίζουμε δυναμικά και δεν πάμε πίσω. Πατάμε New Empty Project και είμαστε έτοιμοι να βάλουμε τα κλάματα:

ΜΑΜΑΑΑΑΑΑΑ

Δε μασάμε. Είμαστε έτοιμοι για όλα. Θέλουμε να γίνουμε indie developers ΚΑΙ ΘΑ ΓΙΝΟΥΜΕ.

Το κεντρικό παράθυρο είναι το layout. Εδώ δημιουργούμε και τοποθετούμε αντικείμενα. Κάθε οθόνη που υπάρχει στο παιχνίδι μας είναι ένα layout. To layout μπορεί να είναι μια πίστα, η αρχική οθόνη, η οθόνη game over κτλ. Στ'αριστερά της οθόνης είναι η μπάρα ιδιοτήτων (Property Bar). Κάθε αντικείμενο που επιλέγουμε έχει τις δικές του ιδιότητες κι από δω μπορούμε να τις αλλάξουμε.
Στα δεξιά είναι η Project Bar. Εκεί βλέπουμε όλα τα objects που προσθέσαμε στο project μας. Επίσης χειριζόμαστε τα layers (θα το δούμε παρακάτω).


Προς το παρόν το layout μας είναι άδειο και δεν έχει πολύ ενδιαφέρον. Πάμε να βάλουμε αντικείμενα.


Εισαγωγή Αντικειμένων


Το πρώτο πράγμα που θέλουμε είναι ένα φόντο (background). Θα βάλουμε ένα tiled background, δηλαδή μια εικόνα που θα επαναλαμβάνεται σε όλη την οθόνη. Πώς είναι τα πλακάκια που έχουμε στο σπίτι μας; έτσι ακριβώς, μόνο που τα tiled backgrounds δεν θέλουν σφουγγάρισμα.

Κάντε δεξί κλικ στην παρακάτω εικόνα και σώστε την στο pc σας:




Πίσω στην Construct 2, κάνουμε διπλό κλικ σε οποιαδήποτε κενή περιοχή του layout για να βάλουμε ένα νέο αντικείμενο. Στο παράθυρο που ανοίγει κάνουμε διπλό κλικ στο tiled background:



Θα εμφανιστεί ένας σταυρός για να πυρ... εμμμ να διαλέξουμε το σημείο που θα μπει το αντικείμενο μας. Κάνουμε κλικ κι εμφανίζεται ο Image Editor:




Πατάμε το κουμπί Load an image from a file





Βρίσκουμε την εικόνα που κατεβάσαμε και κάνουμε διπλό κλικ.
Κλείνουμε τον Image Editor πατώντας το x πάνω δεξιά (αν μας ρωτήσει το πρόγραμμα, σώζουμε τις αλλαγές) και βλέπουμε το αντικείμενο μας στο layout. Ανάβουμε τσιγαράκι για να το γιορτάσουμε και συνεχίζουμε.

Με επιλεγμένο το background κοιτάμε στο αριστερό μέρος της οθόνης όπου θα βρούμε τις ιδιότητές του (properties). Αλλάζουμε το position σε 0,0 (η πάνω αριστερή γωνία του layout) και το size σε 1280,1024.

Για να δούμε τί φτιάξαμε. Κρατώντας πατημένο το control, με τη ροδέλα του ποντικιού κάνουμε zoom in/out. Εναλλακτικά κάνουμε κλικ στο View και μετά στο zoom in. Οι πετρούλες μας θα πρέπει να καλύπτουν ολόκληρο το layout:




Αν πατήσουμε play, θ'ανοιξει ο browser με το background μας!

"Παιχνιδάρα, 10/10 !!" -Κανένας reviewer ποτέ

Πίσω στην Construct 2, πατάμε control και 0 (μηδέν) ή View - Zoom to 100% για να πάμε σε κανονική προβολή (1:1).

Θα βάλουμε κι άλλα αντικείμενα να ζωντανέψουμε λίγο το παιχνίδι μας. Πριν το κάνουμε αυτό, για να μην επιλέγουμε συνέχεια κατά λάθος το background και πετάξουμε το pc από το παράθυρο, θα το κλειδώσουμε από τα layers για να μην μπορούμε να το επιλέξουμε. Κι επειδή κανείς δεν κατάλαβε την τελευταία πρόταση, εξηγούμαι:
Θυμάστε τα layouts; ωραία, κάθε layout λοιπόν μπορεί να έχει πολλά layers. 
Τα layers ομαδοποιούν τα αντικείμενά μας και κάνουν πολύ εύκολο το να καθορίζουμε ποια αντικείμενα θα εμφανίζονται πάνω από άλλα. Είναι ακριβώς η ίδια αρχή και με τις εφαρμογές επεξεργασίας εικόνας (Photoshop, Gimp, Paint.NET).
Στο παράδειγμά μας, θέλουμε τα υπόλοιπα αντικείμενά μας να εμφανίζονται πάνω από το background. Γι' αυτό θα φτιάξουμε ένα νέο layer.

Κάνουμε κλικ στο tab Layers της Project Bar (στο δεξί κάτω μέρος της οθόνης):


Βλέπουμε το layer0 (στην Construct 2 η αρίθμηση ξεκινάει από το 0, όπως και στον προγραμματισμό). Επιλέγουμε το layer0 και κάνουμε κλικ στο μολυβάκι για να του αλλάξουμε όνομα σε Background.
Δίπλα στο μολυβάκι έχει ένα λουκέτο. Το πατάμε για να κλειδώσουμε το background. Αν θέλουμε να κάνουμε αλλαγές, το ξαναπατάμε για να ξεκλειδώσει.
Με επιλεγμένο το layer Background, πατάμε τον σταυρό για να προσθέσουμε κι άλλο layer από πάνω. Του δίνουμε το όνομα Main.
Το τελικό αποτέλεσμα:




ΣΗΜΑΝΤΙΚΟ: Σιγουρευόμαστε ότι το layer Main είναι το επιλεγμένο. Έτσι κάθε καινούριο αντικείμενο που θα βάλουμε θ'ανήκει στο Main.

Ώρα για τον χειρισμό.

Προσθεση Αντικειμένων Χειρισμού (Input)


Εστιάζουμε την προσοχή μας στο layout και όχι στη sexy γειτόνισσα. Κάνουμε διπλό κλικ κι από το παράθυρο που εμφανίζεται επιλέγουμε το object Mouse. Με τον ίδιο τρόπο προσθέτουμε το object Keyboard. Έτσι μπορούμε να έχουμε χειρισμό με ποντίκι αλλά και πληκτρολόγιο.

Σημείωση: Τα αντικείμενα Mouse και Keyboard δεν φαίνονται στο layout. Είναι κρυφά και αυτόματα προσβάσιμα απ' όλο το project. Έτσι όλα τα layouts μπορούν να δεχτούν χειρισμό με ποντίκι ή/και πληκτρολόγιο.

 

Πρόσθεση Αντικειμένων Παιχνιδιού


Επιτέλους έφτασε η μεγάλη ώρα! Δεξί κλικ στις παρακάτω εικόνες και κατέβασμα στο pc μας:



Παίκτης (Player):




Εχθρός:





Σφαίρα:





Έκρηξη (by Michael Bay):


Για όσους δεν έχουν καταλάβει, στο παιχνίδι μας αναλαμβάνουμε το ρόλο του σφίχτη τερμινάτορα που θα εξολοθρεύει σιχαμερά τέρατα με ένα τόνο σφαίρες και πολλές εκρήξεις έτσι για το μπούγιο.

Για κάθε ένα από τα παραπάνω, θα χρησιμοποιήσουμε ένα sprite object. Αυτό που κάνει είναι να παίρνει μια εικόνα και να μας δίνει τη δυνατότητα να την μετακινούμε, να την κάνουμε resize και να την περιστρέφουμε. Τα 2d games αποτελούνται κυρίως από sprites.

Πάμε να προσθέσουμε τα sprites μας στο layout μας. Η διαδικασία είναι ίδια με το tiled background που βάλαμε προηγουμένως:

Διπλό κλικ στο layout για εισαγωγή νέου object
Διπλό κλικ στο αντικείμενο "Sprite"
Όταν ο κέρσορας αλλάξει σε σταυρό, κλικ οπουδήποτε στο layout. Το tooltip θα πρέπει να λέει "Main".
Ανοίγει ο Image Editor. Πατάμε Open και φορτώνουμε μια από τις εικόνες που κατεβάσαμε.
Κλείνουμε τον Image Editor σώζωντας τις αλλαγές μας και ένα δάκρυ συγκίνησης κυλάει: To sprite μας βρίσκεται στο layout!

Ένας άλλος τρόπος είναι να βάλουμε τις εικόνες μας από το folder που τις έχουμε με drag and drop στο layout. H Construct 2 θα φτιάξει αυτόματα ένα sprite object για κάθε εικόνα. Προσοχή, επιλέγουμε τις εικόνες μία μία γιατί αλλιώς το πρόγραμμα θα φτιάξει 1 sprite object με 4 animation frames!

Βάζουμε τη σφαίρα και την έκρηξη εκτός layout, αλλιώς θα φαίνονται όταν τρέξουμε το παιχνίδι και δεν θέλουμε (zoom out και τα βάζουμε κάπου στη γαλάζια περιοχή γύρω από το layout).

Τα sprites μας θα ονομάζονται sprite, sprite2, sprite3 και sprite4. Όχι και πολύ χρήσιμο. Φανταστείτε να έχουμε 50 sprites με τέτοια ονόματα, θα χάσουμε τη μπάλα. Γι'αυτό θα τους αλλάξουμε ονόματα. Θα τα μετονομάσουμε σε player, monster, bullet και explosion αντίστοιχα. Τα επιλέγουμε ένα ένα και αλλάζουμε την ιδιότητα Name από το property bar:




Προσθέτοντας Συμπεριφορές


Οι συμπεριφορές (behaviors) είναι προκατασκευασμένη (sic) λειτουργικότητα. Για παράδειγμα, δίνουμε σ'ένα object Συμπεριφορά Platform και σ'ενα άλλο οbject Συμπεριφορά Solid. Μπουμ, μπορούμε να χοροπηδάμε σα να παίζουμε Platform! Κι επειδή είναι αδόκιμη η μετάφρασή μου και μου την σπάει, θα χρησιμοποιώ τον όρο Behaviors.

Αυτές είναι οι κυριότερες behaviors της Construct 2:

- 8 direction movement. Κινούμε ένα object με τα βελάκια. Ό,τι πρέπει για τον Player μας.

- Bullet movement. Κινεί ένα object στην τρέχουσα γωνία του. Αυτή θα χρησιμοποιήσουμε για τις σφαίρες μας. Παρά το όνομα, θα την χρησιμοποίησουμε και για τα τέρατά μας - το μόνο που κάνει είναι να κινεί αντικείμενα μπροστά.

- Scroll To. Κάνει την οθόνη να ακολουθεί ένα object (aka scrolling). Χρήσιμη για τον Player μας.

- Bound to Layout. Σταματάει ένα αντικείμενο από το να ξεφύγει εκτός ορίων του layout. Κι αυτό χρήσιμο για τον Player μας.

- Destroy Outside Layout. Αντί να σταματάει ένα object, το καταστρέφει όταν βρεθεί εκτός ορίων του layout. Χρήσιμο για τις σφαίρες μας. Χωρίς αυτό οι σφαίρες μας θα πετούσαν εκτός οθόνης επ'άπειρον μέχρι το πλήθος τους να μας γονατίσει το pc και ν'ασχοληθούμε με το ψάρεμα.

-Fade. Το αντικείμενο σταδιακά ξεθωριάζει. Χρήσιμο για τις εκρήξεις μας.

Πάμε να βάλουμε τις αντίστοιχες behaviors στ' αντικείμενά μας!



Πώς προσθέτουμε behaviors


Κάνουμε κλικ στον Player. Στην Property Bar (θυμάστε ότι είναι στο αριστερό μέρος της οθόνης, έτσι;) βλέπουμε το Behaviors. Κάνουμε κλικ στο add/edit και θ'ανοίξει το Behaviors dialog:




Κλικ στο μεγάλο συν (Add new) και στο επόμενο παράθυρο διπλό κλικ στο 8 direction για να το βάλουμε στον Player μας:

 

Με τον ίδιο τρόπο προσθέτουμε τα Bound to layout και Scroll To. Το τελικό αποτέλεσμα θα είναι ο Player μας να έχει τις εξής behaviors:




Φανταστικό ε;

Κλείνουμε το behaviors dialog και πατάμε play




O browser μας υποστηρίζει HTML 5, έτσι; Αν όχι, κατεβάζουμε την τελευταία έκδοση του browser που χρησιμοποιούμε. Anyway, αφού τρέξουμε το game μας βλέπουμε ότι χειριζόμαστε τον Player με τα βελάκια και ότι η οθόνη μας ακολουθεί. Woot!
Προσπαθούμε να βγούμε εκτός ορίων layout. Nope, έχουμε προβλέψει και βάλαμε Bound to layout!
Αυτό κάνουν οι behaviors: με 2 κλικ έχουμε λειτουργικότητα που αλλιώς θα ήθελε πολλές γραμμές κώδικα!

Προσθέτοντας και τις υπόλοιπες behaviors

Με την ίδια μέθοδο βάζουμε τις συμπεριφορές μας (...) και στα υπόλοιπα αντικείμενα:

- Bullet movement και Destroy outside layout για τις σφαίρες μας

- Bullet movement και στα τερατάκια μας

- Fade στην έκρηξή μας. Το καλό με το Fade είναι ότι διαγράφει το αντικείμενο μόλις ξεθωριάσει, οπότε δε μας νοιάζει ο έλεγχος για ξέμπαρκα αόρατα αντικείμενα που τρώνε πολύτιμους πόρους του pc μας.

Πατάμε play. Βλέπουμε ότι το τερατάκι την κάνει με ελαφρά. Πρέπει να του μειώσουμε την ταχύτητα.
Επιλέγουμε το monster. Παρατηρούμε ότι στο Properties Bar έχουν προστεθεί έξτρα ιδιότητες που αφορούν στο behavior:


Καλό είναι να πειραματιζόμαστε με διάφορες τιμές μέχρι να είμαστε ευχαριστημένοι. Προς το παρόν αλλάζουμε το Speed από 400 σε 80 (pixels ανά δευτερόλεπτο).
Με τον ίδιο τρόπο αλλάζουμε την ταχύτητα της σφαίρας μας από 400 σε 600. Επιλέγουμε την έκρηξή μας και αλλάζουμε το Fade out time σε 0.5 (μισό δευτερόλεπτο).

Φτιάχνοντας περισσότερα τέρατα

Κρατώντας πατημένο το control, κάνουμε κλικ στo τερατάκι μας και drag. Αμέσως δημιουργείται κι άλλο ένα object του ίδιου τύπου (Monster).

ΠΡΟΣΟΧΗ, ΔΙΑΛΕΙΜΜΑ ΓΙΑ ΘΕΩΡΙΑ:

Ένα object είναι ουσιαστικά μια κλάση. Στην περίπτωσή μας, υπάρχει ένα object Monster και πολλά instances του ίδιου object. Όπως και στον προγραμματισμό, υπάρχει μια κλάση και όσα instances θέλουμε. Στην ουσία μια κλάση είναι το σχεδιάγραμμα (blueprint) το οποίο χρησιμοποιούμε για να φτιάξουμε πολλά όμοια αντικείμενα.
Αν είχαμε διαφορετικούς εχθρούς στο παιχνίδι μας, κάθε είδος εχθρού θα ήταν μια κλάση. Αν βάζαμε πολλούς εχθρούς του ίδιου είδους, ο καθένας θα ήταν ένα instance.

Χρησιμοποιώντας control + drag, φτιάχνουμε 7-8 νέα τερατάκια. Τα απλώνουμε στο layout (μην ξεχνάτε, control + ροδέλα = zoom in/out) και το αποτέλεσμα είναι κάπως έτσι:



Ήρθε η ώρα να ... ΠΡΟΓΡΑΜΜΑΤΙΣΟΥΜΕ!




Events

H Construct 2 χρησιμοποιεί ένα εύχρηστο σύστημα για να προγραμματίσουμε τα αντικείμενά μας να κάνουν ό,τι θέλουμε, τον Evenτ Editor. Για να θαυμάσουμε το μεγαλείο του, κάνουμε κλικ στο Event Sheet 1 tab στο πάνω μέρος της οθόνης:



Προς στιγμή δε λέει και πολλά...
Εδώ όμως θα βάλουμε τα events μας που θα αποτελούν το game logic.
Το Event Sheet είναι ένα σύνολο από events και μπορούμε να έχουμε πολλά Event Sheets για διαφορετικά μέρη του παιχνιδιού μας. Μπορούμε ακόμα να συμπεριλάβουμε (include) ένα Event Sheet σ'ένα άλλο ώστε να χρησιμοποιούμε τα ίδια events σε πολλές πίστες πχ.
Προς το παρόν αυτά είναι πολύ προχωρημένα για μας αλλά μια μέρα θα παίζουμε τα events στα δάχτυλα.

Περί Events

Όπως λέει και το κέιμενο στο άδειο προς ώρας Sheet, η Construct 2 τρέχει οτιδήποτε βάζουμε εδώ once per tick. Τί σημαίνει αυτό; Οι περισσότερες οθόνες ανανεώνουν την εικόνα 60 φορές το δευτερόλεπτο, οπότε η Construct 2 προσπαθεί να ματσάρει αυτή την συχνότητα για ομαλή απεικόνιση του game μας. Πρακτικά αυτό σημαίνει ότι το Event Sheet "τρέχει" 60 φορές το δευτερόλεπτο και κάθε φορά η οθόνη ζωγραφίζεται ξανά.
Οπότε, 1 tick = "Τρέχω τα events και ζωγραφίζω την οθόνη".

Τα Events τρέχουν από πάνω προς τα κάτω, οπότε τα events στο πάνω μέρος του Sheet τρέχουν πρώτα.


Συνθήκες, actions και sub-events

Συνεχίζουμε στο ίδιο hardcore mode: 'Ενα event αποτελείται από συνθήκες (conditions). Αυτές ελέγχουν διάφορα πραγματάκια, πχ "έχω πατημένο το space;", ή "ξέχασα τον θερμοσίφωνα ανοιχτό;".
Δυστυχώς η Construct 2 δεν μπορεί να κάνει τίποτα για το 2ο (μπορεί σε μελλοντική έκδοση :-p).
Αν ισχύει ότι έχω πατημένο το space, τρέχουν οι actions γι'αυτή τη συνθήκη όπως πχ "φτιάξε μια σφαίρα στην οθόνη". 
Παίρνουμε depon και συνεχιζουμε. Αφού τρέξουν οι actions, είναι η σειρα των sub-events. Με τη σειρά τους ελέγχουν κι άλλες συνθήκες, μετά τρέχουν τις αντίστοιχες actions κ.ο.κ μέχρι να δούμε το Event Sheet και να μην καταλαβαίνουμε τί γίνεται παρ'όλο που εμείς το φτιάξαμε.
Στο συγκεκριμένο tutorial δεν θ'ασχοληθούμε με sub-events οπότε ξεφυσάμε από ανακούφιση.


Ανακεφαλαίωση: Ένα event τρέχει κάπως έτσι:
Ικανοποιούνται όλες οι συνθήκες;
-Ναι: Τρέχουν οι actions του event
-Όχι: Πήγαινε στο επόμενο event (αν δεν έχει sub-events)

Το απλοποιήσαμε πολύ, στην πραγματικότητα η Construct 2 μας δίνει πολλές δυνατότητες για τον χειρισμό των events. Για την ώρα μας κάνει όμως.

Το πρώτο μου event

Θέλουμε ο Player να κοιτάει πάντα προς τον κέρσορα του ποντικιού. Το event θα είναι το εξής:



Θυμηθείτε, ένα tick τρέχει κάθε φορά που η οθόνη ζωγραφίζεται, οπότε αν ο Player κοιτάει προς το ποντίκι μας σε κάθε tick, θα δείχνει σα να κοιτάει πάντα προς εκεί.

Για να δούμε πώς μπορούμε να σχηματίσουμε αυτό το event:

Διπλό κλικ σε ένα κενό του Event Sheet. Θα εμφανιστεί ένα παράθυρο για να βάλουμε μια συνθήκη για το event μας:


Κάθε αντικείμενο έχει διαφορετικές συνθήκες και actions, ανάλογα του τί μπορεί να κάνει.
Υπάρχει ακόμα το System Object που μας δίνει πρόσβαση σε βασικές λειτουργίες της Construct 2.
Κάνουμε διπλό κλικ στο System.
Το παράθυρο που ανοίγει μας δείχνει όλες τις συνθήκες του System object:



Διπλό κλικ στο Every tick για να μπει στο Event Sheet.
Το event μας είναι έτοιμο:

Ωραίο αλλά χωρίς actions δεν κάνει και τίποτα. Πάμε να τις προσθέσουμε.
Κάνουμε κλικ στο Add action δίπλα στο event μας (προσοχή, πατάμε Add action και όχι Add event από κάτω).
Εμφανίζεται το παράθυρο Add action:

Η λίστα των αντικειμένων είναι η ίδια με προηγουμένως που προσθέσαμε το event. Όμως τώρα αφορά σε actions. Προσπαθήστε να μην μπερδευτείτε μεταξύ events και actions. Όσο προχωράτε τόσο πιο ξεκάθαρο θα γίνεται.

Διπλό κλικ στο Player object γιατί αυτό είναι που θέλουμε να κοιτάει πάντα προς το mouse.
Το επόμενο παράθυρο εμφανίζει τη λίστα των actions για το Player object:


Kάνουμε διπλό κλικ στο Set angle towards position. Αυτό που κάνει είναι να υπολογίζει αυτόματα τη γωνία από ένα object σε συντεταγμένες X,Y, κατόπιν αλλάζει τη γωνία που κοιτάει το object προς αυτές.
Στο επόμενο παράθυρο η Construct 2 μας ζητάει τις συντεταγμένες:


Προσέξτε τον τίτλο του παραθύρου: "Parameters". Τα Χ και Υ είναι οι παράμετροι του action "Set angle towards position". Οι συνθήκες μας μπορούν να έχουν κι αυτές παραμέτρους αλλά το "every tick" δεν χρειάζεται.
Θέλουμε να δώσουμε τις συντεταγμένες του κέρσορά μας. Γι'αυτό θα χρησιμοποιήσουμε το mouse object.

Δώστε Mouse.X για την παράμετρο Χ και Mouse.Y για την παράμετρο Υ. Τα Mouse.X και Mouse.Y ονομάζονται expressions. Για την ώρα αυτό που πρέπει να γνωρίζουμε για τις expressions είναι ότι μας δίνουν πρόσβαση σε όλα τα αντικείμενα. Θα τις ξανασυναντήσουμε πολύ σύντομα.

Αν βγει error "Mouse is not an object name", ξεχάσατε να βάλετε το mouse object. Καλά να πάθετε και να προσέχετε περισσότερο άλλη φορά :-p
Scroll up για να θυμηθείτε πώς μπαίνει.



Θα μου πείτε "ναι αλλά πώς να θυμάμαι όλες τις expressions που μπορώ να βάλω; Έχω alzheimer!"
Ευτυχώς η Construct 2 έχει προβλέψει και για σας.

Βλέπετε το ξεθωριασμένο παράθυρο που "επιπλέει"; Είναι το object panel. Εξ ορισμού είνα ημιδιαφανές για να μη μας ενοχλεί όταν εισάγουμε events και actions:


Αν πάμε τον κέρσορα πάνω του και κάνουμε κλικ θα γίνει πλήρως ορατό:

Αυτό το παραθυράκι είναι σαν ένα λεξικό που περιλαμβάνει όοοοολες τις expressions που μπορούμε να χρησιμοποιήσουμε μαζί με περιγραφές κι έτσι μας βοηθάει να τις θυμόμαστε.
Αν κάνουμε διπλό κλικ σε κάποιο object, θα δούμε μια λίστα με όλες τις δικές του expressions. Δοκιμάστε το, κάντε διπλό κλικ στον Player:


Αν κάνουμε διπλό κλικ σε μια expression, η Construct 2 την εισάγει αυτόματα! Όλε!


Επιστρέφοντας στο game μας, το παράθυρο Parameters έχει μείνει ανοιχτό. Κάνουμε κλικ στο Done και το event μας είναι έτοιμο!

Αν το event σας δε μοιάζει με της εικόνας, κλείστε το Youporn και ξαναπροσπαθήστε.

Τρέχουμε με συγκίνηση το game και βλέπουμε ότι ελέγχουμε τον Player όπως και πριν με τα βελάκια. Τώρα όμως κοιτάει προς το mouse. Έπος!

Πρόσθετη Λειτουργικότητα

Θυμηθείτε τα βήματα για να προσθέσουμε ένα event ή μια action:

1. Διπλό κλικ για εισαγωγή event ή κλικ στο add action για εισαγωγή action
2. Διπλό κλικ στο object που περιέχει το event ή την action
3. Διπλό κλικ στη συνθήκη (condition) / action που θέλουμε
4. Εισαγωγή παραμέτρων (αν χρειάζεται)

Για να μη μας βγει το tutorial κανά εκατομμύριο λέξεις, από δω και στο εξης τα events θα περιγράφονται ως  αντικείμενο, ακολουθούμενο από conditions / actions, ακολουθούμενες από παραμέτρους.

Το παραπάνω event δηλαδή, μπορεί να γραφτεί κι έτσι:

Add condition System --> Every tick
Add action Player --> Set angle towards position --> X: Mouse.X, Y: Mouse.Y


Κάντε τον Player να πυροβολεί

Όταν κάνουμε κλικ με το ποντίκι, θέλουμε το sprite μας να πυροβολεί. Θα χρησιμοποιήσουμε την action "Spawn an object" του Player μας. Τί κάνει αυτή; Δημιουργεί ένα νέο instance ενός object στην ίδια θέση και γωνία. Σε συνδυασμό με το bullet movement που προσθέσαμε προηγουμένως, οι σφαίρες μας θα πετάνε στην οθόνη!

Προσθέτουμε το παρακάτω event:
 Συνθήκη: Mouse --> On click --> Left clicked (default)
Action:    Player --> Spawn another object --> Για το object επιλέγουμε bullet.
Στις παραμέτρους, για layer βάζουμε 1 (θυμηθείτε, το "Main" είναι το layer 1) και αφήνουμε το image point 0.

To event θα πρέπει να μοιάζει με την εικόνα:




Πατάμε F5 ή play για να τρέξουμε την παιχνιδάρα μας. Χμμμ οι σφαίρες είναι σα να βγαίνουν από το σώμα του sprite μας και όχι από τ' όπλο του. Λεπτομέρεια αλλά πολλές τέτοιες λεπτομέρειες μαζί κάνουν τη διαφορά ανάμεσα σ'ένα προσεγμένο game και μια προχειροδουλειά. Κι εμείς τσαπατσούληδες δεν είμαστε, άσχετα τί λένε οι μανάδες μας.
Για να το φτιάξουμε, θα βάλουμε ένα Image point, το οποίο δεν είναι τίποτε άλλο από το σημείο στο οποίο δημιουργούνται νέα αντικείμενα.
Κάνουμε δεξί κλικ στον Player από την Object Bar (tab Objects κάτω δεξιά) και επιλέγουμε Edit animations:
Ανοίγει ο Image Editor για τον Player. Κάνουμε κλικ στο Set origin and image points:




και ανοίγει το Image points dialog:


Προσέξτε ότι το Origin εμφανίζεται στην εικόνα μας στο μέσο της, στο κεφάλι του sprite μας. Αυτό σημαίνει ότι αν περιστρέψουμε το sprite μας, θα γυρίζει γύρω απ'αυτό το σημείο. Το origin δηλαδή είναι ο άξονας περιστροφής της εικόνας μας.
Εμείς θέλουμε να προσθέσουμε ένα image point που θ'αντιπροσωπεύει την κάννη του όπλου μας, οπότε κάνουμε κλικ στο μεγάλο συν και βλέπουμε ότι στην εικόνα μας προστέθηκε το image point:



Κάνουμε κλικ στην άκρη του όπλου μας:



και το image point πάει στη θέση που θέλουμε.
Κλείνουμε τον Image Editor και πάμε στο event που προσθέσαμε προηγουμένως.
Κάνουμε διπλό κλικ στο "Spawn Bullet on layer 1 (image point 0)" και αλλάζουμε την παράμετρο Image point από 0 σε 1 (το origin είναι πάντα το πρώτο image point - θυμηθείτε, η Construct μετράει από το 0).

Έτσι θα πρέπει να είναι το αλλαγμένο event, προσέξτε το image point 1:


Πατάμε play ή F5. Οι σφαίρες εκτοξεύονται από το όπλο μας, f*** yeah! Αλλά δεν κάνουν τίποτα ακομα. Πρέπει να προσθέσουμε το εξής event ώστε να σκοτώνουν τα τερατάκια μας:

Συνθήκη: Bullet --> On collision with another object --> Monster
Action: Monster --> Destroy
Action: Bullet --> Spawn another object --> Explosion, layer 1
Action: Bullet --> Destroy

Τί λέει αυτό το event; Όταν η σφαίρα χτυπήσει ένα Monster αυτό καταστρέφεται. Στο σημείο σύγκρουσης δημιουργείται η έκρηξή μας, μετά καταστρέφεται και η σφαίρα γιατί δεν την χρειαζόμαστε άλλο.

Βάζουμε το event με τον γνωστό τρόπο. Θα πρέπει να δείχνει έτσι:




Τρέχουμε το game. Κάτι πάει να γίνει αλλά οι εκρήξεις έχουν ενα μαύρο τετράγωνο γύρω τους που δείχνει σαν photoshopιά επιπέδου νηπιαγωγείου. Πάμε να τις φτιάξουμε.
Κάνουμε κλικ στο Explosion object (είτε από το layout, είτε από την object bar, είτε από την project bar).
Στην Property bar (αριστερά της οθόνης) εμφανίζονται οι ιδιότητες της έκρηξής μας. Εμάς μας ενδιαφέρει το blend mode. Το αλλάζουμε σε additive:

Ξανατρέχουμε το παιχνίδι μας. Πολύ καλύτερο. Τί κάνει λοιπόν το additive; Χοντρικά κάθε εικόνα επικολλάται (paste) πάνω στην οθόνη.
Με το default blend mode (normal), οι εικόνες μας ξεχωρίζουν σαν κακό σπυρί. Με το additive, κάθε pixel προστίθεται στο background pixel που βρίσκεται πίσω του.
 Επειδή το μαύρο χρώμα δεν προσθέτει τίποτα (zero pixel value), εξαφανίζεται ως δια μαγείας κα μένει μόνο το background pixel.
Παράδειγμα: Αν πούμε ότι πράσινο = 5, τότε πράσινο + μαύρο = 5 + 0 = μένει μόνο πράσινο! Καλό ε;
Τα φωτεινότερα χρώματα προσθέτουν περισσότερο, οπότε εμφανίζονται πιο έντονα. Το additive είναι ιδανικό για εφφέ φωτισμού κι εκρήξεων.

Τα τέρατά μας είναι λίγο χαζά, ας τα κάνουμε πιο "έξυπνα"

Όπως είναι τώρα το παιχνίδι μας, τα τέρατα δεν κάνουν τίποτα, απλά φεύγουν δεξιά. Θα τα κάνουμε λίγο πιο ενδιαφέροντα. Πρώτ'απ'όλα θα ξεκινούν σε τυχαία γωνία:

Συνθήκη: System --> On start of layout
Action: Monster --> Set angle --> Random(360)



Τα τερατάκια μας παραμένουν λίγο βλαμμένα και φεύγουν εκτός layout. Ας τα μαντρώσουμε.
Θα τα  κάνουμε να κοιτούν προς το μέρος του Player όταν θα φεύγουν εκτός των ορίων του layout.
Έτσι θα παραμένουν μέσα στο layout. Επιπρόσθετα όταν το sprite μας μένει ακίνητο θα έρχονται προς το μέρος του. Τρέμε Player, θα σε κυνηγάνε τα βλαμμένα πλην συμπαθητικά τερατάκια μας!
Προσθέτουμε με τον γνωστό τρόπο το παρακάτω event:

Συνθήκη: Monster --> Is outside layout
Action: Monster --> Set angle towards position --> για Χ : Player.X, για Y : Player.Y

Τρέχουμε το παιχνίδι. Μπρρρρ αρχίζει και μοιάζει στο Walking Dead (λέμε τώρα...).
Δεν φτιάξαμε και Artificial Intelligence αλλά μας κάνει.

Instance Variables

Αυτές οι μεταβλητές (variables) μας επιτρέπουν να έχουμε ξεχωριστή "ενέργεια" για κάθε τερατάκι. Οι μεταβλητές είναι απλά τιμές που μπορούν ν'αλλάξουν. Αποθηκεύονται ξεχωριστά για κάθε instance, εξού και instance variables.

Θα προσθέσουμε μια μεταβλητή με όνομα "health" στο τερατάκι μας. Επιλέγουμε το αντικείμενο Monster και στην Property Bar πατάμε Instance Variables δίπλα στο Add/Edit:


Όπως δείχνει και η εικόνα, στο παράθυρο που εμφανίζεται πατάμε το μεγάλο συν για να προσθέσουμε μια νέα μεταβλητή:

Δίνουμε τις παραμέτρους της εικόνας και πατάμε ΟΚ.
Η μεταβλητή μας εμφανίζεται αμέσως στα properties. Έτσι μπορούμε εύκολα ν'αλλάξουμε την αρχική της τιμή. Για να βάλουμε κι άλλες μεταβλητές όμως, πρέπει να ξαναπατήσουμε το Instance variables:



 
Τώρα κάθε τέρας θα ξεκινάει με 5 "υγεία". Όταν το πετυχαίνουμε θα του αφαιρούμε 1 από την υγεία του και όταν φτάσει 0 θα καταστρέφεται.

Αλλάζοντας τα events

Πάμε στο Event Sheet 1. Όπως είναι τώρα το παιχνίδι μας, τα τερατάκια καταστρέφονται αμέσως. Ψάχνουμε το event Bullet --> On collision with Monster. Βλέπουμε ότι το action που θέσαμε είναι "destroy monster". Θα το αντικαταστήσουμε με "subtract 1 from health". Κάνουμε δεξί κλικ στο action κι επιλέγουμε Replace action:



 Εμφανίζεται το ίδιο παράθυρο με την εισαγωγή νέας action, μόνο που αυτή τη φορά θα γίνει αντικατάσταση.
Επιλέγουμε Monster --> Subtract from (είναι στην κατηγορία instance variables) --> instance variable "health" και βάζουμε 1 στο value. Πατάμε Done και είμαστε έτοιμοι:


Τώρα, όταν πετυχαίνουμε με τις σφαίρες μας ένα τερατάκι, θα χάνει 1 από την υγεία του. Όμως δεν θα γίνεται τίποτα όταν η υγεία του θα είναι 0. Γι'αυτό θα προσθέσουμε ακόμα ένα event:

Συνθήκη: Monster --> Compare Instance Variable --> Health, Less or equal, 0
Action: Monster --> Spawn another object --> Explosion, Layer 1
Action: Monster --> Destroy






Γιατί όμως less or equal αντί για σκέτο equal;
Ας υποθέσουμε ότι σε κάποιο σημείο η παιχτούρα μας αποκτάει δυνατότερο όπλο που κάνει 2 πόντους ζημιά.
Η υγεία του τέρατος θα είναι: 5, 3, 1, -1, -3 κτλ. Σ'αυτή την περίπτωση η υγεία δεν είναι ποτέ ίση με 0 και άρα το event δεν θα έτρεχε!
Γενικά είναι καλή πρακτική να χρησιμοποιούμε κάτι άλλο από σκέτο equals.

Τρέχουμε το game. Τα τερατάκια μας θέλουν 5 σφαίρες μέχρι να πεθάνουν!


Με το score τί γίνεται;


Δεν υπάρχει game χωρίς κάποιας μορφής score. Μια από τις μεγαλύτερες εφευρέσεις που πήγε το gaming έτη φωτός μπροστά ήταν το high score table (το Space Invaders ήταν το πρώτο game που είχε). Τα τελευταία χρόνια τείνει να εξαλειφθεί σαν concept αλλά εμείς είμαστε old school και το γουστάρουμε. Εξάλλου είναι η πιο απλή μορφή που έχουμε για να τσεκάρουμε την πρόοδό μας σ'ένα game.

Για να έχουμε score στο παιχνίδι μας θα χρειαστούμε ακόμα μια μεταβλητή. Η πρώτη σκέψη είναι ότι χρειαζόμαστε μια instance variable. Nope. Θυμηθείτε ότι αυτές οι μεταβλητές αποθηκεύονται "μέσα" σ'ένα instance. Αν δεν έχουμε κανένα instance, δεν έχουμε και μεταβλητή!
Αν καταστρέψουμε τον Player, δεν ξέρουμε ποιο ήταν το score του γιατί καταστράφηκε μαζί μ'αυτόν!

Για να λύσουμε αυτό το πρόβλημα, θα χρησιμοποιήσουμε μια παγκόσμια μεταβλητή (βραβείο χειρότερης μετάφρασης) ή αλλιώς Global variable.
Και αυτή χρησιμοποιείται για να αποθηκεύει μια τιμή (είτε κείμενο είτε αριθμό). Η διαφορά με τις instance variables είναι ότι η global είναι διαθέσιμη σε όλο το project μας και προσβάσιμη απ'όλα τα layouts που έχουμε (προς το παρόν έχουμε ένα layout. Στο μέλλον είναι σίγουρο ότι τα παιχνίδια μας, σαν μεγαλύτερα και περιπλοκότερα, θα έχουν περισσότερα).

Κάνουμε δεξί κλικ σ'ενα κενό σημείο του Event Sheet 1 κι επιλέγουμε Add global variable:

Στο Name, βάζουμε Score. Τα υπόλοιπα τ'αφήνουμε ως έχουν:




Πατάμε ΟΚ. Η μεταβλητή μας εμφανίζεται πάνω πάνω στο Event Sheet 1. Αν είχαμε πολλά Event Sheets, θα ήταν διαθέσιμη και σ'αυτά.


 Σημείωση: Υπάρχουν και τοπικές μεταβλητές (local variables) αλλά προς το παρόν τις αφήνουμε στην ησυχία τους.

Όταν ο σφίχτης μας σκοτώνει ένα τερατάκι, θα παίρνει 1 πόντο. Βρίσκουμε το event "Monster: Health <= 0"  και πατάμε το Add action ακριβώς δίπλα του. Επιλέγουμε System --> Add to (κατηγορία global and local variables) --> Score, τιμή 1. Το event μας γίνεται κάπως έτσι:



Τώρα κάθε φορά που σκοτώνουμε ένα τέρας, θα κερδίζουμε 1 πόντο. Αν τρέξουμε το game, θα δούμε ότι score δεν υπάρχει πουθενά στην οθόνη! Οκ, το κρατάμε σε μια μεταβλητή. Πρέπει όμως να το κάνουμε να φαίνεται και στην οθόνη. Γι'αυτό θα φτιάξουμε ένα HUD.


Heads Up Display

Heads Up Display είναι οι πληροφορίες που ένα game δίνει στον παίχτη. Ζωές, score, σε ποια πίστα είμαστε κτλ. είναι μέρος του HUD.
Θα φτιάξουμε ένα πολύ απλό HUD με τη χρήση του text αντικειμένου.

To HUD θα πρέπει να είναι σταθερό στην οθόνη και να μη μετακινείται (scroll) μαζί με τον Player. Εξ ορισμού τα layers σκρολλάρουν (sic). Για να τα κρατήσουμε σταθερά, θα χρησιμοποιήσουμε την ιδιότητα Parallax. To Parallax επιτρέπει διαφορετικά επίπεδα scrolling και δίνει μια ψευδοτρισδιάστατη αίσθηση.

Κι ένα video για να το καταλάβουμε καλύτερα:



Το layer που βρίσκεται πιο κοντά στην οθόνη κινείται γρηγορότερα. Όσο προχωράμε στο βάθος τα layers κινούνται πιο αργά με αποτελέσμα την αίσθηση "βάθους" Ωραίο ε;


Στην περίπτωσή μας, επειδή το HUD θέλουμε να είναι σταθερό, θα θέσουμε το Parallax του σε 0,0.
Πίσω στην Construct 2, πάμε στη μπάρα των layers και προσθέτουμε ακόμα ένα με όνομα HUD.
Σιγουρευόμαστε ότι είναι το πιο πάνω layer και ότι είναι επιλεγμένο (θυμηθείτε, επιλεγμένο = ενεργό).
Στην Properties bar, θέτουμε το Parallax του HUD σε 0,0.



Διπλό κλικ σε κενό χώρο του layout για να βάλουμε ένα text object. To βάζουμε στην πάνω αριστερή γωνία του layout. Επειδή εξ ορισμού το χρώμα είναι μαύρο και θα μας βγουν τα μάτια για να το δούμε, στην Properties bar αλλάζουμε το font σε bold, italic, κίτρινο και κάποιο μεγάλο μέγεθος.
Το μεγαλώνουμε για να χωράει αρκετό κείμενο και το αποτέλεσμα είναι κάπως έτσι:



Πίσω στο Event Sheet 1, θα κάνουμε το text μας να κρατάει το score.
Στο event Every tick που προσθέσαμε στην αρχή, θα βάλουμε την action Text --> Set Text.
Χρησιμοποιώντας το "&" μπορούμε να μετατρέψουμε έναν αριθμό σε κείμενο και να το προσθέσουμε σε κάποιο άλλο string (μεταβλητή κειμένου), οπότε στο πεδίο Text βάζουμε
"Score: " & Score

Το πρώτο μέρος ("Score: ") δηλώνει ότι το κείμενό μας θα ξεκινά πάντα με τη φράση Score: (μαζί με την άνω κάτω τελεία).
Το δεύτερο μέρος (Score) είναι η global μεταβλητή μας που κρατάει το score.
Το "&" ενώνει τα 2 μέρη σ'ένα κομμάτι κειμένου.

Τρέχουμε το game μας. Το score μένει στη θέση του και κάθε φορά που σκοτώνουμε ένα τερατάκι, αυξάνεται κατά 1!


Τελευταίες πινελιές

Σχεδόν τελειώσαμε! Κοντεύει η στιγμή που θα πάμε για μπύρες, μας αξίζει!
Θα προσθέσουμε κάποια πραγματάκια για να κάνουμε το game μας λίγο πιο ενδιαφέρον.

Πρώτ'απ'όλα θα κάνουμε τα τερατάκια να δημιουργούνται επ'άπειρον, αλλιώς όταν τα σκοτώσουμε όλα δεν θα έχουμε τί να κάνουμε. Κάθε 3 δευτερόλεπτα θα δημιουργείται ένα νέο τερατάκι.
Προσθέτουμε ένα καινούριο event:

Συνθήκη: System --> Every x seconds --> 3
Action: System --> Create object --> Monster, layer 1, 1400(για τον άξονα X), random(1024)(για τον άξονα Y).

Το 1400 είναι λίγο έξω από το δεξί όριο του layout ενώ το random(1024) είναι μια τυχαία συντεταγμένη για το Υ σε όλο το ύψος του layout.

Τέλος, τα τερατάκια μας θα σκοτώνουν τον Player:

Συνθήκη: Monster --> On collision with another object --> Player
Action: Player --> Destroy



Επίλογος


Συγχαρητήρια, μόλις δημιουργήσατε το πρώτο σας HTML 5 game με την Construct 2!
Μπορείτε να το δείξετε στη μάνα σας που γκρινιάζει όλη μέρα ότι παίζετε παιχνίδια ("-δεν παίζω ρε μάνα, δημιουργώ! -καλά, βάλε ζακέτα), στους φίλους σας για να ζηλέψουν, στο ταίρι σας για να σας έχει για θεό :-p

Για να κάνετε φιγούρα, πατάτε export από το μενού File. H Construct 2 θα σώσει το game σ'εναν φάκελο και είτε τον ανεβάζετε στον server σας ή αν δεν έχετε τον ανεβάζετε σε κάποια υπηρεσία τύπου Dropbox. Μετά δίνετε το link και οι φίλοι σας το κατεβάζουν.

Το σημαντικότερο είναι ότι μπαίνετε στον χώρο του indie development. Οι δυνατότητες είναι απεριόριστες, οι ευκαιρίες το ίδιο. Ο χώρος του gaming έχει αλλάξει πολύ. Τα indie games είναι πλέον σεβαστά. Και με τόσα δωρεάν resources (γραφικά, ήχοι κτλ) στο internet είναι η καλύτερη εποχή για δημιουργία.

Περιμένω τα σχόλια σας, τις παρατηρήσεις σας και ό,τι άλλο έχετε ευχαρίστηση.

Καλές δημιουργίες!


Σημείωση: το tutorial αυτό είναι βασισμένο στο ξενόγλωσσο tutorial που βρίσκεται εδώ:
Beginner's Guide to Construct 2 originally published by Ashley