Share
În ultimul tutorial, ați aflat despre entități din Craft și cum le puteți manipula folosind metode diferite. În acest tutorial, veți afla despre diferite componente care vă vor permite să mutați diferite entități folosind tastatura.
Craft are trei componente diferite pentru a muta elemente în jurul valorii. Acestea sunt twoWay pe opțiunea, Patru direcții, și multidirecțional. Acest tutorial vă va prezenta toate aceste componente. În cele din urmă, veți afla despre Tastatură componenta și diferitele metode asociate cu aceasta.
twoWay pe opțiunea permite o entitate să se deplaseze la stânga sau la dreapta folosind tastele săgeți sau A și D. De asemenea, permite entității să sară folosind săgeata sus sau tasta W. Va trebui să adăugați o Gravitatie componentă a entităților dvs. pentru a le face să sară.
.twoWay pe opțiunea () metoda acceptă două argumente. Primul determină viteza entității în direcția orizontală, în timp ce al doilea argument determină viteza de salt a entității. Lăsând al doilea argument va stabili valoarea vitezei de salt egală cu dublul vitezei în direcția orizontală.
Patru direcții componentă va permite unei entități să se deplaseze în patru direcții diferite, fie prin utilizarea tastelor săgeți, fie prin W, A, S, D .patru direcții() metoda acceptă doar un argument, care va determina viteza entității date în toate direcțiile.
Un dezavantaj major al Patru direcții componenta este că nu vă permite să setați viteze diferite pentru direcțiile orizontale și verticale.
Pe de altă parte, multidirecțional vă permite să setați viteza în fiecare axă individual. De asemenea, vă permite să atribuiți diferite chei pentru a muta entitatea în direcții diferite. Primul argument în .multiway () metoda este viteza entității noastre. Al doilea argument este un obiect pentru a determina ce cheie va muta entitatea în ce direcție.
Direcțiile sunt specificate în grade. 180 este stânga, 0 are dreptate, -90 este în sus și 90 este în jos. Iată câteva exemple:
BlackBox.multiway (x: 150, y: 75, W: -90, S: 90, D: 0, A: 180); orangeBox.multiway (150, I: -90, K: 90, L: 0, J: 180); purpleBox.multiway (150, Y: -45, G: -135, B: 135, H: 45);
Codul de mai sus stabilește viteza casetei negre egale cu 150 în direcția orizontală și 75 în direcția verticală. Cutia portocalie se mișcă cu o viteză de 150 în toate direcțiile, dar îi sunt atribuite diferite taste pentru mișcare. Cutia purpurie nu se mișcă strict orizontal sau vertical, ci la un unghi de 45 de grade. Viteza aici este în pixeli pe secundă.
Practic, puteți atribui orice cheie în orice direcție folosind multidirecțional componentă. Acest lucru poate fi foarte util atunci când doriți să mutați mai multe entități în mod independent.
Această componentă are, de asemenea, .viteză() , care poate fi utilizată pentru a schimba viteza unei entități mai târziu. Puteți, de asemenea, să dezactivați comenzile cheie în orice moment folosind .disableControl () metodă.
Cele trei componente din secțiunile anterioare vă permit să mutați o entitate prin folosirea unor chei diferite. Cu toate acestea, este posibil să doriți mai mult control asupra a ceea ce se întâmplă atunci când este apăsată o tastă. De exemplu, este posibil să doriți ca player-ul să fie mai mare odată ce o tastă specifică este apăsată sau dacă playerul va deveni mai puternic odată ce o altă tastă este apăsată. Acest lucru se poate realiza folosind Tastatură component.
Această componentă vă oferă, de asemenea, acces la .isDown (String KeyName / keycode) , care se va întoarce la adevărat sau la fals pe baza faptului dacă tasta apăsată are valoarea dată KeyName sau Cod cheie.
Crafty are de asemenea două evenimente de tastatură diferite, Tasta în jos și keyup. Puteți lega aceste evenimente la orice entitate din joc fără a utiliza Tastatură componentă. Tasta în jos evenimentul este declanșat ori de câte ori DOM Tasta în jos evenimentul apare. În mod similar, keyup evenimentul este declanșat ori de câte ori DOM keyup evenimentul apare.
Accentsconagua
blackBox.bind ('KeyDown', funcția () if (this.isDown ('L')) this.w + = 5;); orangeBox.bind ('KeyDown', funcția (e) if (e.key == Crafty.keys.K) this.h + = 5;);În codul de mai sus, cutie neagră a avut deja Tastatură componentă. Acest lucru ne-a permis să folosim .este jos() pentru a determina apăsarea tastei.
Încercați să apăsați L și K în următoarea demonstrație pentru a mări lățimea și înălțimea celor două casete.
Este foarte ușor să adăugați text în joc folosind Crafty. În primul rând, trebuie să creați o entitate cu Text componentă. Apoi, puteți adăuga text la entitatea dvs. folosind .text() , care acceptă un șir ca parametru al acestuia.
Locația textului poate fi controlată prin utilizarea funcției .attr () pentru a seta valoarea X și y coordonatele. În mod similar, culoarea textului poate fi specificată utilizând .culoarea textului() metodă. Alte câteva proprietăți, cum ar fi mărimea, greutate, și familie din font poate fi setat folosind .textFont () metodă. Iată un exemplu:
var jucătorName = Crafty.e ('2D, DOM, Text') .attr (x: 10, y: 10); playerName.text ( 'ZombieHunter'); playerName.textColor ( 'roșu'); Așa cum am menționat mai devreme, .text() metoda vă cere să furnizați un șir ca parametru. Aceasta înseamnă că dacă scorul jocului este un număr, va trebui să îl convertiți într-un șir pentru .text() metoda de a face acest lucru.
Majoritatea proprietăților și metodelor 2D vor funcționa fără nici o problemă cu Text componentă. De exemplu, puteți să o rotiți și să o mutați ușor. Cu toate acestea, există două lucruri pe care trebuie să le țineți cont. Stylingul textului funcționează cel mai bine când este redat folosind DOM. Când sunt redate pe Canvas, lățimea și înălțimea entității textului vor fi setate automat.
Folosind cunoștințele din acest și din ultimul tutorial, acum ar trebui să poți deplasa diferite entități folosind tastatura. De asemenea, puteți schimba aspectul principalului jucător și al altor entități pe baza diferitelor taste presate.
Dacă aveți întrebări despre acest tutorial, anunțați-ne în comentarii.
