Princess & Dragon Μέρος 1: Αντικείμενα στον Κόσμο του Alice

Παρουσίαση με θέμα: "Princess & Dragon Μέρος 1: Αντικείμενα στον Κόσμο του Alice"— Μεταγράφημα παρουσίασης:

1 Princess & Dragon Μέρος 1: Αντικείμενα στον Κόσμο του Alice
By Elizabeth Liang under the direction of Professor Susan Rodger Duke University May 2010 Απόδοση, προσαρμογή στα ελληνικά Νίκος Ψαρουδάκης Πρότυπο Πειραματικό Γυμνάσιο Ηρακλείου Δεκέμβριος 2011

2 Εισαγωγή Welcome to Alice! Το Alice είναι ένα καινοτόμο 3D προγραμματιστικό περιβάλλον το οποίο διευκολύνει τη δημιουργία κινουμένων σχεδίων. Αυτά τα κινούμενα σχέδια μπορούν να χρησιμοποιηθούν για να: διηγηθούν μια ιστορία κατασκευάσουν ένα διαδραστικό παιχνίδι δημιουργήσουν ένα video το οποίο μπορείτε να το μοιραστείτε διαδικτυακά και πολλά άλλα ακόμα! Το Alice χρησιμοποιεί 3D γραφικά και ένα drag-and-drop περιβάλλον επικοινωνίας έτσι ώστε να είναι ευχάριστο και εύκολο στην εκμάθηση του. Σε αυτό το τετραμερές μάθημα, θα μάθετε κάποια από τα βασικά εργαλεία του Alice ούτως ώστε να μπορείτε να προγραμματίσετε τις δικές σας ιστορίες και παιχνίδια. Download & Install Alice 2.2 Μπορεί να χρειαστεί να κατεβάσετε και να εγκαταστήσετε το Alice από την ιστοσελίδα Alice.org. Περισσότερες λεπτομέρειες θα βρείτε στην ιστοσελίδα.

3 Επισκόπηση Σε αυτό το μάθημα θα δημιουργήσουμε μια σύντομη ιστορία για μία πριγκίπισσα την οποία συλλαμβάνει ένας δράκος και απελευθερώνεται από έναν έφιππο ιππότη. Το μάθημα χωρίζεται σε 4 μέρη. Μέρος 1: Objects –Αντικείμενα Μέρος 2: Methods & Properties / Μέθοδοι & Ιδιότητες Μέρος 3: Cameras & Events / Κάμερα & Γεγονότα Μέρος 4: Billboards, Sound, & 3D-Text/Billboards, Ήχοι & 3D-Κείμενο Στο μέρος 1 θα τοποθετήσουμε την τρομοκρατημένη πριγκίπισσα, η οποία θα καλεί σε βοήθεια, στην κορυφή ενός πύργου. Αυτό θα καλύψει πως στήνουμε ένα κόσμο - world, θα προσθέσουμε αντικείμενα, θα τα τοποθετήσουμε, και θα δημιουργήσουμε απλά κινούμενα σχέδια.

4 Βήμα 1: Ένας νέος Alice World
Ξεκινήστε το Alice και μετά που θα φορτωθεί, ακόμα κι αν καθυστερήσει λίγο ανάλογα με τον υπολογιστή σας, θα δείτε την οθόνη εκκίνησης “Welcome to Alice!” Από αυτή την οθόνη μπορείτε να ξεκινήσετε ένα νέο world σύμφωνα με ένα πρότυπο - template ή να ανοίξετε έναν Alice world τον οποίο είχατε αποθηκεύσει νωρίτερα. Πατήστε Templates για να ξεκινήσετε ένα νέο Alice world και θα δείτε 6 βασικά πρότυπα. Επιλέξτε grass και μετά πατήστε open.

5 Η κύρια οθόνη του Alice χωρίζεται σε ομάδες.
Βήμα 1: Κύρια Οθόνη Η κύρια οθόνη του Alice χωρίζεται σε ομάδες. Toolbar Object Tree –Δέντρο αντικειμένων World Preview Προεπισκόπηση Events Editor συντάκτης Γεγονότων Method Editor συντάκτης Μεθόδων Details Pane Πλαίσιο λεπτομερειών

