Comment faire un jeu flash : 4 étapes (avec photos)

Table des matières:

Comment faire un jeu flash : 4 étapes (avec photos)
Comment faire un jeu flash : 4 étapes (avec photos)

Vidéo: Comment faire un jeu flash : 4 étapes (avec photos)

Vidéo: Comment faire un jeu flash : 4 étapes (avec photos)
Vidéo: Вебинар: "Татуаж. Плотная стрелка" 2024, Novembre
Anonim

Flash est un format populaire pour les jeux vidéo sur navigateur, tels que des sites comme Newgrounds et Kongregate. Bien que le format Flash ait tendance à être sous-utilisé dans les applications mobiles, il existe encore de nombreux jeux de qualité qui continuent d'être créés à l'aide de Flash. Flash utilise ActionScript, un langage facile à apprendre et qui permet de contrôler les objets à l'écran. Voir l'étape 1 ci-dessous pour apprendre à créer un jeu Flash de base.

Étape

Partie 1 sur 3: Commencer

381698 1
381698 1

Étape 1. Concevez le jeu

Avant de commencer à coder, créez une idée approximative de votre jeu. Flash est le mieux adapté aux jeux simples, alors concentrez-vous sur la création de jeux qui ont très peu de mécanismes de jeu. Définissez le genre et les mécanismes de jeu avant de commencer le prototype. Les jeux flash courants incluent:

  • Coureur sans fin: Le jeu déplace automatiquement les personnages. Les joueurs doivent sauter par-dessus des obstacles ou interagir avec le jeu. Les joueurs n'ont généralement qu'une ou deux options de contrôle.
  • Combattants: Le jeu est généralement à défilement horizontal. Les joueurs doivent vaincre l'ennemi pour avancer. Le personnage du joueur a plusieurs mouvements pour vaincre l'ennemi.
  • Puzzles: les joueurs doivent résoudre des puzzles pour battre chaque niveau. Du style consistant à rassembler des objets uniques comme Bejeweled, aux énigmes complexes comme les jeux d'aventure.
  • RPG: Le jeu se concentre sur le développement et la progression du personnage. Les joueurs traversent de nombreuses situations différentes ainsi que différents types d'ennemis. Les mécanismes de combat varient considérablement, mais beaucoup de ces types sont au tour par tour. Les RPG sont nettement plus difficiles à coder que les simples jeux d'action.
381698 2
381698 2

Étape 2. Comprenez quels sont les avantages du flash

Flash est le plus approprié pour les jeux 2D. Flash peut être fait pour créer des jeux 3D, mais c'est très compliqué et nécessite plus de connaissances. Presque tous les jeux Flash à succès ont un format 2D.

Les jeux flash sont également les mieux adaptés aux sessions rapides. En effet, la plupart des joueurs jouent lorsqu'ils ont peu de temps libre, comme les pauses, ce qui signifie que les sessions de jeu durent généralement 15 minutes au maximum

381698 3
381698 3

Étape 3. Familiarisez-vous avec le langage ActionScript3 (AS3)

Les jeux flash sont programmés en AS3, et vous devrez avoir une compréhension de base de leur fonctionnement pour réussir à créer des jeux. Vous pouvez créer des jeux simples avec une compréhension de base du code en AS3.

Il existe de nombreux livres ActionScript disponibles sur Amazon et dans d'autres magasins, ainsi qu'une variété de didacticiels et d'événements sur Internet

381698 4
381698 4

Étape 4. Téléchargez Flash Professional

Ce programme est un peu cher, mais il est très bon pour créer rapidement des programmes flash. Il existe plusieurs autres options de programme, y compris celles open source, mais elles sont généralement moins compatibles ou prennent plus de temps pour accomplir la même tâche.

Flash Professional est le seul programme dont vous aurez besoin pour commencer à créer des jeux

Partie 2 sur 3: Écrire des jeux de base

381698 5
381698 5

Étape 1. Comprenez les blocs de construction de base du code AS3

Le jeu de base a plusieurs structures de code différentes. Le code AS3 comporte trois parties principales:

  • Variables - Il s'agit de la façon dont les données sont stockées. Les données peuvent être des nombres, des mots (chaînes), des objets, etc. Les variables sont définies par le code var et doivent être constituées d'un mot.

    var playerHealth:Number = 100; // "var" indique que vous définissez une variable. // "playerHealth" est le nom de la variable. // "Nombre" est le type de données. // "100" est la valeur attribuée à la variable. // Toutes les lignes d'actionscript se terminent par ";"

  • Gestionnaire d'événements - le gestionnaire d'événements recherche certaines choses qui se sont produites, puis notifie le reste du programme. Ceci est important pour l'entrée du joueur et le code répété. Les gestionnaires d'événements appellent généralement des fonctions.

    addEventListener(MouseEvent. CLICK, swingSword); // "addEventListener()" définit un gestionnaire d'événement. // "MouseEvent" est la catégorie d'entrée écoutée. // ". CLICK" Est un événement spécifié dans la catégorie MouseEvent. // "swingSword" est la fonction qui est appelée lorsque l'événement se produit.

  • Fonction - Un morceau de code qui est affecté à un mot-clé et peut être appelé plus tard. Les fonctions gèrent la plupart des programmes de jeu, et un jeu complexe peut avoir des centaines de fonctions. Les fonctions peuvent être dans n'importe quel ordre car elles ne fonctionnent que lorsqu'elles sont appelées.

    function swingSword(e:MouseEvent):void; { //Votre code ici } // "function" est le mot-clé qui apparaît au début de chaque fonction. // "swingSword" est le nom de la fonction. // "e:MouseEvent" est un paramètre ajouté, indiquant // que la fonction a été appelée depuis l'écouteur d'événement. // ":void" est la valeur renvoyée par la fonction. // Si aucune valeur n'est renvoyée, utilisez:void.

381698 6
381698 6

Étape 2. Créez un objet

ActionScript est utilisé pour affecter des objets dans Flash. Pour créer un jeu, vous devez créer des objets avec lesquels les joueurs peuvent interagir. Selon le guide que vous lisez, les objets peuvent être appelés sprites, acteurs ou films. Pour ce jeu simple, vous allez créer un rectangle.

  • Ouvrez Flash Professionnel. Créez un nouveau projet ActionScript 3.
  • Cliquez sur l'outil de dessin Rectangle dans le panneau Outils. Ce panneau peut se trouver à un emplacement différent, selon la configuration de Flash Professional. Dessinez un rectangle dans la fenêtre de la scène.
  • Sélectionnez le rectangle à l'aide de l'outil Sélection.
381698 7
381698 7

Étape 3. Définissez les propriétés de l'objet

Sélectionnez le rectangle nouvellement sélectionné, allez dans le menu Modifier et sélectionnez "Convertir en symbole". Vous pouvez également appuyer sur F8 comme raccourci. Dans la fenêtre "Convertir en symbole", donnez à l'objet un nom facilement reconnaissable, par exemple "ennemi".

  • Localisez la fenêtre Propriétés. En haut de la fenêtre, il y aura un champ de texte vide intitulé "Nom de l'instance" lorsque vous passez la souris dessus. Donnez-lui le même nom que lorsque vous l'avez transformé en symbole ("ennemi"). Cela crée un nom unique pour interagir via le code AS3.
  • Chaque "événement" est un objet distinct qui peut être affecté par le code. Vous pouvez copier des événements qui ont été créés plusieurs fois en cliquant sur l'onglet Bibliothèque et en les faisant glisser dans la scène. A chaque fois qu'un événement est ajouté, son nom change pour indiquer que l'objet est distinct ("ennemi", "ennemi1", "ennemi2", etc.).
  • Lorsque vous faites référence à un objet dans le code, utilisez simplement le nom de l'événement, dans ce cas "ennemi".
381698 8
381698 8

Étape 4. Apprenez à modifier les propriétés d'un événement

Une fois l'événement créé, vous pouvez définir ses propriétés via AS3. Cela vous permet de déplacer des objets, de les redimensionner, etc. Vous pouvez personnaliser une propriété en tapant l'occurrence, suivie d'un point ".", puis suivie de la propriété, suivie de la valeur:

  • ennemi.x = 150; Cela affecte la position des objets ennemis sur l'axe X.
  • ennemi.y = 150; Cela affecte la position des objets ennemis sur l'axe Y. L'axe Y est calculé à partir du haut de la scène.
  • ennemi.rotation = 45; Fait pivoter les objets ennemis de 45° dans le sens des aiguilles d'une montre.
  • ennemi.scaleX = 3; Étire la largeur de l'objet ennemi par un multiple de 3. Le signe (-) renversera l'objet.
  • ennemi.échelleY = 0,5; Modifie la hauteur de l'objet à la moitié de sa hauteur actuelle.
381698 9
381698 9

Étape 5. Observez la commande trace()

Cette commande renverra la valeur actuelle de l'objet spécifié et est utile pour déterminer si tout fonctionne comme il se doit. Vous n'inclurez probablement pas la commande Trace dans votre code final, mais elle peut être utile pour localiser la source du code ayant échoué.

381698 10
381698 10

Étape 6. Construisez le jeu de base en utilisant les informations ci-dessus

Vous avez maintenant une compréhension de base des fonctions de base. Vous pouvez créer un jeu où chaque fois qu'un ennemi est cliqué, la taille diminuera, jusqu'à ce que l'ennemi soit détruit

var ennemiHP:Nombre = 100; // Définit les HP (santé) de l'ennemi à 100 au début de la partie. var playerAttack:Number=10; // Définit la puissance d'attaque du joueur lorsqu'il clique. ennemi.addEventListener(MouseEvent. CLICK, attackEnemy); // En ajoutant cette fonction directement à l'objet ennemi, // cette fonction ne se produit que lorsque l'objet lui-même est // cliqué, et non lorsqu'il clique n'importe où sur l'écran. setEnemyLocation(); // Appelle la fonction suivante pour placer l'ennemi // sur l'écran. Cela se produit lorsque le jeu démarre. function setEnemyLocation():void { ennemi.x = 200; // Déplace l'ennemi à 200 pixels de la gauche de l'écran ennemi.y = 150; // Déplace l'ennemi de 150 pixels vers le bas depuis le haut de l'écran ennemi.rotation = 45; // Faire pivoter l'ennemi de 45 degrés dans le sens des aiguilles d'une montre("la valeur x de l'ennemi est", ennemi.x, "et la valeur y de l'ennemi est", ennemi.y); // Affiche la position actuelle de l'ennemi pour trouver la source de l'erreur } function attackEnemy (e:MouseEvent):void // Crée une fonction d'attaque lorsque l'on clique sur l'ennemi { ennemiHP = ennemiHP - playerAttack; // Soustrait la valeur d'attaque de la valeur HP, // Génère une nouvelle valeur HP. ennemi.scaleX = ennemiHP / 100; // Modifie la largeur en fonction de la nouvelle valeur HP. // La valeur est divisée par 100 puis convertie en nombre décimal. ennemi.scaleY=ennemiHP / 100; // Changer la hauteur en fonction de la nouvelle trace de la valeur HP ("Les ennemis ont", ennemiHP, "HP restant"); // Affiche combien de HP il reste à l'ennemi }

381698 11
381698 11

Étape 7. Essayez-le

Une fois que vous avez codé, vous pouvez tester ce nouveau jeu. Cliquez sur le menu Contrôle et sélectionnez Tester l'animation. Le jeu démarre et vous pouvez cliquer sur un objet ennemi pour le redimensionner. La sortie Trace sera affichée dans la fenêtre Sortie.

Partie 3 sur 3: Apprendre des techniques avancées

381698 12
381698 12

Étape 1. Découvrez comment fonctionnent les packages

ActionScript est basé sur Java et utilise un système de packages très similaire. Avec les packages, vous pouvez stocker des variables, des constantes, des fonctions et d'autres informations dans des fichiers séparés, puis importer ces fichiers dans le programme. Ceci est particulièrement utile si vous souhaitez utiliser des packages développés par d'autres personnes qui facilitent la création de jeux.

Recherchez un guide sur Wikihow pour plus de détails sur le fonctionnement des packages en Java

381698 13
381698 13

Étape 2. Créez le dossier du projet

Si vous créez un jeu qui contient des images et des clips audio, créez une structure de dossiers dans le jeu. Vous trouverez plus facile de stocker différents types d'éléments, ainsi que d'enregistrer différents packages à appeler.

  • Créez un dossier de base pour votre projet. Dans le dossier de base, créez un dossier "img" pour toutes les ressources artistiques, un dossier "snd" pour toutes les ressources sonores et un dossier "src" pour tous les packages de jeu et de code.
  • Créez un dossier « Jeux » dans le dossier « src » pour stocker le fichier Constants.
  • Cette structure particulière n'est pas obligatoire, mais facilitera l'organisation du travail de tous les matériaux, notamment pour les grands projets. Pour le jeu simple décrit ci-dessus, vous n'avez pas besoin de créer de répertoires.
381698 14
381698 14

Étape 3. Ajoutez du son au jeu

Les jeux sans son ni musique ennuieront rapidement les joueurs. Vous pouvez ajouter du son aux objets à l'aide de l'outil Calques.

381698 15
381698 15

Étape 4. Créez le fichier Constants

Si votre jeu a beaucoup de valeurs qui resteront les mêmes tout au long du jeu, vous pouvez créer un fichier Constants pour les rassembler toutes au même endroit afin qu'elles puissent être facilement invoquées. Les constantes peuvent inclure des valeurs telles que la gravité, la vitesse du joueur et d'autres valeurs qui peuvent devoir être appelées à plusieurs reprises.

  • Si vous avez créé un fichier Constants, placez-le dans un dossier du projet, puis importez-le en tant que package. Supposons que vous créez un fichier Constants.as et que vous le placez dans le dossier games. Pour l'importer, utilisez le code suivant:

    package { import Game.*; }

381698 16
381698 16

Étape 5. Regardez le jeu des autres

Bien que de nombreux développeurs ne divulguent pas le code de leur jeu, il existe une variété de projets de didacticiels et d'autres projets open source qui vous permettront de visualiser le code et d'interagir avec les objets du jeu. C'est un excellent moyen d'apprendre une variété de techniques avancées qui peuvent aider votre jeu à se démarquer.

Conseillé: