Com fer jocs en línia (amb imatges)

Taula de continguts:

Com fer jocs en línia (amb imatges)
Com fer jocs en línia (amb imatges)

Vídeo: Com fer jocs en línia (amb imatges)

Vídeo: Com fer jocs en línia (amb imatges)
Vídeo: Word 2007 2010 Como insertar marcadores en word 2024, Maig
Anonim

Alguna vegada heu jugat a un joc en línia i heu pensat: "M'agradaria poder fer un d'aquests, tinc algunes idees fantàstiques"? En el passat era necessari haver après a codificar a ActionScript 3, el llenguatge que potencia Flash. Gràcies a alguns programes de creació de jocs, però, l’experiència en codificació és un requisit del passat. Podeu crear jocs divertits i profunds manipulant objectes i lògica, sense tocar mai cap línia de codi.

Passos

Part 1 de 4: Dissenyar el joc

Feu els jocs en línia Pas 1
Feu els jocs en línia Pas 1

Pas 1. Escriviu una descripció bàsica

Incloeu funcions i el que voleu que realitzi el jugador. És bo tenir un resum bàsic del que voleu fer amb el vostre joc per poder-hi referir mentre hi treballeu.

Consulteu aquesta guia per obtenir més detalls sobre l’escriptura d’un document de disseny de jocs

Feu els jocs en línia Pas 2
Feu els jocs en línia Pas 2

Pas 2. Dibuixa uns esbossos

Dibuixeu un disseny bàsic de com vulgueu que siguin les pantalles. No cal que siguin molt detallats, però si més no hauríeu de tenir una idea sobre on es col·locaran els diferents elements a la pantalla. Aquests seran molt útils més endavant quan comenceu a crear la interfície per al vostre joc.

Feu els jocs en línia Pas 3
Feu els jocs en línia Pas 3

Pas 3. Trieu un mètode per crear el vostre joc

Tradicionalment, haureu d'aprendre a codificar a ActionScript 3 per crear jocs Flash. Tot i que encara podeu fer-ho, hi ha programes disponibles que poden fer la creació de jocs molt més fàcil d’aprendre i que no requereixen experiència de codificació. Algunes de les opcions més populars per crear jocs són:

  • Stencyl: és una eina més nova que us permet construir jocs amb objectes i scripts lògics. Aquests jocs es poden convertir en projectes Flash i carregar-los a qualsevol lloc web que admeti jocs Flash.
  • Construcció 2: a mesura que Flash envelleix, s’ha començat a substituir per altres mitjans de creació de jocs. Una de les maneres més noves de crear un joc en línia és fer servir HTML5. Normalment, això requereix molts coneixements de codificació, però Construct 2 us permet crear jocs amb objectes i scripts, de la mateixa manera que Stencyl.
  • Flash Builder: aquest és el mètode tradicional per crear jocs Flash. Això requereix una bona quantitat de coneixement d'ActionScript, però és un dels llenguatges més fàcils d'aprendre els conceptes bàsics de. Flash Builder costa diners, però podeu utilitzar el programa FlashDevelop de codi obert per obtenir la majoria de les mateixes funcionalitats.

Part 2 de 4: Ús de Stencyl

Feu els jocs en línia Pas 4
Feu els jocs en línia Pas 4

Pas 1. Descarregueu i instal·leu Stencyl

Stencyl és un programa de creació de jocs que no requereix cap coneixement de codificació. En lloc d’això, podeu utilitzar diverses eines lògiques per manipular objectes del joc.

Stencyl es pot utilitzar gratuïtament si només voleu publicar el vostre joc en línia. La versió gratuïta tindrà un logotip Stencyl al principi. Si obteniu la versió de pagament, podeu publicar-la a altres plataformes

Feu els jocs en línia pas 5
Feu els jocs en línia pas 5

Pas 2. Crea el teu nou joc

Quan inicieu Stencyl, se us mostrarà una llista dels vostres jocs. Hi haurà diversos jocs d’exemple a la llista que podeu veure per veure com funcionen. Per començar a treballar en el vostre propi joc, feu clic al quadre amb la línia de punts etiquetada com a "Feu clic aquí per crear un joc nou".

Feu els jocs en línia pas 6
Feu els jocs en línia pas 6

Pas 3. Seleccioneu un kit

Hi ha diversos kits que contenen elements i objectes prefabricats que us poden ajudar a posar en marxa el vostre joc ràpidament. Seleccioneu un kit si voleu o seleccioneu "Joc en blanc" si teniu previst fer-ne el vostre.

Podeu descarregar kits que altres usuaris han creat en línia

Feu els jocs en línia Pas 7
Feu els jocs en línia Pas 7

Pas 4. Introduïu la informació del vostre joc

Abans de començar a crear el joc, haureu d’introduir algunes dades.

  • Nom: aquest és el nom del vostre joc. Podeu canviar això més endavant pel que vulgueu.
  • Mida de la pantalla: és la mida de la pantalla del joc i és molt important, ja que afectarà l’art que utilitzeu. Com que és probable que la gent jugui al vostre joc al seu navegador web, la mida de la pantalla no ha de ser molt gran. Prova d'amplada: 640 px Alçada: 480 px. Aquesta és una bona mida per començar.
Feu els jocs en línia Pas 8
Feu els jocs en línia Pas 8

Pas 5. Familiaritzeu-vos amb el disseny

Quan carregueu el joc nou per primera vegada, se us dirigirà al tauler. Aquí és on podeu veure totes les escenes del vostre joc i accedir a qualsevol recurs. També podeu canviar la configuració del joc des d’aquí. Passareu la major part del temps treballant al tauler.

  • Escenes: aquesta és la finestra principal del tauler i mostra el joc real i tots els recursos. El vostre joc serà una col·lecció d’escenes.
  • Recursos: aquesta és la llista de tots els objectes i recursos del vostre joc. inclou actors, fons, tipus de lletra, escenes, lògica, sons i conjunts de rajoles. Els recursos s’organitzen en un arbre a la part esquerra de la pantalla.
  • Configuració: les opcions de joc i configuració us permeten ajustar el funcionament de la mecànica del joc, inclosos els controls, la gravetat, les col·lisions, les pantalles de càrrega i molt més.
Feu els jocs en línia pas 9
Feu els jocs en línia pas 9

Pas 6. Personalitzeu un actor

Un actor és qualsevol objecte que es mou o pot interactuar amb ell en el joc (jugador, enemic, portes, etc.). Haureu de crear un actor per a cada objecte del vostre joc. Per crear un actor, feu clic a l'opció "Tipus d'actors" al menú Recursos. Seleccioneu l'actor que vulgueu de la llista (la llista la determina el kit que hàgiu triat).

  • Assigneu l’actor a un grup (jugador, enemic). Això ajudarà a determinar les propietats de col·lisió de l'actor. Seleccioneu el vostre actor per obrir l'Editor d'actors. Feu clic a la pestanya Propietats i, a continuació, trieu el grup adequat al menú desplegable.
  • Afegiu conductes (saltar, trepitjar, caminar). Els comportaments són els que permeten al vostre actor realitzar accions. Feu clic a la pestanya Comportaments i, a continuació, feu clic al botó "+ Afegeix un comportament" a l'extrem inferior esquerre. Seleccioneu un comportament (com ara "Caminar") a la llista i feu clic a "Tria".
  • Configureu els controls. Si esteu creant un personatge de jugador, probablement voldreu permetre que el jugador el mogui. Quan afegiu el comportament Walking, se us dirigirà a la pantalla d'atributs Walking. Podeu utilitzar els menús desplegables per triar quines tecles mouran l’actor cap a l’esquerra i cap a la dreta. També podeu assignar animacions si el kit que utilitzeu conté alguna.
  • Podeu afegir diversos comportaments per personalitzar el que pot fer un actor.
Feu els jocs en línia pas 10
Feu els jocs en línia pas 10

Pas 7. Crea una escena

