Εισαγωγή

Υπάρχουν πολλά πράγματα που πρέπει να λάβετε υπόψη κατά την προσαρμογή του παιχνιδιού και των γραφικών σας σε διαφορετικά μεγέθη οθόνης:

• Είναι ρετρό παιχνίδι με καθαρά γραφικά ακριβείας pixel (pixel-perfect) χαμηλής ανάλυσης ή σύγχρονο παιχνίδι με γραφικά ποιότητας HD;
• Πώς πρέπει να συμπεριφέρεται το παιχνίδι όταν παίζεται σε πλήρη οθόνη σε διαφορετικά μεγέθη οθόνης;
  • Πρέπει ο παίκτης να δει περισσότερο από το περιεχόμενο του παιχνιδιού σε μια οθόνη υψηλής ανάλυσης ή θα πρέπει τα γραφικά να προσαρμόζονται με ζουμ ώστε να εμφανίζουν πάντα το ίδιο περιεχόμενο;
• Πώς θα έπρεπε το παιχνίδι να αντιμετωπίσει αναλογίες διαστάσεων εκτός από αυτήν που έχετε ορίσει στο game.project;
  • Πρέπει ο παίκτης να δει περισσότερο από το περιεχόμενο του παιχνιδιού; Ή μήπως πρέπει να υπάρχουν μαύρες ράβδοι; Ή μήπως πρέπει να αλλάζει το μέγεθος των στοιχείων GUI;
• Τι είδους μενού και στοιχεία GUI χρειάζεστε στην οθόνη και πώς πρέπει να προσαρμόζονται σε διαφορετικά μεγέθη και προσανατολισμούς;
  • Πρέπει τα μενού και τα άλλα στοιχεία GUI να αλλάζουν διάταξη όταν αλλάζει ο προσανατολισμός ή να διατηρούν πάντα την ίδια διάταξη;

Αυτό το εγχειρίδιο θα εξετάσει ορισμένα από αυτά τα πράγματα και θα προτείνει βέλτιστες πρακτικές.

Πώς να αλλάξετε τον τρόπο απόδοσης του περιεχομένου σας

Το σενάριο απόδοσης (render script) του Defold σάς δίνει πλήρη έλεγχο σε ολόκληρο το pipeline απόδοσης. Αποφασίζει τη σειρά, το περιεχόμενο και τον τρόπο απόδοσης. Από προεπιλογή, αποδίδει πάντα την ίδια περιοχή pixel, η οποία ορίζεται από το πλάτος και το ύψος στο αρχείο game.project, ανεξάρτητα από το αν αλλάζει το μέγεθος του παραθύρου ή αν η πραγματική ανάλυση της οθόνης διαφέρει. Ως αποτέλεσμα, το περιεχόμενο τεντώνεται όταν αλλάζει η αναλογία διαστάσεων και μεγεθύνεται ή σμικρύνεται όταν αλλάζει το μέγεθος του παραθύρου. Σε ορισμένα παιχνίδια αυτό μπορεί να είναι αποδεκτό, αλλά συνήθως θα θέλετε να εμφανίζεται περισσότερο ή λιγότερο περιεχόμενο όταν διαφέρει η ανάλυση ή η αναλογία διαστάσεων, ή τουλάχιστον να μεγεθύνετε το περιεχόμενο χωρίς να παραμορφώνετε την αναλογία διαστάσεων. Μπορείτε εύκολα να αλλάξετε την προεπιλεγμένη συμπεριφορά τεντώματος· διαβάστε περισσότερα στο εγχειρίδιο απόδοσης.

Ρετρό γραφικά και γραφικά 8-bit