6 Βήμα 1: Αποθηκεύοντας ένα Alice World
Πατήστε στο μενού File στην κορυφή της οθόνης, επιλέξτε Save World και δώστε ένα όνομα, π.χ, princessDragon. Πατήστε Save όταν έχετε ολοκληρώσει. Το Alice world αποθηκεύεται σε αρχεία τύπου .a2w Προσέξτε να έχετε επιλέξει ένα φάκελο του οποίου το μονοπάτι και το όνομα (φακέλου) δεν περιέχει ελληνικούς χαρακτήρες. Το ίδιο και το όνομα αρχείου που μόλις δώσατε, αλλιώς δεν θα μπορέσετε να ανοίξετε το αρχείο σας την επόμενη φορά μέχρι να τα διορθώσετε.

7 Βήμα 2: η οθόνη προσθήκης αντικειμένων
Πατήστε στο Add Objects στο πλαίσιο προεπισκόπησης του World και θα δείτε την οθόνη σας να μεταβάλλεται σε οθόνη προσθήκης αντικειμένων Adding Objects screen. Toolbar Object Tree Δέντρο αντικειμένων World Preview Προεπισκόπηση World Εργαλεία τοποθέτησης Gallery Details Pane Πλαίσιο λεπτομερειών

8 Βήμα 2: Dummy Objects Ένα Dummy Object μας επιτρέπει να αποθηκεύσουμε την τρέχουσα θέση της κάμερας και να επιστρέψουμε σε αυτή τη θέση αργότερα. Πριν να προσθέσετε ή να τοποθετήσετε αντικείμενα είναι καλό να αποθηκεύσετε την αρχική θέση της κάμερας. Πατήστε το κουμπί more controls κάτω από τα εργαλεία τοποθέτησης και επιλέξτε drop dummy at camera.

9 Step 2: Renaming Objects
Στο δέντρο αντικειμένων θα παρατηρήσετε ότι εμφανίστηκε ο νέος φάκελος Dummy Objects. Κάντε δεξί κλικ και μετονομάστε (rename)τον σε cameraViews. Ανοίξτε το φάκελο πατώντας το + δίπλα του. Κάντε δεξί κλικ στο αντικείμενο dummy μέσα του και αλλάξετε το όνομα (rename) σε originalView.

10 Βήμα 2: Η Gallery Η Gallery περιέχει διαφορετικούς τύπους αντικειμένων τα οποία μπορείτε να προσθέσετε στον κόσμο του Alice. Οργανώνεται σε φακέλους ταξινομημένος αλφαβητικά. Ολισθήσετε προς τα δεξιά μέχρι να βρείτε το φάκελο People. Πατήστε πάνω του για να ανοίξει. Ολισθήστε δεξιά μέχρις να βρείτε τη Cinderella. Θα είναι η πριγκίπισσα μας. Πατήστε πάνω της και θα δείτε μια οθόνη να εμφανίζεται Πατήστε Add instance to world και θα δείτε τη Cinderella να εμφανίζεται στον κόσμο!

11 Βήμα 2: Περισσότερα αντικείμενα
Για να επιστρέψετε πατήστε είτε την εικόνα του φακέλου δίπλα στο People είτε πατήστε Local Gallery. Τώρα προσθέστε ένα δράκο και ένα πύργο. Βρείτε το φάκελο Medieval (Μεσαίωνας) και προσθέστε Dragon και Tower.

12 Βήμα 3: Εργαλεία θέσης Το πλαίσιο δεξιά περιέχει μια ποικιλία εργαλείων τοποθέτησης τα οποία θα σας βοηθήσουν να μετακινήσετε τα αντικείμενα και να τα εγκαταστήσετε στις αρχικές θέσεις για την ταινία σας. Για να χρησιμοποιήσετε τα εργαλεία, πατήστε στο εργαλείο που θέλετε να χρησιμοποιήσετε και μετά πατήστε και κρατήστε πατημένο πάνω στο αντικείμενο στο οποίο θέλετε να εφαρμόσετε την ενέργεια αυτή. Μετακινήστε το ποντίκι για να δείτε το την επίδραση του εργαλείου! Μη χρησιμοποιήσετε το τελευταίο δεξιά εργαλείο, δεν λειτουργεί. Εάν κάνετε λάθος, πατήστε Undo! X

13 Βήμα 3: Εργαλεία θέσης (συνέχεια)
Χρησιμοποιήστε το εργαλείο Up and Down για να μεταφέρετε τον πύργο λίγο προς τα κάτω και την Cinderella πάνω έτσι ώστε να είναι μπροστά στην πόρτα του πύργου. Μετακινήστε το δράκο πάνω από το έδαφος. Χρησιμοποιήστε το εργαλείο mouse για να μετακινήσετε τον πύργο tower αριστερά και την Cinderella πίσω έτσι ώστε να είναι σχεδόν στη βάση του πύργου.

14 Βήμα 3: Εργαλεία θέσης (συνέχεια)
Χρησιμοποιήστε το εργαλείο Tumble για να μετακινήσετε το δράκο στον αέρα έτσι ώστε να μοιάζει ότι πετάει. Εργαλείο turn Στρίψτε τον πύργο έτσι ώστε η κάμερα τον βλέπει σε ευθεία.

15 Βήμα 3: Εργαλεία θέσης (συνέχεια)
Τοποθετώντας αντικείμενα στο Alice είναι περίπλοκο. Κάντε όσες δοκιμές χρειαστεί μέχρις ότου έχετε κατανοήσει και ελέγχετε πλήρως τα εργαλεία θέσης. Αν κάνετε κάτι λάθος, μετακινήσετε το έδαφος ή την κάμερα, απλά πατήστε Undo όσες φορές χρειαστεί. Μετακινήστε τον πύργο μπροστά (με το εργαλείο mouse) και με το εργαλείο Resize μειώστε το μέγεθος του, έτσι ώστε να μπορείτε να το βλέπετε στην οθόνη.

16 Βήμα 3: Τετραπλή όψη Quad View
Πατήστε quad view και θα δείτε μία νέα όψη του κόσμου σε τέσσερα παράθυρα. ΘΑ χρησιμοποιήσουμε αυτή την όψη για να μετακινήσουμε την Cinderella πάνω στον πύργο.

17 Βήμα 3: Τετραπλή όψη (συνέχεια)
X X Χρησιμοποιήστε το εργαλείο Scroll ολίσθησης και το Zoom μεγέθυνσης από την όψη from the top για να βλέπετε την κορυφή του πύργου. Πρώτα κάντε σμίκρυνση για να βρείτε τον πύργο και στη συνέχεια κάντε μεγέθυνση και ολίσθηση για να δείτε σωστά τον πύργο. Χρησιμοποιήστε το εργαλείο mouse για να μετακινήσετε τη Cinderella πάνω στον πύργο. Αν πάει μέσα στον πύργο αντί για πάνω, μετακινήστε την πάνω από την μονή όψη.

18 Βήμα 3: Τετραπλή όψη (συνέχεια)
Εξασκηθείτε χρησιμοποιώντας zoom και scroll μέχρι να έχετε καλές γωνίες του πύργου και στις τέσσερις οθόνες.

19 Βήμα 3: Centers Κέντρα Όταν έχετε ολοκληρώσει την προηγούμενη εργασία πατήστε single view για να επιστρέψετε στη μονή οθόνη Εάν πατήστε σε ένα αντικείμενο, είτε στο πλαίσιο θέασης – προεπισκόπησης, θα παρατηρήσετε ότι εμφανίζονται γραμμές γύρω από το αντικείμενο. Πατήστε το δράκο. Το κέντρο του αντικειμένου είναι εκεί που η πράσινη, μπλε και κόκκινη γραμμή συναντιούνται. Για παράδειγμα, όταν συστρέφεις τον δράκο, αυτός μετακινείται γύρω από το κέντρο. Το κέντρο του δράκου βρίσκεται στο μέσο του σώματος του αλλά κάθε αντικείμενο έχει το δικό του κέντρο.