L’escena és la que veu el jugador quan juga al joc. És el fons, així com els objectes i actors visibles. Per crear una escena nova, feu clic a l'opció Escenes de l'arbre de recursos i, a continuació, feu clic al quadre de guions. Doneu un nom a la vostra nova escena per continuar.

  • Fons: la vostra escena es dimensionarà automàticament, de manera que no us haureu de preocupar d'això en aquest moment. Podeu optar per utilitzar un color com a fons, que tindrà rajoles col·locades al damunt. Podeu triar entre un color sòlid o un degradat. Feu clic a "Crea" quan hàgiu acabat. Això obrirà el Dissenyador d’escenes.
  • Col·loqueu rajoles: el conjunt de rajoles inclòs al vostre kit es carregarà a la part dreta de la finestra. Feu clic a l'eina Llapis al menú esquerre i, a continuació, feu clic al mosaic que vulgueu utilitzar. A continuació, podeu col·locar el mosaic a la vostra escena. Feu clic i arrossegueu amb el ratolí per col·locar diversos mosaics.
  • Col·locació d'actors: feu clic a la pestanya Actors que hi ha a sobre del conjunt de rajoles per canviar als actors disponibles. Els heu de crear prèviament perquè apareguin en aquesta llista. Feu clic a l'actor que voleu col·locar i, a continuació, feu clic a on a l'escena voleu que aparegui. Si manteniu premuda ⇧ Majúscula, l'actor es posarà a la graella.
  • Afegir gravetat: feu clic a la pestanya "Física" a la part superior de la finestra i, a continuació, introduïu un valor al camp "Gravetat (vertical)". Entrar a 85 simularà la gravetat del món real.
Feu els jocs en línia Pas 11
Feu els jocs en línia Pas 11

Pas 8. Proveu el joc

Després de crear una escena i col·locar alguns actors, podeu provar el joc. Feu clic al botó "Prova del joc" a la part superior de la pantalla per reproduir el que teniu fins ara. Podeu utilitzar les tecles que definiu quan creeu els vostres actors per controlar el vostre personatge de jugador.

Cerqueu qualsevol aspecte que no funcioni i intenteu solucionar-los. Per exemple, els enemics es comporten correctament? Pots derrotar els teus enemics? Hi ha plataformes inaccessibles o avencs que no es puguin travessar? Torneu a l'àrea corresponent de l'editor de jocs per solucionar qualsevol dels problemes que trobeu. Això pot trigar una mica, però el resultat final serà un joc molt més divertit i jugable

Feu els jocs en línia Pas 12
Feu els jocs en línia Pas 12

Pas 9. Afegiu-ne més

Ara que teniu una primera escena que es pot reproduir i que funciona, és hora de començar a construir tot el joc. Afegiu més nivells i reptes i continueu provant les vostres addicions per assegurar-vos que siguin divertits i funcionin correctament.

Feu els jocs en línia Pas 13
Feu els jocs en línia Pas 13

Pas 10. Bloqueig del lloc del joc

Si pengeu el joc a un lloc que allotja jocs Flash o pengeu al vostre propi lloc, probablement voldreu activar "Bloqueig de lloc". Això evitarà que el joc es pugui jugar si no es troba a la llista de llocs permesos.

  • Obriu "Configuració del joc" a l'arbre "Recursos". Seleccioneu la secció "Carregador". Introduïu els llocs que vulgueu permetre al camp "Bloqueig de lloc", separats per una coma sense espai. Per exemple, newgrounds.com, kongregate.com.
  • En aquesta pantalla, si teniu, introduïu la vostra pàgina d'inici al camp "La vostra pàgina d'inici". Això permetrà que els jugadors que juguen el vostre joc es vinculin al vostre lloc.
Feu els jocs en línia Pas 14
Feu els jocs en línia Pas 14

Pas 11. Exporteu el joc com a Flash

Quan estigueu satisfet amb el vostre joc, podeu exportar-lo al format Flash. Això us permetrà carregar el joc a un lloc que allotgi jocs Flash o al vostre propi lloc web. Feu clic a Publica seleccioneu Web i feu clic a Flash. Deseu el fitxer en una ubicació fàcil de trobar a l’ordinador.

Feu els jocs en línia Pas 15
Feu els jocs en línia Pas 15

Pas 12. Publicar el joc

