RQE: Tutorial (GM8)

Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Savatar

Blackguard
Joined
Dec 1, 2012
Messages
1,416
Στο παρόν τόπικ θα προσπαθήσω να εξηγήσω το πως φτιάχνουμε το παιχνιδάκι μας στο Game Maker 8. Δεν έχω ξαναεπιχειρήσει tutorial, οπότε ας ελπίσουμε πως θα καταφέρω να εξηγήσω απλά και κατανοητά κάποια βασικά πράματα, έτσι ώστε όποιος ενδιαφέρεται να ασχοληθεί να ξέρει τα πρώτα βήματα, ποιος ξέρει, μπορεί ανάμεσα μας να κρύβετε ταλεντάρα και να δούμε παιχνιδάρες! Anyway, το καφεδάκι αχνίζει στο γραφείο, οι Empirium χαλαρώνουν στο backround οπότε ας αρχίσω:

Εισαγωγή στο Game Maker 8
<span class="bbcode_spoiler">
Σημειώνω πως έχω την pro version, παρόλο αυτά το 90% των πραμάτων που θα πούμε γίνονται και στην free version χωρίς κανένα πρόβλημα. Με ένα γκουγκλάρισμα βρίσκεις εύκολα το site και το κατεβάζει όποιος θέλει. Κάποιος θα αναρωτηθεί γιατί χρησιμοποιούμε το Game Maker 8 και όχι το Studio , το οποίο είναι βελτιωμένο. Σωστό μεν, αλλά αυτό έμαθα δε, έτσι και αλλιώς και το GM Studio μοιάζει πάρα πολύ, οπότε αν μάθει κάποιος τις βασικές λειτουργίες του 8 εύκολα μετά προχωράει στην Studio version.

Αφού ανοίξουμε λοιπόν το πρόγραμμα μας βλέπουμε το εξής:

(Σημείωση, με την μία πάτε File -> Advanced Mode (ON).)

Αριστερά μας βλέπουμε την στήλη που ουσιαστικά είναι η "βιβλιοθήκη" του παιχνιδιού μας. Εδώ θα εισάγουμε κάθε τι που θα χρησιμοποιήσουμε. Γραφικά, μουσικές, ήχους, timelines, scripts κτλ. κτλ. Το δεξί μέρος είναι το περιβάλλον εργασίας μας, το οποία αλλάζει αναλόγως με το τι έχουμε επιλέξει στα αριστερά.

Πολύ περιληπτικά έχουμε :
Sprites = Τα γραφικά μας, εισαγωγή εικόνων (.jpeg, .png, .bpm κτλ.) Εκεί μπορούμε να χτίσουμε και animated sprites , πολλές εικόνες δηλαδή στην σειρά
Sounds = Οι ήχοι που θα χρησιμοποιούμε, είτε μουσικές, είτε εφέ.
Backrounds = ξεχωριστή κατηγορία γραφικών που αφορά το backround μας, είτε μια μεγάλη εικόνα για υπόβαθρο, είτε tile sets που τα χρησημοποιούμε σαν παζλ για να μοντάρουμε μια σκηνή (π.χ. μια πίστα, ένα δωμάτιο, μια πόλη κτλ.)
Paths = Εδώ μπορούμε να χτίσουμε προκαθορησμένα paths για ένα αντικείμενο, όταν ένα αντικείμενο "καλέσει" στον κώδικα του ένα path τότε εκτελεί αυτήν την προκαθορισμένη κίνηση.
Scripts = Εδώ μπορούμε να εισάγουμε ολόκληρα κομμάτια κώδικα, ένα αντικείμενο μπορεί να "καλέσει" ένα script όταν το προγραμματίσουμε εμείς.
Fonts = Οι γραμματοσειρές που χρησιμοποιεί το παιχνίδι μας, όταν δηλαδή του ζητάμε να "γράψει" αυτό κάτι στην οθόνη (δεν αφορά κείμενα που τα έχουμε εισάγει σαν εικόνα, τότε πάνε στα γραφικά (sprites)
Timelines = Εξαιρετικά χρήσιμες, πρόκειται για μια αλληλουχία εντολών σε συγκεκριμένο χρόνο. Ένα αντικείμενο μπορεί να "καλέσει μια Timeline" όταν το προγραμματίσουμε εμείς.
Objects = Εδώ θα λιώσουμε! Τα αντικείμενα μας!
Rooms = Το περιβάλλον που θα βλέπει ο χρήστης/παίχτης. Μέσα σε αυτά διαδραματίζεται η "δράση" μας.

Η φιλοσοφία του GM8 (όπως και αρκετών μηχανών) μοιάζει με ένα παζλ, που συλλέγουμε τα κομμάτια μας και μετά τα συναρμολογούμε. Πρέπει λοιπόν να σκεφτούμε τι χρειαζόμαστε από resources, και τι ρόλο θα παίξει το καθένα από αυτά. Γενικά προτείνω πάντα χαρτί και μολύβι πρώτα από όλα, να ξέρει κάποιος τι πάει να κάνει και γιατί. Ας αφήσω τις γενικολογίες όμως και να περάσουμε σε κάτι συγκεκριμένο για να αρχίσουμε να βγάζουμε άκρη :
</span>

ΠΑΡΑΔΕΙΓΜΑ 1 : ΑΠΛΗ ΚΙΝΗΣΗ ΠΑΙΚΤΗ
<span class="bbcode_spoiler">
Τι θέλουμε να κάνουμε : Απλή κίνηση δεξιά - αριστερά, χωρίς βαρύτητα για αρχή.
Τι θα χρειαστούμε : Τα γραφικά μας (sprites), ένα χώρο που θα κινούμαστε μέσα (room), ένα αντικείμενο του παίχτη μας (object) και φυσικά να το προγραμματίσουμε.

Γραφικά : Ας πάρουμε αυτά που έχουμε ήδη στο RQE.

http://postimage.org/" class="bbcode_url"><img src="http://s2.postimg.org/ggy3pwaol/Player_1.png" alt="Player_1.png" class="bbcode_img" /> http://postimage.org/" class="bbcode_url"><img src="http://s30.postimg.org/4s34128lp/Player_2.png" alt="Player_2.png" class="bbcode_img" /> http://postimage.org/" class="bbcode_url"><img src="http://s13.postimg.org/gqlv9s8f7/Player_3.png" alt="Player_3.png" class="bbcode_img" /> http://postimage.org/" class="bbcode_url"><img src="http://s13.postimg.org/ebtzpcs6b/Player_4.png" alt="Player_4.png" class="bbcode_img" />

Αποθηκεύστε τις εικόνες σε αρχεία (.png προτείνω, μας κάνουν όλα φυσικά). Τώρα στην κατηγορία sprites με δεξί κλίκ - > create sprite φτιάχουμε 1 κενό sprite. Από την επιλογή δεξιά Load Sprite φορτώνουμε την 1η εικόνα μας. Ονομάζουμε στο sprite μας σαν spr_Player_Still (το spr_ μας βοηθάει όταν το καλούμε σε κώδικα να ξέρουμε εμείς ότι μιλάμε για sprite). Ξανακάνουμε ένα νέο sprite και αυτή την φορά κάνουμε Load την 2η εικόνα.Αν χρεαιστεί στο Load τικάρω το Remove Backround για να μείνει κενό το υπόβαθρο μας. Ας το ονομάσουμε spr_Player_Walk. Όμως εδώ θέλουμε animation! Επιλέγουμε Edit Sprite και από το νέο παράθυρο πάμε File - > Add From File... και εισάγουμε την 3η εικόνα. Πλέον το spr_Player_Walk αποτελείτε από 2 εικόνες. Θέλουμε όμως να δώσουμε ποιο καλή κίνηση, οπότε με ξανά Add from file ξαναεισάγω την 4η εικόνα. Πλέον έχουμε ένα sprite με 3 εικόνες με σειρά (2η-3η-4η). Πατήστε preview αριστερά για να δείτε το animation, ρίξτε ταχύτητα (speed) κατά πολύ (στο 5-6 περίπου) για ποιο φυσικό αποτέλεσμα. Τα αποθηκεύουμε και πλέον έχουμε τα 2 sprite μας που θέλουμε : spr_Player_Still για ακίνητος, spr_Player_Walk για όταν περπατάμε! Α, και κάτι σημαντικό, το κάθε sprite έχει μια ιδιότητα Origin, σχεδόν ΠΑΝΤΑ διαλέγουμε "Center" (βρίσκεται κάτω αριστερά όταν ανοίγουμε ένα sprite), αφορά τον άξονα του, από που δηλαδή ξεκινάει να "μετράει" το γραφικό, δύσκολα εξηγείται, θα το καταλάβετε ποιο κάτω.

Ας φτιάξουμε το δωμάτιο που θα κινούμαστε τώρα. Στην κατηγορία Rooms -> Create Room. Στα settings τώρα του room μας (αριστερή μεριά σαν καρτέλες) επιλέγουμε το μέγεθος (ας βάλουμε 1024 χ 768), την ταχύτητα (πάντα 60, καθώς αφορά τα fps), και φυσικά το όνομα του δωματίου, ας το πούμε Room_tutorial_1. Στην κατηγορία backrounds επιλέγουμε αν θέλουμε κάποιο χρώμα για υπόβαθρο ή μια εικόνα, ας το αφήσουμε γκρι για την ώρα.

(Στα Global Game Settings έχει μια σειρά από σημαντικές ρυθμίσεις. Περιληπτικά προτείνω στην κατηγορία Resolution να ενεργοποιήσετε το Vsync. Τις υπόλοιπες ρυθμίσεις προσαρμόστες τες στα γούστα σας (αναλύσεις, fullscreen κτλ.))

Πάμε τώρα να φτιάξουμε το αντικείμενο μας, το οποίο ουσιαστικά θα είναι ο παίχτης! Κάνουμε Create Object (με δεξί κλικ στο objects). Το ονομάζουμε obj_Player. Στο Sprite επιλέγουμε το spr_Player_Still. Στην δεξιά στήλη του object μας με τίτλο "Events" κάνουμε δεξί κλίκ και διαλέγουμε "Step". Το Step είναι η κατηγορία που ότι κώδικα βάλουμε εκεί θα τρέχει στο παράλληλο, πάντα, αρκεί να υπάρχει το αντικείμενο στο Room. Στην δεξιά στήλη τώρα, αφού έχουμε επιλέξει το step, πάμε και σέρνουμε το εικονίδιο Control - > Execute Code (το βρίσκουμε στις καρτέλες δεξιά). Πλέον μας άνοιξε το παράθυρο να εισάγουμε τον κώδικα μας. Εμείς θέλουμε με τα βελάκια (δεξιά - αριστερά) να κουνιόμαστε αντίστοιχα. Οπότε γράφουμε :

if keyboard_check(vk_left) {hspeed = -4}
if keyboard_check(vk_right) {hspeed = 4}
if keyboard_check(vk_nokey) {hspeed = 0}

Μετάφραση : όταν πατάμε αριστερό βέλο το horizontal speed μας γίνετε -4 (πάει αριστερά, για αυτό αρνητικό), όταν πατάμε το δεξί γίνετε 4 (θετικό), όταν δεν πατάμε τίποτα σταματά, γίνετε 0! Αποθηκεύουμε, πάμε στο room και στην κατηγορία objects επιλέγουμε το obj_Player και το βάζουμε στο κέντρο του δωματίου (προσοχή μην βάλετε πολλές φορές το ίδιο obj, μία φορά το θέλουμε <img src="/tongue.gif" width="" height="" alt=":p" title=":p" class="bbcode_smiley" />). Ας πατήσουμε Play να δούμε τι κάναμε ως τώρα (το πράσινο βελάκι πάνω στην οριζόντια tool bar). Voila, έχουμε κίνηση, αλλά με 2 προβλήματα! Δεν έχουμε animation, ο παίχτης πάντα κοιτάει δεξιά! Ας τα σουλουπώσουμε λίγο :

Πίσω στο object μας, πάλι στην κατηγορία Step, στο ίδιο execute code κουτάκι (διπλό κλίκι και μας το ανοίγει). Προσθέτουμε τα εξής (όπου θέλουμε, αρκεί να είναι σε άλλες σειρές)

if hspeed > 0 {image_xscale = 1}
if hspeed < 0 {image_xscale = -1}

Μετάφραση : Αν η οριζόντια ταχύτητα μας (hspeed) είναι θετική το xscale του sprite είναι 1 (μένει ως έχει), αν είναι αρνητική γίνετε -1, δηλαδή αναποδογυρίζει , κοιτάει από την άλλη πλευρά. Έτσι πετύχαμε να κοιτάει ο παίκτης δεξιά όταν πάει δεξιά και αριστερά όταν πάει αριστερά.

if hspeed != 0 {sprite_index = spr_Player_Walk} else {sprite_index = spr_Player_Still}

Μετάφαση : Αν η οριζόντια ταχύτητα μας ΔΕΝ είναι 0 (για αυτό έβαλα !<img src="/smile.gif" width="" height="" alt="=)" title="=)" class="bbcode_smiley" /> άλλαξε μας το sprite στο spr_Player_Walk αλλιώς (δηλαδή αν είναι 0) άλλαξε το σε spr_Player_Still. Έτσι πετύχαμε και το animation, δηλαδή αν έχουμ οριζόντια ταχύτητα να αλλάζει στο sprite μας αντίστοιχα στο sprite κίνησης! Αν τρέξουμε όμως το παιχνίδι μας τώρα βλέπουμε άλλο ένα πρόβλημα, το animation είναι υπερβολικά γρήγορο. Εύκολα τα πράματα εδώ. Πίσω στο object μας και αυτή την φορά επιλέγω με δεξί κλικ από αριστερά την κατηγορία "Create" η οποία εκτελεί κάτι μόνο ΜΙΑ φορά, όταν φορτώνει το object μας ένα Room. Εκεί πάλι τοποθετώ ένα execute code κουτάκι από την κατηγορία Contral και γράφω :

image_speed = 0.15

Δηλαδή η ταχύτητα του animation που έχει το κάθε sprite (αν έχει) να είναι με συντελεστή 0.15 (85% ποιο χαμηλή)!
</span>

Αυτά για την ώρα, το 1ο tutorial τέλος, μάθαμε πως να κάνουμε ένα object, να του εισάγουμε γραφικά και να κουνιέται με τα βελάκια δεξιά - αριστερά. Not bad at all για αρχή! Αν υπάρχει ενδιαφέρον το Tutorial θα συνεχιστεί εννοείτε και σιγά σιγά θα περνάμε και σε ποιο πολύπλοκα πράματα! Ακολουθεί http://www.mediafire.com/download/navz5lraq366r6r/RQE+Tutorial+1.gmk" class="bbcode_url">link με το game maker file του παραδείγματος μας, όποιος θέλει το ανοίγει και το μελετάει <img src="/wink.gif" width="" height="" alt=";)" title=";)" class="bbcode_smiley" />

EDIT : Έκανα λάθος και έφτιαξα το τόπικ στην κατηγορία Ragequit.gr, νομίζω πως πάει καλύτερα στο Software/Internet σκέλος, αν είναι δυνατόν μετακινήστε το.
 
Κυριακή πρωί, καφεδάκι, Haggard στο υπόβαθρο να μας ταξιδεύουν και είμαστε έτοιμοι για την συνέχεια του Tutorial μας. Θα συνεχίσουμε από εκεί που είχαμε μείνει, και θα προσπαθήσουμε τώρα να προσθέσουμε βαρύτητα στην κίνηση του παίχτη μας!

ΠΑΡΑΔΕΙΓΜΑ 2 ( ΚΙΝΗΣΗ ΜΕ ΒΑΡΥΤΗΤΑ)
<span class="bbcode_spoiler">
Ας δούμε τι θα χρειαστούμε αρχικά, σαν να λέμε τα "υλικά της συνταγής μας".
-Τον παίχτη μας (το έχουμε ήδη το αντικείμενο από το προηγούμενο μέρος)
-Ένα δωμάτιο-πίστα που θα κινείτε μέσα σε αυτό
-Ένα νέο object, το οποίο θα το πούμε block, που θα παίζει τον ρόλο εδάφους-τοίχους-εμποδίου (θα μπλοκάρει την κίνηση του παίχτη μας δηλαδή)

Αρχικά δεν βάζουμε tiles (θα ασχοληθούμε αργότερα), οπότε το "σκηνικό" που θα κινείτε μέσα ο παίχτης μας θα είναι μίνιμαλ, για να κάνουμε την δουλειά μας.

Από το sprite menu φτιάχνουμε ένα Sprite με ονομασία spr_block . Στην συνέχεια πάμε Edit sprite -&gt; File -&gt; New και ορίζουμε μέγεθος 32 x 32 pixels. Με διπλό κλικ ανοίγουμε το κενό sprite μας και απλά του δίνουμε ένα χρώμα να το ξεχωρίζουμε (ας πούμε μαύρο). Θυμίζω πως το Origin μας το προτιμάμε Center (το κέντρο της εικόνας μας)

Στα objects τώρα προσθέτουμε ένα νέο object, με όνομα obj_block και του δίνουμε sprite αυτό που κάναμε πριν. Επίσης τικάρουμε το κουτάκι που λέει <b>Solid</b>. Πάμε τώρα στην οθόνη του Room μας και το τοποθετούμε έτσι ώστε να φτιάξουμε ένα "πάτωμα" από αυτά. (Θα βάλουμε δηλαδή πολλές φορές το ίδιο αντικείμενο στην σειρά, σαν παζλ, με shift+click αφού έχουμε διαλέξει το αντικείμενο το "ζωγραφίζουμε" στο δωμάτιο, μπορούμε και με ένα κλικ κάθε φορά αλλά έτσι είναι ποιο γρήγορα)

Πάμε τώρα να φτιάξουμε τον κώδικα, με τον οποίο θα κάνουμε τα εξής :
1) Θα ορίσουμε βαρύτητα, δηλαδή όταν ΚΑΤΩ από τον παίχτη δεν υπάρχει block να πέφτει, ενώ πάνω του να περπατάει
2) Να ορίσουμε τα collision checks , έτσι ώστε το block να παίζει και ρόλο "τείχους" , να μην μπορούμε δηλαδή να περνάμε μέσα του (είτε στον οριζόντιο άξονα, είτε στον κάθετο)

