Com fer un joc flash: 4 passos (amb imatges)

Taula de continguts:

Com fer un joc flash: 4 passos (amb imatges)
Com fer un joc flash: 4 passos (amb imatges)
Anonim

Flash és un format popular per als videojocs basats en navegadors que es veuen en llocs com Newgrounds i Kongregate. Tot i que el format Flash s’utilitza a poc a poc davant de les creixents aplicacions per a mòbils, encara s’estan fent molts jocs de qualitat. Flash utilitza ActionScript, un llenguatge fàcil d’aprendre que us permet controlar els objectes de la pantalla. Aquest article de wikiHow us ensenyarà a aprendre a crear un joc Flash bàsic.

Passos

Part 1 de 3: Inici del procés

381698 1
381698 1

Pas 1. Dissenya el teu joc

Abans de començar a codificar, us ajudarà a tenir una idea aproximada del que voleu que faci el vostre joc. Flash és el més adequat per a jocs senzills, així que concentreu-vos a crear un joc que només tingui algunes mecàniques perquè el jugador es preocupi. Intenteu tenir en compte un gènere bàsic i algunes mecàniques abans de començar a fer prototips. Consulteu aquesta guia per obtenir més detalls sobre les fases de planificació del desenvolupament de videojocs. Els jocs Flash habituals inclouen:

  • Corredors sense fi: aquests jocs mouen automàticament el personatge i el jugador és responsable de saltar per sobre d’obstacles o d’interactuar amb el joc. Normalment, el jugador només té una o dues opcions quan es tracta de controls.
  • Brawlers: normalment són desplaçaments laterals i encarreguen al jugador de derrotar enemics perquè progressi. El personatge del jugador sovint té diversos moviments que poden realitzar per derrotar els enemics.
  • Trencaclosques: aquests jocs demanen al jugador que resolgui trencaclosques per superar cada nivell. Aquests poden anar des de l'estil Match-3, com ara Bejeweled, fins a la resolució de trencaclosques més complexa que normalment es troba als jocs d'aventura.
  • RPG: aquests jocs se centren en el desenvolupament i progressió de personatges i fan que el jugador es desplaci per diversos entorns amb una gran varietat de tipus d’enemic. La mecànica de combat varia enormement de RPG a RPG, però moltes es basen en torns. Els jocs de rol poden ser significativament més difícils de codificar que un simple joc d'acció.
381698 2
381698 2

Pas 2. Apreneu a què destaca Flash

Flash és el més adequat per a jocs 2D. És possible crear jocs 3D en Flash, però és molt avançat i requereix un coneixement significatiu de l’idioma. Gairebé tots els jocs Flash amb èxit han estat 2D.

Els jocs flash també són els més adequats per a sessions ràpides. Això es deu al fet que la majoria de jugadors de jocs Flash juguen quan tenen una mica de temps lliure, com ara els descansos, és a dir, les sessions de joc solen ser de 15 minuts o menys

381698 3
381698 3

Pas 3. Familiaritzeu-vos amb el llenguatge ActionScript3 (AS3)

Els jocs flash estan programats en AS3 i haureu de tenir una comprensió bàsica de com funciona per crear un joc amb èxit. Podeu crear un joc senzill amb una comprensió rudimentària de com codificar a AS3.

Hi ha diversos llibres sobre ActionScript disponibles a Amazon i altres botigues, juntament amb un gran nombre de tutorials i exemples en línia

381698 4
381698 4

Pas 4. Descarregueu Flash Professional

Aquest programa costa diners, però és la millor manera de crear programes Flash ràpidament. Hi ha altres opcions disponibles, incloses les opcions de codi obert, però sovint no tenen compatibilitat o triguen més a realitzar les mateixes tasques.

Flash Professional és l'únic programa que necessiteu per començar a crear jocs

Part 2 de 3: Escriure un joc bàsic

381698 5
381698 5

Pas 1. Comprendre els blocs bàsics del codi AS3

Quan creeu un joc bàsic, hi haurà diverses estructures de codi diferents que faràs servir. Hi ha tres parts principals de qualsevol codi AS3:

  • Variables: així s’emmagatzemen les vostres dades. Les dades poden ser números, paraules (cadenes), objectes i molt més. Les variables es defineixen amb el codi var i han de ser una paraula.

    var playerHealth: Nombre = 100; // "var" designa que esteu definint una variable. // "playerHealth" és el nom de la variable. // "Número" és el tipus de dades. // "100" és el valor assignat a la variable. // Totes les línies d’escriptures d’accions acaben amb ";"

  • Gestors d’esdeveniments: els gestors d’esdeveniments cerquen coses específiques i, a continuació, indiquen a la resta del programa. Això és essencial per a l'entrada i repetició de codi del jugador. Els gestors d'esdeveniments solen fer servir funcions.

    addEventListener (MouseEvent. CLICK, swingSword); // "addEventListener ()" defineix el gestor d'esdeveniments. // "MouseEvent" és la categoria d'entrada que s'està escoltant. // ". CLICK" és l'esdeveniment específic de la categoria MouseEvent. // "swingSword" és la funció que s'anomena quan es produeix l'esdeveniment.

  • Funció: seccions de codi assignades a una paraula clau que es pot demanar més endavant. Les funcions gestionen la major part de la programació del joc i els jocs complexos poden tenir centenars de funcions, mentre que els jocs més simples només en poden tenir uns quants. Poden estar en qualsevol ordre, ja que només funcionen quan se’ls demana.

    funció swingSword (e: MouseEvent): buit; {// El vostre codi va aquí} // "funció" és la paraula clau que apareix al començament de cada funció. // "swingSword" és el nom de la funció. // "e: MouseEvent" és un paràmetre afegit que mostra que la funció // es crida des de l'oient d'esdeveniments. // ": void" és el valor que retorna la funció. Si no es torna cap valor //, utilitzeu: void.

381698 6
381698 6

Pas 2. Creeu un objecte

ActionScript s’utilitza per afectar objectes de Flash. Per fer un joc, haureu de crear objectes amb els quals el jugador interactuarà. En funció de les guies que llegiu, es pot anomenar objectes com a sprites, actors o clips de pel·lícules. Per a aquest senzill joc, crearàs un rectangle.

  • Obriu Flash Professional si encara no ho heu fet. Creeu un nou projecte ActionScript 3.
  • Feu clic a l'eina de dibuix Rectangle del tauler Eines. Aquest tauler pot estar a diferents ubicacions, segons la configuració de Flash Professional. Dibuixa un rectangle a la finestra de l'escena.
  • Seleccioneu el rectangle amb l'eina Selecció.
381698 7
381698 7

Pas 3. Assigneu propietats a l'objecte

Amb el rectangle de creació recent seleccionat, obriu el menú Modifica i seleccioneu "Converteix a símbol". També podeu prémer F8 com a drecera. A la finestra "Converteix a símbol", assigna a l'objecte un nom fàcilment recognoscible, com ara "enemic".

  • Cerqueu la finestra Propietats. A la part superior de la finestra, hi haurà un camp de text en blanc amb l'etiqueta "Nom de la instància" quan passeu el cursor per sobre. Posa-li el mateix nom que el vas convertir en un símbol ("enemic"). Això crea un nom únic amb el qual es pot interactuar mitjançant el codi AS3.
  • Cada "instància" és un objecte separat que pot afectar el codi. Podeu copiar la instància ja creada diverses vegades fent clic a la pestanya Biblioteca i arrossegant la instància a l'escena. Cada vegada que n'afegiu un, es canviarà el nom per designar que es tracta d'un objecte separat ("enemic", "enemic1", "enemic2", etc.).
  • Quan feu referència als objectes del codi, només cal que utilitzeu el nom de la instància, en aquest cas "enemic".
381698 8
381698 8

Pas 4. Obteniu informació sobre com podeu canviar les propietats d'una instància

Un cop feta una instància, podeu ajustar les propietats mitjançant AS3. Això us permet moure l'objecte per la pantalla, canviar-ne la mida, etc. Podeu ajustar les propietats escrivint la instància, seguit d'un punt ".", Seguit de la propietat, seguit del valor:

  • enemic.x = 150; Això afecta la posició de l'objecte enemic sobre l'eix X.
  • enemic.y = 150; Això afecta la posició de l'objecte enemic sobre l'eix Y. L'eix Y es calcula des de la part superior de l'escena.
  • enemic.rotació = 45; Gira l'objecte enemic 45 ° en sentit horari.
  • enemic.escalaX = 3; Estén l’amplada de l’objecte enemic en un factor de 3. Un número (-) capgirarà l’objecte.
  • enemic.escalaY = 0,5; Aixeca l'objecte a la meitat de la seva alçada.
381698 9
381698 9

Pas 5. Examineu l'ordre trace ()

Aquesta ordre retornarà els valors actuals per a objectes específics i és útil per determinar si tot s'està executant com hauria de ser. És possible que no vulgueu incloure l'ordre Trace al vostre codi final, però és útil per a la depuració.

381698 10
381698 10

Pas 6. Construïu un joc bàsic amb la informació anterior

Ara que ja teniu una comprensió bàsica de les funcions bàsiques, podeu crear un joc on l’enemic canvia de mida cada cop que feu clic a sobre, fins que es queda sense salut.

var enemicHP: Nombre = 100; // estableix la HP (salut) de l'enemic a 100 al principi. var playerAttack: Nombre = 10; // estableix el poder d'atac dels jugadors quan fan clic. enemic.addEventListener (MouseEvent. CLICK, attackEnemy); // En afegir aquesta funció directament a l'objecte enemic, // la funció només es produeix quan es fa clic a l'objecte mateix, en lloc de fer clic a qualsevol lloc de la pantalla. setEnemyLocation (); // Això crida a la següent funció per situar l'enemic // a la pantalla. Això passa quan comença el joc. funció setEnemyLocation (): void {enemic.x = 200; // mou l'enemic a 200 píxels des de l'esquerra de la pantalla enemic.y = 150; // mou l'enemic cap avall a 150 píxels des de la part superior de la pantalla enemic.rotació = 45; // fa girar l'enemic 45 graus en el sentit de les agulles del rellotge ("el valor x de l'enemic és", enemic.x, "i el valor y de l'enemic és", enemic.y); // Mostra la posició actual de l'enemic per depurar} funció attackEnemy (e: MouseEvent): void // Es crea la funció d'atac quan es fa clic a l'enemic {enemicHP = enemicHP - jugadorAttac; // Resta el valor d'atac del valor HP, // resultant en el nou valor HP. enemic.escalaX = enemicHP / 100; // Canvia l'amplada en funció del nou valor HP. // Es divideix per 100 per convertir-lo en decimal. enemic.escalaY = enemicHP / 100; // Canvia l'alçada en funció de la nova traça de valor d'HP ("L'enemic té", enemicHP, "HP queda"); // Mostra quanta HP li queda a l'enemic}

381698 11
381698 11

Pas 7. Proveu-ho

Un cop hàgiu creat el codi, podreu provar el vostre nou joc. Feu clic al menú Control i seleccioneu Prova la pel·lícula. El vostre joc començarà i podeu fer clic a l’objecte enemic per canviar-ne la mida. Les vostres sortides de seguiment es mostraran a la finestra de sortida.

Part 3 de 3: Aprenentatge de tècniques avançades

381698 12
381698 12

Pas 1. Apreneu com funcionen els paquets

ActionScript es basa en Java i utilitza un sistema de paquets molt similar. Els paquets us permeten emmagatzemar variables, constants, funcions i altra informació en fitxers separats i després importar-los al programa. Són especialment útils si voleu utilitzar un paquet desenvolupat per algú que us faciliti la creació del joc.

Consulteu aquesta guia per obtenir més detalls sobre com funcionen els paquets a Java

381698 13
381698 13

Pas 2. Construeix les carpetes del projecte

Si creeu un joc amb diverses imatges i clips de so, voldreu crear una estructura de carpetes per al vostre joc. Això us permetrà emmagatzemar fàcilment els vostres diferents elements, així com emmagatzemar diferents paquets on convocar.

  • Creeu una carpeta base per al vostre projecte. A la carpeta base, haureu de tenir una carpeta "img" per a tots els vostres recursos artístics, una carpeta "snd" per a tots els vostres recursos sonors i una carpeta "src" per a tots els paquets i el codi del vostre joc.
  • Creeu una carpeta "Joc" a la carpeta "src" per emmagatzemar el fitxer Constants.
  • Aquesta estructura en particular no és necessària, però és una manera senzilla d'organitzar el vostre treball i materials, especialment per a projectes més grans. Per al senzill joc explicat anteriorment, no necessitareu crear cap directori.
381698 14
381698 14

Pas 3. Afegiu so al vostre joc

Un joc sense so ni música es tornarà avorrit ràpidament per al jugador. Podeu afegir so a objectes a Flash mitjançant l'eina Capes. Consulteu aquesta guia per obtenir més detalls.

381698 15
381698 15

Pas 4. Creeu un fitxer de constants

Si el vostre joc té molts valors que seguiran sent els mateixos durant tot el joc, podeu crear un fitxer Constants per emmagatzemar-los tots en un sol lloc perquè pugueu trucar-hi fàcilment. Les constants poden incloure valors com la gravetat, la velocitat del jugador i qualsevol altre valor al qual pugueu necessitar trucar repetidament.

  • Si creeu un fitxer Constants, caldrà col·locar-lo a una carpeta del projecte i importar-lo com a paquet. Per exemple, suposem que creeu un fitxer Constants.as i el col·loqueu al directori de jocs. Per importar-lo, utilitzeu el codi següent:

    paquet {importa el joc. *; }

381698 16
381698 16

Pas 5. Mira els jocs d'altres persones

Tot i que molts desenvolupadors no revelaran el codi dels seus jocs, hi ha una gran varietat de tutorials de projectes i altres projectes oberts que us permetran veure el codi i com interactua amb els objectes del joc. Aquesta és una manera fantàstica d’aprendre algunes tècniques avançades que poden ajudar a destacar el vostre joc.

Recomanat: