Μετατρέψτε τα παιχνίδια Flash στο HTML5

Το Flash εγκαταλείπεται αργά από την Adobe υπέρ της HTML5 και JavaScript. Το επίσημο τέλος της ζωής του ορίζεται για το έτος 2020. Και εκεί είναι το άρθρο όπου αυτό το άρθρο θα έρθει σε εύχρηστο.

• Ανακατασκευή ενός ιστότοπου Flash 2004 για το 2018

Οι συμβουλές που περιγράφονται παρακάτω στοχεύουν να βοηθήσουν τους προγραμματιστές παιχνιδιών HTML5 να αποφεύγουν τα κοινά λάθη κατά τη μετατροπή των παιχνιδιών flash στο JavaScript, καθώς και η όλη διαδικασία της ανάπτυξης να πάει όσο το δυνατόν πιο ομαλή. Το μόνο που χρειάζεστε είναι βασικές γνώσεις για το JavaScript, WebGL και το πλαίσιο του Phaser.

Η αλλαγή του σχεδιασμού παιχνιδιού σας από το SWF στο Javascript μπορεί να δώσει ένα καλύτερο εμπειρία χρήστη , που με τη σειρά του το δίνει μια σύγχρονη εμφάνιση. Αλλά πώς να το κάνετε; Χρειάζεστε ένα αποκλειστικό μετατροπέα παιχνιδιών JavaScript για να απαλλαγείτε από αυτή την ξεπερασμένη τεχνολογία; Λοιπόν, το φλας στη μετατροπή HTML5 μπορεί να είναι ένα κομμάτι κέικ - εδώ είναι αυτό που ένας έμπειρος προγραμματιστής παιχνιδιών JavaScript πρέπει να πει για το θέμα.

Σας αρέσει να κρατάτε τη διαδικασία σχεδιασμού σας απλή; ΕΝΑ οικοδόμος ιστότοπου και το δικαίωμα web hosting Ο πάροχος μπορεί να το κρατήσει έτσι.

01. Βελτιώστε την εμπειρία παιχνιδιών HTML5

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

• Υποστήριξη κινητών συσκευών
  Η μετατροπή από το Flash to Javascript επιτρέπει την επίτευξη ενός ευρύτερου κοινού - χρήστες υποστήριξης κινητών συσκευών για τα χειριστήρια της οθόνης αφής συνήθως πρέπει να εφαρμοστούν στο παιχνίδι. Ευτυχώς, τόσο οι συσκευές Android όσο και iOS υποστηρίζουν τώρα WebGL, έτσι ώστε 30 ή 60 fps rendering συνήθως μπορούν εύκολα να επιτευχθούν εύκολα. Σε πολλές περιπτώσεις, 60 FPS δεν θα προκαλέσουν προβλήματα, τα οποία θα βελτιώσουν μόνο με το χρόνο, καθώς οι κινητές συσκευές γίνονται όλο και περισσότερο επιδόσεις.
• Βελτίωση της απόδοσης
  Όταν πρόκειται για τη σύγκριση ActionScript και JavaScript, το τελευταίο είναι ταχύτερο. Εκτός από αυτό, η μετατροπή ενός παιχνιδιού είναι μια καλή ευκαιρία για να επανεξετάσετε τους αλγόριθμους που χρησιμοποιούνται στον κώδικα παιχνιδιών. Με την ανάπτυξη παιχνιδιών JavaScript μπορείτε να τα βελτιστοποιήσετε ή να λουστούν πλήρως τον αχρησιμοποίητο κώδικα που έχει μείνει από τους αρχικούς προγραμματιστές.
• Για τη στερέωση σφαλμάτων και τη βελτίωση του παιχνιδιού
  Έχοντας νέους προγραμματιστές που εξετάζουν τον πηγαίο κώδικα του παιχνιδιού μπορούν να βοηθήσουν να διορθώσουν γνωστά σφάλματα ή να ανακαλύψουν νέες και πολύ σπάνιες. Αυτό θα έκανε να παίζει το παιχνίδι λιγότερο ερεθιστικό για τους παίκτες, γεγονός που θα τους έκανε να περάσουν περισσότερο χρόνο στον ιστότοπό σας και να τους ενθαρρύνουν να δοκιμάσουν τα άλλα παιχνίδια σας.
• Προσθέτοντας το Web Analytics
  Εκτός από την παρακολούθηση της κυκλοφορίας, το Web Analytics μπορεί επίσης να χρησιμοποιηθεί για τη συγκέντρωση της γνώσης σχετικά με τον τρόπο που οι παίκτες συμπεριφέρονται σε ένα παιχνίδι και όπου κολλάνε κατά τη διάρκεια του παιχνιδιού.
• Προσθέτοντας εντοπισμό
  Αυτό θα αυξήσει το κοινό και είναι σημαντικό για τα παιδιά από άλλες χώρες που παίζουν το παιχνίδι σας. Ή ίσως το παιχνίδι σας δεν είναι στα αγγλικά και θέλετε να υποστηρίξετε αυτή τη γλώσσα;

02. Επιτύχετε 60 fps

Όταν πρόκειται για την ανάπτυξη παιχνιδιών JavaScript, μπορεί να είναι δελεαστικό να αξιοποιήσετε το HTML και το CSS για κουμπιά εντός παιχνιδιού, widgets και άλλα στοιχεία GUI. Η συμβουλή μας είναι να είστε προσεκτικοί εδώ. Είναι αντίθετο, αλλά στην πραγματικότητα αξιοποιεί τα στοιχεία DOM είναι λιγότερο αναπηρία σε πολύπλοκα παιχνίδια και αυτό το κέρδος πιο σημαντικό για το κινητό. Εάν θέλετε να επιτύχετε σταθερά 60 fps σε όλες τις πλατφόρμες, τότε μπορεί να απαιτηθεί παραίτηση από HTML και CSS.

Τα μη διαδραστικά στοιχεία GUI, όπως οι μπάρες υγείας, οι μπάρες πυρομαχικών ή οι μετρητές βαθμολογίας μπορούν εύκολα να εφαρμοστούν στο Phaser χρησιμοποιώντας τακτικές εικόνες (την κατηγορία "Phaser.image"), αξιοποιώντας την ιδιότητα ".crop" για το κόψιμο και το phaser. Κείμενο "Κλάση για απλές ετικέτες κειμένου.

Τα διαδραστικά στοιχεία όπως τα κουμπιά και τα πλαίσια ελέγχου μπορούν να υλοποιηθούν χρησιμοποιώντας την ενσωματωμένη κλάση «phaser.button». Άλλα, πιο περίπλοκα στοιχεία μπορούν να αποτελούνται από διαφορετικούς απλούς τύπους, όπως ομάδες, εικόνες, κουμπιά και ετικέτες κειμένου.

03. Φόρτωση προσαρμοσμένων γραμματοσειρών

Εάν θέλετε να κάνετε κείμενο με μια προσαρμοσμένη γραμματοσειρά φορέα (π.χ. TTF ή OTF), τότε πρέπει να βεβαιωθείτε ότι η γραμματοσειρά έχει ήδη φορτωθεί από το πρόγραμμα περιήγησης πριν από την εμφάνιση οποιουδήποτε κειμένου. Το Phaser V2.6 δεν παρέχει λύση για το σκοπό αυτό, αλλά μπορεί να χρησιμοποιηθεί μια άλλη βιβλιοθήκη - Φορτιστής γραμματοσειράς ιστού .

Υποθέτοντας ότι έχετε ένα αρχείο γραμματοσειράς και συμπεριλάβετε το φορτωτή γραμματοσειράς ιστού στη σελίδα σας, τότε παρακάτω είναι ένα απλό παράδειγμα του τρόπου φόρτωσης μιας γραμματοσειράς. Δημιουργήστε ένα απλό αρχείο CSS που θα φορτωθεί από φορτωτή γραμματοσειράς ιστού (δεν χρειάζεται να το συμπεριλάβετε στο HTML σας):

 @ font-face {
  // Αυτό το όνομα θα χρησιμοποιήσετε στο JS
  Font-οικογένεια: 'gunplay'.
  // URL στο αρχείο γραμματοσειράς, μπορεί να είναι σχετική ή απόλυτη
  SRC: URL ('../ fonts / gunplay.ttf') μορφή ('truetope').
  Γραμματοσειρά: 400;
} 

Τώρα ορίστε μια παγκόσμια μεταβλητή που ονομάζεται webfontconfig. Κάτι τόσο απλό όσο αυτό συνήθως αρκεί:

 var webfontconfig = {
  'Classes': False,
  'Timeout': 0,
  'Active': Λειτουργία () {
  // Η γραμματοσειρά έχει φορτωθεί με επιτυχία ...
  },
  'έθιμο': {
  «οικογένειες»: ['gunplay'],
  // URL στο προηγουμένως αναφερθέν CS
  'URLS': ['Styles / FONTS.CSS']
  }
} · 

Θυμηθείτε να τοποθετήσετε τον κωδικό σας στην "ενεργή" επανάκληση που φαίνεται παραπάνω. Και αυτό είναι!

04. Αποθηκεύστε το παιχνίδι

Τώρα είμαστε στο μεσαίο σημείο του φλας στη μετατροπή JavaScript - ήρθε η ώρα να φροντίσετε τους Shaders. Για να αποθηκεύσετε επίμονα τοπικά δεδομένα στην ActionScript, θα χρησιμοποιούσατε την κατηγορία "ShareDobject". Στο JavaScript, η απλή αντικατάσταση είναι η localstorage api , που επιτρέπει την αποθήκευση συμβολοσειρών για μεταγενέστερη ανάκτηση, επιζώντες επαναλήψεις σελίδας.

Τα αποταμιευτικά δεδομένα είναι πολύ απλά:

 Var Progress = 15;
localstorage.Setitem ('mygame.progress', πρόοδος). 

Σημειώστε ότι στο παραπάνω παράδειγμα η μεταβλητή "Πρόοδος", η οποία είναι ένας αριθμός, θα μετατραπεί σε μια συμβολοσειρά.

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

 Var Progress = parseint (localstorage.getitem ('mygame.progress')) || 0; 

Εδώ εξασφαλίζουμε ότι η τιμή επιστροφής είναι ένας αριθμός. Εάν δεν υπάρχει, τότε το 0 θα αντιστοιχιστεί στη μεταβλητή "Πρόοδος".

Μπορείτε επίσης να αποθηκεύσετε και να ανακτήσετε περισσότερες σύνθετες δομές, για παράδειγμα, JSON:

 var stats = {«γκολ»: 13, «κερδίζει»: 7, «απώλειες»: 3, «αντλεί»: 1
};
localstorage.etitem ('mygame.stats', json.stringify (στατιστικά στοιχεία)).
...
var stats = json.parse (localstorage.getitem ('mygame.stats')) || {}; 

Υπάρχουν ορισμένες περιπτώσεις που το αντικείμενο του «τοπικού τοπικού» δεν θα είναι διαθέσιμο. Για παράδειγμα, όταν χρησιμοποιείτε το αρχείο: // πρωτόκολλο ή όταν μια σελίδα φορτώνεται σε ένα ιδιωτικό παράθυρο. Μπορείτε να χρησιμοποιήσετε τη δήλωση "Δοκιμάστε και να πιάσετε" για να βεβαιωθείτε ότι ο κωδικός σας θα συνεχίσει και οι δύο προεπιλεγμένες τιμές, η οποία εμφανίζεται στο παρακάτω παράδειγμα:

 Δοκιμάστε {
    Var Progress = localstorage.getitem ('mygame.progress');
} catch (εξαίρεση) {
  // Το τοπικό δίκτυο δεν είναι διαθέσιμο, χρησιμοποιήστε τις προεπιλεγμένες τιμές
} 

Ένα άλλο πράγμα που πρέπει να θυμάστε είναι ότι τα αποθηκευμένα δεδομένα αποθηκεύονται ανά τομέα, όχι ανά διεύθυνση URL. Έτσι, αν υπάρχει κίνδυνος να φιλοξενηθούν πολλά παιχνίδια σε ένα μόνο τομέα, τότε είναι καλύτερο να χρησιμοποιήσετε ένα πρόθεμα (ονομάτο) κατά την αποταμίευση. Στο παραπάνω παράδειγμα, «Mygame». Είναι ένα πρόθεμα και συνήθως θέλετε να το αντικαταστήσετε με το όνομα του παιχνιδιού.

Εάν το παιχνίδι σας είναι ενσωματωμένο σε ένα iframe, τότε η τοπική τάση δεν θα επιμείνει στην Ίο. Σε αυτή την περίπτωση, θα πρέπει να αποθηκεύσετε δεδομένα στο γονέα IFRAME.

05. Προκαθορισμένο Shader θραύσματος

Όταν ο Phaser και ο Pixijs καθιστούν τα sprites σας, χρησιμοποιούν ένα απλό εσωτερικό shader κομμάτι. Δεν έχει πολλά χαρακτηριστικά επειδή είναι προσαρμοσμένο για ταχύτητα. Ωστόσο, μπορείτε να αντικαταστήσετε αυτό το shader για τους σκοπούς σας. Για παράδειγμα, μπορείτε να το αξιοποιήσετε για να επιθεωρήσετε την υπέρβαση ή να υποστηρίξετε περισσότερα χαρακτηριστικά για την απόδοση. Παρακάτω είναι ένα παράδειγμα του πώς να προμηθεύσετε το δικό σας προεπιλεγμένο Shader θραύσματος στο Phaser V2.

 Λειτουργία προφόρτησης () {
  αυτό. Flotok.Shader ('filename.frag', "Shaders / filename.frag");
}
Δημιουργία λειτουργίας () {
  var renderer = αυτό.Renderer;
  var batch = renderer.spritebatch;
  batch.defaultshader =
  Νέο pixi.abstractfitterFilter (this.cache.getshader ('filename.frag));
  Batch.etcontext (renderer.gl);
} 

06. Αλλαγή μεθόδου χρωματισμού

Μια προσαρμοσμένη προεπιλεγμένη Shader μπορεί να χρησιμοποιηθεί για την αντικατάσταση των προεπιλεγμένων μεθόδων χρωματισμού στο Phaser και Pixijs. Το χρωματισμό σε Phaser και Pixijs λειτουργεί με πολλαπλασιασμό των εικονοστοιχείων υφής με ένα δεδομένο χρώμα. Ο πολλαπλασιασμός πάντα σκουραίνει τα χρώματα, τα οποία προφανώς δεν είναι πρόβλημα. Είναι απλά διαφορετικό από τη φλας. Για ένα από τα παιχνίδια μας χρειαζόμασταν να εφαρμόσουμε τη φλας παρόμοια με το Flash και αποφάσισαν ότι θα μπορούσε να χρησιμοποιηθεί ένας προεπιλεγμένος Shader Custom. Παρακάτω είναι ένα παράδειγμα μιας τέτοιας Shader θραύσματος:

// Ειδική παραλλαγή απόψεως, παρόμοια με τη φλας που προσθέτει
// στο χρώμα και δεν πολλαπλασιάζεται. Ένα αρνητικό χρώματος
// πρέπει να παρέχεται για αυτό το Shader να λειτουργεί σωστά, δηλ.
// sprite.Tint σε 0 για να μετατρέψετε ολόκληρο το Sprite σε λευκό.
Ακρίβεια Lowp Float.
διαφορετικό vec2 vtexturecoord;
διαφορετικό Vec4 VCOLOR.
Ομοιόμορφη Sampler2D Usampler.
κενό κύριο (κενό) {
  vec4 f = texture2d (Usampler, vtexturecoord);
  float a = σφιγκτήρα (vcolor.a, 0,00001, 1,0).
  GL_FRAGCOLOR.RGB = F.RGB * VCOLOR.A + CLAMP (1.0 - VCOLOR.RGB / A, 0.0, 1.0) * VCOLOR.A * F.A;
  gl_fragcolor.a = f.a * vcoror.a;
} 

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

 Sprite.Tint = 0x000000; // αυτά τα χρώματα το sprite σε λευκό
Sprite.Tint = 0x00ffff; // αυτό δίνει κόκκινο 

07. Επιθεωρήστε την υπέρβαση

Η αντικατάσταση ενός προεπιλεγμένου Shader μπορεί επίσης να αξιοποιηθεί για να βοηθήσει με το σφάλμα. Παρακάτω έχουμε εξηγήσει πόσο overdraw μπορεί να ανιχνευθεί με ένα τέτοιο shader.

Το υπερβολικό άλογο συμβαίνει όταν πολλά ή όλα τα εικονοστοιχεία στην οθόνη καθίστανται πολλές φορές. Για παράδειγμα, πολλά αντικείμενα που λαμβάνουν το ίδιο μέρος και καθίστανται ένα πάνω από το άλλο. Πόσα εικονοστοιχεία μπορεί να κάνει μια GPU ανά δευτερόλεπτο περιγράφεται ως ποσοστό πλήρωσης. Οι σύγχρονοι gpus της επιφάνειας εργασίας έχουν υπερβολικό ποσοστό πλήρωσης για συνήθη 2D σκοπούς, αλλά οι κινητές είναι πολύ πιο αργές.

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

 Άδειο κύριο (κενό) {
  gl_fragcolor.rgb + = 1,0 / 7.0;
} 

Αυτό το shader φωτίζει τα εικονοστοιχεία που υποβάλλονται σε επεξεργασία. Ο αριθμός 7.0 υποδεικνύει πόσα γράμματα χρειάζονται για να ενεργοποιηθούν τα εικονοστοιχεία λευκά. Μπορείτε να συντονίσετε αυτόν τον αριθμό σύμφωνα με τις προτιμήσεις σας. Με άλλα λόγια, τα ελαφρύτερα εικονοστοιχεία στην οθόνη γράφτηκαν αρκετές φορές και τα λευκά εικονοστοιχεία γράφτηκαν τουλάχιστον επτά φορές.

Αυτός ο Shader βοηθά επίσης να βρει τόσο τα «αόρατα» αντικείμενα που για κάποιο λόγο εξακολουθούν να αποδίδονται και οι Sprites που έχουν υπερβολικές διαφανείς περιοχές γύρω από αυτές που πρέπει να αφαιρεθούν (GPU εξακολουθεί να χρειάζεται να επεξεργάζεται διαφανή εικονοστοιχεία στις υφές σας).

08. Γιατί οι κινητήρες φυσικής είναι οι φίλοι σας

Ένας κινητήρας φυσικής είναι ένα μεσαίο λογισμικό που είναι υπεύθυνο για την προσομοίωση των σωμάτων φυσικής (συνήθως άκαμπτης δυναμικής σώματος) και τις συγκρούσεις τους. Οι κινητήρες φυσικής προσομοιώνουν 2D ή 3D χώρους, αλλά όχι και τα δύο. Ένας τυπικός κινητήρας φυσικής θα παράσχει:

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

Υπάρχει ένα plugin phaser που λειτουργεί καλά για το σκοπό αυτό. Το Box2D χρησιμοποιείται επίσης στον κινητήρα παιχνιδιού ενότητας και το στούντιο του παιχνιδιού 2.

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

09. Εξαγωγή ήχων

Εάν έχετε ένα flash παιχνίδι ήχου μέσα σε ένα αρχείο .fla, τότε η εξαγωγή τους από GUI δεν είναι δυνατή (τουλάχιστον όχι στο Adobe Animate CC 2017) λόγω της έλλειψης επιλογών μενού που εξυπηρετεί το σκοπό αυτό. Αλλά υπάρχει μια άλλη λύση - ένα ειδικό σενάριο που κάνει ακριβώς αυτό:

 Λειτουργία κανονικοποιήστε το όνομα (όνομα) {
  // μετατρέπει ένα όνομα καμήλα στο όνομα Snake_Case
  Επιστρέψτε το όνομα.Replace (/ ([a-z]) / g, '_ $ 1'). Αντικαταστήστε (/ ^ _ /, '') .Tlowercase ();
}
Λειτουργία προβολής (διαδρομή) {
  // κάνει τη διαδρομή αρχείου πιο αναγνώσιμη
  επιστροφή UNESCAPE (PATH) .RePlace ('αρχείο: ///', ''). ('|', ',': ');
}
fl.outputpanel.clear ();
Εάν (FL.GETDOCOGEDDOM (). Βιβλιοθήκη.GetEslectedItems (). Μήκος & GT; 0)
  // Λάβετε μόνο επιλεγμένα στοιχεία
  VAR Library = fl.getdocumentdom (). Βιβλιοθήκη.getEslectedItems ();
αλλού
  // Πάρτε όλα τα στοιχεία
  VAR Library = fl.getdocumentdom (). Βιβλιοθήκη.Items;
// Ζητήστε από τον χρήστη για τον Κατάλογο Προορισμού Εξαγωγών
var root = fl.browseforfolderurl ('Επιλέξτε ένα φάκελο.');
var σφάλματα = 0;
για (var i = 0, i & lt; library.length; i ++) {
  var στοιχείο = βιβλιοθήκη [i];
  εάν (item.itemtype! == 'ήχος')
  να συνεχίσει;
  VAR PATH = root + '/';
  εάν (στοιχείο.Originalcompresstype === 'RAW')
  Διαδρομή + = κανονικοποίησηFilename (item.Name.Split ('') 
) + '.WAV';
  αλλού
  Διαδρομή + = κανονικοποίησηFilename (item.Name);
  var επιτυχία = στοιχείο.exporttofile (διαδρομή);
  Αν (επιτυχία)
  σφάλματα + 1;
  FL.TRACE (DISPLAYPATH (διαδρομή) + ':' + (επιτυχία; 'OK': 'Σφάλμα'));
}
FL.TRACE (σφάλματα + "Σφάλμα (-οί)"); 

Πώς να χρησιμοποιήσετε το σενάριο για την εξαγωγή αρχείων ήχου:

1. Αποθηκεύστε τον παραπάνω κωδικό ως αρχείο .jsfl στον υπολογιστή σας.
2. Ανοίξτε ένα αρχείο .fla με το Adobe Animate.
3. Επιλέξτε Εντολές & GT; Εκτελέστε εντολή από το επάνω μενού και επιλέξτε τη δέσμη ενεργειών στον διάλογο που ανοίγει.
4. Τώρα ένα άλλο αρχείο διαλόγου εμφανίζεται για την επιλογή του καταλόγου προορισμού εξαγωγής.

Εγινε! Θα πρέπει τώρα να έχετε αρχεία WAV στον καθορισμένο κατάλογο. Αυτό που έχει απομείνει να τους μετατρέψει, για παράδειγμα, MP3, OGG ή AAC. (Εάν έχετε αρχεία παιχνιδιών για να διατηρήσετε ασφαλή, αναβάθμιση σε αξιοπρεπή αποθήκευση σύννεφων .).

10. Πώς να χρησιμοποιήσετε mp3s

Η καλή παλιά μορφή MP3 είναι πίσω, καθώς ορισμένα διπλώματα ευρεσιτεχνίας έχουν λήξει και τώρα κάθε πρόγραμμα περιήγησης μπορεί να αποκωδικοποιήσει και να παίξει mp3s. Αυτό κάνει την ανάπτυξη λίγο πιο εύκολη, δεδομένου ότι τελικά δεν υπάρχει ανάγκη να προετοιμάσετε δύο ξεχωριστές μορφές ήχου. Προηγουμένως χρειάζεστε, για παράδειγμα, αρχεία OGG και AAC, ενώ τώρα το MP3 θα αρκεί.

Παρ 'όλα αυτά, υπάρχουν δύο σημαντικά πράγματα που πρέπει να θυμάστε για το MP3:

• Οι MP3 πρέπει να αποκωδικοποιήσουν μετά τη φόρτωση, η οποία μπορεί να είναι χρονοβόρα, ειδικά σε κινητές συσκευές. Εάν δείτε μια παύση μετά τη φόρτωση όλων των ενεργητικών σας, τότε πιθανότατα σημαίνει ότι τα mp3s αποκωδικοποιούνται
• Το Gaeply Playing Looped Mp3s είναι λίγο προβληματικό. Η λύση είναι να χρησιμοποιήσετε το mp3loop, Διαβάστε περισσότερα σε αυτό το άρθρο δημοσιεύτηκε από τη φάση Compu.

Αυτό το άρθρο δημοσιεύθηκε αρχικά σε εξέταση 277 του δημιουργικού σχεδιασμού Web Magazine Web Design. Αγοράστε τεύχος 277 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

• 5 Casual παιχνίδια για τους σχεδιαστές
• Δημιουργήστε το δικό σας webgl φυσικό παιχνίδι
• Κατανοήστε τον αγωγό εισαγωγής ενότητας