Share
Hvis du noen gang har utviklet HTML5-spill før, kan du være kjent med noen få spillmotorer som kan gjøre spillutviklingen enklere. De har all koden du trenger for å oppdage kollisjoner, gyte forskjellige enheter, eller legge til lydeffekter i spillet ditt. I denne opplæringen lærer du om en annen slik spillmotor som heter Crafty. Det er veldig enkelt å bruke og støtter alle de store nettleserne, inkludert IE9.
Biblioteket er først oppgradert, og er bare 127kb i størrelse, slik at det ikke vil føre til noen forsinkelser i spillet. Den støtter sprite kart, slik at du enkelt kan tegne spill enheter på skjermen. Du kan også lage egendefinerte hendelser som kan utløses når du vil, og på hvilket objekt du vil.
Det er også komponenter for lyder, animasjoner og andre effekter. Samlet sett er denne spillmotor et godt valg hvis du vil utvikle noen grunnleggende HTML5-spill.
Det første du må gjøre er å inkludere Crafty i prosjektet ditt. Du kan enten laste ned filen og laste den inn i prosjektene dine, eller du kan direkte lenke til den oppgraderte versjonen som er hostet på en CDN. Når biblioteket er lastet, kan du bruke følgende linje for å initialisere Crafty:
Crafty.init ([Nummerbredde, Nummerhøyde, scene_elem]);
De to første argumentene bestemmer bredden og høyden på scenen. Det tredje argumentet er brukt til å spesifisere elementet som vi skal bruke som vårt stadium. Hvis det tredje argumentet ikke er oppgitt, vil Crafty bruke en div med id cr-trinns som sin scene. På samme måte, hvis bredde- og høydeargumentene mangler, vil Crafty sette bredden og høyden på vår scene lik vinduets bredde og høyde.
På dette tidspunktet bør du ha følgende kode:
Enheter er byggeklosser av et Crafty-spill. Alt fra spilleren til fiender og hindringer er representert ved hjelp av enheter. Du kan sende en liste over komponenter til en enhet. Hver av disse komponentene vil legge til ekstra funksjonalitet for enheten vår ved å tilordne egenskaper og metoder fra komponenten til enheten. Du kan også koble andre metoder til en enhet for å angi ulike egenskaper som bredde, høyde, plassering og farge. Her er et veldig grunnleggende eksempel på å legge komponenter til en enhet:
Accentsconagua
Crafty.e ('2D, Canvas, Color');Hver enhet som du vil vise til brukeren, trenger både 2D-komponenten og et gjengivelseslag. Det gjengivende laget kan være DOM, Lerret, eller WebGL. Vær oppmerksom på at WebGL-støtte ble lagt til i versjon 0.7.1. For tiden er det bare Sprite, Bilde, SpriteAnimation, og Farge komponenter støtter WebGL-gjengivelse. Tekst enheter trenger fortsatt å bruke DOM eller Lerret for nå.
Nå kan du bruke attr () metode for å angi verdien av ulike egenskaper, inkludert bredden, høyden og posisjonen til enheten din. De fleste metoder i Crafty vil returnere enheten de er påkalt, og attr () er ikke noe unntak. Dette betyr at du vil være i stand til å kjede flere metoder for å sette andre egenskaper til elementene dine. Her er et eksempel:
Crafty.e ("2D, Canvas, Color") .attr (x: 200, y: 100, w: 200, h: 50) .color ("oransje");Dette vil skape en oransje rektangulær enhet på scenen.
Nå som du har opprettet enheten, la oss skrive noen kode for å flytte den rundt med tastaturet. Du kan flytte en enhet i fire forskjellige retninger, dvs. opp, ned, venstre og høyre ved å legge til Fourway komponent til det.
Enheten kan da flyttes enten ved hjelp av piltastene eller W, A, S og D. Du kan sende et nummer som et argument til fireveis konstruktør for å angi hastigheten til enheten. Her er hva koden til enheten skal se ut som nå:
Crafty.e ("2D, Lerret, Farge, Fourway") .attr (x: 200, y: 100, w: 200, h: 50) .color ("oransje") .fourway (300);Du kan begrense bevegelsen til en enhet til bare to retninger ved hjelp av toveis komponent. Bytte ut Fourway komponent i koden ovenfor med toveis vil begrense bevegelsen av boksen til bare horisontal retning. Dette fremgår av følgende demonstrasjon:
Du kan også legge til egne komponenter til forskjellige enheter for identifikasjon eller å gruppere lignende enheter sammen. I dette tilfellet legger jeg til Gulv komponent til vår oransje boks. Du kan bruke noen andre beskrivende navn for å hjelpe deg med å identifisere forskjellige enheter.
Crafty.e ("2D, Lerret, Farge, Twoway, Gulv") .attr (x: 200, y: 340, w: 200, h: 50) .color ("oransje") .twoway (300);Det er en annen veldig nyttig komponent som du kan bruke til å flytte elementer rundt, og det kalles Tyngde komponent. Når det legges til et foretak, vil det få den enheten til å falle ned. Du vil kanskje stoppe den oppgitte enheten fra å falle ytterligere, når den møter noen andre enheter. Dette kan oppnås ved å sende en identifiserende komponent som et argument til tyngdekraftsfunksjonen. Her er koden som gjør at den lille sorte firkanten faller på gulvet eller plattformen:
Crafty.e ("2D, Lerret, Farge, Gravity") .attr (x: 200, y: 50, w: 50, h: 50) .color ("svart") .gravity ("Floor");Som du ser i opplæringen, var vi i stand til å lage den grunnleggende strukturen til et enkelt spill med svært liten kode. Alt vi måtte gjøre var å legge til komponenter til enhetene våre og angi verdiene for forskjellige egenskaper som bredde, høyde eller bevegelseshastighet.
Denne opplæringen var ment å gi deg en grunnleggende ide om enheter og andre konsepter relatert til Crafty. I neste del vil du lære om entiteter i mye mer detalj. Hvis du har spørsmål om denne opplæringen, gi meg beskjed i kommentarene.
