Το HTML5 και ο όρος "cross platform" είναι λέξεις buzz, και για καλό λόγο. Η τεχνολογία λειτουργεί για smartphones, tablet, φορητούς υπολογιστές και επιτραπέζιους υπολογιστές. Οι οργανισμοί αγαπούν την έννοια, επειδή οποιοσδήποτε σχεδιαστής ιστοσελίδων που γνωρίζει HTML, θα καταλάβει το HTML5. Τι σημαίνει για εσάς , ο σχεδιαστής ιστοσελίδων;

  • Περισσότερα έργα που αφορούν HTML5
  • Περισσότερα έργα που περιστρέφονται γύρω από την αλληλεπίδραση
  • Δημιουργία εμπειριών για την αλληλεπίδραση του τελικού χρήστη

Στην καρδιά αυτής της διαδραστικής εμπειρίας, είναι παιχνίδια περιστασιακά. Σε αυτό το άρθρο, θα σας δείξω πώς μπορείτε να πάρετε κάποια πολυπόθητη εμπειρία σχεδιασμού παιχνιδιών. Ο στόχος? Έχετε "σχέδιο παιχνιδιών HTML5" στο βιογραφικό σας.

Παίζω παιχνίδια, αλλά ...

Είναι μια κοινή πλάνη μεταξύ των σχεδιαστών ιστοσελίδων ότι το σχεδιασμό παιχνιδιών είναι μια εξειδικευμένη ικανότητα. Δεν χρειάζεται να παρευρεθείτε στο σχολείο σχεδιασμού παιχνιδιών, να σχεδιάσετε παιχνίδια. Ο καθένας μπορεί να σχεδιάσει παιχνίδια. Πρώτον, ας το σπάσουμε σε μέρη. Η οικοδόμηση ενός παιχνιδιού απαιτεί 3 μείζονα βήματα:

  1. Σχεδιάζοντας το παιχνίδι.
  2. παραγωγή οπτικών και ηχητικών στοιχείων ·
  3. προγραμματίζοντας το παιχνίδι.

Ως σχεδιαστής ιστοσελίδων, ο ευκολότερος τρόπος για να αποκτήσετε εμπειρία είναι μέσω του σχεδιασμού του ίδιου του παιχνιδιού. Για τα σημεία 2 και 3, ένας οργανισμός συνήθως έχει ήδη ορίσει καλλιτέχνες και προγραμματιστές για τη δουλειά. Εάν είστε καλοί στο έργο τέχνης, 2 είναι εξαιρετικά εφικτό. Για τους σκοπούς αυτού του άρθρου, ας συζητήσουμε το βήμα 1. Πού αρχίζουμε ακόμη; Εδώ είναι 10 βήματα που κάθε σχεδιαστής παιχνιδιών πρέπει να περάσει, για να κερδίσει τις ρίγες τους.

1) Παίξτε πολλά απλά παιχνίδια

Έχετε ένα τηλέφωνο iPhone ή Android; Πηγαίνετε στο App Store, κατευθυνθείτε στο κορυφαίο ελεύθερο διάγραμμα παιχνιδιών. Λήψη και αναπαραγωγή κάθε παιχνιδιού στη λίστα των 20 κορυφαίων. Κάνετε αυτό τουλάχιστον μία φορά κάθε 2 εβδομάδες.

Ενώ παίζετε, συνειδητοποιείτε πώς σχεδιάζεται κάθε παιχνίδι. Ποιες τεχνικές κινούμενης εικόνας και μηχανική χρησιμοποιεί; Μήπως οι χαρακτήρες ξεχωρίζουν σε σας; Έχει μια ιστορία; Τι σας έκανε να νιώσετε το παιχνίδι; Μετά από 20-30 παιχνίδια, θα αρχίσετε να εντοπίζετε μοτίβα.

image2

Θα παρατηρήσετε ότι κάποια παιχνίδια, στον πυρήνα είναι πραγματικά το ίδιο πράγμα. Π.χ.: Η σύγκρουση των Clans, Boom Beach και Hay Day είναι για το κτίριο, την άμυνα και την επίθεση.

Θα παρατηρήσετε ότι τα απλά παιχνίδια, όπως τα Flappy Bird ή Swing Copters, επικεντρώνονται σε πραγματικά δύσκολες προκλήσεις, οι οποίες μπορούν να επαναληφθούν αμέτρητες φορές.