Στο αντικείμενο του παίχτη μας, στο Step event , εισάγουμε ένα νέο κομμάτι κώδικα και γράφουμε :

if place_free(x,y+1) {vspeed = 4.5} else {vspeed = 0}

Μετάφραση : Αν στο σημείο (x, y +1) (δηλαδή 1 pixel ΚΑΤΩ από το αντικείμενο του παίχτη) είναι ΕΛΕΥΘΕΡΟ (δεν υπάρχει δηλαδή κάποιο Solid αντικείμενο) η κάθετη ταχύτητα του αντικειμένου μου είναι 4.5 (θετική γιατί πάμε προς τα κάτω) ΑΛΛΙΩΣ (αν δηλαδή ΔΕΝ είναι ελεύθερο, υπάρχει Solid από κάτω μας) η κάθετη ταχύτητα μας είναι 0. Save και πάμε να δούμε τι κάναμε! Και ναι, έχουμε πάτωμα! Πειραματιστείτε με την μορφή εδάφους (κάντε σκαλάκια για παράδειγμα) και όντως ο παίχτης απέκτησε την βαρύτητα που θέλουμε. Τώρα πάμε να εμποδίσουμε και την οριζόντια ταχύτητα, να το κάνουμε και "τείχος" δηλαδή.

Ανοίγουμε τον κώδικα που είχαμε βάλει τις εντολές για την κίνηση μας Δεξιά - Αριστερά. Αν θυμάστε ήταν :

if keyboard_check(vk_left) {hspeed = -4}
if keyboard_check(vk_right) {hspeed = 4}

Τώρα θα κάνουμε την εξής αλλαγή / προσθήκη :

if keyboard_check(vk_right)
{if place_free(x+1,y){hspeed = 4}}
if keyboard_check(vk_left)
{if place_free(x+1,y){hspeed = -4}}


Δηλαδή, μέσα στην If εντολή που τσεκάρει τι πλήκτρο πατάμε, βάλαμε άλλο ένα If ( με το σύμβολο {...} διαχωρίζουμε τα If,δεν έχει σημασία αν είναι όλα σε μία γραμμή ή 2, αυτό το κάνουμε για να είναι ποιο εύκολο στο μάτι μας) που τσεκάρει αν είμαστε ελεύθεροι από Solid στα Δεξιά μας (x+1,y) ή αριστερά μας αντίστοιχα (x-1,y)

Δεν τελειώσαμε όμως, διότι αν το αφήσουμε έτσι δημιουργείτε πρόβλημα, δεν είναι εύκολο να το εξηγήσω, αλλά αν το αφήσουμε απλά έτσι ακόμα και όταν ακουμπάμε το έδαφος το πρόγραμμα μας καταλαβαίνει ότι υπάρχει εμπόδιο γύρω μας, πρέπει με μια νέα εντολή να το προγραμματίσουμε να πηγαίνει στο ΣΗΜΕΙΟ ΕΠΑΦΗΣ , έτσι ώστε να υπάρχει έστω ένας "μικρός αέρας" ανάμεσα μας, και να μην μας μπλοκάρουν τα If. Πάμε στο αντικείμενο του παίχτη μας πάλι, και αυτή την φορά στην αριστερή στήλη φτιάχνουμε ένα Event - &gt; Collision -&gt; επιλέγουμε το obj_block. Αυτό σημαίνει πως ότι κώδικα εισάγουμε εδώ θα εκτελείτε ΜΟΝΟ όταν το αντικείμενο μας (obj_player) έρθει σε επαφή με τον αντικείμενο που ορίσαμε (obj_block). Φτιάχνουμε στην δεξιά στήλη τώρα ένα σετάκι εντολών και μέσα γράφουμε :

move_contact_solid(direction,0)
if place_meeting(x,y+1,obj_block) then vspeed= 0
if place_meeting(x,y-1,obj_block) then vspeed= 0
if place_meeting(x+1,y,obj_block) then hspeed= 0
if place_meeting(x-1,y,obj_block) then hspeed= 0

Απόπειρα μετάφρασης : Η πρώτη γραμμή δίνει εντολή να πηγαίνει το αντικείμενο μας (obj_player) στο σημείο επαφής, έχοντας direction (κατεύθυνση) αυτή που είχε πριν (για αυτό το αφήνω direction, και δεν του δίνω έναν αριθμό, γενικά το "direction" είναι μια μεταβλητή (variable) που έχει αυτόματα το κάθε αντικείμενο και εκφράζει την κατεύθυνση του αντικειμένου (σκεφτείτε το σε 2d άξονα, και μοίρες, 0-90-180 κτλ.)) ενώ το 0 εκφράζει την απόσταση από το σημείο επαφής. (Η εντολή γενικά είναι move_contact_solid(direction,distance)) Τα παρακάτω if τσεκάρουν από ΠΟΙΑ ΜΕΡΙΑ έγινε η επαφή μας (κάτω, πάνω,δεξιά,αριστερά) και αντιστοίχως μηδενίζει τις ταχύτητες (την κάθετη αν είναι από πάνω-κάτω, οριζόντια αν είναι δεξιά-αριστερά.). Κάνουμε Save και πάμε να δούμε τι φτιάξαμε!
</span>

Ναι, πλέον έχουμε βαρύτητα (αν δεν υπάρχει solid block από κάτω μας πέφτουμε, και γενικά το block μας εμποδίζει την κίνηση ακόμα και στον οριζόντιο άξονα). Στο επόμενο μέρος του Tutorial θα εισάγουμε και το Jump (πήδημα)! http://www.mediafire.com/download/9ad7l8j6klwtahx/RQE+Tutorial+2.gmk" class="bbcode_url">Link το αρχείο του Game Maker 8.
 
Back
Top