Crea un joc en 2D: 15 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:12

Cansat de jugar? Per què no fas un joc?

Aquest instructiu us guia per fer un joc 2D completament senzill …

Utilitzarem Unity Game Engine per dissenyar i crear el nostre joc 2D … i també utilitzarem Microsoft Visual Studio per programar i crear alguns scripts.

Subministraments

1- Unity Game Engine

2- Microsoft Visual Studio

Pas 1: baixeu Unity Game Engine i Microsoft Visual Studio

Per crear i programar el nostre joc, necessitem un Game Engine ("Unity") i un estudi visual … Així que primer els descarreguem:

1-Utilitzeu aquest enllaç … o cerqueu "descarregar Unity Hub" … Per descarregar primer "Unity Hub"

3- A continuació, utilitzeu aquest enllaç … Per descarregar "Unity"

4- Trieu una versió d'Unity i, a continuació, feu clic a "Descarregar (Win)" -> "Unity installer"

Assegureu-vos de comprovar Unity i Microsoft Visual Studio Community 2019 tal com es mostra a la segona imatge

Pas 2: creeu un projecte nou i importeu recursos nous

Després de descarregar "Unity Hub", "Unity" i "Microsoft Visual Studio Community 2019" … COMENCEM

1- Obriu "Unity" … Aleshores s'executarà automàticament "Unity Hub"

2- Ara hem de crear un nou projecte … Feu clic a "NOU"

3- Trieu una plantilla 2D, escriviu el nom del vostre projecte i trieu una ubicació adequada per al vostre projecte

4- Feu clic a "Crea"

Després de fer clic a "Crea", Unity s'executarà …

Ara cal afegir el nostre personatge, fons i objectes …

Si no teniu cap cosa per afegir … podeu visitar aquest enllaç, per descarregar recursos que el necessitareu.

I ara volem afegir Els actius a Unity … Per fer això:

Simplement podeu arrossegar la carpeta i deixar-la anar a la finestra del projecte a Unity.

O

1- Aneu a Unitat i feu clic amb el botó dret a Esborra espai a la finestra "Projecte" tal com es mostra a la segona imatge

2- Trieu el fons, el caràcter i els objectes que vulgueu afegir a la carpeta.

Pas 3: afegiu els vostres actius a l'escena

Si afegiu alguna cosa a la finestra de l'escena … apareixerà a la finestra del joc

Per obtenir més informació sobre Windows d'Unity, podeu visitar aquest enllaç …

com veieu a la primera imatge, hi ha un quadre blanc a la finestra de l'escena i aquesta és la caixa de la càmera … Així que qualsevol cosa que hi hagi dins d'aquesta caixa, la càmera el mostrarà.

Ara, primer, afegim el fons a la finestra de l'escena …

1- Simplement arrossegueu la imatge de fons des de la finestra del projecte i deixeu-la anar dins de la finestra de l'escena

i assegureu-vos que la imatge s’adapti a la caixa de la càmera

Podeu editar qualsevol mida de la imatge triant l'eina Recta de la barra d'eines, tal com es mostra a la tercera imatge.

també afegiu els objectes i el vostre personatge que vulgueu a l'escena … tal com es mostra a la darrera imatge.

Pas 4: afegiu una mica de física al personatge

En primer lloc, per provar o jugar el joc feu clic al botó Reprodueix de la barra d'eines …

Si jugues el joc ara … el personatge no es mou, no hi ha gravetat … cada cosa és estàtica …

per afegir totes les propietats de la física al nostre personatge … utilitzem la propietat Rigidbody2D Aquesta propietat us permet editar la força de gravetat, el pes, la massa i altres …

Afegim-ho al nostre personatge …

1- Trieu el vostre personatge de la jerarquia

2- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

3- Cerqueu Rigidbody2D

4- Tria-la.

Si jugues ara … El nostre personatge cau a causa de la gravetat: D

Pas 5: afegiu col·lisió al nostre personatge