Τα ρετρό γραφικά και τα γραφικά 8-bit συνήθως παραπέμπουν σε παιχνίδια που μιμούνται το ύφος παλιών κονσολών ή υπολογιστών με χαμηλή ανάλυση και περιορισμένη παλέτα χρωμάτων. Για παράδειγμα, το Nintendo Entertainment System (NES) είχε ανάλυση 256×240, το Commodore 64 είχε 320×200 και το Game Boy είχε 160×144, δηλαδή μόνο ένα κλάσμα του μεγέθους των σύγχρονων οθονών. Για να παιχτεί ένα παιχνίδι που μιμείται αυτό το ύφος σε μια σύγχρονη οθόνη υψηλής ανάλυσης, τα γραφικά πρέπει να μεγεθυνθούν αρκετές φορές. Ένας απλός τρόπος είναι να σχεδιάσετε όλα τα γραφικά στη χαμηλή ανάλυση και στο ύφος που θέλετε και να τα μεγεθύνετε κατά την απόδοση. Στο Defold αυτό επιτυγχάνεται εύκολα με το σενάριο απόδοσης, ορίζοντας τη σταθερή προβολή (Fixed Projection) σε κατάλληλη τιμή μεγέθυνσης.

Ας χρησιμοποιήσουμε αυτά τα πλακίδια και τον χαρακτήρα παίκτη (πηγή) σε ένα ρετρό παιχνίδι 8-bit με ανάλυση 320×200:

Με ρύθμιση 320×200 στο αρχείο game.project, το παιχνίδι κατά την εκκίνηση μοιάζει με αυτό:

Το παράθυρο είναι πολύ μικρό σε μια σύγχρονη οθόνη υψηλής ανάλυσης. Η τετραπλάσια αύξηση του μεγέθους του παραθύρου σε 1280×800 το κάνει καταλληλότερο:

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

msg.post("@render:", "use_fixed_projection", { zoom = 4 })

Αυτό θα δώσει το ακόλουθο αποτέλεσμα:

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

Τα γραφικά φαίνονται θολά. Αυτό οφείλεται στον τρόπο με τον οποίο η GPU δειγματοληπτεί τη μεγεθυμένη υφή κατά την απόδοση. Η προεπιλεγμένη ρύθμιση στο αρχείο game.project, στην ενότητα Graphics, είναι Linear:

Αν την αλλάξουμε σε Nearest, έχουμε το ακόλουθο αποτέλεσμα:

Τώρα έχουμε καθαρά γραφικά ακριβείας pixel για το ρετρό παιχνίδι μας. Υπάρχουν και άλλα πράγματα που πρέπει να λάβετε υπόψη, όπως η απενεργοποίηση της επιλογής Subpixels για τα sprite στο game.project:

Όταν η επιλογή Subpixels είναι απενεργοποιημένη, τα sprite δεν αποδίδονται ποτέ σε κλάσματα pixel, αλλά μετακινούνται πάντα στο πλησιέστερο ακέραιο pixel.

Γραφικά υψηλής ανάλυσης

Όταν ασχολούμαστε με γραφικά υψηλής ανάλυσης, πρέπει να προσεγγίσουμε τη ρύθμιση του έργου και του περιεχομένου διαφορετικά από ό,τι στα ρετρό γραφικά και τα γραφικά 8-bit. Στα γραφικά bitmap πρέπει να δημιουργήσετε το περιεχόμενο έτσι ώστε να φαίνεται καλό σε οθόνη υψηλής ανάλυσης όταν εμφανίζεται σε κλίμακα 1:1.

Όπως και στα ρετρό γραφικά και τα γραφικά 8-bit, πρέπει να αλλάξετε το σενάριο απόδοσης. Σε αυτή την περίπτωση θέλετε τα γραφικά να κλιμακώνονται μαζί με το μέγεθος της οθόνης, διατηρώντας παράλληλα την αρχική αναλογία διαστάσεων:

msg.post("@render:", "use_fixed_fit_projection")

Αυτό διασφαλίζει ότι, ανεξάρτητα από το μέγεθος της οθόνης, εμφανίζεται πάντα τουλάχιστον η ίδια ποσότητα περιεχομένου που καθορίζεται στο αρχείο game.project. Ενδέχεται να εμφανίζεται πρόσθετο περιεχόμενο επάνω και κάτω ή στα πλάγια, ανάλογα με τη διαφορά στην αναλογία διαστάσεων.

