Share
PlayCanvas gjør det veldig enkelt å bygge WebGL-drevet, 3D-interaktivt innhold for nettet. Det er alt JavaScript, så det går innfødt i nettleseren uten noen plugins. Det er en ganske ung motor som bare har eksistert siden 2014, men det har raskt blitt trekkraft med navn som Disney, King and Miniclip ved å bruke det til å utvikle spill.
Det er et godt verktøy for to hovedårsaker: For det første er det en fullverdig spillmotor, slik at den håndterer alt fra grafikk og kollisjon til lyd og til og med integrering med gamepads / VR. (Så du trenger ikke å jakte på eksterne biblioteker eller bekymre deg for problemer med nettleserens kompatibilitet for de fleste ting.) Den andre, og hva jeg tror gjør det virkelig skiller seg ut, er deres nettleserbaserte redaktør.
Dette ser ut som et eksempelprosjekt i PlayCanvas i nettlesereditoren. Det er en veldig kraftig og praktisk måte å organisere arbeidet ditt eller til og med samarbeide med andre i sanntid.Hvis du er vant til å jobbe med Unity-motoren, bør PlayCanvas redaktør se seg kjent (det bruker til og med et lignende komponentsystem for å sammenkoble funksjonalitet). I motsetning til Unity er PlayCanvas ikke kryssplattform og kan bare publisere på nettet. Men hvis nettet er alt du bryr deg om, så er dette et stort pluss, siden motorens fokus på nettet gjør det veldig raskt og lett i forhold til konkurransen.
Ett siste notat: Selv om motoren selv er ledig og åpen kildekode, Online-redaktøren og verktøyene er bare gratis for offentlige prosjekter.Det er absolutt verdt å betale for hvis du utvikler kommersielt arbeid med det, men du kan alltid bare bruke det som rent en kode ramme også gratis.
Dette er hva vi skal skape:
Du kan prøve en live demo.
Prosjektet i seg selv er offentlig, så du kan peke rundt og / eller gaffel den på prosjektsiden.
Du trenger ikke å ha noen erfaring med 3D-spill å følge med, men jeg vil anta litt grunnleggende kjennskap til JavaScript.
Det endelige resultatet er en relativt enkel demo hvor du bare flyr rundt og skyve asteroider, men den dekker nok grunnleggende funksjonalitet som vil være nyttig når du lager noen form for 3D-spill. Del 1 vil dekke grunnleggende oppsettet, arbeide med modeller, fysikk og kamerakontroller. Del 2 vil dekke kulespillet, gyte asteroider og arbeide med tekst.
Gå over til playcanvas.com og opprett en konto.
Når du er logget inn, klikker du på prosjekter tab i dashbordet og trykk på den store oransjen ny knapp å skape et nytt prosjekt. Dette bør ta opp boksen "nytt prosjekt". Velg "tomt prosjekt" og gi det et navn:
Når du er ferdig, trykk på lag knappen nederst til høyre. Dette vil sende deg til prosjektoversiktssiden. Her kan du få tilgang til innstillingene dine og legge til samarbeidspartnere. For nå vil vi bare dykke inn i prosjektet, så klikk på den store oransjen redaktørknapp.
Når du går inn på ditt første prosjekt, vil PlayCanvas vise deg mange tips om redaktøren. Du kan avvise de for nå. De viktigste tingene å merke seg er:
For å lage et nytt objekt i scenen din, klikk på den lille pluss-knappen øverst i hierarkipanelet:
Merk: Du kan ved et uhell lage et nytt objekt inne i en allerede eksisterende. Dette er nyttig for å bygge objekter som består av flere deler eller som er bundet sammen på en eller annen måte. Du kan flytte objekter rundt hierarkipanelet for å kontrollere nesting. Dra den på Rot gjenstand for å plassere den tilbake øverst i hierarkiet.
Som et eksempel skal jeg lage en ny boks og farge den rød. For å gi den en tilpasset farge, må vi lage et nytt materiale. Du kan gjøre dette i aktivitetspanelet, enten ved å høyreklikke hvor som helst inni panelet, eller klikke på det lille plussymbolet:
Når du har opprettet, velg materialet ditt og gi det et beskrivende navn, for eksempel "RedMaterial" (du kan se navnefeltet i inspektørpanelet).
Rull nå nedover diffuse delen og endre fargen:
Når det er gjort, gå tilbake og velg den nye boksen du opprettet (enten ved å klikke på den i scenen eller i hierarkipanelet). Sett deretter materialet til det tilpassede materialet vi nettopp har opprettet:
Og boksen skal nå være rød! Legg merke til at materialet du opprettet kan knyttes til så mange objekter som du vil.
For å aktivere fysikk på et objekt må vi legge til to komponenter: Stiv kropp og Kollisjon.
Legg til det stive legemet ved å klikke på "Legg til komponent" i inspeksjonspanelet på objektet ditt:
Kontroller at typen er satt til dynamisk:
Og legg deretter til en kollisjonskomponent på samme måte.
Start nå spillet ved å klikke på den lille spillknappen øverst til høyre på scenen din. Du bør se boksen din falle ned gjennom gulvet! For å fikse det må du også legge til en stiv kropp og kollisjon i flyet, og sørg for at den stive kroppstypen er statisk (slik at den ikke faller også).
Utfordring: Bare for moro skyld, prøv å legge til en kule og vipp flyet litt (enten på X- eller Z-aksen) for å se at den ruller av.
Det er verdt å snakke kort om komponentsystemet siden det er en grunnleggende del av arkitekturen til PlayCanvas. Konseptuelt er ideen å skille funksjonalitet fra objekter. Den største fordelen med dette er evnen til å komponere komplekse atferd ut av mindre modulære komponenter.
Hvis du for eksempel ser på kameraet i din scene, vil du legge merke til at det ikke er et spesielt objekt. Det er bare en generisk enhet med en kamerakomponent festet. Du kan knytte en kamerakomponent til noe for å gjøre det til et kamera, eller fest en stiv kropp og kollisjon til kameraet for å gjøre det til et solidt objekt (prøv det!).
Hvis du er nysgjerrig, kan du lese mer om fordelene og ulempene ved komponentsystemer på Wikipedia-siden.
Nå som du er komfortabel med det grunnleggende, kan vi begynne å sette sammen vårt romspill. Vi trenger minst et skip og en asteroide å jobbe med. Det er to måter å legge til modeller på:
PlayCanvas har en butikk (lik Unity Asset Store på noen måter) der du kan finne og laste ned eiendeler direkte inn i prosjektet ditt. For å få tilgang til det, klikker du bare på bibliotek i aktivitetspanelet.
Butikken er veldig ny, så det er ganske sparsom, men det er et bra sted å finne plassholdere eller eiendeler for å eksperimentere med.
Jeg brukte hovership-aktiva fra butikken som spillerens skip.
PlayCanvas støtter opplasting av FBX, OBJ, 3DS og COLLADA (DAE) filer, men det foretrekker FBX. Du kan enkelt konvertere en hvilken som helst 3D-modell til FBX ved å åpne den med Blender og eksportere den i ønsket format.
Du kan finne asteroidmodellen jeg brukte på Blendswap.com. Merk at du kanskje vil optimalisere 3D-modellene dine før du bruker dem i spillet. For eksempel inneholder den asteroide modellen over 200.000 trekanter! Det kan være fint for et spesielt objekt i spillet, men når jeg har lagt over hundre asteroider i scenen, har det virkelig bremset seg til en kryp. Blender Decimate Modifier er en enkel måte å optimalisere modellene på. Jeg brukte det til å kutte ned asteroidmodellen til rundt 7.000 trekanter uten å miste for mye detalj.
Når modellene er i prosjektet ditt (du må kanskje oppdatere hvis du ikke ser det med en gang i eiendomspanelet), kan du legge dem til din scene. Den enkleste måten å gjøre det på er å bare dra modellen inn i scenen:
Dette er selve modellen som du kan legge til på scenen. De andre eiendelene rundt det er tekstur / materiale, etc..Akkurat som før, legg til en stiv kropp og en kollisjonskomponent til skipet. Ett triks du kan gjøre med kollisjon er å legge til selve objektets mesh som sin egen kollisionsform. Dette ville resultere i et piksel-perfekt kollisionsnett, men ville ikke være veldig effektivt. For denne demoen valgte jeg en enkel boks som min kollisionsform (og en sfære for asteroiderne) og redigerte halv-grad å grove passe til formen på modellen.
Et problem du kan komme inn i når du justerer kollisjoner, er manglende evne til å kompensere det fra sentrum. En enkel måte å komme seg rundt dette (bortsett fra at du må kompensere selve modellen i noe som Blender før du eksporterer den), er å skape et overordnet objekt som har kollisjon og stiv kropp, og et barnobjekt som har selve modellen. Så du kan kompensere modellen som et barn i forhold til foreldrene som inneholder kollisjonen.
Slik har jeg det satt opp for demo-prosjektet, så du kan se på det for å se hvordan det er gjort.
Siden spillet vårt er satt i verdensrommet, må vi overstyre standardgravitasjonen. Du kan gjøre dette i sceneinnstillingene. Øverst til venstre på skjermen klikker du på utstyrsikonet. Dette åpner innstillingene i inspeksjonspanelet. Finn fysikk delen og endre tyngdekraften verdi:
For å sikre at det virket, prøv å starte igjen og se om skipet bare flyter i rommet.
Det er ikke helt plass uten stjernebakgrunn, så mens vi er i sceneinnstillingene, la oss legge til en skybox. Du kan ta en fra butikken eller bare finne en online du liker. Når du har fått det, legg det til i rendering-delen:
Det burde gi spillet en mer tåkete føle. Dette vil også være en god tid å rydde opp scenen din og slette testobjekter vi opprettet før.
Det er her vi endelig kommer til å skrive noen kode. PlayCanvas skript system er en annen ting som burde være kjent hvis du har brukt Unity. Du lager skript som kan knyttes til ethvert objekt, og disse skriptene kan ha egenskaper som er konfigurert pr. objektobjekt. Skriptattributter er svært nyttige og oppnår to hovedtrekk:
Gå til fanen Aktiver og opprett en ny ressurs av typen Manus. Dette vil være koden for skipets oppførsel, så kaller det noe som "Fly". Dobbeltklikk på det for å åpne skriptredigeringsprogrammet.
PlayCanvas brukerhåndbok er et veldig nyttig referanse når du skriver skript, som API-referansen. Automatisk fullføring gjør det også veldig enkelt å finne ut hvilke metoder som er tilgjengelige. Vi starter med å bare gjøre vårt skip rotere. Skriv dette ut i Oppdater funksjon:
this.entity.rigidbody.applyTorque (0,1,0);
Inne i et hvilket som helst skript, dette refererer til selve skriptkomponenten, mens this.entity refererer til objektet som skriptet er knyttet til. Du kan få tilgang til noen av komponentene som er festet til enheten på denne måten. Her får vi tilgang til den stive kroppen og legger en vinkelkraft på den.
Pass på at du lagrer skriptet ditt nå.
Før skriptet blir for involvert, la oss feste det til vårt skip for å se om det fungerer. For å gjøre det, legg bare til en skriptkomponent til skipet ditt, og legg deretter til "fly" -skriptet til det. Merk at du bare kan legge til en skriptkomponent per objekt, men du kan legge til flere skript i den komponenten.
Når du starter, bør du se at skipet ditt roterer!
Som diskutert ovenfor, gjør skriptattributter vår kode mye mer fleksibel. Du kan legge til en ved å skrive dette ut øverst på koden din, rett etter den første linjen der skriptet er opprettet:
Accentsconagua
Fly.attributes.add ('speed', type: 'nummer', standard: 10, tittel: 'Ship Speed');I dette tilfellet er navnet på skriptet mitt Fly. Det eneste nødvendige alternativet er type.
For å se attributtet i redigereren, gå tilbake til skriptkomponenten, og klikk på ikonet med to piler på flyeskriptet. Dette er parse-knappen som vil se etter noen attributter og oppdatere redigeringsprogrammet. Din komponent skal nå se slik ut:
Til slutt, for å bruke verdien av attributtet i skriptet, gjør du bare dette. [attributtnavn]. Så hvis vi ønsket at dette skulle være omdreiningshastigheten, kunne vi endre vår linje med kode til:
this.entity.rigidbody.applyTorque (0, this.speed, 0);
Merk: Siden det ikke er vinkeldemping, vil skipet fortsette å rotere jo lenger kraften påføres. Hvis du fjerner kraften, vil den beholde sin treghet og fortsette å rotere med samme hastighet. For å endre dette, sett vinkeldempingen i den stive kroppskomponenten til noe over null.
Nå vil vi skanne den slik at vi kan orientere skipet med piltastene. En naiv tilnærming kan se slik ut:
Fly.prototype.update = function (dt) if (this.app.keyboard.isPressed (pc.KEY_RIGHT)) this.entity.rigidbody.applyTorque (0, this.speed, 0); hvis (this.app.keyboard.isPressed (pc.KEY_LEFT)) this.entity.rigidbody.applyTorque (0, this.speed * -1,0); hvis (this.app.keyboard.isPressed (pc.KEY_UP)) this.entity.rigidbody.applyTorque (this.speed * -1,0,0); hvis (this.app.keyboard.isPressed (pc.KEY_DOWN)) this.entity.rigidbody.applyTorque (this.speed, 0,0); ;
Kan du fortelle hva problemet er med dette skriptet? Prøv det. Kan du enkelt peke skipet der du vil?
Gi det litt tanke før du leser videre. Hvordan ville du fikse dette?
Problemet er at vi bruker en kraft i globale koordinater uten å ta hensyn til hvor skipet står overfor. Hvis skipet er horisontalt i forhold til kameraet, og vi roterer det på y-aksen når vi trykker til venstre / høyre, roterer det riktig. Men hvis skipet er vertikalt, er en rotasjon på y-aksen nå en tønnsrulle.
Det samme problemet ville skje hvis vi prøvde å flytte skipet videre også. Retningen som er "fremover" avhenger av hvor skipet står overfor og ikke kan være absolutt.
Nå har hver enhet tre retningsvektorer som vi kan bruke: opp, Ikke sant, og framover. For å svinge til venstre / høyre roterer vi langs opp akse, og opp og ned roterer vi langs Ikke sant akser. Disse er opp og Ikke sant i forhold til enheten. En fast versjon ville se slik ut:
Fly.prototype.update = function (dt) var horizontalForce = this.entity.up.clone (); var verticalForce = this.entity.right.clone (); hvis (this.app.keyboard.isPressed (pc.KEY_RIGHT)) this.entity.rigidbody.applyTorque (horizontalForce.scale (this.speed * -1)); hvis (this.app.keyboard.isPressed (pc.KEY_LEFT)) this.entity.rigidbody.applyTorque (horizontalForce.scale (this.speed)); hvis (this.app.keyboard.isPressed (pc.KEY_UP)) this.entity.rigidbody.applyTorque (verticalForce.scale (this.speed * -1)); hvis (this.app.keyboard.isPressed (pc.KEY_DOWN)) this.entity.rigidbody.applyTorque (verticalForce.scale (this.speed)); ;
Å legge frem bevegelse er den samme ideen:
hvis (this.app.keyboard.isPressed (pc.KEY_Z)) this.entity.rigidbody.applyForce (this.entity.forward.clone (). scale (-1));
Hvis bevegelsen føles av eller for glatt, bruk litt tid på å justere hastighetene og dempingsfaktorene for å få det til hvor det føles riktig.
Det er vanskelig å holde styr på et flytende skip med et statisk kamera. Den enkleste måten å få kameraet til å følge et objekt på, er å bare sette kameraet som et barn av objektet.
Prøv å dra kameraet i hierarkipanelet på skipet ditt. En enkel måte å justere kameraets visning på er å bytte til kameraets visning i scene. Klikk på knappen øverst på skjermen der det står Perspektiv. Dette gir deg en rullegardin med alle de forskjellige scenevisningene du kan velge. Å velge Kamera, som skal være lengst ned. Dette er en spesiell visning fordi det du ser i redaktøren, er hva kameraet vil se i spillet.
Når du har justert kameraets visning, må du passe på å bytte tilbake til perspektiv eller andre visninger for å unngå å kaste opp kameravinklene ved et uhell..
Tips: Hvis du har et objekt valgt i hierarkiet, men du kan ikke finne det i din scene, trykker du på F. Dette vil fokusere visningen på objektet og zoome inn på den. Du kan se flere hurtigtaster ved å klikke på tastaturknappen helt til venstre på skjermen.
På dette tidspunktet bør du ha et kamera som følger ditt skip (så stivt som det kan være). (Du kan ikke fortelle om du flytter hvis kameraet beveger seg og det ikke finnes andre objekter i verden, så prøv å legge til noen.)
Et kamera som bare sitter fast på spilleren, er ikke veldig interessant. Dette innlegget på PlayCanvas bloggen utforsker ulike typer kameraer. Den enkleste vi kan implementere er se på kameraet.
For å gjøre det, må du først flytte kameraet tilbake på rotobjektet.
Deretter opprett et nytt skript som heter se på.
Oppdateringsfunksjonen til dette skriptet skal se ut som:
LookAt.prototype.update = function (dt) this.entity.lookAt (this.target.getPosition ()); ;
Og det skal ha et attributt:
LookAt.attributes.add ('target', type: 'entity');Legg nå det skriptet til kameraobjektet. Trykk på parseknappen og sett målet for å være skipets enhet.
Prøv å lansere! Hvis alt gikk bra, vil kameraet ditt bli på plass, men vil bare orientere seg mot skipet.
Du kan implementere andre typer kameraer på samme måte. De etterfølgende følge kamera nevnt i blogginnlegget, ser ideelt ut det fineste, men jeg har funnet det å være for skremmende når frameratet faller litt, så for den endelige demoen endte jeg med et kamera som var festet som barn til skipet, men skriptet for å flytte og rotere som skipet gjorde.
Ikke bekymre deg hvis noe av dette føles litt overveldende. PlayCanvas er en kompleks motor med mange klokker og fløyter. Det er mye å utforske, og å holde håndboken i nærheten er en god måte å finne lagrene dine på. En annen god måte å lære er bare ved å finne offentlige prosjekter og se på hvordan ting blir gjort.
Del 2 begynner med å skape et kulsystem, og deretter legger du til noen asteroider å skyte på, og vi vil avslutte det ved å legge til en FPS-teller og i spillet-tekst. Hvis du har noen forespørsler eller forslag, eller hvis noe er uklart, vennligst gi meg beskjed i kommentarene!