Ara cal afegir la propietat Collider2D per permetre que el personatge xoqui amb el sòl i altres objectes …

Per fer això … Primer hem d'afegir aquesta propietat al nostre personatge i a qualsevol altre objecte que hagi de xocar amb ella.

Primer, afegim-lo al personatge …

1- Trieu el vostre personatge de la jerarquia

2- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

3- Cerqueu BoxCollider2D

4- Tria-la.

5- Feu clic al quadre "Edita el col·lisionador" del BoxCollider2D que apareix a l'Inspector, per poder canviar la mida del quadre verd que apareix a l'escena

6- Arrossegueu un dels punts verds que apareix al quadre Verd per ajustar-lo al personatge

En segon lloc, afegim-lo a terra (feu els mateixos passos) …

1- Trieu el vostre personatge de Jerarquia2- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

3- Cerqueu BoxCollider2D

4- Tria-la.

5- Feu clic al quadre "Edita el col·lisionador" del quadre BoxCollider2D que apareix a l'Inspector, per poder canviar la mida del quadre verd que apareix a l'escena

6- Arrossegueu un dels punts verds que apareix al quadre Verd per ajustar-lo al personatge

Ara, si jugueu al joc, veureu que el personatge es troba a terra:>

Pas 6: mou el nostre personatge

Per fer que el nostre personatge faci qualsevol tasca, primer hem d’afegir-li un script per dir-li què ha de fer …

Unity fa servir el llenguatge C # … Si voleu obtenir més informació, visiteu aquest enllaç

Així que anem a crear l'script

1- Trieu el vostre personatge de la jerarquia

2- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

3- Escriviu el nom de l’escriptura (per exemple, moviment) …

4- Feu clic a "Nou script"

5- Feu clic a "Crea i afegeix"

Ara feu-hi doble toc per editar l'script

6- Suprimiu tots els codis que s’escriuen automàticament

7- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no oblideu escriure el vostre nom de script en lloc de #yourScriptName)

8- si voleu saber com codificar això … Visiteu aquest enllaç

9- Deseu el guió i aneu a l'Inspector del personatge, mireu el vostre guió

10- Trieu els botons dret i esquerre i configureu la velocitat.

Ara, si jugues al joc, el personatge es mourà …: D

Pas 7: fes saltar el nostre personatge

Després d'afegir el moviment del nostre personatge … ara estem preparats per fer els nostres salts de personatges …

Per tant, també hem de crear un nou script que faci saltar els nostres personatges …

1- Trieu el vostre personatge de la jerarquia

2- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

3- Escriviu el nom de l’escriptura (per exemple, Saltant) …

4- Feu clic a "Nou script"

5- Feu clic a "Crea i afegeix"

Abans d’editar l’escriptura Jump … Afegim primer una capa a terra per fer saber a Unity que aquest objecte és terra …

1- Trieu el terreny de la jerarquia

2- Feu clic a "Predeterminat" a la "Capa" que es troba a la part superior de l'Inspector

3- Trieu "Afegeix capa"

4- Posa el nom de la capa 8 a "Terra" (com es mostra a la segona imatge)

5- Trieu de nou el terreny de la jerarquia

6- Feu clic a "Predeterminat" a la "Capa" que es troba a la part superior de l'Inspector

7- Trieu "Terra"

Això és tot … Finalment, vam crear una nova capa que és "Terra" i la vam afegir a la nostra Terra

Abans de fer també saltar el nostre personatge, hem d'assegurar-nos que toca a terra, llavors salta.

Així que creem GroundCheck per al nostre personatge …

1- Feu clic amb el botó dret del ratolí a El vostre personatge de la jerarquia

2- Trieu "Crea buit" i canvieu el nom de "GroundCheck"

3- Trieu "Mou l'eina" a la barra d'eines i moveu el "GroundCheck" cap avall fins a la base del personatge o la sabata (tal com es mostra a la cinquena imatge)

Després d'això, ja estem preparats per editar el nostre script de salt

1- Obriu el vostre script de salt (des del projecte o inspector)