Un cop tingueu el fitxer Flash (. SWF), podeu penjar-lo a l'amfitrió que trieu. Hi ha una gran varietat de llocs en línia que allotgen jocs Flash, i alguns fins i tot us poden permetre guanyar diners amb els vostres jocs. També podeu penjar el vostre joc al vostre propi lloc web, però voldreu assegurar-vos que teniu l’amplada de banda per atendre els jugadors si el joc es fa popular.

  • Consulteu aquesta guia per penjar el vostre joc al vostre propi lloc web.
  • Si voleu penjar el vostre joc a un lloc com Newgrounds o Kongregate, haureu de crear un compte i després passar pel procés de càrrega del lloc. Els termes i condicions variaran d’un lloc a un altre.
  • Si voleu publicar el vostre joc a Stencyl Arcade, podeu fer-ho des del programa Stencyl. Feu clic a Publica seleccioneu Stencyl i feu clic a Arcade. El joc es carregarà automàticament, així que assegureu-vos que esteu satisfet amb el nom abans de fer-ho. Stencyl Arcade té un límit de mida de fitxer de 8 MB.

Part 3 de 4: Ús de Construct 2

Feu els jocs en línia Pas 16
Feu els jocs en línia Pas 16

Pas 1. Descarregueu i instal·leu Construct 2

Aquest programa us permet crear jocs HTML5 amb molt poca codificació. Haureu d’assignar algunes variables, però tot això es fa a través de menús sense necessitat de codificació real.

Construct 2 és gratuït, tot i que algunes funcions són limitades tret que actualitzeu. La versió gratuïta no es pot publicar en cap altra plataforma que no sigui HTML5

Feu els jocs en línia Pas 17
Feu els jocs en línia Pas 17

Pas 2. Creeu un projecte nou

Quan inicieu Construct 2 per primera vegada, us rebrà un menú de benvinguda. Feu clic a l'enllaç "Projecte nou" per començar un joc nou. També hi ha un parell d’exemples inclosos que podeu utilitzar per veure com es creen els jocs bàsics.

Quan creeu un projecte nou, se us proporcionarà una llista de plantilles. Per al vostre primer projecte, probablement voldreu començar amb un projecte buit. Això us permetrà obtenir informació bàsica sense que les plantilles s’interposin

Feu els jocs en línia Pas 18
Feu els jocs en línia Pas 18

Pas 3. Ajusteu la configuració del projecte

Al marc esquerre de la finestra del projecte, veureu una sèrie d’elements al marc Propietats. Podeu utilitzar-lo per definir la mida de la pantalla i introduir la informació del vostre joc i de la vostra empresa.

Feu els jocs en línia Pas 19
Feu els jocs en línia Pas 19

Pas 4. Inseriu un fons

Feu doble clic al disseny. Seleccioneu "Fons de mosaic" a la secció General. Feu clic al vostre disseny per col·locar el fons. Això obrirà l'editor de fons. Haureu de crear el vostre propi mitjançant un programari d’edició d’imatges o descarregar textures en línia de diverses ubicacions.

  • Estableix el fons a la mida del disseny. Feu-ho seleccionant l'objecte de fons i canviant la mida al marc Propietats.
  • Canvieu el nom de la capa i bloquegeu-la. Voleu bloquejar la capa per evitar moure-la accidentalment mentre col·loqueu altres objectes. Feu clic a la pestanya "Capes" a la part dreta de la pantalla. Seleccioneu la capa i feu clic a la icona de llapis. Poseu un nom a la capa "Fons" i, a continuació, feu clic al botó "Cadenat" per bloquejar el fons.
Feu els jocs en línia Pas 20
Feu els jocs en línia Pas 20

Pas 5. Creeu una capa nova

A la pestanya Capes, feu clic al botó "+" per crear una capa nova. Canvieu el nom per "Principal". Aquesta serà la capa on resideixen la majoria dels objectes del joc. Assegureu-vos que la capa principal està seleccionada abans de continuar.

Feu els jocs en línia Pas 21
Feu els jocs en línia Pas 21

Pas 6. Afegiu entrades per al vostre joc

A Construct 2, les vostres entrades hauran d’afegir-se com a objectes al vostre joc. Són invisibles i permetran utilitzar el teclat i el ratolí durant tot el projecte.

Feu doble clic al vostre disseny i seleccioneu "Ratolí" a la secció Entrada. Feu el mateix per inserir l'objecte "Teclat"

Feu els jocs en línia Pas 22
Feu els jocs en línia Pas 22

Pas 7. Afegir objectes

És hora de començar a afegir alguns objectes de joc al vostre disseny. Feu doble clic al disseny i seleccioneu "Sprite" a la secció General. Utilitzeu el punt de mira per triar on voleu col·locar el sprite. S'obrirà l'editor d'imatges, que us permetrà carregar un sprite existent o crear-ne un de nou.

Quan seleccioneu els sprites al vostre disseny, les propietats del sprite es carregaran al marc esquerre. Canvieu el nom del sprite perquè pugueu identificar-lo i fer-hi referència més fàcilment

Feu els jocs en línia Pas 23
Feu els jocs en línia Pas 23

Pas 8. Afegiu comportaments als vostres objectes

Per afegir un comportament, feu clic a l'objecte al qual vulgueu afegir un comportament complet per seleccionar-lo. Feu clic a l'enllaç "Afegeix / edita" a la secció Comportaments del marc Propietats. Apareixerà una llista de comportaments disponibles.

Els comportaments són elements lògics preconfigurats que us permeten afegir ràpidament funcionalitat als vostres objectes. Podeu triar entre una gran varietat de comportaments prefabricats que poden realitzar una àmplia gamma de funcions. Per exemple, perquè el sòl sigui sòlid, doneu-li el comportament "Sòlid". Per moure el jugador-personatge en vuit direccions, doneu-li el comportament del "moviment de 8 direccions"

Feu els jocs en línia pas 24
Feu els jocs en línia pas 24

Pas 9. Canvieu les propietats del comportament

Podeu editar els comportaments existents per personalitzar el funcionament dels vostres objectes. Podeu canviar els valors per canviar la velocitat, la direcció i altres propietats.

Feu els jocs en línia pas 25
Feu els jocs en línia pas 25

Pas 10. Comprendre el funcionament dels esdeveniments

Els esdeveniments són una llista de condicions i són el que condueix el joc. Si es compleixen les condicions, es produeix un esdeveniment. Si no es compleixen les condicions, l'esdeveniment no es produeix. Normalment, el full d’esdeveniments s’executa unes 60 vegades per segon. Cada vegada que s'executa s'anomena "tick".

Feu els jocs en línia Pas 26
Feu els jocs en línia Pas 26

Pas 11. Creeu un esdeveniment

Feu doble clic al full d'esdeveniments en blanc. Apareixerà una llista d'objectes disponibles. Seleccioneu l'objecte per al qual vulgueu crear un esdeveniment o podeu crear un esdeveniment del sistema.

  • Seleccioneu quan es produeix l'acció. Després de seleccionar l'objecte, se us demanarà que seleccioneu quan es produirà l'esdeveniment. Això es pot basar en altres esdeveniments o en determinats moments. "Totes les paparres" sempre són.
  • Afegiu una acció. Se us demanarà que seleccioneu un dels vostres objectes. Trieu una llista d'accions. Per exemple, si esteu fent un tirador de dalt a baix i voleu que el personatge del jugador estigui sempre mirant el ratolí, creeu una acció "Establir angle cap a la posició" a cada tick establerta a l'objecte Player. Quan se us demani les coordenades, introduïu "Mouse. X" per a X i "Mouse. Y" per a Y. Això mantindrà la nau del jugador sempre apuntada cap al cursor.
Feu els jocs en línia pas 27
Feu els jocs en línia pas 27

Pas 12. Afegiu més esdeveniments i comportaments

Aquests són l’eix vertebrador del vostre joc. Afegir i modificar comportaments i esdeveniments us ajudarà a crear un joc únic i divertit que la gent reclamarà per jugar. Experimenteu amb diferents esdeveniments per intentar obtenir el joc exacte que desitgeu.

Feu els jocs en línia Pas 28
Feu els jocs en línia Pas 28

Pas 13. Afegiu algunes variables

Hi ha dos tipus de variables a Construct 2: variables d’instància i variables globals. Aquests us permeten establir valors personalitzats per als vostres objectes i jocs, com ara la salut, els límits de temps, les puntuacions i molt més.

  • Variables d’instància: les variables d’instància són variables assignades a objectes individuals. S’utilitzen per a la salut de l’enemic i dels jugadors. Podeu afegir variables d'instància després de seleccionar un objecte fent clic a l'enllaç "Afegeix / edita" a la secció Variables del marc Propietats. Assigneu a la variable un nom al qual es pugui fer referència en un esdeveniment, així com un valor inicial.
  • Variables globals: les variables globals són variables assignades a tot el joc. S'utilitzen per a coses com la puntuació del jugador. Per crear una variable global, obriu el full d’esdeveniments i feu clic amb el botó dret sobre un espai en blanc. Feu clic a "Afegeix una variable global", doneu-li un nom al qual es pugui fer referència en un esdeveniment i, a continuació, introduïu un valor inicial.
Feu els jocs en línia Pas 29
Feu els jocs en línia Pas 29

Pas 14. Creeu una interfície

Quan es crea una interfície, normalment és millor fer-ho en una nova capa. Això es deu al fet que la interfície poques vegades es mou o canvia, de manera que és bo tenir-la en una capa bloquejada. Al marc Propietats de la nova capa, configureu "Parallax" a 0. Això evitarà que la capa es desplaci quan la pantalla ho faci.

Utilitzeu quadres de text i variables per crear la vostra interfície. Podeu configurar els quadres de text per mostrar la salut, la puntuació, la munició o qualsevol altra cosa que el jugador hagi de veure periòdicament

Feu els jocs en línia pas 30
Feu els jocs en línia pas 30

Pas 15. Prova i revisa el teu joc

Ara que teniu alguns objectes a la pantalla amb esdeveniments i comportaments, podeu començar a provar i afegir contingut. Feu clic al botó "Reprodueix" a la part superior de la pantalla per crear i provar el joc. Preneu nota de qualsevol cosa que no hagi funcionat i intenteu solucionar-ho perquè el vostre joc sigui divertit i jugable.

Feu els jocs en línia Pas 31
Feu els jocs en línia Pas 31

Pas 16. Exporteu el joc

Si esteu satisfet amb el vostre joc, podeu exportar-lo perquè pugui ser carregat a un lloc web i reproduït per tothom. Per exportar el joc, feu clic a Dossier i seleccioneu Exporta. Deseu el projecte en una ubicació que pugueu localitzar fàcilment.

Feu els jocs en línia pas 32
Feu els jocs en línia pas 32

Pas 17. Publicar el joc

Hi ha diversos llocs que us permeten pujar jocs HTML5 perquè altres puguin jugar. També podeu afegir el joc al vostre propi lloc web. Consulteu aquesta guia per obtenir detalls sobre com penjar el joc al vostre propi lloc web.

Part 4 de 4: Codificació des de Scratch

Pas 1. Descarregueu un IDE de programació (entorn de desenvolupament integrat) que admeti HTML com Game Maker Studio

Alguns estan disponibles de forma gratuïta, tot i que molts dels millors IDE costen centenars de dòlars.

Pas 2. Apreneu a utilitzar l'IDE

Aprendre a programar al vostre entorn és increïblement important. Memoritzar la majoria del codi comú i aprendre a implementar les coses correctament pot trigar setmanes o fins i tot mesos. Tingueu paciència i tot donarà els seus fruits!

Pas 3. Crea el teu joc un cop creguis que estàs preparat

Fer un document de disseny o anotar algunes idees és un bon començament. Programar un joc pot trigar mesos o, si us interessa seriosament, fins i tot un o dos anys.

Pas 4. Proveu el joc

Assegureu-vos de provar de fer coses boges o inesperades i aixafar tants errors com puguis. També intenteu determinar si la manera de joc és la manera que volíeu o si heu de tornar enrere i fer canvis.

Pas 5. Publiqueu-lo

Publiqueu el vostre joc en línia en un lloc web com Kongregate. Heu d'estar preparats per a les crítiques constructives i potser voldreu actualitzar el vostre joc per satisfer els desitjos de la vostra base de jugador.

Consells

  • Si us interessa més aprendre el codi que hi ha darrere dels jocs Flash, podeu utilitzar el codi Flash Builder i ActionScript 3 per crear jocs personalitzats. Això trigarà més, però podria resultar en una experiència més única. Consulteu aquesta guia per obtenir detalls sobre la programació a Actions Script 3.
  • Doneu crèdit a qualsevol font de la qual hàgiu extret idees o contingut i a tothom que va ajudar a crear el joc.

Recomanat: