Crea el teu propi joc de Mario! Conceptes bàsics sobre ratllades per a nens i adults

Crea el teu propi joc de Mario! Conceptes bàsics sobre ratllades per a nens i adults
Aquesta guia es pot descarregar en format PDF gratuït. Descarregueu aquest fitxer ara . No dubteu a copiar i compartir això amb els vostres amics i familiars.

Sabíeu que algú pot fer un videojoc sense programar? Tot i que hi ha diversos llenguatges per a principiants, no haureu de passar mig any aprenent Java o C ++ per construir un joc. Podeu triar entre moltes eines per a diversos tipus de jocs, però una opció fantàstica per a nens (i adults) és la gratuïta del MIT Rascada .





Scratch és una eina que us permet arrossegar i deixar anar recursos per crear jocs o animacions. És fàcil d’entendre, però ensenya els components bàsics de la programació en el procés. Vegem què podeu crear a Scratch i, a continuació, passeu pels passos per crear un simple joc de Mario.



Coneix Scratch

Per començar amb Scratch, aneu a la pàgina d'inici . Heu de crear un compte immediatament per poder desar les vostres creacions. Feu clic a Uneix-te a Scratch a la part superior dreta de la finestra. Creeu un nom d'usuari i una contrasenya, introduïu la vostra data de naixement i gènere, i el sistema us demanarà l'adreça de correu electrònic dels pares. Introduïu la vostra pròpia si en teniu, i confirmeu la vostra adreça perquè pugueu comentar altres projectes i compartir la vostra.





Ara podeu entrar directament. Feu clic a Crear a la barra d'eines superior per iniciar l'editor Scratch. Si ho preferiu, també podeu descarregueu l'editor fora de línia per treballar sense connexió a Internet.

Elements en pantalla

Quan inicieu l'editor, veureu la finestra següent. Desglossem els seus elements (vegeu la imatge a mida completa si la petita de sota no està clara):



  1. Etapa - Mostra un resum ràpid del vostre joc. Aquí apareixeran tots els sprites actius i el fons escollit. Podeu moure sprites si voleu. Poseu un nom al vostre projecte al camp que hi ha més amunt.
  2. Teló de fons - Aquí podeu seleccionar un fons per al vostre joc. Trieu a la biblioteca de Scratch, pinteu-ne la vostra o importeu un fitxer. També podeu agafar una imatge de la càmera del vostre PC, tot i que és probable que la majoria de la gent no necessiti aquesta opció.
  3. Sprites - El centre de tots els sprites del vostre projecte. Igual que els fons de pantalla, podeu afegir-ne de predeterminats, crear-ne de propis o penjar imatges. Feu clic al petit blau jo icona d'un sprite per canviar-lo de nom, canviar-ne l'angle o amagar-lo.
  4. Àrea de treball - On té lloc la major part del vostre treball a Scratch. Utilitzeu les pestanyes anteriors (etiquetades amb Scripts , Disfresses , i Sons per canviar en què estàs treballant.
    1. Scripts és per afegir blocs de codi, que tractarem aviat.
    2. Disfresses us permet crear postures addicionals per als vostres sprites. Aquesta pestanya canviarà a Fons de fons si en teniu un seleccionat a l'àrea 2 , i tornar a Disfresses quan seleccioneu una àrea Sprite 6 . Un editor d’imatges bàsic us permet fer canvis als gràfics del vostre joc. Aquí també podeu canviar el nom dels recursos.
    3. Sons No és sorprenent que sigui el centre per afegir i editar sons.
  5. Blocs - Depenent de quina de les tres pestanyes que hàgiu seleccionat, aquesta àrea canviarà entre blocs de codis, vestits / fons de pantalla i clips de so.
  6. Botons de control - La bandera verda comença el joc, mentre que la forma del senyal vermell d’aturada l’acaba. Els faràs servir per provar-los.

Ús de blocs

Ara que ja us heu familiaritzat amb l'editor de Scratch, parlem d'un dels elements més importants de l'eina: els blocs de codi. En lloc d’escriure codi real, aquests blocs us permeten definir el comportament dels vostres elements. Es combinen com LEGOs, de manera que és fàcil veure com s’afecten els uns als altres.

Feu clic a un sprite de la llista de l'esquerra i assegureu-vos de seleccionar el fitxer Scripts per començar a arrossegar blocs per a aquest element. Tingueu en compte que els blocs estan codificats per colors i tenen vores com un trencaclosques per mostrar com encaixen. Les deu categories i el que fan són:



  • Moviment - Feu que el sprite donat es mogui, ja sigui per passos, cap a un altre objecte o mitjançant coordenades directes.
  • Aspecte - Permet que el sprite amagui o es mostri, canviï de vestuari, canviï de mida o es mogui entre capes.
  • So - Reprodueix sons, canvia el volum o ajusta el tempo.
  • Bolígraf - Dibuixa amb un retolador i canvia el seu color i forma.
  • Dades - Us permet crear les vostres pròpies variables. Això resulta molt útil per als elements que Scratch no té incorporats.
  • Esdeveniments - Criteris per iniciar altres accions, com fer clic a la bandera verda o prémer la barra espaiadora. Necessiteu aquests blocs perquè tots els altres blocs realment facin alguna cosa!
  • control - Bucles per repetir una acció, realitzar una sentència if-else o aturar alguna cosa.
  • Detecció - Col·loqueu aquests blocs en altres per realitzar accions quan un sprite toca un altre element o l'usuari manté premuda una tecla.
  • Operadors - Elements matemàtics que us permeten realitzar operacions aritmètiques o booleanes bàsiques sobre variables.
  • Més blocs - Feu els vostres propis blocs per si no n’hi ha prou!

Un exemple senzill

Prenem un exemple senzill per il·lustrar com s’ajusten aquests blocs, pas a pas. Farem que el gat Scratch llanci una pilota de futbol a la porteria i reproduïm un so quan entri.

En primer lloc, necessiteu un teló de fons divertit. Aneu cap al Teló de fons a la part inferior esquerra i feu clic a la icona de la imatge per triar un dels fons de Scratch. N’hi ha un que es diu Objectiu 1 això funcionarà perfectament. A continuació, feu clic a la icona de sprite per afegir un sprite nou. Hauríeu de veure el Pilota de futbol a la llista: feu-hi doble clic per afegir-lo als vostres sprites.



Ara que els gràfics estan llestos, heu de començar amb alguns blocs. Seleccioneu el gat, ja que és ell qui fa l'acció. Recordeu que el Esdeveniments la pestanya conté molts dels blocs inicials? Feu una ullada i en veureu un que s’activa quan feu clic a la bandera verda. Aquest és un punt de partida perfecte: arrossegueu-lo cap al fitxer Scripts zona de treball.

Un cop comenceu, voleu que el gat atropeli i xutin amb la pilota, oi? Sona com una cosa que cauria sota el Moviment fitxa. Teniu diverses opcions per fer moure el gat, com ara Mou X passos bloc. Però no podem garantir quants passos farà el gat per arribar a la pilota. Hi ha un millor bloc per a això: proveu el Llisca X segons fins a bloc. Un segon és un bon moment i haureu de fer clic al blau jo icona de la pilota de futbol per veure les seves coordenades. Introduïu-los al bloc i la vostra primera acció s'ha completat.

Picant la pilota

Un cop el gat toqui la pilota de futbol, ​​hauria de volar a la porteria. Per tant, seleccioneu la pilota de futbol per afegir-hi algunes accions. Recordeu que cada acció ha de començar per un Esdeveniment - la bandera verda està bé en aquest cas. Ara no voleu que la pilota de futbol es mogui fins que el gat la toqui. Feu una ullada al control categoria per a un bloc que ens permet limitar el seu comportament. El Espera fins bloqueja els sons gaire bé!

Fixeu-vos en com funciona Espera fins el bloc té una forma hexagonal allargada al seu interior. Molts dels Detecció els blocs s’adapten a aquesta forma, així que mireu-los per trobar-ne la correcta. Vegeu el commovedor bloquejar la part superior de la llista? Podeu arrossegar-lo directament dins del forat que hi ha a l'interior Espera fins . Canvieu el quadre desplegable a Gat o el que hagueu anomenat el gat sprite.

Ara només cal fer volar la pilota de futbol cap a la porteria. El Llisca X segons fins a bloc al Moviment la categoria que hem utilitzat anteriorment per al gat funcionarà bé. Feu clic a aquest bloc espera fins i col·loqueu el punter del ratolí sobre la xarxa d'objectiu. Veuràs X i I coordenades a sota de l 'escenari: connecteu - les al fitxer Llisca bloc. La pilota s’ha de moure amb força rapidesa quan es dóna una puntada, així que ho intentem 0,5 segons per al moment.

I la multitud es torna salvatge

L’últim pas és afegir so. Seleccioneu el fitxer Sons a la part superior de l'àrea de treball per afegir-ne una de nova. Feu clic a la icona de l’altaveu que hi ha a sota Nou so per agafar-ne un a la biblioteca de Scratch. N’hi ha un que es diu Ànim sota la Humà categoria, que és perfecte. Feu-hi doble clic per afegir-lo i torneu a l'espai de treball de la pilota de futbol.

transferir fitxers de Windows a Linux

Trobareu un bloc etiquetat Reproduir so sota la So categoria. Feu clic a sota lliscar bloqueja, i ja està tot! Feu clic a la bandera verda per reproduir la vostra animació. El gat correrà cap a la pilota i, quan la toqui, la pilota vola a la porteria i la multitud s’anima.

[video mp4 = 'https: //www.makeuseof.com/wp-content/uploads/2017/04/Scratch-Soccer-Example-Video.mp4'] [/ video]

Això no va ser massa dur! Ara que ens hem adonat de com es relacionen i s’ajusten els blocs, vegem com es pot construir un joc de Mario mitjançant Scratch.

Creació d’un joc bàsic de Mario

L'exemple simple de futbol anterior mostra com podeu utilitzar blocs per controlar els sprites, però no té joc, animacions ni música. Anem a aprofundir-hi i creem un simple joc de Mario. Podríem gastar milers de paraules en tots els aspectes de fer un joc, de manera que ens complirem amb els conceptes bàsics.

Tingueu en compte: Com que no sóc artista, als efectes d’aquest tutorial copio Mario sprites del web. Els gràfics de Mario són propietat de Nintendo i no heu de publicar cap joc amb sprites protegits per drets d'autor. Això es presenta només com a exemple.

Importar gràfics

El primer pas és importar els vostres sprites i fons a Scratch. Com que fem servir imatges del web, les baixaré i les penjaré a Scratch. Crear una lògica perquè Mario pugui saltar sobre els enemics per derrotar-los, però mor de tocar-los els costats, és massa avançat per a aquest tutorial, de manera que el farem recollir monedes.

Al final del tutorial, proporcionaré un fitxer ZIP amb els recursos finals que he utilitzat. Si les feu servir, no us haureu de preocupar per les instruccions de manipulació d’imatges del tutorial. Si vols descarregar-ho tot tu mateix, continua. Aquests són els sprites que he descarregat:

Scratch té un Cel blau 3 antecedents, que funcionaran bé per a les nostres necessitats.

Editeu els vestits Sprite

Com que hi ha dos sprites que formen l’animació de Mario, cal afegir-los com a vestits separats. Utilitzeu un editor d’imatges com Paint.NET per desar els dos marcs de Mario com a fitxers separats; podeu ignorar el tercer. Carregueu el primer sprite de Mario i, a continuació, seleccioneu-lo i utilitzeu el fitxer Disfresses fitxa per penjar l’altre sprite com a segon vestit. Poseu-los noms distingibles, com ara Mario-1 i Mario-2 . Afegiu el sprite saltant com a vestit més per a Mario.

Utilitzeu un editor d’imatges per extreure el núvol de la imatge proporcionada anteriorment i, a continuació, pengeu-lo com a sprite nou. No està animat, de manera que no cal afegir cap vestit a part.

Per al terreny, necessitareu molts blocs, ja que Mario els recorre. Utilitzeu Paint.NET per agafar els sis blocs al mig del fitxer Blocs de terra imatge i deseu-les com a fitxer independent. Necessitareu uns 12 blocs per cobrir tota la part inferior de la pantalla un cop els reduïu a una bona mida. Per tant, hauríeu de col·locar dues còpies d’aquests sis blocs una al costat de l’altra Terra sprite. Pengeu això i, a continuació, feu dos duplicats de sprite de terra a Scratch.

La moneda és un GIF animat, de manera que és una mica diferent. Sempre que el pengeu, Scratch crearà vestits per a cada marc de l'animació. Aquesta imatge té 11 fotogrames en total, però malauradament també té una vora blanca al voltant, que es veu amb el fons blau. Haureu d’obrir cada disfressa de la moneda dins de l’editor Scratch. Utilitzeu l'eina de pipetes per seleccionar el color de fons blau i, a continuació, utilitzeu l'eina de dipòsit de pintura per canviar les vores blanques de la moneda a blau pàl·lid.

Haureu de canviar la mida dels sprites mitjançant el fitxer Créixer i Reduir botons situats a la part superior de la pantalla, just a sobre del botó de bandera verda. Feu clic a qualsevol dels botons i, a continuació, feu clic al sprite que vulgueu canviar a l'escenari de l'esquerra. Això també canviarà la mida de tots els vestits. Ballpark per ara; podeu afinar més tard.

Importa sons

Igual que els sprites, agafarem un parell de sons per concretar el nostre joc. Seguiu endavant i descarregueu-los i, a continuació, pengeu-los amb el fitxer Sons fitxa. Mentre hi estigueu, mireu-ho afegint-los com a tons de trucada interessants per al vostre telèfon .

Anima les monedes

Ara que tots els actius estan a punt, és hora de començar a fer-los vius. Començarem per les monedes, ja que són fàcils. Seleccioneu el sprite de moneda i el Scripts fitxa. Com que les nostres monedes són GIF animats, podem fer servir una sèrie de blocs per desplaçar-nos constantment pels seus vestits perquè semblin moure’s.

Un guió d'animació té el següent aspecte:

En resum, aquest script estableix la moneda al seu estat per defecte quan feu clic a la bandera verda. A continuació, fa un recorregut pels marcs sense parar, a una velocitat que configureu com a FPS variable a Dades fitxa. Juga amb aquest número si no t'agrada la velocitat.

Desmarqueu la casella que hi ha al costat Moneda-FPS al Dades (és una variable personalitzada que creeu), de manera que no apareix a la pantalla.

Fent que Mario es mogui

Ara per la part difícil. Molts passos estan relacionats amb el fet que Mario es mogui, i en realitat és un truc que desplaça els blocs de terra per donar aparença de moviment. En lloc d’intentar explicar cada bucle de blocs, proporcionaré captures de pantalla de blocs de codi i explicaré els seus aspectes més destacats.

En primer lloc, heu de fer quatre variables al fitxer Dades fitxa. Tots quatre ho són Per a tots els sprites excepte per Velocitat , que només és per a Mario:

  • Gravetat és una constant que tira Mario de nou a terra quan salta.
  • OnGround fa un seguiment de si Mario toca o no el terra.
  • ScrollX mesura el moviment horitzontal de la pantalla.
  • Velocitat (Només Mario) controla la velocitat a la qual salta Mario.

Animant el terreny

Ja heu fet dos duplicats del vostre Terra sprite fent-hi clic amb el botó dret i escollint Duplicat . Arrossega Terra-1 a l'extrem esquerre de la pantalla, de manera que el seu bloc més esquerre toca l'extrem esquerre de la pantalla. A continuació, arrossegueu els altres sprites de terra cap a la dreta del primer. Alineu les vores cap amunt i semblarà que el terra és una peça sòlida.

Aquí teniu el bloc de codi que necessiteu per a cadascun Terra sprite:

Això col·loca el terreny a la part inferior de la pantalla i, a continuació, simplement desplaça els blocs mentre es mou Mario. ScrollX és la posició dels blocs; 0 és la posició per defecte que s'inicia quan feu clic a la bandera verda. Notareu que no us podeu moure cap a l’esquerra immediatament després de començar.

Per al segon (i més) blocs de terra, incrementeu el fitxer 0 dígit Desplaceu-vos X + 480 * 0 per un per cada tros de terra nou. Això el compensarà perquè es desplaci sense problemes.

La lògica de Mario

Això és tot el que es necessita per als blocs, però Mario té molts més blocs de codi. Això és el que fan cadascun d’ells, amb un breu resum:

Aquest bloc de codi canvia el fitxer ScrollX variable quan es mou Mario. Sempre que premeu a l'esquerra o a la dreta, Mario s'enfronta en la direcció adequada i fa un pas, augmentant ScrollX per 3. Si trobeu que Mario gira al revés quan us moveu a l'esquerra, feu clic al blau jo al seu sprite i assegureu-vos que el Estil de rotació s'estableix en la segona opció. Això li donarà la volta cap a l'esquerra i la dreta en lloc de fer-ho en cercle.

què fer amb la targeta regal d'iTunes

Aquí veiem el codi que gestiona els canvis de vestuari de Mario. Quan Mario no és a terra, té el vestit de salt. Sempre que us moveu cap a l'esquerra o cap a la dreta, Mario canvia entre fotogrames cada dècima de segon. Deixeu anar les tecles de fletxa i Mario predetermina el seu marc estàndard.

Un simple bit de codi que descobreix el fitxer OnGround variable. Si toca un dels blocs de terra, OnGround és igual a 1 (cert). Quan salta, OnGround és 0 (fals).

Aquests dos blocs de codi manegen la velocitat de salt de Mario. A l’esquerra hi ha un bloc que garanteix que Mario no tingui impuls si està a terra. Si està a l’aire, la seva velocitat es redueix gradualment per la gravetat, que és un valor constant. El bloc dret fa que Mario salti cada vegada que premeu la barra espaiadora. El seu so de salt toca i la velocitat l’impulsa a l’aire fins que la gravetat s’apodera.

El nostre darrer bloc de codi per a Mario està configurat. Quan feu clic a la bandera verda per començar, la música comença, totes les variables es defineixen als seus valors predeterminats i Mario apareix al centre de la pantalla.

Recollida de monedes

Saltem de nou a les monedes. Hem d’assegurar-nos que quan Mario n’agafa un, emet un so i desapareix. Fem un script separat per a això: separar els scripts per funció és una pràctica important en la programació. Una gran barreja de blocs fa que sigui més difícil esbrinar el problema quan alguna cosa surt malament.

Aquí teniu el nostre guió de col·lecció de monedes:

Això és bastant fàcil: cada vegada que Mario toca una moneda, el so de la col·lecció sona i la moneda s’amaga. Al codi d’animació de la moneda, hem col·locat un Espectacle bloqueja perquè les monedes tornin a aparèixer quan reinicies.

Desplaçar monedes i núvols

Ja gairebé hi sou! Com que Mario no es mou, sinó que el terreny es desplaça, hem d’assegurar-nos que les monedes també es desplacin perquè Mario pugui recollir-les. Així funciona:

Això situa la moneda a I valor (que és la posició vertical de la pantalla) on Mario pot agafar-lo fàcilment. A continuació, utilitza una lògica similar als blocs de terra per desplaçar-se cap a Mario. Tingueu en compte que hem augmentat el percentatge de desplaçament a 0.75 de manera que les monedes es mouen cap a Mario ràpidament. Per a la segona i la tercera moneda, augmentem el estableix-la a camp a -40 i -20 de manera que són una mica més amunt i més difícils d’agafar per Mario. A la Estableix x a bloquejar, augmentar el 150 * 1 a 150 * 3 i 150 * 5 per a la segona i la tercera moneda per col·locar-les més a la dreta, fora de pantalla.

Els núvols utilitzen un bloc de codi gairebé idèntic:

Una vegada més, això col·loca un núvol a una alçada específica i després el desplaça a mesura que es mou Mario. Per un segon núvol que estigui davant de Mario en lloc de darrere seu, canvieu el estableix x a bloquejar a (ScrollX * 0,1) + (150 * 1) , igual que les monedes.

Afegeix vores

A causa de la manera com hem implementat el terreny i les monedes, veureu monedes enganxades a la vora de la pantalla fins que es desplacen a la vista. Això és antiestètic, de manera que hauríeu de crear un sprite de vora ràpid que tingui el mateix color que el fons per amagar-ho tant a la banda esquerra com a la dreta.

La forma més senzilla de fer-ho és fer clic amb el botó dret a l’escenari i fer clic Desa la imatge de l’escenari . Obriu-lo a Paint.NET i utilitzeu l'eina de pipetes per seleccionar el color de fons blau. Afegiu una capa nova mitjançant el diàleg inferior dret. A continuació, utilitzeu l'eina rectangle per dibuixar un rectangle blau ple a banda i banda de la pantalla. Cobriu aproximadament la meitat de cada bloc i, a continuació, suprimiu la capa de fons.

Deseu-lo com a fitxer PNG i pengeu-lo com a un nou sprite anomenat Frontera . Com que heu dibuixat les vores a sobre de la pantalla, podeu alinear-la perfectament.

A continuació, només necessiteu uns quants blocs perquè la vora estigui sempre al davant:

Ampliant el joc

Proveu el producte final aquí !

Hem establert els conceptes bàsics d’un joc de Mario junts. Podeu afegir molts elements al vostre joc des d’aquí. Proveu d'afegir Super Mushrooms per encendre Mario, fent algunes fosses que Mario ha d'esborrar o creant una bandera de nivell final. Amb els blocs de construcció que heu recollit aquí, podeu afegir més sprites, variables i lògica per fer tot el que vulgueu. Estem desitjant veure què us ve de gust!

Ens agradaria fer un crit a l'usuari Scratch dryd3418, ja que hem utilitzat part del codi del seu Super Mario: tutorial de desplaçament i salt projecte en el nostre propi projecte per a aquest article. Per obtenir ajuda més detallada, inclosos els scripts que podeu copiar, consulteu una altra guia de l'usuari per fer un joc de Mario . Si voleu fer una ruta més fàcil, consulteu el Crea el teu propi projecte de Mario Game que us permet arrossegar i deixar anar sprites per fer un joc senzill.

Tingueu en compte que en qualsevol projecte Scratch podeu fer clic Veure Dins per obrir el projecte en un editor tal i com heu utilitzat per al vostre propi projecte. Això us permet fer una ullada als blocs que algú feia servir per fer funcionar el seu projecte i us pot ajudar quan us quedeu atrapats. He posat el meu projecte a l'abast de tothom, així que no dubteu a fer-ho veure-ho i mireu el codi si necessiteu ajuda. També he comprimit tots els recursos que he utilitzat en aquest joc perquè puguis descarregueu-los per estalviar una mica de temps.

T’interessa fer un pas més? Mireu Scratch For Arduino per construir projectes en aquesta plataforma. Si esteu a punt per submergir-vos, consulteu tot el que necessiteu per crear un joc per a iPhone des de zero.

el meu telèfon no s'encén i està completament carregat

Per a altres coses divertides que podeu fer amb els vostres fills, mireu aquests llocs per a manualitats de bricolatge i projectes per a nens i adolescents.

Compartir Compartir Tweet Correu electrònic Com netejar el vostre PC amb Windows mitjançant el símbol del sistema

Si el vostre PC amb Windows es queda sense espai d’emmagatzematge, netegeu la brossa amb aquestes ràpides utilitats de símbol del sistema.

Llegiu a continuació Temes relacionats
  • Programació
  • Forma llarga
  • Guia de forma llarga
  • Rascada
Sobre l'autor Ben Stegner(1735 articles publicats)

Ben és editor adjunt i gerent d’incorporació a MakeUseOf. Va deixar el seu treball en informàtica per escriure a temps complet el 2016 i mai no ha mirat enrere. Fa més de set anys que cobreix tutorials de tecnologia, recomanacions de videojocs i molt més com a escriptor professional.

Més de Ben Stegner

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us