Πρέπει να ρυθμίσετε το πλάτος και το ύψος στο αρχείο game.project σε μέγεθος που επιτρέπει την εμφάνιση του περιεχομένου του παιχνιδιού χωρίς κλιμάκωση.

High DPI και οθόνες Retina

Αν θέλετε να υποστηρίξετε οθόνες High DPI και Retina, μπορείτε να ενεργοποιήσετε τη σχετική ρύθμιση στο αρχείο game.project, στην ενότητα Display:

Αυτό δημιουργεί ένα back buffer High DPI στις οθόνες που το υποστηρίζουν. Το παιχνίδι αποδίδεται σε διπλάσια ανάλυση από εκείνη που ορίζουν οι ρυθμίσεις Width και Height, οι οποίες εξακολουθούν να αποτελούν τη λογική ανάλυση που χρησιμοποιείται σε script και ιδιότητες. Έτσι όλες οι μετρήσεις παραμένουν ίδιες και το περιεχόμενο που αποδίδεται σε κλίμακα 1× φαίνεται όπως πριν. Αν όμως εισαγάγετε εικόνες υψηλής ανάλυσης και τις κλιμακώσετε στο 0,5×, εμφανίζονται σε High DPI.

Δημιουργία προσαρμοζόμενου GUI

Το σύστημα δημιουργίας GUI βασίζεται σε ορισμένα απλά δομικά στοιχεία, τους κόμβους (nodes). Παρότι μπορεί να φαίνεται υπερβολικά απλό, μπορεί να χρησιμοποιηθεί για οτιδήποτε, από κουμπιά έως σύνθετα μενού και αναδυόμενα παράθυρα. Μπορείτε να ρυθμίσετε το GUI ώστε να προσαρμόζεται αυτόματα στο μέγεθος και στον προσανατολισμό της οθόνης. Για παράδειγμα, οι κόμβοι μπορούν να παραμένουν αγκυρωμένοι στην κορυφή, στο κάτω μέρος ή στις πλευρές της οθόνης και είτε να διατηρούν το μέγεθός τους είτε να τεντώνονται. Μπορείτε επίσης να αλλάζετε τις σχέσεις, το μέγεθος και την εμφάνιση των κόμβων όταν αλλάζει το μέγεθος ή ο προσανατολισμός της οθόνης.

Ιδιότητες κόμβων

Κάθε κόμβος σε ένα GUI έχει σημείο περιστροφής, οριζόντια και κατακόρυφη αγκύρωση, καθώς και λειτουργία προσαρμογής.

• Η ιδιότητα Pivot ορίζει το σημείο περιστροφής ενός κόμβου.
• Οι ιδιότητες αγκύρωσης (X Anchor και Y Anchor) ελέγχουν πώς αλλάζει η οριζόντια και η κατακόρυφη θέση του κόμβου όταν τα όρια της σκηνής ή του γονικού κόμβου τεντώνονται ώστε να ταιριάζουν στο φυσικό μέγεθος της οθόνης.
• Η ιδιότητα Adjust Mode ελέγχει τι συμβαίνει σε έναν κόμβο όταν τα όρια της σκηνής ή του γονικού κόμβου προσαρμόζονται στο φυσικό μέγεθος της οθόνης.

Μπορείτε να μάθετε περισσότερα για αυτές τις ιδιότητες στο εγχειρίδιο GUI.

Διατάξεις

Το Defold υποστηρίζει GUI που προσαρμόζονται αυτόματα στις αλλαγές προσανατολισμού της οθόνης σε κινητές συσκευές. Με αυτή τη δυνατότητα μπορείτε να σχεδιάσετε ένα GUI που προσαρμόζεται στον προσανατολισμό και στην αναλογία διαστάσεων πολλών μεγεθών οθόνης. Μπορείτε επίσης να δημιουργήσετε διατάξεις για συγκεκριμένα μοντέλα συσκευών. Μάθετε περισσότερα στο εγχειρίδιο διατάξεων GUI.

Δοκιμή διαφορετικών μεγεθών οθόνης

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