20 Βήμα 3: Centers Κέντρα (συνέχεια)
Πατήστε τη Cinderella. Θα παρατηρήσετε ότι το κέντρο της είναι γύρω από τα γόνατα της. Θα παρατηρήσετε επίσης το κίτρινο κουτί το οποίο περιβάλλει το αντικείμενο. Αυτό είναι πολύ χρήσιμο όταν προσπαθείτε να ευθυγραμμίσετε το αντικείμενο. Υπάρχουν τρις γραμμές προσανατολισμού. Η πράσινη υποδεικνύει την προς τα πάνω έννοια για το αντικείμενο. Η κόκκινη γραμμή υποδεικνύει την προς τα δεξιά έννοια για το αντικείμενο. Στο Alice, τα πάντα συμβαίνουν σε σχέση με το αντικείμενο, έτσι ακόμα αν για εσάς είναι αριστερά, να θυμάστε ότι είναι της Cinderella το δεξιά. Η μπλε γραμμή υποδεικνύει την έννοια εμπρός και πίσω για το αντικείμενο. Ανάμεσα στο πλαίσιο προεπισκόπησης και την gallery θα δείτε ένα τρία σύνολα βελών. Αυτά είναι τα πλήκτρα ελέγχου της κάμερας. Στη συνέχεια θα τα χρησιμοποιήσουμε για να δημιουργήσουμε μια νέα όψη κάμερας. Για να τα χρησιμοποιήσετε πατήστε και κρατήστε πατημένο το πλήκτρο που επιθυμείτε.

21 Βήμα 4: Θέση κάμερας Move Μεταφέρετε την κάμερα έτσι ώστε ο πύργος να είναι στο κέντρο. Drive Οδηγήστε την κάμερα έτσι ώστε να μπορείτε να δείτε την Cinderella.

22 Βήμα 4: Θέση κάμερας (συνέχεια)
Έχουμε δημιουργήσει μια νέα όψη για την κάμερα! Πατήστε drop dummy για να την αποθηκεύσετε και ονομάστε την towerView. Tilt Κλίνετε ελαφρά την κάμερα.

23 Βήμα 5: Methods Μέθοδοι Πατήστε DONE για να πάτε πίσω στην κύρια οθόνη. Τώρα που έχουμε όλα τα αντικείμενα μας στη θέση τους, είναι η κατάλληλη στιγμή να τα κινήσουμε. Θα κάνουμε την Cinderella να πηδάει και να κραυγάζει ότι είναι παγιδευμένη. Το δέντρο αντικειμένων object tree δείχνει όλα τα αντικείμενα στον κόσμο. Πατήστε Cinderella αφού είναι το αντικείμενο που θέλουμε να ενεργοποιήσουμε. Πατήστε methods στο πλαίσιο λεπτομερειών details pane. Όταν πατήσετε ένα αντικείμενο, οι λεπτομέρειες του εμφανίζονται στο πλαίσιο λεπτομερειών. Εκεί μπορείτε να δείτε τις ιδιότητες properties, τις μεθόδους methods και τις λειτουργίες functions του αντικειμένου. Μια method είναι μια σειρά από οδηγίες που θα εκτελεστούν όταν το θελήσουμε. Όλες οι μέθοδοι δείχνουν τις βασικές πράξεις τις οποίες κάθε αντικείμενο γνωρίζει πώς να τις κάνει. Ο συνδυασμός αυτών των βασικών μεθόδων χρησιμοποιείται για να δημιουργήσουμε πιο σύνθετες κινήσεις.

24 Βήμα 5: Πρώτη εντολή Μια σειρά από επιλογές θα εμφανιστούν, οι οποίες θα ρωτούν τι θα λέει η Cinderella. Πατήστε other… και πληκτρολογήστε oh no, I’m trapped! Μετά πατήστε OK. Σύρετε το Cinderella say μέσα στον method editor. Θα δείτε την νέα εντολή να εμφανίζεται στον method editor.

25 Βήμα 5: Δοκιμή Πατήστε Play στη γραμμή εργαλείων για να δοκιμάσετε τη νέα εντολή. Οι λέξεις εξαφανίζονται πολύ γρήγορα. Ας το αλλάξουμε αυτό. Η οθόνη προβολής έχει πολλά εργαλεία για να σας βοηθήσει. Μπορείτε να προσαρμόσετε την ταχύτητα με την οποία παίζεται μια ταινία με τον δρομέα, όπως επίσης να κάνετε pause, resume, restart, και stop όποια στιγμή θελήσετε. Πάντα να θυμάστε να κλείνετε την οθόνη προβολής για να γυρίσετε στην κύρια οθόνη. Να δοκιμάζετε το πρόγραμμα σας συχνά. Μπορείτε να επιταχύνετε τα μέρη τα οποία δουλεύουν καλά και να πατάτε pause στα μέρη που θέλετε να επικεντρωθείτε και να βελτιώσετε. Μην περιμένετε μέχρις ότου έχετε γράψει πολλές σειρές εντολών!

26 Βήμα 5: Διάρκεια Πατήστε more… στην εντολή say για να δείτε όλο τον κατάλογο επιλογών. Επιλέξτε duration και μετά 2 seconds. Όλες οι εντολές είναι προκαθο-ρισμένες στο 1 δευτερόλεπτο έτσι διπλασιάζοντας το χρόνο θα κάνου-με τις λέξεις να μένουν περισ-σότερο στην οθόνη. Πατήστε Play στη γραμμή εργαλείων. Οι λέξεις μένουν αρκετά ώστε όλοι να μπορούν να τις διαβάζουν. Υπάρχουν πολλές περισσότερες επιλογές στο μενού more όπως η αλλαγή γραμματοσειράς και χρώματος. Δοκιμάστε τις!

27 Βήμα 5: Μέθοδος Move Για να την κάνουμε να πηδήξει, θα την μετακινήσουμε πάνω και μετά κάτω. Σύρετε το Cinderella move στον method editor πάνω από τη μέθοδο say. Αφήστε μόλις δείτε την πράσινη γραμμή ένδειξης για το που θα τοποθετήσετε την εντολή. Επιλέξτε up ½ meter.

28 Βήμα 5: Αντιγράφοντας μεθόδους
Κάντε δεξί κλικ στη μέθοδο Cinderella move και επιλέξτε make copy. Θα δείτε να εμφανίζεται ένα αντίγραφο κάτω από το αρχικό. Αυτό είναι χρήσιμο όταν θέλετε να αντιγράψετε μια μόνη γραμμή κώδικα. Αφού λοιπόν θέλουμε να μετακινήσουμε το αντικέιμενο μας προς τα κάτω με τον ίδιο ακριβώς τρόπο που την είχαμε μετακινήσει πάνω, κάνουμε ένα αντίγραφο. Πατήστε στο up και επιλέξτε down. Πατήστε Play για τη δοκιμή.

29 Βήμα 5: Do Together Ταυτόχρονη εκτέλεση
Καλύτερα αλλά όχι ακριβώς αυτό που ζητούσαμε. Εμείς θέλαμε να πηδάει και ταυτόχρονα να φωνάζει. Μπορούμε να το πετύχουμε χρησιμοποιώντας τη δομή Do together. Υπάρχουν δύο κύριοι τύποι δομών, Do in order (ακολουθιακή δομή, στη σειρά) και Do together (ταυτόχρονη εκτέλεση). Η προεπιλεγμένη είναι η ακολουθιακή Do in order. Σύρετε τη δομή Do together από το κάτω μέρος του method editor. Σύρετε μέσα στη δομή Do together κάθε μία από τις μεθόδους move και say methods πατώντας την γραμμοσκιασμένη αριστερή μεριά τους.

30 Βήμα 5: Do In Order Όταν πατήσεις Play, τίποτα δεν συμβαίνει! Κι αυτό γιατί η move up και η move down συμβαίνουν ταυτόχρονα, ακυρώνοντας ουσιαστικά η μια την άλλη! Σύρετε τη δομή Do in order μέσα στη δομή Do togethe. Σύρετε τις εντολές move up και move down μέσα σε αυτήν, Πατήστε πάλι Play, γιατί λειτουργεί τώρα; Σε αυτό το σημείο έχουμε ουσιαστικά ολοκληρώσει το μέρος 1. Αλλά τα χέρια της Cinderella δεν λειτουργούν πολύ σωστά. Ας κάνουμε μια επανάληψη στις δεξιότητες που αποκτήσαμε για να κινούμε αντικείμενα ώστε να τα κάνουμε να φαίνονται πιο φυσικά.

31 Step 5: Do in Order (συνέχεια)
Σύρετε άλλη μια δομή Do in order μέσα στη δομή Do together.

32 Βήμα 6: Subparts Υποτμήματα
Αυτή τη φορά θέλουμε μόνο να κινήσουμε τα χέρια της Cinderella. Για να το κάνουμε αυτό θα πρέπει να επιλέξουμε το χέρι της. Πηγαίνετε στο δέντρο αντικειμένων και πατήστε + δίπλα στη Cinderella μετά κάντε το ίδιο στα hips, torso, upperBody μέχρις να εμφανιστεί το leftUpperArm. Πατήστε για να το επιλέξετε. Τα αντικείμενα στο Alice είναι φτιαγμένα από μικρότερα τμήματα τα οποία μπορείτε να κινείτε. Θα παρατηρήσατε ότι το χέρι έχει το δικό του πλαίσιο λεπτομερειών και το δικό του κίτρινο περίβλημα, ακριβώς όπως και το αντικείμενο Cinderella.

33 Step 6: Subparts (συνέχεια)
Από το πλαίσιο λεπτομερειών του leftUpperArm’s, σύρετε τη μέθοδο roll μέσα στη νέα Do in order. Επιλέξτε right και μετά other… Στο κομπιουτεράκι , πατήστε .2 και μετά Okay. Η μέθοδος roll μετακινεί ένα αντικείμενο γύρω από το κέντρο του. Αφού το κέντρο του χεριού είναι κοντά στον ώμο, η μέθοδος roll θα κουνήσει το χέρι. Επιλέγουμε right γιατί όπως θυμόμαστε όλα είναι σε σχέση με το αντικείμενο και θέλουμε το αριστερό χέρι να κουνηθεί προς τα δεξιά της Cinderella.

34 Step 6: Subparts (συνέχεια)
Για να κουνήσουμε το χέρι πίσω και προς τα κάτω, σύρετε μία μέθοδο roll κάτω από την προηγούμενη και αυτή τη φορά επιλέξτε left, μετά other… και βάλτε 0.4. Κάντε δοκιμή πατώντας Play. Καλό φαίνεται! Τώρα ας το επαναλάβουμε για το άλλο χέρι.

35 Βήμα 6: Άλλο ένα αντίγραφο
Ένας άλλος τρόπος να αντιγράψετε κώδικα είναι να χρησιμοποιήσετε το clipboard στα δεξιά της γραμμής εργαλείων. Σύρετε όλη τη δομή Do in order με τις δύο roll μέσα στο clipboard. Σύρετε το clipboard μέσα στην Do together. Αυτός ο τρόπος είναι χρήσιμος για να αντιγράφετε ολόκληρα τμήματα κώδικα.

36 Βήμα 6: Άλλο ένα αντίγραφο (συνέχεια)
Θέλουμε το νέο κομμάτι κώδικα να αναφέρεται στο δεξί χέρι. Πατήστε στο βελάκι δίπλα στο leftUpperArm στην πρώτη μέθοδο roll και επιλέξτε Cinderella, hips, torso, upperBody, rightUpperArm, the entire rightUpperArm. Κάντε το ίδιο για το άλλο roll μετά αλλάξτε το right σε left και το left σε right.

37 Συγχαρητήρια! Αυτός είναι ο τελικός κώδικας αυτού του μαθήματος.
Δοκιμάστε με Play τον κόσμο για μια τελευταία φορά για να βεβαιωθείτε ότι όλα καλά Συγχαρητήρια που τελειώσατε το πρώτο μέρος! Στο δεύτερο μέρος θα μάθετε περισσότερα για τις μεθόδους και πώς να κάνετε περισσότερο animation στο Alice.