2- Suprimiu tots els codis que s’escriuen automàticament

3- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no us oblideu d’escriure el vostre nom de script en lloc de #yourScriptName)

si voleu saber com codifiquem això … Visiteu aquest enllaç

4- Deseu l'script i aneu a l'Inspector del personatge, mireu el vostre script (tal com es mostra a la sisena imatge)

5- Configureu la vostra força de salt, afegiu el "GroundCheck" al punt de verificació de terra (arrossegant-lo i deixeu-lo anar al quadre rectangle), configureu el radi de terra (per exemple 0.1), trieu la capa de terra "Terra" i, finalment, trieu el botó de salt.

Si jugues al joc ara … Camina i salta … Hurraaaaay:)

Pas 8: animeu el personatge

Després de fer que el nostre personatge es mogui i salti … animem-lo … Li farà semblar molt divertit …

primer cal una imatge Sprite de ralentí, caminar i saltar (com es mostra de la primera a la quarta imatge)

Per animar el personatge, heu de treballar a Finestra d'animació i Finestra d'animador i, per defecte, a la interfície d'Unity no es mostren aquests Windows … per obtenir-los:

1- Feu clic a Ctrl + 6 per obtenir la finestra d'animació

2- Trieu Finestra a la part superior esquerra Opcions desplegables (com es mostra a la cinquena imatge)

A continuació, trieu "Animació" -> "Animador" i s'obriran els dos Windows (Finestra d'animació i Finestra d'animador)

Ara comencem a Animar el personatge quan està en ralentí …

1- Trieu el vostre personatge de la jerarquia

2- Feu clic al botó "Crea" al Windows d'animació

3- Trieu un lloc adequat per desar-hi l’animació

4- A continuació, seleccioneu totes les fotos inactives del projecte i arrossegueu-les i deixeu-les anar a la finestra d'animació (tal com es mostra a la sisena imatge)

Si ara jugues a The Character is Idling Wow … Very Cool …

Ara fem que toqui l'animació de passeig quan camina …

1- Aneu a la finestra d'Animació, feu clic a "Animació nova"

2- Trieu "Crea un nou clip"

3- Trieu un lloc adequat per desar-hi l’animació

4- A continuació, seleccioneu totes les fotografies a peu del projecte i arrossegueu-les i deixeu-les anar a la finestra d'animació

Ara obriu la finestra de l'animador

1- Feu clic amb el botó dret a la casella de ralentí, trieu "fer transició" i feu clic a Walk Box (tal com es mostra a la setena imatge)

Nota: no hauria d'haver el mateix nom d'animació. Depèn del nom que tingueu …

2- Feu clic amb el botó dret del ratolí a la casella de selecció, trieu "Fer transició" i feu clic a la casella de ralentí

3- Als paràmetres Feu clic a la icona Plus (+) Trieu Bool (Anomeneu-lo per exemple Camina)

4- Trieu les fletxes que es mouen des de l’animació d’activitat inactiva a caminar, aneu a itsInspector i configureu "Té temps de sortida" a Fals, "Durada fixa" a fals, Establiu "Durada de transició" a Zero i feu clic a més (+) Que existeixen dins de Condició i estableix el "Camí" a "Verdader" (com es mostra a la vuitena imatge) …

5- Trieu les fletxes que es mouen des de l'animació de Passeig a Inactiu, aneu a Inspector i configureu "Té temps de sortida" a Fals, "Durada fixa" a fals, Establiu "Durada de transició" a Zero i feu clic a més (+) existeix dins de Condició i estableix el "Caminar" a "Fals"

6- Trieu el vostre personatge de la jerarquia

7- Aneu a la finestra de l'Inspector i premeu "Afegeix component".

8- Escriviu el nom de l’escriptura (per exemple, AnimateWalk) …

9- Feu clic a "Nou script"

10- Feu clic a "Crea i afegeix"

11- Suprimiu tots els codis que s’escriuen automàticament

12- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no us oblideu d’escriure el vostre nom de script en lloc de #yourScriptName, el vostre moviment Script Name en lloc de #YourMotionScriptName i també el vostre nom de script Jumping en lloc de #YourJumpingScriptName i escriviu El vostre nom de Bool en lloc de "Caminar" que heu creat als paràmetres de l'animador)

13- Deseu el guió i aneu a l'Inspector del personatge, mireu el vostre guió

14- Arrossegueu el vostre personatge i deixeu-lo anar dins dels "Insertyour Motion Script" i "Insertyour Jump Script"

Si jugues al joc ara, el jugador està al ralentí i guanya, mou el joc Run Animation … Molt bé:>

Ara fem-li jugar a l'animació de salt quan salta …

1- Aneu a la finestra d'Animació, feu clic a "Animació nova"

2- Trieu "Crea un nou clip"

3- Trieu un lloc adequat per desar-hi l’animació

4- A continuació, seleccioneu totes les fotos de salt del projecte i arrossegueu-les i deixeu-les anar a la finestra d'animació

Ara obriu la finestra de l'animador

1- Feu clic amb el botó dret del ratolí a la casella d'inici, trieu "fer transició" i feu clic a Salta el quadre (tal com es mostra a la novena imatge)

2- Feu clic amb el botó dret a la caixa de salt, trieu "Fer transició" i feu clic a Executa caixa

3- Als paràmetres Feu clic a la icona Plus (+) Trieu Bool (Anomeneu-lo per exemple Salt)

4- Trieu les fletxes que es mouen des de l’animació de ralentí a saltar, aneu a l’Inspector i configureu "Té temps de sortida" a Fals, "Durada fixa" a fals, Configureu "Durada de transició" a Zero i feu clic a més (+) existeix dins de Condition i estableix el "Salt" a "True" (com es mostra a la desena imatge) …

5- Trieu les fletxes que es mouen de l'animació Saltar a Executar, aneu a Inspector i configureu "Té temps de sortida" a Fals, "Durada fixa" a fals, Estableix "Durada de transició" a Zero i fes clic a més (+) existeix dins de Condició i estableix el "Salt" a "Fals"

6- Feu doble toc al quadre d'animació Saltar Des de l'animador i configureu el "Temps de bucle" a "Fals"

7- Trieu el vostre personatge de la jerarquia

8- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

9- Escriviu el nom de l'script (per exemple, AnimateJump) …

10- Feu clic a "Nou script"

11- Feu clic a "Crea i afegeix"

12- Suprimiu tots els codis que s’escriuen automàticament

13- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no us oblideu d’escriure el vostre nom de script en lloc de #yourScriptName & també el vostre nom de script saltant en lloc de #YourJumpingScriptName i escriviu el vostre nom de Bool en lloc de "Walk" That que heu creat dins dels paràmetres de l'animador)

14- Deseu el guió i aneu a l'Inspector del personatge, mireu el vostre guió

15- Arrossegueu el vostre personatge i deixeu-lo caure dins de "Insertyour Jump Script"

Si jugues ara el jugador, el jugador s’encendrà … Caminarà … i saltarà … hooohuuu!: D

però cal que li donin la volta

Pas 9: donar la volta al vostre personatge

Primer cal afegir un nou script al nostre personatge:

1- Trieu el vostre personatge de la jerarquia

2- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

3- Escriviu el nom de l'script (per exemple Flip) …

4- Feu clic a "Nou script"

5- Feu clic a "Crea i afegeix"

6- Eliminar tots els codis que s’escriuen automàticament

7- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no oblideu escriure el vostre nom de script en lloc de #yourScriptName & també el vostre Motion Script Name en lloc de #YourMotionScriptName)

8- Deseu l'script i aneu a l'Inspector del personatge, mireu el vostre script

9- Arrossegueu el vostre personatge i deixeu-lo anar dins de "Insertyour Motion Script"

10-Copieu l’escala X del vostre personatge des de (Transform) a la part superior de l’inspector i passeu-la a l’escala_X del vostre guió (tal com es mostra a la segona i tercera imatge)