Θα παρατηρήσετε ότι κάποια παιχνίδια επικεντρώνονται στην επιτακτική αφήγηση με προσεκτικά σχεδιασμένους χαρακτήρες.

Θα παρατηρήσετε επίσης μερικά περίεργα παιχνίδια indie, που είναι απλά εντελώς τυχαία αλλά πραγματικά διασκεδαστικά!

2) Κάνετε σκίτσα ... πολλά

Κάντε σκίτσα των πραγμάτων που σας αρέσουν από τα παιχνίδια που παίξατε. Σκίτσα χαρακτήρες, χάρτες, μενού και διεπαφές χρήστη. Υπήρχε κάποιος χαρακτήρας που σας άρεσε; Υπήρχε κάποια γωνία του παιχνιδιού που σε έκανε ενθουσιασμένους;

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

image3

3) Δημιουργήστε διαγράμματα ροής

Τα διαγράμματα ροής περιγράφουν τη βήμα προς βήμα διαδικασία του παιχνιδιού. Περιγράφουν το σημείο όπου ο χρήστης ξεκινάει το παιχνίδι, σε όλα τα σημαντικά γεγονότα, όπως μια νίκη ή μια απώλεια. Ξεκινήστε με απλά διαγράμματα όπως αυτό:

image4

Καθώς αποκτάτε μεγαλύτερη εμπιστοσύνη, επαναλάβετε την απλή ροή σας για να κάνετε πιο σύνθετες ροές.

4) Γράψτε ένα έγγραφο σχεδιασμού παιχνιδιών

Χρησιμοποιώντας όσα μάθατε από τα Βήματα 1-3, σχεδιάστε και γράψτε ένα απλοποιημένο έγγραφο σχεδιασμού παιχνιδιών (GDD). Ένα GDD βασικά λέει στον αναγνώστη τι είναι το παιχνίδι.

Γρήγορο παράδειγμα: Ας πάρουμε τον χαρακτήρα μας που ονομάζεται "Matt" στο βήμα 2, και ας πούμε ότι είναι παγιδευμένος σε μια βαρετή δουλειά στο γραφείο. Θέλει να δραπετεύσει. Το αλίευμα είναι, μπορεί να το κάνει μόνο από την κυλιόμενη καρέκλα του. Έχουμε δημιουργήσει ένα κομψό σκίτσο της οθόνης παιχνιδιών. Δείχνει έναν λαβύρινθο γραφείων που συνωμοτούν για να εμποδίσουν τη διαφυγή του Ματ.

image5

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

image6

Αυτό είναι, για ένα πολύ βασικό GDD. Εδώ είναι το πλήρες διάγραμμα ροής, για το παιχνίδι μας, Escape The Office .

image7

5) Εκπαιδεύστε τη διατομεακή νοοτροπία σας

Με τα παιχνίδια HTML5, πολλά από αυτά βράζουν για να είναι σε θέση να τρέξει το παιχνίδι σε διαφορετικά μεγέθη οθόνης, αποτελεσματικά. Εδώ είναι μια σειρά από διαφορετικές συσκευές που έχουμε στην αγορά: iPhone, iPad, iPod Touch, Samsung Galaxy Note3, Samsung Galaxy Tablet, Google Nexus, LG, Xiaomi, Windows Phone, Windows Laptop, Mac, ο κατάλογος συνεχίζεται και επάνω ... Ridiculous ; Ωστόσο, αυτό κάνουν οι μεγάλες εταιρείες. Ως ανεξάρτητος σχεδιαστής, πώς σχεδιάζετε ένα παιχνίδι που ταιριάζει σε διαφορετικά μεγέθη οθόνης;

  1. Διορθώστε τον προσανατολισμό παιχνιδιού Σχεδιάστε το παιχνίδι σας έτσι ώστε να λειτουργεί είτε σε λειτουργία πορτραίτου είτε μόνο σε λειτουργία τοπίου.
  2. Βρείτε την πιο κοινή ανάλυση παιχνιδιών που λειτουργεί για τις περισσότερες συσκευές. Διατηρήστε την αναλογία διαστάσεων. Στη συνέχεια, κλιμακώστε πάνω ή κάτω, ανάλογα με την ανάλυση της συσκευής. Βρίσκουμε αναλογίες πλευρών 3: 4 (πορτρέτο), ή 4: 3 (τοπίο) πιο δημοφιλή και αποτελεσματικά.
  3. Σχεδιάστε ελαφριά και casual παιχνίδια. Μην πηγαίνετε για το ογκώδες, 3D MMO παιχνίδι. Αντ 'αυτού, πηγαίνετε για διασκέδαση, ελαφρείς περιστασιακές εμπειρίες. Το παιχνίδι θα μπορούσε να είναι τόσο απλό όσο το σφυροκόπημα, ή το άλμα γύρω από πλατφόρμες. Οτιδήποτε κάτω από τον ουρανό είναι καλό παιχνίδι (δεν υπάρχει λογοπαίγνιο).
  4. Πάντα να τραβήξτε έργα τέχνης υψηλής ανάλυσης. Τουλάχιστον 2048px πλάτος ως γραμμή βάσης. Είναι ευκολότερο να κλιμακωθεί σε σχέση με το μέγεθος.

6) Ξεκινήστε το βήμα

Ρωτήστε την εταιρεία σας (ή τους πελάτες) εάν ενδιαφέρονται για οποιεσδήποτε σχετικές με το παιχνίδι έργα. Δείξτε τα σχέδια σας. Βάλτε την καρδιά σας έξω. Περπατήστε τους μέσα από το GDD.

Η πρώτη σας γκάμα ιδεών παιχνιδιού δεν θα είναι σαν την δεξαμενή καρχαριών, είστε σίγουροι! Οι πιθανότητες είναι ότι θα διαθέσουν ένα μικρό προϋπολογισμό για το παιχνίδι. Εάν δεν υπάρχει προϋπολογισμός, συνεχίστε να σχεδιάζετε καλύτερα και να προσεγγίσετε άλλες εταιρείες. Αν έχετε τους πόρους, να χρηματοδοτήσετε τα δικά σας σχέδια παιχνιδιών με φθηνό.

7) Βρείτε έναν προγραμματιστή

Μόλις έχετε έναν προϋπολογισμό, αρχίστε να αναζητάτε προγραμματιστές που ειδικεύονται στην ανάπτυξη παιχνιδιών. Δείξτε τους τα σχέδια σας, μοιραστείτε τον προϋπολογισμό και πείτε τους το όραμα. Οι περισσότεροι προγραμματιστές παιχνιδιών είναι πολύ χρήσιμοι. Αυτό που χρειάζεστε είναι ένας προγραμματιστής που είναι πολύ έμπειρος σε παιχνίδια HTML5. Αυτό το άτομο πρέπει να ξέρει πώς να κωδικοποιεί κάτι που ζυγίζει ωραία για όλα τα είδη των μορφών παραγόντων. Συζητήστε τη "διαμάχη με την πλατφόρμα" με τον προγραμματιστή.

8) Grind

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

9) Ολοκληρώστε το έργο

Η λέξη-κλειδί εδώ είναι "να τελειώσει" το έργο. Πολλές φορές, ως σχεδιαστές, θέλουμε ένα τέλειο παιχνίδι. Μηδενικά σφάλματα. Όμορφα σχεδιασμένη τέχνη παιχνιδιών, με ιδανικούς κανόνες. Ρίξτε αυτή τη νοοτροπία από το παράθυρο. Πηγαίνετε για "αρκετά καλό". Απελευθερώστε το παιχνίδι σε άγρια ​​κατάσταση. Τίποτα δεν το λέει σαν ένα παιχνίδι που είναι ζωντανό, στα χέρια των χρηστών. Μπορείτε πάντα να γυαλίσετε το παιχνίδι μετά την εκτόξευση. Ολοκληρώθηκε είναι καλύτερο από τέλειο.

10) Μέτρηση ανατροφοδότησης

Ελέγξτε τις απαντήσεις των χρηστών στο παιχνίδι σας. Χρησιμοποιήστε δωρεάν εργαλεία όπως το Google Analytics για να παρακολουθείτε τις προβολές, τα παιχνίδια και τα συμβάντα του παιχνιδιού σας.

image8

Εάν σχεδιάζετε παιχνίδια για να κερδίσετε την προσοχή των κοινωνικών μέσων ενημέρωσης, αναλύστε τα συμπαθήματα του Facebook, τα Tweets και τα Instagram Likes. Μάθετε πώς αντιδρούν οι χρήστες στο παιχνίδι σας.