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)

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

Vídeo: Com fer un joc flash: 4 passos (amb imatges)
Vídeo: Omens Above | Critical Role | Campaign 3, Episode 19 2024, Maig
Anonim

Flash és un format popular per als videojocs del navegador, com ara llocs com Newgrounds i Kongregate. Tot i que el format Flash tendeix a ser infrautilitzat en aplicacions mòbils, encara hi ha molts jocs de qualitat que es continuen fent mitjançant Flash. Flash utilitza ActionScript, un llenguatge fàcil d’aprendre i que proporciona control sobre els objectes de la pantalla. Vegeu el pas 1 següent per obtenir informació sobre com crear un joc Flash bàsic.

Pas

Part 1 de 3: Introducció

381698 1
381698 1

Pas 1. Dissenya el joc

Abans de començar a codificar, creeu una idea aproximada del vostre joc. Flash és el més adequat per a jocs senzills, així que concentreu-vos en la creació de jocs que tinguin molt poques mecàniques de joc. Definiu el gènere i la mecànica del joc abans d’iniciar el prototip. Els jocs flash més habituals inclouen:

  • Corredor sense fi: el joc mou personatges automàticament. Els jugadors han de saltar per sobre d’obstacles o interactuar amb el joc. Els jugadors solen tenir només una o dues opcions de control.
  • Fighters: el joc sol ser desplaçament lateral. Els jugadors han de derrotar l’enemic per avançar. El personatge del jugador té diversos moviments per derrotar l’enemic.
  • Trencaclosques: els jugadors han de resoldre trencaclosques per superar cada nivell. Començant des de l’estil de reunir objectes de tres tipus com Bejeweled, fins a trencaclosques complexos com els jocs d’aventures.
  • RPG: el joc se centra en el desenvolupament i el progrés dels personatges. Els jugadors es mouen per diferents situacions i per diferents tipus d’enemics. La mecànica de combat varia molt, però molts d’aquests tipus es basen en torns. Els jocs de rol són significativament més difícils de codificar que els jocs d’acció simples.
381698 2
381698 2

Pas 2. Compreneu quins són els avantatges del flash

Flash és el més adequat per a jocs en 2D. Es pot fer Flash per crear jocs en 3D, però és molt complicat i requereix més coneixements. Gairebé tots els jocs Flash amb èxit tenen un format 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 juguen quan tenen poc temps lliure, com ara descansos, cosa que significa que les sessions de joc solen durar com a màxim 15 minuts

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 funcionen per tenir èxit en la creació de jocs. Podeu crear jocs senzills amb una comprensió bàsica del codi a AS3.

Hi ha molts llibres ActionScript disponibles a Amazon i altres botigues, juntament amb una gran varietat de tutorials i esdeveniments a Internet

381698 4
381698 4

Pas 4. Descarregueu Flash Professional

Aquest programa és una mica car, però és molt bo per crear programes flash ràpidament. Hi ha diverses altres opcions de programa, incloses les de codi obert, però generalment són menys compatibles o triguen més a completar la mateixa tasca.

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

Part 2 de 3: Escriure jocs bàsics

381698 5
381698 5

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

El joc base té diverses estructures de codi diferents. El codi AS3 té tres parts principals:

  • Variables: es tracta de com s’emmagatzemen les 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 consistir en una paraula.

    var playerHealth: Nombre = 100; // "var" indica 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 ";"

  • Gestor d'esdeveniments: el gestor d'esdeveniments busca certes coses que han passat i, a continuació, notifica a la resta del programa. Això és important per a l'entrada del jugador i el codi repetit. Els gestors d'esdeveniments solen trucar a funcions.

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

  • Funció: un tros de codi que s’assigna a una paraula clau i es pot trucar més endavant. Les funcions gestionen la majoria de programació de jocs i un joc complex pot tenir centenars de funcions. Les funcions poden estar en qualsevol ordre perquè només funcionen quan es criden.

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

381698 6
381698 6

Pas 2. Creeu un objecte

ActionScript s’utilitza per afectar objectes de Flash. Per crear un joc, heu de crear objectes amb els quals els jugadors puguin interactuar. Depenent de la guia que llegiu, es pot anomenar objectes com a sprites, actors o pel·lícules. Per a aquest senzill joc, crearà un rectangle.

  • Obre Flash Professional. Creeu un nou projecte ActionScript 3.
  • Feu clic a l'eina de dibuix Rectangle al tauler Eines. Aquest tauler pot estar en una ubicació diferent, 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. Definiu les propietats de l'objecte

Seleccioneu el rectangle recentment seleccionat, aneu al menú Modifica i seleccioneu "Converteix a símbol". També podeu prémer F8 com a drecera. A la finestra "Converteix a símbol", doneu a l'objecte un nom fàcilment recognoscible, per exemple "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 ratolí per sobre. Posa-li el mateix nom que quan el converties en símbol ("enemic"). Això crea un nom únic per interactuar mitjançant el codi AS3.
  • Cada "esdeveniment" és un objecte separat que pot afectar el codi. Podeu copiar esdeveniments creats diverses vegades fent clic a la pestanya Biblioteca i arrossegant-los a l'escena. Cada vegada que s'afegeix un esdeveniment, el seu nom canvia per indicar que l'objecte està separat ("enemic", "enemic1", "enemic2", etc.).
  • Quan feu referència a un objecte en codi, només cal que utilitzeu el nom de l'esdeveniment, en aquest cas "enemic".
381698 8
381698 8

Pas 4. Apreneu a canviar les propietats d'un esdeveniment

Un cop creat l'esdeveniment, podeu establir-ne les propietats mitjançant AS3. Això us permet moure objectes, redimensionar-los, etc. Podeu personalitzar una propietat escrivint l’ocurrència, seguit d’un punt ".", Seguit de la propietat, seguit del valor:

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

Pas 5. Observeu l'ordre trace ()

Aquesta ordre retornarà el valor actual de l'objecte especificat i és útil per determinar si tot funciona com hauria de ser. Probablement no inclourà l’ordre Trace al codi final, però pot ser útil per localitzar la font del codi fallit.

381698 10
381698 10

Pas 6. Construeix el joc base utilitzant la informació anterior

Ara teniu una comprensió bàsica de les funcions bàsiques. Podeu fer un joc on cada cop que feu clic a un enemic la mida disminuirà fins que l’enemic sigui destruït

var enemicHP: Nombre = 100; // Estableix la potència de l'enemic (salut) de 100 a l'inici del joc. var playerAttack: Nombre = 10; // Estableix la quantitat d'atac del jugador quan fa clic. enemic.addEventListener (MouseEvent. CLICK, attackEnemy); // En afegir aquesta funció directament a l'objecte enemic, // aquesta funció només es produeix quan es fa clic a l'objecte mateix i no quan fa clic en qualsevol lloc de la pantalla. setEnemyLocation (); // 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 200 píxels de l'esquerra de la pantalla enemic.y = 150; // Mou l'enemic 150 píxels cap avall des de la part superior de la pantalla enemic.rotació = 45; // Gireu 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 trobar la font de l'error} funció attackEnemy (e: MouseEvent): void // Crea una funció d'atac quan es fa clic a l'enemic {enemicHP = enemicHP - jugadorAttac; // Resta el valor d'atac del valor HP, // Genera un valor HP nou. enemic.escalaX = enemicHP / 100; // Canvieu l'amplada en funció del nou valor d'HP. // El valor es divideix per 100 i després es converteix en decimal. enemic.escalaY = enemicHP / 100; // Canvieu l'alçada en funció de la nova traça de valor d'HP ("Enemies have", enemic HP, "HP restant"); // Mostra quanta HP li queda a l'enemic}

381698 11
381698 11

Pas 7. Proveu-ho

Un cop hàgiu codificat, podeu provar aquest nou joc. Feu clic al menú Control i seleccioneu Prova la pel·lícula. El joc comença i podeu fer clic sobre un objecte enemic per canviar-ne la mida. La sortida de traça es mostrarà 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. Amb els paquets podeu emmagatzemar variables, constants, funcions i altra informació en fitxers separats i després importar-los al programa. Això és especialment útil si voleu utilitzar paquets que altres persones han desenvolupat que facilitin la construcció de jocs.

Cerqueu una guia a Wikihow per obtenir més informació sobre com funcionen els paquets a Java

381698 13
381698 13

Pas 2. Construeix la carpeta del projecte

Si esteu creant un joc que conté imatges i clips de so, creeu una estructura de carpetes al joc. Trobareu més fàcil emmagatzemar diferents tipus d’elements, així com desar diferents paquets per trucar.

  • Creeu una carpeta base per al vostre projecte. A la carpeta base, creeu una carpeta "img" per a tots els recursos artístics, una carpeta "snd" per a tots els recursos sonors i una carpeta "src" per a tots els paquets de jocs i codis.
  • Creeu una carpeta "Jocs" a la carpeta "src" per emmagatzemar el fitxer Constants.
  • Aquesta estructura particular no és necessària, però facilitarà l'organització del treball de tots els materials, especialment per a projectes més grans. Per al senzill joc descrit anteriorment, no cal crear cap directori.
381698 14
381698 14

Pas 3. Afegiu so al joc

Els jocs sense so ni música avorriran ràpidament els reproductors. Podeu afegir so a objectes mitjançant l'eina Capes.

381698 15
381698 15

Pas 4. Creeu el fitxer Constants

Si el vostre joc té molts valors que es mantindran iguals durant tot el joc, podeu crear un fitxer Constants per recollir-los tots en un sol lloc i així poder convocar-los fàcilment. Les constants poden incloure valors com la gravetat, la velocitat del jugador i altres valors que poden necessitar-se anomenar repetidament.

  • Si heu creat un fitxer Constants, col·loqueu-lo a una carpeta del projecte i, a continuació, importeu-lo com a paquet. Suposem que creeu un fitxer Constants.as i el col·loqueu a la carpeta de jocs. Per importar-lo, utilitzeu el codi següent:

    paquet {importa el joc. *; }

381698 16
381698 16

Pas 5. Mireu el joc d'altres persones

Tot i que molts desenvolupadors no revelaran el seu codi de joc, hi ha una gran varietat de projectes tutorial i altres projectes de codi obert que us permetran veure codi i interactuar amb objectes del joc. Aquesta és una manera fantàstica d’aprendre diverses tècniques avançades que poden ajudar a destacar el vostre joc.

Recomanat: