Interaktiv design

Hur man utformar HTML5-spel

HTML5 och termen "cross platform" är buzz ord, och med god anledning. Tekniken fungerar för smartphones, tabletter, bärbara datorer och stationära datorer. Agenturer älskar konceptet, eftersom någon webdesigner som känner till HTML, kommer att förstå HTML5. Vad betyder det för dig , webbdesignern?

  • Fler projekt som involverar HTML5
  • Fler projekt som rör sig kring interaktivitet
  • Skapa erfarenheter för slutanvändaren att interagera med

Kärnan i denna interaktiva upplevelse är avslappnade spel. I den här artikeln ska jag visa dig hur du kan få lite eftertraktade speldesigner. Målet? Ha "HTML5-speldesign" på din resumé.

Jag spelar spel, men ...

Det är ett vanligt missfall bland webbdesigners som designar spel är en specialiserad skicklighet. Du behöver inte delta i speldesignskolan för att designa spel. Alla kan utforma spel. Låt oss först bryta detta i delar. Att bygga ett spel kräver tre stora steg:

  1. utforma spelet
  2. producera visuella och audio tillgångar;
  3. programmering av spelet.

Som webbdesigner är det enklaste sättet att få erfarenhet genom att utforma spelet själv. För punkterna 2 och 3 har en byrå typiskt redan utsetts artister och programmerare för jobbet. Om du är bra på konstverk, är 2 mycket uppnåelig. I den här artikeln ska vi diskutera steg 1. Var börjar vi ens? Här är 10 steg som varje speldesigner behöver gå igenom för att tjäna sina ränder.

1) Spela massor av lediga spel

Har du en iPhone eller Android-telefon? Gå till App Store, gå till det bästa gratis spelplanet. Ladda ner och spela varje enskilt spel på topp 20 listan. Gör detta minst en gång varannan vecka.

Medan du spelar, var medveten om hur varje spel är utformat. Vilka animationstekniker och mekanik använder den? Skulle tecknen stå ut för dig? Hade den en historia? Vad fick spelet att känna dig? Efter 20-30 spel börjar du att upptäcka mönster.

image2

Du kommer märka att vissa spel i kärnan verkligen handlar om samma sak. T.ex. Clash of Clans, Boom Beach och Hay Day handlar om att bygga, försvara och attackera.

Du kommer att märka att enkla spel, som Flappy Bird eller Swing Copters fokuserar på riktigt svåra utmaningar, som kan upprepas oändligt många gånger.

Du kommer märka att vissa spel fokuserar på övertygande storytelling med noggrant utformade tecken.

Du märker också några udda indiespel, det är bara ordentligt slumpmässigt men riktigt roligt!

2) Gör skisser ... massor av dem

Gör skisser av de saker du gillar från spelen du spelade. Skissa tecken, kartor, menyer och användargränssnitt. Var det en viss karaktär som du gillade? Var det en viss vinkel av spelet som gjorde dig upphetsad?

Här är ett tecken som heter Matt. Han är en uttråkad kontors kille, limmade till sin stol:

image3

3) Skapa flödesdiagram

Flödesdiagrammen beskriver steg-för-steg-processen i spelet. De beskriver den punkt där användaren startar spelet, hela vägen till viktiga händelser, som en seger eller förlust. Börja med enkla diagram så här:

image4

När du får mer självförtroende, iterera på ditt enkla flöde för att göra mer komplexa flöden.

4) Skriv ett speldesigndokument

Använd det du lärde dig från steg 1-3, utforma och skriv ett förenklat speldesigndokument (GDD). En GDD berättar i grunden läsaren vad spelet handlar om.

Snabbt exempel: Låt oss ta vår karaktär som heter "Matt" i steg 2, och låt oss säga att han är instängd i ett tråkigt kontorsjobb. Han vill fly. Fångsten är, han kan bara göra det från sin rullstol. Vi har skapat en fin skiss av spelskärmen. Det visar en labyrint av kontorsdiskar som sammanfaller för att blockera Matts flykt.

image5

Som ett exempel gjorde vi målet för spelet enkelt. Navigera kontors labyrinten för att fly den.

image6

Det är det, för en mycket grundläggande GDD. Här är det fullständiga flödesschemat, för vårt spel, Escape The Office .

image7

5) Träna din plattformsinriktning

Med HTML5-spel kollar mycket av det för att kunna köra spelet på olika skärmstorlekar effektivt. Här är en översikt över olika enheter som vi har på marknaden: iPhone, iPad, iPod Touch, Samsung Galaxy Note3, Samsung Galaxy Tablet, Google Nexus, LG, Xiaomi, Windows Phone, Windows Laptop, Mac, listan fortsätter och fortsätter ... Läckra ? Ändå är det vad stora företag gör. Som en oberoende formgivare, hur designar du ett spel som passar olika skärmstorlekar?

  1. Fixa spelet orientering. Designa ditt spel så att det fungerar antingen i stående läge eller endast landskapsläge.
  2. Hitta den vanligaste spelupplösningen som fungerar för de flesta enheter. Bibehålla bildförhållandet. Därefter, skala upp eller ner, beroende på enhetens upplösning. Vi finner aspektförhållanden på 3: 4 (porträtt) eller 4: 3 (landskap) mest populära och effektiva.
  3. Design lätt, avslappnade spel. Gå inte för det skrymmande 3D MMO-spelet. I stället gå för roliga, lätta avslappnade upplevelser. Spelet kan vara så enkelt som whacking mol, eller hoppa runt plattformar. Något under himlen är rättvist spel (inget ordspelt).
  4. Dra alltid högupplöst konstverk. Minst 2048px bred som baslinje. Det är lättare att skala ner än det är att skala upp.

6) Börja pitching

Fråga ditt företag (eller kunder) om de är intresserade av spelrelaterade projekt. Visa dem dina mönster. Pitch ditt hjärta ut. Gå dem igenom GDD.

Din första spelidéhöjd kommer inte att vara som Shark Tank, försäkra dig! Chansen är att de kommer att fördela en liten budget för spelet. Om det inte finns någon budget fortsätter du att göra bättre mönster och nå ut till andra företag. Om du har resurserna, finansiera dina egna spelprojekt på de billiga.

7) Hitta en programmerare

När du har en budget, börja leta efter programmerare som specialiserar sig i spelutveckling. Visa dem dina mönster, dela budgeten och berätta för dem visionen. De flesta spelutvecklare är mycket hjälpsamma. Vad du behöver är en programmerare som är väl känd i HTML5-spel. Den här personen måste veta hur man kodar något som vågar snyggt för alla slags formfaktorer. Diskutera "cross platform mindset" med programmeraren.

8) Mala

Utvecklingen av själva spelet kommer att ta veckor, om inte månader, i början. Det kommer att bli blodsjuka och tårar, men det är allt värt erfarenheten. Det är mycket viktigt att hålla omfattningen av din speldesign mycket, väldigt liten, åtminstone för ditt första projekt.

9) Avsluta projektet

Nyckelordet här är "avsluta" projektet. Ofta, som designare, vill vi ha ett perfekt spel. Noll buggar. Vackert utformad spelkonst, med idealiska regler. Kasta den tanken ut genom fönstret. Gå för "tillräckligt bra". Släpp spelet i det vilda. Ingenting säger det som ett spel som lever, i användarnas händer. Du kan alltid polska upp spelet efter lanseringen. Gjort är bättre än perfekt.

10) Mät feedback

Kontrollera användarens svar på ditt spel. Använd gratis verktyg som Google Analytics för att spåra dina spelets åsikter, spelningar och händelser.

image8

Om du designar spel för att få uppmärksamhet på social media, analysera Facebook-liknande, Tweets och Instagram-liknande. Undersök hur användarna reagerade på ditt spel.

html5 nybörjare spel design hur html5 spel