11- Copieu l’escala Y del vostre personatge des de la (Transformació) de la part superior de l’Inspector i passeu-la a l’escala_Y

Pas 10: la càmera segueix el nostre personatge

Aquesta vegada, cal afegir un nou script a la nostra càmera:

1- Trieu la vostra càmera de Jerarquia

2- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

3- Escriviu el nom de l'script (per exemple CameraFollow) …

4- Feu clic a "Nou script"

5- Feu clic a "Crea i afegeix"

6- Suprimiu tots els codis que s’escriuen automàticament

7- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no oblideu escriure el vostre nom de script en lloc de #yourScriptName)

8- Deseu l'script i aneu a l'Inspector de la càmera, mireu el vostre script 8- Arrossegueu el vostre personatge i deixeu-lo anar dins del "Objectiu"

Podeu editar una altra configuració si voleu …

per posar un límit a la càmera, utilitzeu el desplaçament X & Y

Pas 11: afegiu el segon jugador (2 jugadors) i la càmera Seguiu 2 jugadors

Per fer el vostre joc més interessant … Podeu fer-ne 2, 3, 4, 10, 20 … Jugadors … qualsevol nombre de jugadors que vulgueu … així que feu això:

1- Trieu el vostre personatge de la jerarquia

2- Duplica-ho (Pres a Ctrl + D)

ara heu afegit un altre personatge

3- Moveu-lo mitjançant l'eina Mou i arrossegueu-lo i col·loqueu-lo en un lloc adequat

4- Ara hem de canviar la configuració del control, per tant, aneu a Inspector, canvieu el botó dret i esquerre del seu script de moviment

5- Canvieu també el botó Salt …

Però ara La càmera segueix només un jugador, per fer-lo seguir més d’un jugador, hem d’afegir-hi un script nou:

1- Trieu la vostra càmera de Jerarquia 2- Aneu a la finestra de l'Inspector i premeu "Afegeix component".

3- Escriviu el nom de l'script (per exemple CameraFollowMultipleTarget) …

4- Feu clic a "Nou script"

5- Feu clic a "Crea i afegeix"

6- Suprimiu tots els codis que s’escriuen automàticament

7- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no oblideu escriure el vostre nom de script en lloc de #yourScriptName)

8- Deseu l'script i aneu a l'inspector de la càmera, mireu el vostre script

9- Estableix el "objectiu" 2

10- Arrossega els teus dos jugadors dins d’aquest objectiu.

Assegureu-vos que la compensació Z de la càmera (-20)

Podeu canviar o configurar un altre paràmetre … si voleu afinar la càmera Editeu l'offset X & Y

Pas 12: Afegir puntuació i punts morts

Hi ha moltes idees fantàstiques que podeu fer al vostre joc, però la idea més senzilla és crear una àrea de puntuació senzilla si un dels personatges hi arriba primer i guanya, i hi ha una zona morta si el jugador la toca i torna a generar-la. el punt de reproducció ara …

Primer fem l’àrea de puntuació:

1- Però l'objecte a Ground and the Score (Com es mostra a la primera imatge)

no us oblideu d’afegir-hi Box Collider2D

Ara cal afegir a la base de puntuació un script

1- Trieu el terreny de puntuació de Jerarquia

2- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

3- Escriviu el nom de l'script (per exemple ScoreGround) …

3- Feu clic a "Nou script" 4- Feu clic a "Crea i afegeix"

5- Suprimiu tots els codis que s’escriuen automàticament

6- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no oblideu escriure el vostre nom de script en lloc de #yourScriptName, i canvieu el nom del nom dels 2 jugadors en lloc de "YourPlayer1Name" i "YourPlayer2Name")

7- Deseu l'script i aneu a l'inspector de la càmera, mireu el vostre script

Ara hem de crear el botó Text i Reinicia

Per crear un text

1- Feu clic al signe Plus (+) de la jerarquia

2- Trieu "IU" -> "Text"

3- Canvieu el nom del text de l'inspector i editeu el color …

4- creeu 2 textos, un per al jugador primer (per exemple, "El jugador 1 guanya") i l'altre per al jugador 2

Ara cal crear el botó Reinicia

Per crear un botó 1: feu clic al signe Plus (+) de la jerarquia

2- Trieu "IU" -> "Botó"

3- Canvieu el nom del botó de l'inspector i editeu el color …

creeu només un botó

Ara, després de crear textos i botons, hem d’afegir-los a l’inspector de puntuació del terreny per fer-ho:

1- Trieu el terreny de puntuació de Jerarquia 2- Aneu a la finestra Inspector

3- Mireu el guió que heu afegit

4- Arrossegueu els textos i deixeu-los anar a "Guanya text del jugador 1" i "Guanya text del jugador 2"

5- Arrossegueu el botó i deixeu-lo anar al botó "Reinicia"

si jugues ara Tot funciona, excepte el botó Reinicia

Perquè funcioni

1- Trieu el fitxer a les eines desplegables de la part superior esquerra d’Unity …

2- Trieu "Configuració de la compilació"

3- Arrossegueu la vostra escena des de la carpeta Escena que es troba a la finestra del projecte i deixeu-la anar a "Escena en versions".

ara Permet afegir nou script al botó

4- Trieu el botó de Jerarquia

5- Aneu a la finestra de l'Inspector i premeu "Afegeix component"

6- Escriviu el nom de l'script (per exemple SceneLoader) …

7- Feu clic a "Nou script"

8- Feu clic a "Crea i afegeix"

9- Suprimiu tots els codis que s’escriuen automàticament

10- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no us oblideu d’escriure el vostre nom de script en lloc de #yourScriptName)

11- Guardar l'script torna a Unity

12- Trieu el botó de Jerarquia

13- Aneu al seu Inspector feu clic al Plus (+) Des del botó "en fer clic"

14- arrossegueu i deixeu anar el botó al quadre rectangular

15- Feu clic a "Sense funció". Trieu "SceneLoader" -> "Carrega l'escena"

16- escriu zero … 0

ara Si jugues, funciona … Hurra: D

Afegim la zona morta per fer això:

1- Feu clic a Plus (+) a la jerarquia

2-Trieu "Crea buit" i aneu a Inspector

3- Afegiu BoxCollider 2d….

4- Mou-lo cap avall, de manera que quan el jugador cau es xoca sobre ell

Ara afegiu un nou guió a aquest objecte de joc i nomeneu-lo a l'exemple de DeadZone

5- Descarregueu el text, copieu-lo i enganxeu-lo al vostre script (no oblideu escriure el vostre nom de script en lloc de #yourScriptName & i escriviu els noms dels personatges en lloc de "yourPlayer1 Name", "YourPlayer2 Name")

Ara deseu i torneu a la unitat

Hem d’afegir un objecte de joc buit que indiqui on tornarà a aparèixer el nostre jugador

1- Feu clic a Plus (+) a la jerarquia

2- Trieu "Crea buit"

3- Moveu la posició a la mateixa posició que necessiteu per tornar a engendrar els jugadors

4- mireu The DeadZone Script des de l'inspector i afegiu-hi el Spawn Point (l'objecte de joc que heu creat).

Si jugues ara, quedaràs impressionat: -O

Pas 13: Congelació de la rotació

quan jugues al joc, hi ha un error que fa girar el personatge …

Si us ha molestat aquest error … el podeu solucionar fàcilment:

1- Només heu de seleccionar el personatge de la jerarquia

2- Mireu Rigidbody2D de l'Inspector

3- Obriu les "Restriccions" i configureu "Freeze Rotation" a True

Això és;)

Pas 14: Creació del menú principal al joc

Així es crea el menú principal

Pas 15: publicar i compartir

Finalment, pengeu el vostre joc. Vegeu aquest vídeo

Espero que gaudiu … Apreneu … Fameu:)

Qualsevol pregunta Feu-me sobre: