Créer un personnage de jeu avec HTML5 et JavaScript - Partie 1 William Malone
Idée de pixels
Tout d'abord, nous commençons par une idée. Pour ce personnage, j'ai choisi de le dessiner sur papier. Je lui voulais être très simple avec quelques détails (par exemple le nez, la bouche). Bien que je ne lésine pas sur la taille de la tête.
L'étape suivante consiste à obtenir notre idée de pixels. Dans ce cas, puisque j'avais un dessin, je scrutais dans le dessin et décrit dans Adobe Illustrator. Je choisis variant thickeness de contours, plus épais sur les bords des parties du corps et plus mince pour les détails. en quelque sorte également au cours du processus de sa tête a encore plus grand.
Ensuite, nous couleur dans les grandes lignes. Garder la conception simple j'ai choisi une couleur unie par partie du corps, avec une nuance supplémentaire en tant que couleur de surlignage pour le détail ajouté.
Nous créons un caractère dynamique que nous créons notre caractère dans des parties distinctes. Pour notre exemple, nous gardons simple et segmenter notre caractère en six parties:
Chaque partie est enregistrée en tant séparée image .png. Nous dessinerons des parties les uns sur les autres afin que nous économisons chacun avec un fond transparent.
Dessiner sur toile HTML5
Tout d'abord, nous créons un nouvel objet pour contenir nos références d'image appelées images. Ensuite, nous charger chacune de nos pièces de caractères via la fonction loadImage avec le paramètre correspondant au nom de la pièce (par exemple leftArm, jambes, etc.). La fonction loadImage crée un nouvel objet d'image pointant vers une image avec le nom du nom de la pièce avec l'extension « .png » et dans le dossier « images ». Il attribue aussi une méthode OnLoad à chaque image donc quand l'image est chargée dans la mémoire il caled la fonction resourceLoaded.
Nous voulons savoir si toutes les images sont chargées afin que nous puissions commencer à dessiner.
Nous créons une variable de couple pour suivre le processus de chargement de l'image: totalResources et numResourcesLoaded. La fonction resourceLoaded incrémente le nombre d'images qui ont été chargées. Lorsque toutes les images sont prêtes, nous commençons une minuterie à l'aide setInterval qui appellera la fonction de redessiner 30 fois par seconde.
Au cours du processus de redessiner la toile sera effacée et toutes les parties sera redessinée. L'ordre de ce processus est important. Nous avons d'abord tirer les parties plus éloignées telles que le bras gauche qui sera couvert par les jambes et le torse de notre caractère.
Nous avons besoin d'un accès au contexte de la toile HTML5 que nous allons dessiner. Pour plus d'informations sur la façon d'accéder à la toile contexte (et une solution de contournement pour IE) se réfèrent à HTML5 Canvas Exemple.
Couche par couche, l'image de chaque partie du corps est positionné et ensuite étiré sur une toile HTML5.
Avant de tirer tout ce que nous d'abord effacer la toile en utilisant l'affectation bizarre canvas.width = canvas.width. Ensuite, nous puisons chaque image en utilisant la méthode drawImage de contexte spécifiant trois paramètres: la référence de l'image, sa position x, sa position y. Les positions d'image sont par rapport au coin supérieur gauche de la toile.
Voici ce que la toile ressemble à ce jour:
Pour ajouter les yeux, nous allons dessiner deux ovales. Nous aurions pu ajouter les yeux aux yeux à l'image de la tête, mais nous voulons qu'ils soient dynamiques pour permettre à notre premier comportement: clignotant.
Nous appelons une fonction drawEllipse pour chaque oeil à la fin de la fonction de redessiner. Nous voulons au-dessus de toutes les autres images de partie du corps.
Le drawEllipse prend quatre paramètres spécifiant la position et les dimensions de l'ellipse. Pour plus d'informations sur la fonction drawEllipse voir le bref: Comment dessiner une ellipse sur HTML5 Canvas.
Notre notre version correspond à caractère numérique d'origine moins l'ombre.
Nous créons l'ombre avec un ovale à nos pieds des personnages.
Nous voulons que l'ombre derrière toutes les autres couches d'image sp une ellipse est dessinée au début de la fonction de redessiner.
Maintenant, nous avons sur toile HTML5 ce que nous avions avec un programme de dessin. Rappelez-vous, la toile HTML5 est dynamique. Faisons usage de cela.
Le but de ce processus est de mettre à jour la breathAmt variables que nous utiliserons pour représenter la respiration constante de notre caractère sous la forme d'une augmentation subtile et la chute de la tête et les bras.
Pour insuffler de la vie dans notre tas statique d'images, nous nous tournons vers notre fonction de redessiner. Nous l'aide ou la variable breathAmt nous varions la position verticale de certaines images de partie du corps.
Nous soustrayons la position verticale par la valeur de la breathAmt variable pour toutes les pièces que nous voulons osciller. L'ombre sera le reflet du mouvement vertical dans un changement de largeur.
Le temps est venu pour notre premier comportement de cette série. Après un certain laps de temps, nous ferons notre clignement de caractère.
Nous avons ajouté plusieurs GLOBALS:
- maxEyeHeight. hauteur des yeux lorsque nos yeux de caractère sont ouverts.
- curEyeHeight. hauteur des yeux tout en courant clignote.
- eyeOpenTime. Milliseconde depuis dernier clignotement.
- timeBtwBlinks. Entre clignote. Milliseconde
- blinkUpdateTime. Avant la mise à jour milliseconde état clignote.
- blinkTimer. Appelle la fonction updateBlink toutes les millisecondes blinkUpdateTime.
Mettre à jour la fonction de redessiner si la hauteur correspond à la nouvelle curEyeHeight variables
Tous les quelques instants, nous vérifions pour voir si son temps à clignoter.
Exemple de
Voici un exemple de travail. Le code exemple est disponible en téléchargement ci-dessous.